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

推薦する

MySQLトランザクションの基本的な学習と経験の共有

トランザクションは、論理的な操作のグループです。この操作グループを構成する各ユニットは、成功するか失...

MySQL 文字列分割の例 (区切り文字なしの文字列抽出)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

Linux が Sudo 権限昇格の脆弱性を公開、どのユーザーでも root コマンドを実行可能

Linux で最も一般的に使用される重要なユーティリティの 1 つである Sudo は、ほぼすべての...

JavaScriptでマクロを使用する方法

言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...

CentOS 7 で Apache (httpd) サービスをインストールおよびアンインストールする詳細な手順

アンインストールまず、次のコマンドを使用して、httpd サービスがインストールされているかどうか、...

Nginx を使用してフロントエンドのクロスドメイン問題を解決する方法

序文Vue アプリケーションなどの静的ページを開発する場合、クロスドメインになる可能性のあるインター...

WeChatアプレットが弾丸画面を送信するビデオプレーヤーを実装

この記事では、WeChatアプレットでビデオプレーヤーの集中砲火を実装するための具体的なコードを参考...

MySQL に大量のデータを挿入する 4 つの方法の例

序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...

JavaScript キャンバスで 9 マスのグリッドカットの効果を実現

この記事では、9グリッドカット効果を実現するためのキャンバスの具体的なコードを紹介します。具体的な内...

Vue.js で AntV X6 を使用する手順の例

目次0x0 はじめに0x1 インストール0x2 ノードサイドバー0x3 統合例0x0 はじめにプロジ...

SQL Server での exists と except の使用法の概要

目次1. 存在する1.1 説明1.2 例1.3 交差/2017-07-21 2. 除く2.1 説明2...

史上最もクリエイティブな404ページのデザインは、ウェブサイトのユーザーエクスペリエンスを効果的に向上させます

ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...

学生情報管理システムを実装するためのJavaScript+HTML

目次1. はじめに2. レンダリング3. コード4. 学生情報管理システムのメインインターフェース1...