<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブルの中で最も素晴らしい言葉です。女性が自分の身だしなみや服装について考えることに時間を費やす覚悟がある限り、彼女は常に自分の美しい面を見せる方法を見つけることができます。インターフェースデザインでも同じではないでしょうか?スマートな女性たちの着こなしから、デザインに何か学べることはないだろうか。 原則1:着る服の主な色は3色を超えてはならない どんな服でも、着る人が見せたい気質を表すメインカラーが必要です。彼女はすべてを強調することはできません。青のような静かな一面があるかもしれませんし、オレンジのようないたずらな一面があるかもしれません。白のような知的な一面、ピンクのようなかわいい一面があるかもしれません...しかし、彼女がこれらすべての色を同時に着ると、蝶のようにしか見えなくなります。これは Web ページのようなもので、主なフォントと色の組み合わせは 3 つを超えてはならず、最も重要なもの、比較的重要なもの、一般的なものに使用されます。すべてを強調しようとしないでください。結局何もキャッチできなくなります。 次の 2 つの例を考えてみましょう。 私はこの場所が大好きですが、確かに蝶のように見えます。 ![]() そして、このホームページだけでも少なくとも 5 つのフォントが使用されています。おそらくデザイナーは、フォント ライブラリには非常に多くのフォントがあり、それらを使用しないのはもったいないと考えているのでしょう。 ![]() 原則2:アクセサリーは統一されたスタイルを持ち、互いに共鳴するものでなければならない 今日、女の子がファッション パーティーに招待され、タイトなイブニング ドレスを選んで華やかに装おうとすると、ハイヒール以外に選択肢はあると思いますか? 残念ながら、ないと思います。たとえ、空飛ぶ男のサインが入った、超かっこいい廃盤のナイキ エア シューズを持っていて、それを履いて見せびらかしたいと思っても、彼女は自分を抑えなければなりません。 2 つのアイテムのスタイルはまったく異なります。どちらも一流の製品であっても、組み合わせると失敗することがよくあります。 おそらく私たちはウェブページ上のテキストの統一性にはより注意を払いますが、ページ上の画像内のテキストの統一性についてはしばしば無視します。以下の例を見てください。どちらも割引商品ですが、Dangdangの商品写真の価格は異なる位置にマークされています。これにより、視覚効果が簡単に乱れ、情報伝達の効率が低下する可能性があります。一方、Amazon では、すべての商品割引を統一された場所に表示し、背景色の変更のみで割引レベルを区別しています。必要に応じて、差別化されたデザインをすべて使用します。 ![]() 原則3: 細部が成功と失敗を決定する 女の子の服装の中には、まるで何気なく着ているかのようにとてもナチュラルでカジュアルに見えて、それでいてとても魅力的に見えるものがあることに気づいたことがありますか。そういう女の子は、出かける前に家で予習をする可能性が高いと断言できます。どのドレスにどのネックレスを合わせるか、どのヘアスタイルにどのイヤリングを合わせるか、さらには袖口をまくるかどうか、どのくらいまくるかまで、慎重に考えるでしょう。これが、あらゆる細部まで完璧に仕上げるための唯一の方法です。 実際、一見すると良さそうに見えても、よく見ると、美しい服のほつれた端のように、少し粗雑に感じられるデザインがたくさんあります。実際に使ってみると、なんとも言えない気持ちになります。 ! @¥@#%#¥…%¥& テキストと境界線にあと 5 ピクセル追加するだけで、この豆腐ブロックはもっと見栄えがよくなります。惜しみなく使ってみてはいかがでしょうか。 ![]() 太っている人は体重を減らしてください。ただし、タイトな黒いパンツを無理に履かないでください。単語が多すぎてスペースが足りない場合は、小さなスペースに単語を詰め込むのではなく、単語を削除します。本来は 4 行の単語しか収容できなかったスペース (左のフレームを参照) に 5 行の単語を収容しなければならなくなり、非常に窮屈に見えます。 ![]() ほとんどのウェブサイトはメインのテキスト フォントとして Songti を使用していますが、英語を表示するときに Songti を使用すると非常に読みにくいことに気付いているウェブサイトはほとんどないことがわかりました。私たちは中国語のウェブサイトですが、ページ コンテンツに英語の単語がどんどん増えているので、もう少し努力して英語用の別のフォントを定義することを検討してみてはいかがでしょうか。 ![]() |
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....
テストでは、ページ定義がutf-8でエンコードされている場合、 js ファイルに中国語などのマルチバ...
1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定するクロスオリジンリソース共有...
1 HTML入門1.1 初めてのコード体験、最初のウェブページの作成XML/HTML コードコンテン...
以下の手順に従ってください1. request.jsコンテンツ: http リクエスト インターセプ...
ScreenCloud は、必要だとは思わなかった素晴らしい小さなアプリです。デスクトップ Lin...
<html:reset> タグを使用すると、リセット ボタンが無効になり、ボタンをクリッ...
参考までに、Vue シングル サインオンのデモをご紹介します。詳細を知りたい方のお役に立てれば幸いで...
実装方法は3つのステップに分かれています。テンプレートに 2 つのボタンを設定し、v-if と v-...
マップ タグはペアで表示する必要があります。 <map> ....</map>...
Selenium Grid の紹介Selenium Grid のいくつかの新しい機能は、今後リリース...
目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....
RabbitMQをインストールする前にSocatをインストールする必要があります。そうしないと、Ra...
現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...