web-dev-qa-db-ja.com

無効なセルを代替行の色で表に表す方法

私は、強調された行を強調して、行の色を変えて編集可能なhtmlテーブルを作成しています。

セルをクリックすると、ユーザーはその内容を変更できます。

これらすべてを考慮して、特定のセルが非アクティブ化されており、クリックできないことをユーザーに示す必要があります。

基本的な「灰色」の背景色を試しましたが、3つの異なる灰色の濃淡が累積されます。

  • 代替行の灰色
  • 強調する灰色
  • 無効なセルの灰色

その結果、少しがっかりです: enter image description here

セルの背景を削除して別の方法を試しました: enter image description here

それらのどれも私を十分に納得させないので、代替行の色を使用して無効化されたセルを表に表す最良の方法は何ですか?

[〜#〜]編集[〜#〜]

最初の答えのコメントに続いて、私もアイコンの解決策を試しています enter image description here

5
PEC

最良の方法は色を使用しないです。実際、色は優れた視力に大きく依存するため、必ずしも最適な方法とは限りません(デザイナーが通常持っている、忘れないでください)。

色を使用せずに無効状態を強調するいくつかの代替のアイデアと方法を次に示します-これらは提案です。おそらくすべてやり過ぎであり、プロトタイプと対話するユーザーを観察することは、さまざまなアイデアを評価するための良い方法です(廊下テストはこれに適しています) :

ホバー状態を変更します。たとえば、cursor: pointerホバースタイルを使用しないでください。アイコンを標準のマウスカーソルのままにして、セルの上にホバーしても何も起こらないようにします。編集可能なセルのホバーに表示される編集アイコンを追加することも検討してください。次に、無効なセルの上にマウスを置くと、「編集不可」アイコンが表示されます。

リンクのスタイルを設定しないでください-セルがインタラクティブな場合、どのテキストにも典型的なリンクスタイルが含まれる(または含まれる)必要があります。これは、非アクティブセルのホバー状態とともに削除できます。

ツールチップの説明を検討してください。これは、ユーザーがやり取りしようとした場合にユーザーにフィードバックを提供します(ユーザーはその理由を調べるためにこれを行います)。これはクリックすることもでき、ホバー状態のないタッチスクリーンを支援するためにタップする必要があります。

境界線とフォントの太さ/スタイルも使用できます。これらは、有効と無効の対比を提供します。これはリンクのスタイリングに少し似ています。

また、表の外側にキーを1つ、2つのセルを提供します。1つはスタイルが有効で、もう1つは無効になっており、内部の作業でユーザーを支援します。これらは、理由が表全体で共通である場合に、理由を説明するポイントになる可能性があります。

2
Toni Leigh