web-dev-qa-db-ja.com

要素が2つしかないときに選択したオプションを強調表示する方法

たとえば、典型的な「グリッドビュー」ボタンと「リストビュー」ボタンなど、アイコンが付いた2つのボタンがあり、ベベルを使用して「プッシュ」効果を作成したくないとします。シンプルなデザインでやっているとしましょう。全体のスタイルに合うように、背景が色付きのシンプルなアイコンになっています。

Grid view and list view

選択されたものを区別する良い方法はありますか?

もちろん、この状況では、ユーザーは表示されたコンテンツによってそれを知ることができますが、これは単なる例であり、コンテンツによって選択されたものを知らないふりをします。

選択されていないボタンをグレー表示したり、他のボタンとは異なるボタンを識別して大きなボタングループで機能する明るい/異なる色を指定したりしても、2つしかない場合は機能しません。

それが最もエレガントなソリューションになると思いますか?

33
aleation

あなたが正しく指摘しているように、これは、2つの要素のみのセットがある場合に遭遇する典型的な問題です。どの要素が選択されているのかは明確ではありません。現在選択されている要素を強調表示したり強調したりするのは難しいようです。私の経験では、主に私たちが行ったユーザー調査に基づいており、1人のユーザーには機能しますが、他のユーザーには機能しません。あなたが私がどれほど多くの議論をし、これを明確にする方法について私がどれだけ多くのアドバイスを得たか想像することはできません。ハイライトカラー(青など)を使用しても、常に機能するとは限りませんでした。

結局のところ、私たちにとって最も効果的なのはボタンをトグルするビューに接続し、現在選択されているビューを矢印で示すです。それが、すべての議論を確実に終わらせたソリューションです。

An arrow indicates the currently selected view

47
Andreas Weder

2つのオプションがある場合は、矢印の代わりにスイッチ/トグルを使用することも検討できます。

これをドリブルから取得しました:

enter image description here

27
Chris N.

ボタンが押された、設定がアクティブであることを示す必要があります。あなたは何と協力しなければなりませんか?色、配置、追加の視覚要素。そしてサイズ。

私は個人的には、Andreas Wederが良い解決策を提案していると思います。しかし、タブのようなパターンがデザインに適合しないと感じる場合は、別の提案があります。色で示すことに加えて、sizeで示すこともできます:

enter image description here

アイコン/ボタンを斜めにせずに押された状態にすることができます。アクティブな状態をわずかに大きく、より鮮やかな色にして、非アクティブな状態をわずかに小さくして退色させるだけです。それは本質的に、ボタンが非アクティブで膨らんでいないときにインデントされ、膨らんでアクティブであるときに明るくなるボタンの同じ動作に従います。

9
AndroidHustle

border

ボタンの境界の外側にマークを付けます。これにより、強調表示がボタン自体の一部ではなく、インターフェースの状態であることが明確になります。

この例は手頃な価格ではありませんが、どちらが選択されているかを非常に明確に示していると思います。

6
BoppreH

選択したものを表示する必要がありますか?

解決策は、現在のレイアウトのアイコンを表示せず、代わりのレイアウトアイコンを表示することです。ページレイアウト自体は、ユーザーが選択したレイアウトをユーザーに通知し、ページ上のアーティファクト(乱雑)が少なくなります。

1
edeverett