Webデザインチュートリアル（8）：Webページの階層と空間デザイン

<br />前回の記事：Webデザイン講座（７）：Webページ制作の効率化１：必要な小言。
そこには秩序、規則性、そして特別さがあります。それはレベルと呼ばれます！
レベルの反復により空間の存在を表現します。点、線、面。点が移動して線を形成し、線が移動して面を形成し、面が移動して物体を形成し、複数の物体が複雑な構造を形成します。それは宇宙です。もちろん、ここで話しているのは数学的空間または論理的空間です。それは哲学的な空間ではありません。
2: 切り離すことのできない感情 - 視点;
以前、遠近法についての記事を書きましたが、ここでは理解を助けるためにさらにいくつかの写真を紹介します。
視点は最も重要なものではありませんが、必要です。

3. 最も一般的に使用される表現手法 - 仮想性と現実性とコントラスト。

これは XP では非常に一般的な図です。そのレイヤーを見てください。近くは大きく、遠くは小さい。近くは固体で、遠くは空虚。近くは重く、遠くは軽い。

変化を見てみましょう。単語そのものと、その単語が含まれる場面。距離の変化、交替、現実と幻想。（課題として残しておき、いわゆるWeb2.0スタイルを試してテキストに適用してください）

仮想と現実のレイヤーをもう一度見てみましょう。

方向！

ほら、ほんのいくつかのシンプルな要素だけよ！
3: 古い話 - 色と色のレベル。

本当にこの絵を描きたくない！
色相とレベルの関係。
デザインはレイヤーと色から切り離すことはできません。色について語るとき、色相、明度、純度という色の3つの要素を避けることはできません。色相処理の観点から言えば、異なる色は人々に異なる感情を与えます。
画像に異なる色を配置すると、レイヤーが作成されます。
強調すべき部分は強調し、弱めるべき部分は弱めにするためには、異なる色彩感覚を柔軟に使い分けて処理する必要があります。異なる色相の色を組み合わせることで、異なる視覚効果と異なる色レベルが生成されます。暖色と寒色、または異なる色相の暖色、または異なる色相の寒色を組み合わせると、豊かでカラフルなレイヤーが生成されます。
明るさとレベルの関係。色の明るさの処理に関しては、明るさのコントラストがより重要になります。色の感情を考慮するだけでなく、配色では黒、白、グレーの重なりも考慮する必要があります。色構成の明るさの関係です。明るさの異なる色を並べると、重なり合うような感覚が生まれます。白は色の中で最も明度が高く、黒は最も明度が低いため、これらを一緒に配置すると、強いコントラストレベルが形成されます。
しかし、赤とオレンジという同じような明るさの色を並べると、重なり感は比較的弱くなります。純度とレベルの関係。
純度の高い色と純度の低い色を一緒にすると、純度の高い色は明るくなり、純度の低い色は暗くなります。それで。純度の高い色は前に進む傾向があり、暗い色は後ろに下がる傾向があるため、色のレベルが非常に明確になります。もちろん、デザインレベルの要件を満たすために色純度を使用することを検討する場合、色の色相と明るさを当然考慮する必要があります。
どのような色を使用しても、どのように配置しても、色相、明るさ、純度を分離することは難しく、分離することはできません。色の領域とレベルの関係。
絵を構成するときは、各パーツの位置や大きさを慎重に考慮する必要があります。これには、色の領域をスクリーニングすることが含まれます。統一された調和のとれたトーンを実現するために、一般的に 1 つの色がメイントーンとして使用され、画像の主な位置、つまり大きな領域を占め、他の色は自然に小さな領域を占めます。そうすることで、メインの色調が維持されるだけでなく、コントラストのレベルも作成され、画像に統一感と多様性が生まれます。
この段落は非常に調和がとれています。教科書通りのハーモニー！
判断する方法はいくつかあります。
1. 全裸で走る。これは CSS なしで裸で実行しているわけではなく、デザインの下書きが完了したら、すべてのレイヤーを結合して白黒またはラボモードに変換し、黒、白、グレーの感覚を確認します。
目を細めて見てください。
目を閉じて、突然開けて見てください。
視界がぼやけるまで何かを見つめ、その後視線を戻して見てください。
（ご自身の目で責任を持ってご覧ください！！！！）
(ii): 反転。
逆比較を通じて階層の弱点を検出します。
(C): 切断します。
構成に応じてデザインをN個の部分に切り分け、上記の2つの方法で表示します。これはWebデザイナーにとって比較的重要です。
4. 空間感覚 - ディスプレイプラットフォームの統合と超越。
画像をご覧ください。元のアドレス: http://shyls.longfor.com.cn/main.html

