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

推薦する

webpack と rollup を使用してコンポーネント ライブラリをパッケージ化する方法

序文以前、ローディングスタイルのコンポーネントを作成しました。コードの再利用性を実現するために、この...

MySQL外部キーの基本的な機能と使用方法の詳細な説明

この記事では、例を使用して、MySQL 外部キーの基本的な機能と使用方法を説明します。ご参考までに、...

MySQL INT型の完全な分析

序文: Integer は MySQL で最もよく使用されるフィールド型の 1 つで、通常は整数を格...

Vue+WebSocket ページでの長時間接続のリアルタイム更新

最近、Vue プロジェクトではデータをリアルタイムで更新する必要があります。折れ線グラフは 1 秒ご...

VueのID認証管理とテナント管理の詳細な説明

目次概要ボタンレベルの権限アイデンティティ認証管理R/U 権限権限の更新テナント管理テナント切り替え...

MySQL マスタースレーブレプリケーションのいくつかのレプリケーション方法の概要

非同期レプリケーションMySQL レプリケーションは、デフォルトでは非同期です。マスター スレーブ ...

MySQL 関数インデックス最適化ソリューション

MySQL を使用する場合、多くの開発者は一部の列に対して関数計算を実行することが多く、その結果、イ...

TypeScript 2.0 マーク付き共用体型の詳細な説明

目次タグ付きユニオン型を使用した支払い方法の構築タグ付きユニオン型を使用した Redux アクション...

MySQL データベースのホットスタンバイにおける問題点の分析

以前、MySQL データベースのデュアルマシン ホット スタンバイの設定方法を紹介しました。ご興味の...

Dockerコンテナのネットワークポート設定プロセスの詳細な説明

ネットワークポートの公開実際、Docker にはネットワーク ポートの公開に関わる 2 つのパラメー...

vue3.0 プロジェクトを素早く構築するための手順を完了する

目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...

Vue.jsは9グリッド画像表示モジュールを実装します

Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...

MySQL Innodb ストレージ構造と Null 値の保存の詳細な説明

背景:テーブルスペース: すべての INNODB データはテーブルスペース (共有テーブルスペース)...

Linux でスレッドを作成するための pthread_create の具体的な使用法

pthread_create関数機能紹介pthread_createはUNIX環境のスレッド作成関数...

ハードコーディングに別れを告げ、フロントエンドテーブルがインスタンスコードを自動的に計算できるようにします。

序文私のチームが税制モジュールを開発していたとき、計算問題、特にグリッド内の計算を解決するために時間...