Webデザインチュートリアル(5):Webビジュアルデザイン

Webデザインチュートリアル(5):Webビジュアルデザイン
<br />前回の記事:Webデザイン講座(4):素材と表現について Webデザイン上級編5:構成バランスと視覚的誘導、曲線・円弧・光と影の使い方
構成のバランス1. 構成が均等な形や量でない場合、「バランス」でまとめ、測定することができます。各ステーションを、構成の 50% で均等な形状と量でバランスをとります。
2. バランスの要素: バランス、変化と統一、明暗、色、空間レベルなど。
構成の関係<br />形状、位置、面積、方向、レベル
構成のルール<br />バランス/ルール視覚ガイダンスの基本特性: (通常の読み順に従う)
1. 色のガイダンス
點擊在新窗口中瀏覽此圖片
2. シェイプガイド
點擊在新窗口中瀏覽此圖片
3. 姿勢指導
點擊在新窗口中瀏覽此圖片
4. 光と闇の導き
5. 瞬間を捉える
點擊在新窗口中瀏覽此圖片
6. 比率
------------------------------------素敵な区切り線-----------------------------------
繰り返しが多いと感じるかもしれません。しかし、それらを分離しなければ。読者にもっと注意深く理解してもらうことは不可能です。あまり正確ではないものや分析していないものもあるかもしれません。皆さんがそのギャップを埋めるのを手伝ってくれることを願っています。
画像/視覚ガイダンスの役割:
1. 読む順序をガイドします。通常の読み順ですが、一部変更点があります。
2. 要点を述べる
3. ページの重要性とコンテンツと機能ブロックの違いを区別できるように生徒を指導する
4. デザインアイデアの理解を導く
5. 地域文化のガイド(中国語/英語など)
6. ガイダンス。具体的な内容はナビゲーションに集中しています。
曲線、円弧、光と影<br />初心者が姿勢誘導や形状誘導について深く理解していない場合は、円弧を慎重に使用してください
------------------------------------慎重な境界線-----------------------------------
曲線や円弧を使用すると、ページを緩やかに分割できます。その効果は非常に優れていることは誰もが知っています。しかし、それを適切に使用するにはどうすればよいでしょうか?
上記のすべてのポイントに従ってください。アークが何をするのかを正確に理解してください。色と透明度の値の設定について少し考えれば、それほど難しいことではないと思います。
點擊在新窗口中瀏覽此圖片
開始点と終了点。画面のサイズと、さまざまな解像度で表示できるコンテンツの量を考慮してください。終了点がない場合、視覚的な拡張と誘導された関連付けはどのように表現すればよいでしょうか。
蓮の葉の形を考えてみてください。バナナの葉の形を考えてみてください。空で曲がる飛行機の排気ガスを考えてみてください。実は、その弧はあなたのすぐそばにあります... ...
どのような弧を描くと人は自然に感じるのでしょうか? これはまだ研究されていません。私には研究する能力がないと思います。
物理学に関する記事を投稿する: http://www.arcmanusa.com/arcforum/viewtopic.php?t=108
光と影<br />これは映画に関する話ではありません。
詳しく説明できませんが、とにかくこのエフェクトはとても華やかでGOODです。とても気に入っています。
それは、上で述べた視覚誘導と弧の理論に従っています。
點擊在新窗口中瀏覽此圖片
私のお気に入りでは、この Web サイトの注釈は「光と影の最高の応用」で、アドレスは http://www.nopattern.com/nopattern/ です。
この記事は、実は他の概念を派生させたため、意図せずに完成しました。最初は、同僚の能力を向上させるために、均衡という用語の説明に約2時間を費やしました。彼らは以前に学んだことのいくつかをよく理解していました。バランスの取れた手書きのチュートリアルと口頭の説明の後。絵のビジュアルガイドを考えてみました。その後、概要が説明されました。バランスの原則と組み合わせて、弧を詳しく説明するというアイデアを思いつき、次に光と影の扱いを詳しく調べました。たまたまこの分野で優れた作品をいくつか持っています。
これらのことを深く、浅く、あるいは不完全な方法で説明した後、私の頭に「視覚的な重さ」という言葉が浮かびました。
現在、この用語に関する正確な定義や議論はありません。しかし、私はそれを説明できると思います。
1: 規則性と秩序が視覚的な重みのレベルと重さを決定する
2: コントラストと統一感によって生まれる調和は、視覚的な重みのバランスを引き出すことができる
3: 綿 1 ポンドと鉄 1 ポンド (私の直感では、これは何か関係があるようです)
4: 読書習慣: 中間よりも冒頭と最後が重要です。 (形と量が等しいことを基準とする。例えば、単語の行など)
5: テクスチャと関連性。
これは説明するのがずっと簡単です。白い雲と綿の感じは人々を圧倒することはできませんが、色調は人々に息苦しさや憂鬱感を与える可能性があります。
しかし、大理石やスチールのような質感に比べると、はるかに軽量です。読者の連想的思考を刺激します。そうすれば、視覚的な重さの概念がより明確になります。
6:2次元画像と3次元画像が同じ性能を持つ場合、3次元画像の視覚的な重みは2次元画像よりも重くなります。
何か物理的な証拠を探そうとしましたが、検索エンジンで見つけたのは、HKハートランドとG.ウォルドの「眼の化学と重力視覚プロセスの発見」だけで、この二人がノーベル賞を受賞したと書かれていました。しかし、関連する説明はありませんでした。そして私の英語はとても下手です。
-----------------------------------------------------------------------------------
以下は私の携帯電話で撮影した原稿です。
點擊在新窗口中瀏覽此圖片
オリジナルJPGダウンロード

