ウェブサイトのビジュアルデザインパスはユーザーの習慣に合わせる必要がある

クーパー氏は、一般的に上から下、左から右に向かうユーザーの視覚経路について話しました。
優れたビジュアルデザインパスは、このようなユーザーの習慣に適合する必要があります。悪いデザインでは、ユーザーは困惑し、焦点があちこちに逸れてしまいます。
もちろん、上記の視覚パス図は絶対的なものではなく、閲覧習慣は人によって異なります。
ウェブサイトブロック

人々が情報に触れるようになって以来、情報は四角い形で表現されてきました。新聞や本では、単語 1 語は点になり、単語の行は線になり、単語の段落は面になります。もちろん、この面は四角形で最も効率的に表現されます。このサイトのビジュアルデザインの多くは、実際にはパズルのピースで構成されています。
ウェブサイト内のブロックは、ユーザーの視覚的な経路を非常にうまく誘導できます。ユーザーはブロックを使用して、このエリアの情報が必要なものかどうかを判断できるため、範囲をすばやく絞り込み、次のブロックを注意深く検索または閲覧できます。たとえば、Yahoo のホームページでは、大きなブロックの観点から、ユーザーは 4 つの大きなブロックを簡単に区別でき、各ブロックには小さなブロックがあります。

ブロック感が強くなるほど、ユーザーに与える方向感覚が良くなります。ブロックが少ないほど良いです。視覚的な区別のために空白スペースを使用するようにしてください。
配置と間隔<br />視覚デザインにおいて最も単純でありながら、最も見落とされがちな側面は配置です。確認する方法は、各正方形内のエッジ、正方形間のエッジ、特に垂直方向の寸法を確認することです。
間隔の一般的なルール: 文字間隔は行間隔よりも小さく、行間隔は段落間隔よりも小さく、段落間隔はブロック間隔よりも小さくなります。確認するには、Web サイト上のすべての背景パターンと線を削除して、目的のブロック感を維持できるかどうかを確認します。
細部の例として、Taobao の新しいホームページを見てみましょう (右側は調整後のものです)。美しいアイコンや色の組み合わせを作るのに時間をかける必要がないこともあります。Web サイトのあらゆるピクセルを慎重に調整するだけで、まったく新しい見た目になることもあります。

プライマリとセカンダリの関係<br />ユーザーを誘導する上で鍵となるのは、プライマリとセカンダリの関係をどのように扱うかです。簡単に言えば、コントラストです。視覚的な観点から言えば、形の大きさ、色、配置はすべて情報の重要性に影響します。
大きなブロックの観点から、ページを均等に分割しないでください。3 列のデザインでは、列の 1 つが大幅に短くなります。
ローカルな視点から見ると、情報の提示のリズムも把握する必要があります。たとえば、Yahooの真ん中のニュースコラムのデザインでは、大きなタイトルの付いた大きな写真が第一ポイント、文字の付いた小さな写真が第二ポイント、純粋な文字が第三ポイントです。リズム感とプライマリとセカンダリの関係は非常に強いです。
よくある質問

ビジュアルデザイナーはコードを理解しておらず、フロントエンドデザイナーはビジュアルの専門家ではありません。実現された製品は視覚的なデザインイメージから逸脱することがよくあります。ビジュアルデザイナーがフォローアップして調整を行うことをお勧めします。広告画像は視覚効果を損ないます。ウェブサイトが十分に優れている場合、広告主は視覚的な基準に従うようになります。それが不可能な場合は、少なくともデザイナーが広告のサイズや位置などを決めることができます。
この記事の執筆時期は、ちょうど 4 月に Sina、Tencent、Taobao のホームページがリニューアルされた時期と一致しました。純粋に視覚的なデザインの観点から見ると、Tencent は非常にクリーンで思慮深いです。