web-dev-qa-db-ja.com

タッチデバイスのカラーピッカー

タッチデバイス、より正確にはタブレットで機能するカラーピッカーのデザインテンプレートについて教えてください。それは直感的である必要があります、それは未経験の人々のためであり、特にchildrenのためのものです。

私はいくつかの調査を行い、こことここでいくつかの良い答えを見つけましたが、円に基づくものは単純ではないという単純な理由だけで満足していません。マウスポインタではなく、事前に設定された値を持つものは、色の範囲が広いわけではありません。

要約すると、これらの要件をリストできます:

  • 専門家ではない人が使用するため、シンプル。
  • タッチデバイスのみ。
  • 画面サイズ:タブレット;
  • 素晴らしい色の範囲。
2
Roberto

それは非専門家によって使用される予定なので、最初にswatchesを使用することをお勧めします。これは優れた出発点であり、多くの場合、そのような使用の選択と使いやすさの適切なバランスを提供します。

第2レベルとして(スウォッチでは不十分な場合のみ)実際にオプションのカラーピッカーを提供できます。ここには次のオプションがあります。

  • linear(順次)-各色の後に別の色が続きます(基本的に色相値を制御し、彩度と明度のために別のコントローラーを追加する必要があります)。 これは、私の考えでは、スライダー制御されたものの中で、moseの直感的なものです。

  • multi-factor-スライダーを使用して、別々の異なるカラーファクターを個別に制御します。赤、緑、青(またはCMYK、またはさらに複雑なLAB)。 主な問題:初心者にはわかりにくい

  • 二次元-これは、前述の要素よりも優れています。1つのスペースで2つの要素(色相と彩度または黒点)を制御できるためです。ただし、3つ目のコントロールを追加するには、別のコントロールが必要です(例:タッチデバイスではなく、コミュニケーションのアイデア: http://www.makeuseof.com/tag/raphaelcolorpicker-simple-color-picker/ )。 主な問題:微調整(タッチ解像度)

「中間パス」もあり、スウォッチとカラーピッカーの間に次のようなものをユーザーに提供できます。 http:// www.w3schools.com/tags/ref_colorpicker.asp

タッチデバイスの場合、指先で覆われないように、指の上または横のどこかに選択した色のライブプレビューをお勧めします。

以下に、Adobe Ideasにカラーピッカーがあり、これらのいくつかが実装されています。最初にユーザーには見本のみが表示され、次に>シェブロン、ユーザーはスライダー、RGBまたはHSLスライダーにアクセスできます(このテーマのものは無視して、さらにカスタマイズするために使用します)-色は左側の「色」領域に表示されるため、ユーザーは表示しません手で覆います。

enter image description here

3
Dominik Oslizlo