<<:  MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

>>:  ファイルをアップロードするための HTML フォームの「参照」ボタンを変更する方法

推薦する

Alibaba Cloud Centos7.3 インストール mysql5.7.18 rpm インストール チュートリアル

MariaDBをアンインストールするCentOS7 ではデフォルトで MySQL の代わりに Mar...

Linuxの読み取りコマンドの使用

1. コマンドの紹介read コマンドは、シェルの組み込みコマンドで、標準入力または -u オプショ...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...

DockerコンテナにRedisをデプロイする手順の紹介

目次1 つの Redis 設定ファイル2 Dockerコマンドの開始3 docker-compose...

ネイティブ JS を使用してタッチスライド監視イベントを実装する方法

序文今日はちょっとしたデモを書きました。左右にスワイプするロジックに関わる部分があります。当初はプラ...

CSS フロート(float, clear)の人気の解説と体験談

私はかなり昔に CSS に触れましたが、フローティングについてはいつも混乱していました。私の理解が浅...

MySQL データベースで機密データの暗号化と復号化を実装する方法

目次1. 準備2. MySQL暗号化関数方式2.1 MySQL 暗号化2.2 MYSQL 復号化3....

マインスイーパゲームを実装するための jQuery プラグイン (2)

この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...

MySQLでユーザーを作成し、権限を管理する方法

1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...

包括的なウェブサイト評価ソリューション

<br />「XXXのウェブサイトを見てみませんか?」といった質問をされることもあります...

MySQLサブクエリでorder byが効かない問題の解決方法

偶然にも、SQL ステートメントを異なる MySQL インスタンスで実行すると、異なる結果が生成され...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

MySQL 8.0.17 のインストールと使用方法のチュートリアル図

前面に書かれた過去および現在のプロジェクトで最も一般的に使用されているリレーショナル データベースは...

Dockerが独自のローカルイメージリポジトリを構築するための手順

1. 環境と準備1. Ubuntu 14.04 2.Docker環境2. 建設プロセス1. ミラーソ...

Centos7 に Nginx 統合 Lua サンプル コードをインストール

序文私が使用しているパソコンはMacで、OSはmacOS Mojaveです。コンピュータに仮想マシン...