ユーザーインターフェイス - 色とレイアウト

StackOverflow https://stackoverflow.com/questions/5242

  •  08-06-2019
  •  | 
  •  

質問

私は特に Web アプリケーションの情報に興味がありますが、デスクトップ アプリケーションの開発にもある程度興味があります。この質問は、私の個人的な Web サイトでの仕事と、いくつかの機能を開発したものの、サイトの外観と雰囲気に統合することは他の人に任せていた私の仕事によって引き起こされました。

配色、レイアウト、書式設定などに関するガイドや経験則はありますか?訪問者にとって読みやすさと明瞭さを確保したいと考えていますが、同時に当たり障りのない退屈なものにはならないようにしたいと考えています。

この分野での私の知識については、画像を渡されれば、それを画面上で再現するのに十分な知識がありますが、新しいインターフェイスをデザインするか、既存のインターフェイスを再デザインするように頼まれたら、どこから始めればよいかわかりません。 。

役に立ちましたか？

解決

通常、各オペレーティング システムにはユーザー インターフェイス ガイドラインがあります。Windows の場合は、 ここを見て. 。（編集：その投稿内のリンクは壊れています。しかし、「」を検索すると、ユーザーインターフェイスのガイドラインMSDN にはあらゆるものに関する記事があります)

Appleも独自のものを持っています。また、保管しておくとよいかもしれません アクセシビリティ 念頭に置いて。

他のヒント

色のコントラストが良好かどうかを確認するための 1 つのヒントは、そのスナップショットを撮り、グレースケールに変換することです。何かが読めない場合は、色の選択が間違っている可能性があります。

さらに、これはユーザー インターフェイスに関するものではありませんが、 ビフォー＆アフターマガジン 色、デザイン、および関連トピックについての非常に良いヒントを得ることができます。無料でダウンロードできるPDFもあります。

本 インターフェースの設計, 、ジェニファー・ティドウェル著には、この主題に関する章全体が含まれています（第9章、抜粋はオンラインでアクセス可能）。この本全体はお勧めする価値があります。

Web UI については、ここで思い切って言って、Web デザインで最も重要な色は白、つまり「光」だと言います。これは、コンテンツの密集した領域をその上に配置する色です。

主要なコンテンツ領域に関しては、常に暗いテキスト、明るい背景。

レイアウトにおける最も重要なルールは空白です。コンテンツに息を吹き込みましょう。

これら 2 つの単純なルールに従うことは、ほとんどの「ユーザー インターフェイスの使いやすさ」ガイドラインよりも価値があります。

ところで、MS のユーザー インターフェイス ガイドラインは (概して) ひどいものです。Jakob Nielsen を読んで、Apple のデザイン美学を見てください。ただし、MS の「ニュートラル グレー/ブルー クランチボックス」12 ステップ ウィザードの 10 ポイントのテキスト UI 哲学には近づかないでください。

(私は長年 MS GUI プログラマーとしてそう言います)

私は似合う色を見つけるのが苦手なので、自然界の写真をだまして使用し、そのほとんどが私が望む色 (たとえば、緑) であるものを使用します。 このウェブサイト メインの配色を引き出します。一般に、自然は独自の素晴らしい配色を非常にうまく設定します。

ハイコントラストの色の組み合わせを使用します。白の背景に黒のテキストは、ハイコントラストの組み合わせの最良の例です。

悪い組み合わせは、赤い背景に緑のテキストです。それは色盲の人（私のように）にとっては恐ろしいことです。

色覚異常の人にとってサイトがどのように見えるかを確認してください。 colorfilter.wickline.org

デスクトップ アプリケーションに関しては、次のとおりです。どのような場合でも、手で選んだ色を使用しないでください。「ウィンドウの背景」、「メニューテキスト」などの名前付きシステムカラーを使用してください。そうしないと、OS のアクセシビリティ機能に依存している人は色の選択が制限され (たとえば、ハイコントラストのテーマを選択できない)、デスクトップのテーマをカスタマイズしたい人にとってはアプリケーションが不安定だと思われるでしょう。

ここでは、ユーザビリティのための簡単なヒントをいくつか示します。 タイポグラフィ. 。これらは主に、読みやすさとアクセシビリティの問題に対処します。

すべきこと:

  • 相対的なフォント サイズ変更を使用する (em)
  • LANG 属性を使用してドキュメント内の言語の変更を識別する
  • 白地に黒のテキスト
  • 見出しには H1、H2 などを使用します。そしてそれらを適切にネストします
  • コンテンツを細分化して、ユーザーが探しているものに合わせて見出しを付けて整理します。
  • 明確でシンプルなコピーを書く
  • 左揃え、右揃え
  • テキストと背景の色はハイコントラストである必要があります

禁止事項:

  • リンクテキストとして「ここをクリック」または「詳細」を使用します
  • 下線を使って強調する
  • 2 つ以上のフォント タイプ ファミリ
  • イタリック体
  • すべて大文字を使用したテキストのブロック
  • 白い背景に真の赤または真の青のテキストを使用します (色収差)
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top