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