非常に典型的で、構成と色彩がとても上品です。層は目立たないですが、とても調和が取れています。
印刷物でも Web でも、常に重要なポイントを強調します。ただし、Web ページ内の重要なポイントを強調します。一般的には、色やボリュームなどの簡単な方法が使用されます。空間のボリューム感を強調する手法はあまり使われません。つまり、制限事項が大きく、表示サイト、特に FLASH サイトに使用されます。ここで写真を拝借していますが、出典は http://www.chengshiwen.com/attachments/month_0808/z200883102438.jpg です。作者の承認を得ていないので、異論がある場合はすぐに削除します。

質感、ディテール、レイアウトはすべて最高ですが、最後の遠くの山々は視覚的な習慣に適合していません。ちょっと扱いにくいし、青空ももう少し濃くてもよかったかな。
キャラクターをディスプレイプラットフォームから飛び出させましょう！
それは実はとても簡単で、思考習慣を逆転させるだけです。一般的に言えば、例えば人は限られた範囲内にいます。そこで、キャラクターの体積を面積よりも大きくして、キャラクターを通常のように見せ、面積を遠近法で表現するように回転させます。
厚いレイヤーの背景をレンダリングする場合、近くのオブジェクトは拡大され、その比率が強調されます。同じ効果が得られます！
さて、写真とデモを見てください。あまり慎重になりすぎないでください。私が言いたいことを表現してください。

インターネット上には非常にユニークな看板の写真があります。学生さんもぜひ見に来てください！
揚州市の杭済鎮は、歯ブラシや観光用品の生産拠点として全国的に有名です。町の幹線道路の入り口は、コルゲートの大きな柱になり、そこから歯ブラシのヘッドが伸び、後ろの鉄骨で固定されています。遠くから見ると、歯ブラシのヘッドが空中に浮いているように見えます。値段は高めですが、効果は本当に良いです！
揚州玉才小学校の少し東側には、濃い朱色の背景に古典的な模様、それに似た文字が統一された店の看板が並んでいます。デザイン内容は多くないですが、何十、何百も同じものを見るのは非常に壮観です。とても調和がとれていて統一感がありますね！
「デザインはあなたの周りにあります。沿線のバス広告、プラットホームの広告、お店の看板、さらには配布されるチラシ、店内の壁画や装飾などをよく見てください...。あなたの能力は目に見えないほど向上します！」自分で考えてみてください。あなたが集めたすべての材料はあなたの心の中にあります。それを現実の生活と組み合わせてください... 』
色は立体的にも表現できる

ボール？ライト？

前景オブジェクト（強調したいオブジェクト）と背景の関係<br />背景が雲や光ファイバー、光の輪など、非現実的で視覚的な重みの少ない抽象的なスタイルである場合、前景オブジェクトは比較的具体的で明確な方法で表現する必要があります。
背景が地図のように具体的で視覚的に重い場合はどうなるでしょうか?風景？などなど、レイアウトのマッチングや背景の始まりと終わりなどにも注意が必要です。色が前景オブジェクトの色と競合するか、または近いかどうか。
さらに、テキストサイズのコントラストは、特定の単語を強調するためだけのものではなく、構成のためだけのものでもありません。比喩的な文脈では、複雑で制御できない色彩が使われています。読みやすくするために、テキストのサイズをずらしています。
/**************最後の区切り線***************/
この記事は長い間温めてきたもので、4 回にわたって作業し、丸 1 か月かかりました。多くのアイデアが時間内に記録されなかったため、短期間で適切な言葉で明確に説明することができませんでした。また、途中に「Webデザイン講座（7）：Webページ制作の効率化！」という記事を暫定的に追加しました。実はこの記事は元々第7章になる予定だったのですが…
ただ投稿するだけです。あまり意味のないことを言う必要はありません。後で修正するだけです!
ああ、タイトル画像も！
この章で使用されている資料とデモのソースファイルをダウンロードしてください: Chapter 8: A Brief Introduction to Layers and Space (Perspective and Stereo).rar

<<: 写真をアップロードして顔を認識する Vue+axios サンプルコード

>>: CSS 読み込み効果の実装パックマン