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 フォームの「参照」ボタンを変更する方法

推薦する

Linux インストール MySQL チュートリアル (バイナリ配布)

このチュートリアルでは、LinuxにMySQLをインストールする詳細な手順を参考までに紹介します。具...

Kali に docker と portainer をインストールする方法

dockerの登場により、多くのサービスが徐々にハードウェアアーキテクチャへの依存から脱却しました。...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

JavaScriptのイベントループの仕組みの分析

目次序文: 1. イベント ループとタスク キューの理由: 2. イベントループメカニズム: 3. ...

Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します

目次1. テレポートの使用2. モーダルダイアログコンポーネントを完成させる3. コンポーネントのレ...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

MySql のサブクエリ内のクエリ例の詳細な説明

北西を見ると私の故郷はどこにあるでしょうか。南東の満月を何度見たことがあるでしょうか。月が再びゆっく...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...

水平プログレスバーの最後にテキストを表示するための実装コードの CSS 記述

問題の説明仕事で以下の成果を達成したいと考えています。 解決div タグに相対配置を追加し、絶対配置...

Windows での MySQL 5.7.18 インストール チュートリアル

この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...

MySQL スロークエリログの役割と公開

序文MySQL スロー クエリ ログは、MySQL が提供するログ レコードの一種です。これは、応答...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

MySQL 5.7を完全にアンインストールするための詳細な手順

この記事は主に、MySQLを再インストールする際のクリーンでないアンインストールのさまざまな問題をま...

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...