Uiデザイン
可能性のスペクトル：Go-toUIカラーガイド
それを回避する方法はありません。色は、で最も影響力のあるクリエイティブ要素です。 ビジュアルデザイン 。セットデザインの魅惑的な景色の背景からピクセルアートの複雑な構成まで、色をしっかりと理解することが、説得力のあるコミュニケーションのマスターキーです。証拠が必要ですか？
で書かれたウィンドウズ10とは何ですか
最近のブランドに焦点を当てた調査の参加者が10の象徴的な企業のロゴを描くように挑戦されたとき、16％だけが正確な形とデザインの特徴を思い出すことができました。ただし、ブランドのカラーパレットを特定するように求められた場合、正しい回答の数 80％まで撃った 。
色も再生します 影響力のある役割 ユーザーインターフェイスデザインの世界で。私たちが日常的にやり取りするデジタル製品は、重要な情報を伝達するために色を戦略的に使用することに依存しているため、次のことが重要です。 UXおよびUIデザイナー 色を賢く使う方法を理解する。
このガイドでは、次のことを行います。
- 色彩理論の基礎をわかりやすく説明し、
- デジタルインターフェイスで色を操作するための堅実な原則を提供し、
- 色の認識を構築するために役立つリソースを共有し、
- 権限を与える UIデザイナー 独自の素晴らしい配色を作成します。
このガイドの目標は、色の能力とそれに続く色の信頼性です。これらはすべて、私たちが毎日遭遇するユーザーインターフェイスでの驚くべき色の実行のためです。
クラッシュコース：UIデザイナーのための色彩理論
色彩理論は、独自の用語、方法論、および科学的基盤を備えた広範な研究分野です。複雑になることもありますが、それは私たちが望んでいることではありません。私たちが望んでいるのは、電光石火の速さで適用できる色を理解することです。私たちは、形を使用するのと同じように、簡単に、大胆に、そして効果的に色を使用したいと考えています。
このように色を使用するには、UIデザイナーは、これらのコアカラー理論の概念をしっかりと理解している必要があります。
- 色は相対的です。
- 彩度の過負荷は色の鮮やかさを殺します。
- 同時コントラストには長所と短所があります。
- 基本的な配色が最適です。
- 色相は常に価値に影響を与えます。
掘り下げてみましょう。
色は相対的です
色は決して独立していません。人間の目と脳が協力して色を見るとき、それらは常に次の影響を受けます。
- 色に輝く光
- 色を囲む他の色
自然からこの例をチェックしてください：
に： 脳と目が協力して、花全体が実際には真っ赤であることを理解するのに役立ちます。
B＆C： 花の影の濃い茶色（B）は、花びらの尾根（C）のハイライトを、実際のくすんだ栗色よりもはるかに明るく見せます。基本的に、花びらの尾根を照らす光と影の色が連携して、目をだまし、ハイライトを強調します。
これは、欺瞞的な色がどのようになり得るかを示す別の例です。
UIデザインでは、色の相対性は必ずしも明白ではないため、スキーム内の色は次のようになります。 互いにテスト済み 。どうして？あなたの色のその美しく配置された選択のため スタイルガイド インターフェイスに適用すると、問題が発生する可能性があります。
大きなポイント？色の概念を甘やかさないでください。 Sketchで空白で囲まれたときに黄色のアクセントの見本が青々と見えるが、UIの主要な配色と衝突する場合は、別の解決策を見つけてください。
彩度の過負荷は色の鮮やかさを殺します
彩度は色の鮮やかさに不可欠です。しかし、彩度の高い色だけを中心に組み立てられたスキームは目を圧倒し、活気が失われます。色があれば、少ないほど多くなります。彩度の高い色は、彩度の低い色と組み合わせて使用すると鮮やかになります。
同時コントラストには長所と短所があります
まったく同じ値の色の補色が互いに隣接して配置されると、同時コントラストが発生します。効果が非常に強いため、2つの色が出会うポイントが振動またはパルスします。
UIデザイナーにとって、同時コントラストはプラスとマイナスの結果をもたらす可能性があるため、この視覚現象の効力を制御する方法を理解することが重要です。
たとえば、さまざまな青を中心に設計されたインターフェイスでは、青のアンカー色と同じ値を持つ補完的なオレンジを使用すると、通知アイコンに注意を引くのに最適な方法になります。
ただし、同じオレンジと青の組み合わせをドロップダウンメニューのテキストと背景に使用すると、片頭痛を誘発します。
リモートで作業するための最良の方法
基本的な配色が最適です
虹は自然の中で美しいです。 UIデザインでは、色をより選択的に使用する必要があります。そうしないと、エクスペリエンスが圧倒されます。ブランドがさまざまなオプションを備えたインパクトのあるパレットを持っている場合でも、抑制を示し、シンプルな配色を中心にユーザーインターフェースを構築するのが最善です。
基本的なUIカラースキームを構築するための2つの絶対確実な計画は次のとおりです。
1.類似のUIカラースキーム
- これらの目を楽しませてくれるスキームは、カラーホイール上で密接にグループ化された色で構成されています。
- 類似の配色は、自然環境、特に植物の写真で簡単に見つけることができ、視覚的に落ち着く傾向があります。
- 類似のスキームの多様性は、主要な色相の変化ではなく、彩度と明るさの変化に由来します。
- 類似のスキームを使用する場合は、カラーホイールの真横から彩度の高い色を1つ追加して、インターフェイス内に強調を作成してみてください。
2.補完的なUIカラースキーム
- 補色の配色は、カラーホイール上で互いに向かい合って存在する涼しい色と暖かい色を補完する相互作用に基づいています。
- 色の多様性は、補完する両極端の間で彩度と明るさを変更することによって実現されます。
- 明るく彩度の高い色を多く使用すると、補完的なスキームの影響が損なわれます。
色相は常に価値に影響を与える
これは奇妙に聞こえるかもしれませんが、色には対応するグレー値があります。ここに証拠があります：
違いccorpとscorp
上の画像では、100％の明るさと彩度の色相の範囲がありますが、これらの色がグレースケールに変換されるとどうなるかを見てください。
ブーム！グレー値の全範囲が明らかになります。これがUIデザイナーにとって重要なのはなぜですか？一言： コントラスト 。
少しの間、グレースケールに心を切り替えてください。コントラストを作成したい場合、50％に加えて40％のグレー値を使用することはありますか？もちろんそうではありませんが、色相が色のコントラストの方程式から除外された場合、これがまさにリスクになります。
色相は常に価値に影響を与えることを忘れないでください。
デジタルインターフェースの4つの基本的な色の原則
色彩理論を単純化し、そのコアコンセプトをUIデザインに関連付けたので、デジタルインターフェイスで色が果たす役割をさらに詳しく見ていきましょう。これらは、すべてのUIデザインプロジェクトの初期の取り組みから考慮しなければならない4つの色の原則です。
- テキストと色の関係は非常に重要です。
- 色のアクセシビリティは無視できません。
- コントラストは不可欠ですが、それはすべてを解決するものではありません。
- 色は、比例して適用すると最も効果的に機能します。
テキストと色の関係は重要です
色は読みやすさに影響します。ほとんどのUIデザイナーはこれを原則として理解しています。そのため、赤い背景に緑の本文テキストを含むインターフェースはあまり見られません。代わりに、テキストと色の間の緊張が微妙に生じ、フォーム、ボタン、ヘッダー、アイコンなどの一般的なUIコンポーネントを介して忍び寄ります。
次の簡単なガイドラインに従って、テキストと色の健全な関係を維持します。
- テキストと背景のコントラストを低くしないでください。
- テキストと背景に補色を使用しないでください。特に、色の明るさと彩度が同じである場合（たとえば、紫色の背景に黄色のテキスト）。
- 背景が白の場合でも、本文を明るい色に設定しないでください。黒と濃い灰色が最も読みやすいです。
色のアクセシビリティは無視できません
色はコミュニケーションに役立ちますが、UIで情報を伝えるために使用される唯一のデザイン要素ではありません。何故なの？一部のWebユーザーは、人口の大多数とは異なる（またはまったく）色を認識しないためです。
たとえば、色覚異常を経験している人は、アイコンの唯一の違いが色の変化である場合、製品アイコンが「押された」状態にあることを認識できない場合があります。
さらに、インターフェースの背景との色のコントラストが低い重要なUIコンポーネントを見るのが難しい人もいます。のようなサイト 着色可能 そして コントラスト比 デザイナーがコントラストについてさまざまな色の組み合わせをすばやくテストできるようにします アクセシビリティ 。
コントラストは不可欠ですが、それはデザインの治療法ではありません-すべて
はい、UIデザインの色のコントラストは重要です。それを計画し、実行し、それから利益を得る。しかし、魔法の杖のように振って、貧弱なデザインを修正することを期待しないでください。
形状、スペース、サイズ、およびその他のデザイン要素を無視してはなりません。色のコントラストは、ひどいUIを魅力的に見せることができますが、ユーザーエクスペリエンスの低下を修正することはできません。
色は適切に適用すると最も効果的です
テキストのすべてのインスタンスがタイトルケースまたはで設定されているニュースアプリを想像してみてください eコマースのウェブサイト 9x9の画像グリッド上に設計されています。どちらもひどいでしょう！
精通したUIデザイナーは、タイポグラフィや繰り返しなどのデザイン要素を比例して使用して、デザイン階層を強化します。色も同様に慎重に検討する必要があります。 UIデザインでは、使用する色が多すぎると、情報の認識方法が混乱します。
CFOとは何ですか？
継続的な進歩のためのカラーリソース
不便な真実は次のとおりです。色を使ったデザインはスキルであり、スキルを開発する必要があります。ほとんどのUIデザイナーは、どの色が一緒に似合うか（別名、色の味）を本質的に理解していますが、これが必ずしもアプリケーションにつながるとは限りません。
真に色をマスターし、UIデザインへの完全な影響を確認するには、デザイナーは練習する必要があります。幸いなことに、継続的な色の学習とスキルの構築に役立つリソースはたくさんあります。
Ctrl + Paint
すぐに色の信頼を得たいUIデザイナーの場合は、 ctrlpaint.com 、デジタル絵画指導専用のウェブサイト。デジタル絵画？本当に？
絶対に。プロのコンセプトアーティストであるMattKohrが、簡単なビデオチュートリアルと実践的な演習を通じてデジタルカラーの使用法を教えています。カリキュラムは素晴らしくシンプルで、物理的な世界と想像力の両方で「あなたが見ているものを描く」ことを中心としています。
から始めます 無料のビデオライブラリ （セクション11）のより集中的な演習に移る前に カラースターターキット 。
ヨゼフアルバースとカラーアプリの相互作用
色の相対性理論の現代的な理解は、 練習- 前 -理論 アーティスト/教育者のヨゼフアルバースのアプローチ。
アルバースは、単一の色に「多くの顔」を持たせることができると提案し、（私たちが想像する象徴的な色とは対照的に）現実の世界で実際に動作する色を見るために「目が開かれる」ことを期待して、生徒たちの間で広範な遊びと実験を奨励しました私たちの心の中で）。
1963年にアルバースは 色の相互作用 、世界のアートとデザインの教育に大きな影響を与え続けている教科書。この本の出版50周年を記念して、イェール大学は インタラクティブなiPadアプリ 全文が含まれていますが、ユーザーはアルバースのカラープレートを試してみることができます。
UIデザイナーの場合、 色の相互作用 このアプリは、デジタル環境でアナログカラーの演習を体験し、色の相対性がユーザーインターフェイスにどのように影響するかを直接確認する機会を提供します。
アンドリュー・ルーミス
20世紀の前半、アンドリュー・ルーミスは著名でした イラストレーター シカゴのアメリカンアカデミーオブアートのインストラクターですが、彼の永続的な遺産は作家の遺産です。 Loomisは、商業アートとデザインに関する6冊の本を執筆し、図の描画から製品の配置まで、幅広いトピックを取り上げました。
SQLServerのクエリ最適化手法
彼の本の中で クリエイティブなイラスト そして 画家の目 （どちらも archive.org ）、Loomisは、UIデザインの現代の分野に関連し続ける多くの永続的な行を削除します。
色の最大の間違い、そして統一性と調和の欠如を引き起こすものは、パレットに色が多すぎることです。
一方または両方に他方が含まれている場合、任意の2つの色が調和します。
色は、他のどの美しさの要素よりも実験するのに役立ちます。
他のデザイナーのインターフェース
基本的なレベルのカラーコンピテンシーが達成されると、カラースキームの作成は魅力的な追求に花を咲かせます。遭遇するすべてのインターフェースは、学習と批評の機会になり、観察はたくさんあります。
これは、他のデザイナーの作品を参照することが力になるときのUIデザイナーの開発の段階です。どうして？参照は目的地から旅へ、エンドポイントからインスピレーションへと移動するためです。
すべてのスキルレベルのUIデザイナーは、見つかったUIカラースキームの継続的な記録を保持することで利益を得ることができます。スクリーンショットを撮り、物理的なカラージャーナルを保持し、ムードボードを開始します。将来の実装のためにカラー照明の瞬間を刻印するために必要なことは何でも。
色は無視できないほど重要です
デジタルインターフェースの設計に関しては、色はオプションの考慮事項ではありません。最小限の色を使用するUI（または完全に白黒のUI）でも、UIデザイナーが理解することが不可欠です なぜ 色が使用されている、または使用されていない、 どうやって これはユーザーエクスペリエンスに影響します。
UIデザイナーが、オリジナルの配色を生成して実装できることも重要です。他のデザイナーやデジタル製品の作品を参照することは価値のある実践ですが、それがデザインプロセス中に行われる色の探索の唯一の方法である場合、これは制限になります。現実の世界や心の目で見られる色の組み合わせをキャプチャできることには、計り知れない価値があります。
あなたが色を上手に使うのに苦労しているデザイナーであるか、「私は本当に色のコツがない」と思ったことがあるなら、落胆しないでください。色を使ったデザインは、創造的な魔法や特別な贈り物ではありません。これは、繰り返して改善できる簡単なテクニックに基づいた実践的な分野です。
色は、明確で説得力のあるデザインコミュニケーションのマスターキーであることを忘れないでください。注意深く実装するか、無謀に放棄するかにかかわらず、コンバージョン、ブランド認知度、ユーザーエクスペリエンスに影響を与えます。 UIデザイナーにとって、色は単に無視できない強力なツールです。
•••
ApeeScapeデザインブログの詳細：
基本を理解する
色のパレットとは何ですか？
デジタルデザインでは、色のパレットはデザイナーが利用できる色の範囲です。ただし、これらの色は必ずしも互いに調和しているわけではありません。
配色とは何ですか？
配色は、互いに調和している意図的にペアにされた色の選択です。配色は通常、カラーホイールによって提案された論理的な関係に従って組み立てられます。
ユーザーインターフェイスの機能は何ですか？
ユーザーインターフェイスにより、人間はコンピューターと対話できます。多くの場合視覚的なこの相互作用は、モバイルタッチスクリーン、キーボード、またはコントロールパネルなどのさまざまなデバイスを介して行うことができます。
