〜ほぼ Daily UI vol.27〜 Dropdown
Hint: Design a dropdown element. Is it a menu dropdown? Or a tip that's dropped down during a tutorial?
参考にしたサイト・アプリ
よくあるやつ。 <select>で表現するタイプのもの。
▲ が大事。Currentはどういう時のスタイルなんや？hoverとかキーボード操作時のfocusかな
Dropdownと一口に行っても、検索やインクリサーチとかいろいろあるよなということを思い出した。
NotificationもDropdownと言えばそうだな。
デザインを考える上でのポイント
接続を分かりやすくする
Dropdownはトリガーとなる要素と、Dropdownと呼ばれる部分(なのか？)で構成されるので
詰め込みすぎない
ドロップダウンで行う動作は Emphemeral というか、その後の動作に状態を持ち越さないようなものが望ましい。
また検索や絞り込みなど繰り返し行う動作は不向きだろう。Dropdownは操作可能にするために１タップ必要なので、それを毎回求めるのはイラっとする(実際自分でそういうの実装したことあるけどえらく不評だった)。
自分のデザイン
めっちゃ普通のSelectのDropdown作った。項目が多い場合のインクリサーチもつけてみた。フォント Ubuntu にしてみたけどプログラミング感出ていい。
思ったこと
- 意外と多様だったわDropdown
この記事が気に入ったらサポートをしてみませんか？