矢印はドロップダウンボタンをどのように指しますか？
次の画像では、ドロップダウンメニューを表示するときに矢印が下の位置に移動するボタンドロップダウンをアニメーション化しています。
これに関するユーザビリティの研究があるのか、それが単なる個人的な好みなのか疑問に思っています。
アニメーションに違いがある場合は、こちらをご覧ください https://dribbble.com/shots/2369431-Daily-UI-027-Dropdown
私見私は矢印がコンテンツを指すべきだと思います。したがって、ドロップダウンがアクティブなときは、下向きにして、コンテンツが消えたときに上向きにして、コンテンツがどこから来たのかが最も理にかなっています。
ここで2つのことを検討します。
- アクションへの視覚的接続
- 共通の標準実装
最初のポイント-視覚的接続：上向きの矢印が表示された場合、その方向で何かが発生すると予想されます。ダウンではなく、自動的に見上げます。したがって、別の方向に向かうすべてのアクションは、孤立していると感じます。だからこの議論は言う：矢印が下向きの場合、物事は下に行くはずです。
2番目のポイント-標準実装：モバイル標準を見てみると、左右を指す矢印が前後の進行を制御していることがわかります。「戻る」ボタンには左向きの矢印があり、右には右を指します。これの理由は、本のPAGESである可能性が最も高く、次のページは「現在のページの後」であり、右側のアクションが必要です。
上矢印は通常「トップに戻る」、または折りたたみ機能を表しますが、下矢印は、デフォルトのhtmlであっても、非表示になっているものを開くアクションを意味します。私が言おうとしているのは、別の方法で作成することは、共通の基準に反対し、むしろ混乱することです。
したがって、私は常に矢印がアクションが発生する方向を指すようにします。矢印が下がった場合は、下を指します。
ボタンは何が起こるかが次にクリックされたときに表示されるはずです-他の何かを指さないでください。
閉じたメニューの上にあるボタンをクリックすると、コンテンツドロップダウンします-したがって、--ポイントダウン（コンテンツが表示される場所）
開いているメニューの上にあるボタンをクリックすると、コンテンツ上に移動しますがボタンに挿入されます-したがって、矢印は上向きになります。
私たちの読み取り方向（右または下）を指す矢印は、前方を指します。ボタンは、クリックしたときに何が起こるかを示す必要があります。ドロップダウンボタンの矢印は、クリックすると新しいコンテンツが表示されることを示すため、右または下を指す必要があります。
ドロップダウンが開いたら、ボタンをもう一度クリックすると閉じます。したがって、矢印は上向きまたは左向きでなければなりません。
矢印の方向について質問しているので、Microsoftのグリフと矢印の標準を調べてみてください。
スクロール ここから下 、さまざまな種類の矢印とグリフを一覧表示するテーブルまで。それはこのようなことを言います：
- シェブロンは、アクションが発生する方向を指し、将来の状態を示します。
- 矢印は、アクションが発生する方向を指し、将来の状態を示します。
- コンテナを展開すると、階層内を移動するときにコンテナのコンテンツが展開または折りたたまれます。彼らは将来の行動を示しています。
- 回転する三角形は、回転するレバーに似ているため、アクションが発生した方向を指し、現在の状態を示します。
通常、ボタンはボタンが実行するアクションを表示であり、トグルする現在の状態ではありません。
メディアプレーヤーの再生/一時停止ボタンを検討してください。再生アイコン[ > ]を押すと、アイコンが[ || ]に変化し、もう一度クリックしたときに実行されるアクションが一時停止することを示します。
この点をさらに理解するために、GoogleのMaterial Iconsをポイントします。 2つのアイコンの名前は、このトピックの全体的なコンセンサスが何であるかを理解するのに役立ちます。
指摘したように、アイコンは、そのアイコンをクリックすると何が行われるかを示したいという考えに準拠しています。コンテンツが既に展開されている場合は、expand_lessアイコン。コンテンツが非表示の場合は、アイコンを使用してさらにコンテンツを展開できることを示す必要があります：expand_more
シェブロンの矢印は、これについて考えれば考えるほど、クリック可能なアクションのときに実行されるアクションを示しています。したがって、表示されるコンテンツの引き出しとして考えてください。
ドロップダウンボタンを使用すると、コンテンツがクリックされたときにコンテンツを「引き下げる」ことができるため、静止状態では下向きになっているはずです。そして、それを非表示にしたい場合は、押し上げます。