最もユーザーフレンドリーなカラーピッカー
私はウェブサイトをデザインしていますが、ユーザーが一部の要素の色を変更できるようにする必要があります。カラーピッカーを実装する必要があります。どのようなカラーピッカーが最もユーザーフレンドリーで、見栄えが良いですか？
これまでに4種類の種類がありますが、他にもっと良い種類がある場合はお知らせください。
私はデザインがどのように見えるかに完全に柔軟です。
＃1：スクエアカラーピッカー
＃2：カラーホイールのカラーピッカー
＃3：カラーホイール-スクエアカラーピッカー
＃4：カラーホイール-三角形のカラーピッカー
基本ユーザーが最初
これは色彩理論のアプリではないと思います。これがパワーユーザーのサブセットでの迅速なカラー選択をサポートすることを目的としている場合、ハイブリッドパレットチューザー/ビルダーがうまく機能します。
「簡単」にする
速い選択を行うユーザーの作業を簡素化する適度なサイズのスウォッチを備えたパレットベースのセレクターから始めます。 Googleはこれをドキュメントで使用することで優れた成果を上げています。
この設計には、次の3つの主要な機能があります。
かなり幅広いが圧倒的な選択ではない。
オプションの思慮深い編成。
- グレイスケール
- 明るい色
- 明るい色の値の範囲
上級ユーザー向けのカスタマイズ可能なセクション。
最後のポイントは、必要なパレットを取得するためにコントロールを使用する準備ができている特定のユーザーに対応します。
1点の競合...
記録としては、Googleのベースカラー（2番目のスウォッチ行）は役に立たないと思います。これらのうちいくつを変更せずに実際にドキュメントに含めますか？これは、ベースカラーの選択を変更する方法を簡単に説明したものです。微妙ですが、使用上は意味のある違いだと思います。
「ハード」を可能にする
ユーザーが望む可能性のあるすべての色を予想することはできませんが、それらをサポートしようとすることは正しい方向に進んでいます。なじみのあるパターン（一方の側をクリック可能な領域ともう一方のスライダー）は、良くも悪くも、さまざまな形をとることができます。
Googleはこれを誤解しています。
彼らが選択した高度なピッカーモデルは、使いやすさを向上させることなく精度に欠けています。色相と彩度のメイン「ステージ」を使用することにより、色の選択は狭い垂直列に制限されます。それ自体の価値は、精度をほとんど必要としませんが、きめの細かいスライダーコントロールの完全な所有権を主張します。
非常に科学的な結論：嫌いです。
より良い方法
スライダーを色相専用にすることで、ユーザーは一般的な色に簡単にアクセスできます。メインステージでは、彩度と値を微調整して、微妙な変化を簡単に作成できます。この例は、MacにインストールしたOSXカラーピッカープラグイン（一部変更あり）からのものです。
非常に科学的な結論：Mo betta。
このモデルがメインステージの左側に色相セレクターfirstを持っている必要があるという洞察に富んだ観察の@ dberm22の功績。これにより、幅広いタスク（色を見つける）から詳細な（値と彩度の操作）、高度な（数値の微調整またはコピー）までの論理的な進行が作成されます。
また、作成状態に入るときに、カラー値がどこから始まるかを考慮してください。一部のピッカーは、値と彩度が0（黒）で始まるため、スウォッチに影響を与えないように見える色相スライダーになります。右上の象限のどこかにある値と彩度から始めると、ユーザーが望むものに近い可能性があります。
ユーザーのハードワークを覚えておいてください
ただし、コントロールをフォーマットする場合は、生成に時間がかかるユーザー用のカスタムカラーを必ず保存してください。その後、彼らは時間の経過とともに独自の見本ライブラリを持ち、あなたの製品をさらに愛するでしょう！
「簡単なこと、難しいことは可能」という哲学に対する信用は、Perlプログラミング言語の作成者であるLarry Wallに行きます。
これには客観的な回答があるかどうかはわかりません。クライアントの人口統計に依存しすぎるためです。私は私の主観的な2セントを与える！
彼らがグラフィックデザイナーや極端に技術に精通していない場合は、私にとってがである最も直感的な解決策を求めたいと思います2番目のもの。私の考えでは、ユーザーの考えはおそらく「暗い色が欲しい、おそらく赤い」ではなく、「赤が欲しい、おそらく暗い」と思うので、Colour > ShadeはShade > Colourよりもうまく機能しますまたはこれは、3または4の円形のいずれかです。これは、ユーザーにとって意味のある左から右への読み取りスタイルに依存しており、ヘブライ語で見られるような右から左のレイアウトでは機能しない可能性があることに注意してください。インスタンス。
ただし、この理由は当てはまらない場合があります。特に、白い背景のテキストを選択していて、暗い色を選択する必要がある場合はそうです。もしそうなら、多分最初のものを水平に反転しますか？
さらに、16進コードを入力するためのバーを用意することをお勧めします。希望する色を正確に知っている場合は、入力するだけでセレクターを広い範囲にスライドさせなければならないことにイライラすることがあります。次のようなもの：
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
グラフィカル要素を更新すると、テキストがすぐに更新され、その逆も同様です。これはまた、簡単にクリックしてドラッグできない、または視力に問題がある人々にとってよりアクセスしやすいです。
リストするすべてのカラーピッカーは、 HSL/HSV （色相、彩度、明度/値）のカラー表現のバリエーションに基づいています。したがって、それらの主な違いは色理論ではなく、単にコントロールの配置と形状にあります。
とはいえ、リストの2番目のカラーピッカーには、他のカラーピッカーと比べて大きな欠点が1つあります。色相軸が他のものと分離していないことです。他のすべてのインターフェイスでは、最初に特定の 色相 を選択し、次に基本色相に影響を与えずにその色相の異なる 色合いと濃淡 を選択できますが、2番目のカラーピッカーは彩度を組み合わせます同じ色のホイールの色相軸。ホイールをクリックすると彩度と色相の両方が変化します。
したがって、色相を維持しながら色に色を付けようとすると、視力と手と目とマウスの調整が難しくなります。色付けとシェーディングは、色とグラフィックスを操作するときに非常に一般的なことなので、これは非常にイライラすることがあります。
リストの最初のカラーピッカーdoesは個別の色相軸を持っていますが、かなり小さなスペースに圧縮されているため、範囲をクリックするだけでは特定の目的の色相を正確に選択することが困難です。また、色相軸の円形の性質を視覚的に表すことができず、スペクトルの赤い部分に任意の不連続性が生じます。したがって、私はそれをロットの2番目に悪いものとして評価します。
最後の2つのカラーピッカーは、外観と使いやすさが非常に似ています。個人的には、色合い/シェードスペースis基本的に三角形の性質（3つの「純粋な」シェードの組み合わせ：黒、白、および純粋な飽和色相）。とは言っても、実用性に違いはありません。
したがって、私は個人的にカラーピッカーを次の順序で評価します：＃4（最高）、＃3（ほとんど＃4に等しい）、＃1、＃2（最低）。
最後に、allに示したカラーピッカーには共通の欠点があることに注意してください。それらのベースとなっているHSL/HSVカラーモデルは、RGBカラースペースの単純な再パラメーター化なので、知覚的に均一ではないため、色相を変更すると、知覚される色の明度に影響します。 （これは、カラーホイールを見ると簡単にわかります。青い部分は、緑と黄色の部分よりもlot暗く見えます。）したがって、それらのほとんどは、さまざまな色合いや色合いを簡単に選択できます。同じ色相の場合、その逆-知覚される同じ明度と彩度を維持しながら色の色相を変更する-は非常に困難です。
残念ながら、この問題を回避するために一般的に使用されているカラーピッカーのデザインについては知りません。また、根本的な問題がいくつかあります。まず明るい緑色を選択してから、色相をたとえば青色に変更してみます。色を濃くしたり、陰影を付けたりせずにnotが可能であることがわかります。通常のRGBモニターでは、飽和した緑と同じ明るさの飽和した青を生成せず、標準のRGBカラースペースが1つを表すこともできません。したがって、そのような場合、someある程度の妥協が必要になります。
@DavidGrinbergは、ほとんどのユーザーが少数の色よりも多くの色を選択することを気にしないという点で優れています。ただし、そのグループと、プログレッシブエンハンスメントをサポートするインターフェースでより多くの選択肢を求めている人々の両方に対応できます。
Microsoftは長年にわたってWindowsを提供してきました。新しいスクリーンショットを英語で見つけるのに苦労しました。しかし、ルックアンドフィールは、少なくともW7を通じて同じです。緑地のデザインの場合、ユーザーが少なくとも1つのカスタム色をすでに定義していない限り、総数または標準色を減らし、小さいバージョンのカスタム色セクションを非表示にします。
ユーザーが要素ごとに異なる色を選択できる場合は、代わりに事前定義されたパレットのリストを提供することを検討してください-面倒なユーザー操作と片頭痛が黄色と紫の色スキームを誘発する可能性を減らします
http://colorbrewer2.org/# ColorBrewerにはこのようなパレットのリストがあり、この場合は特にデータの視覚化のためですが、これらが適切でない場合は他にもあります。
以下は、完全な提案ではない2つのアイデアです。非常に大まかなスケッチです。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
左モックアップ
RGBカラースペースキューブの色相、彩度、明度、明るさ、値、強度、…の表現は、（通常）円柱、「六角形」（六角形のベースを持つプリズム/円柱）、六角形の両錐または球のいずれかになります。両方の種類のベース、ディスクまたは六角形の場合、プレーン座標は、赤シアン、緑マゼンタ、青黄軸の組み合わせで指定できます。 （これは平坦化された立方体です。）これはangular色相と放射状彩度を組み合わせたものです。明るさ、明度、または値、つまり高さは、白と黒の軸によって指定されます。
右モックアップ
多くのHSB/HSL/HSV/HSIピッカーは、視覚的な選択と数値の関係を明確にしていません。このスケッチは、これを実現する方法を示しています。
これは入力ウィジェットであるため、出力/エクスポート値は二次的な問題であることに注意してください。それでも、一部の人々は、数値表現がわかっている色から始めたいと思うでしょう。それがタブと数値入力の目的であり、貼り付けも機能します。
ここでいくつかの回答は、RGB/HSLの個別の数値制御を備えたピッカーを提案しています。これらのコントロールは便利ですが、あまり視覚的ではなく、操作するには試行錯誤が必要です。以下は、右側にRGB/HSLのデュアルモードビジュアル+数値コントロールが描かれた画像です。
いずれかのスライダーを操作すると、他のスライダーのグラデーションが変化します。これにより、他のピッカーの1つまたは2つとは対照的に、色を変更するための6つの次元の視覚的サポートが提供されます（ピッカーには通常3つの次元がありますが、操作されている色でペイントされるのは1つまたは2つだけです）。
スペースが許す限り、他のピッカータイプにそれらを含めることができますが、ある種のパレットと最近選択した色のリストを使用すると最も効果的に機能する場合があります。
（ソース： eltima.com ）
16進数を使用したり、チャネルを個別に入力したり、色を覚えたりする機能がないため、完全ではありません。
それは：
- より良い選択のための大きなストライプ
- 色相用
- 1つはグレーに向かって変化し、彩度が変化します
- 白と黒の間のグラデーション用の1つ
- プレビューする大きなフィールド
- ストロークの色を背景色に向けて変化させるオプション
- 白黒ボタンへのリセット
かなりスリムなので、実際にはカラーダイアログではなく、カラーピッカーツールです。