テキストレイアウトの 4 つの原則とは何ですか?

4 つの原則: 1. 親密さの原則; 要素間に関係がある場合、それらは視覚的にも関連している必要があります。 2. 調整の原則: プロジェクト内のすべての要素は、他の要素との特定の調整関係を確保する必要があります。 3. 反復の原則: デザイン要素は再利用することを学び、デザインをより統一して一貫性を持たせ、ユーザーの使用感を強化する必要があります。 3. 比較原理。

#テキストレイアウトはデザイナーの基本スキルであり、ページ全体のスタイル傾向を決定するとともに、デザイン内容が最も反映される場所でもあります。

#テキスト レイアウトの 4 つの主要原則##原則 1: 親密さ

If 要素相互に関連している場合は、視覚的に関連している必要があります。

コンテンツに関連性がある場合、または理解に相関関係がある場合は、植字時にそれらを互いに近くに配置する必要があります。パーティーに行くときと同じように、私たちはいつもよく知っている人を探しますが、相関関係が強い人は視覚的に近いはずです。

▲赤いボックス内の要素は非常に近くにあるため、相互に関連していることが簡単にわかります。赤いボックス内の内容が左側の全体像に関連しているとは思わないでしょう。

▲絵の下にある文字が絵と関係していることがすぐにわかり、絵を見ただけで同じ情報を表現していることが推測でき、タイトルはその隣のコンテンツテキストに対応しているので、簡単にわかります。

原則 2: 整列

▲整列は、左整列、中央整列、右整列に分けられます。

a. 大きな段落のテキストの場合は、1 ページに複数の配置方法を使用しないでください。そうしないと、ページが乱雑に見え、従うべきパターンがなくなります。 1 つの配置方法 (すべて左、すべて右、またはすべて中央) のみを使用することをお勧めします。ただし、レイアウト設計にすでに熟練している場合を除き、通常は中央揃えを使用しません。 1 行のみのテキスト情報の場合、レイアウトはより柔軟になり、配置の基準を見つけることができます。

▲左揃えのレイアウトは、ページ上で非常に規則的で簡潔で視覚的に快適に見えます。 1行しか表示されない大きなタイトルについては、レイアウトに合わせて柔軟に調整できますが、ルールがないわけではなく、ページ内の要素との整合性は保たれています。

▲中央揃えを使用する必要がある場合は、テキストの段落全体を全体 (図の赤いボックス) として扱い、段落全体を中央揃えに配置します。左か右。このようにして、画像の統一性と調整を維持することができます。

b. プロジェクト内のすべての要素は、他の要素と特定の位置合わせ関係を確保する必要があります。人が社会なしでは生きていけないのと同じように、ページ上の要素もページなしでは存在できず、それぞれの要素と他の要素の間には一定の配列関係がなければなりません。

#▲一見ランダムに配置されたテキストにも、他の要素との一定の配置関係があります。

多くのデザイナーは、最初にデザインを開始するとき、テーマを強調するためにテキストを左揃えにし、対応するタイトルを中央揃えにすることが多いことに注意してください。これは間違いで、タイトルが直接配置されます。コンテンツに関連するものです。本文と異なる位置に配置しないように注意してください。

▲ルールを理解した後は、ルールを破ることもできます (赤いボックスなど)。ページ上の配置が意図的すぎると思われる場合は、ルールを破ることもできます。適度な剛性感です。たとえルールに違反するとしても、ルールには十分な根拠があり、柔軟に適用されるべきです。

原則 3: 繰り返す

デザイン要素は再利用することを学ばなければなりません。これにより、デザインの統一性と一貫性が高まり、ユーザーの使用感が強化され、デザインの向上にもつながります。教師は効率を向上させます。

フォント、色、空白、記号、レイアウト、線など、再利用できる要素はたくさんあります。再利用される要素はまったく同じではないかもしれませんが、何らかのつながりがあるはずです。それはモジュール化に関連しています デザイン思考にはさまざまなアプローチがありますが、同様のアプローチがあります。

(右側の図のどの要素が再利用されているかを見つけてください)

▲ただし、要素を繰り返しすぎないように注意してください。たとえば、ページ上で同じ色のテキストやカラー ブロックをすべて使用すると、焦点を見つけるのが難しくなります。メインの色を 1 つだけ使用すると、 、ページが単調すぎて退屈に思えます。この原則を同じ意味で使用できるようにしてください。

原則 4: コントラスト

コントラストはページをより魅力的にし、要素が類似しすぎるのを防ぎ、同時に視覚的な階層を広げて焦点を当てます。 。一般的なコントラスト: サイズのコントラスト、色のコントラスト、濃度のコントラスト、テキストと空白のコントラスト、仮想と現実のコントラスト、厚さのコントラストなど。

a. コントラストの重要なポイントは、大胆かつ強力であることです。恐れることはありません！サイズが近すぎるため、28 ピクセルのテキストと 29 ピクセルのテキストを比較しないでください。テキストのコントラストを上げるには、4 の倍数で増やすのが最適です。一般的には、4 の 2 倍、つまり 8px 増やすのがよいでしょう。現在、多くのアプリでは人気のある大きなタイトルが使用されており、視覚的なコントラストを高めるために適切に大きくすることができます。

▲ 全く同じではない要素は、対照的な効果を持たせる必要があります。比較する必要があるため、一目で分かりやすく、コストを削減するために、完全に異なっている必要があります。ユーザーの情報をフィルタリングするコスト。

b. いくつかの項目を小さくすることを恐れないでください。これにより、他の項目との対比が容易になるだけでなく、重要なコンテンツを強調するためにより多くの余白が確保されます。興味がなければ文字サイズを大きくしても読んでもらえませんが、興味があれば文字サイズは小さくても読んでくれるのです。 「フォントサイズを大きくし、ロゴも大きくしてください。他の人に見られないのではないかと心配で、多くのデザイナーが悩み、何もできなくなります。将来、彼らはこの原則を直接使用して、この原則を打ち破るでしょう。それは合理的で十分な根拠があります」 。 (しかし、本当にうまくいかない場合は、怖がる必要があります。結局のところ、仕事の方が重要です)

ヒント:

タイトルや装飾テキストでない限り、使用しないでください。特別なフォントを使用し、内容が明確で読みやすいことを確認してください。特に大きな段落のテキストでは、読みにくくならないように、太字やソング フォントなどの基本的なフォントを使用するようにしてください。

関連知識の詳細については、PHP 中国語 Web サイト をご覧ください。

以上がテキストレイアウトの 4 つの原則とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。