DailyUI 27 Dropdown

当ページのリンクには広告が含まれていることがあります。

DailyUI 27日目です!
先は長いですね〜

目次

#027 ドロップダウン

DailyUI 27日目

プロンプト: ドロップダウン

メニューのドロップダウンですか?それともチュートリアル中にドロップされたヒントでしょうか?それともソフトウェア ツール内でより多くの機能を表示しますか?

どのような追加情報が表示されますか?現在の金の価格は?ログイン/ログアウトボタン?メニューの選択?

ドロップダウン(プルダウンボタン)とは

プルダウンボタンは、ボタンを押すとメニューが出てきて、そのメニューから色々な操作を選べるボタンのこと。

  • 主要な操作は見えるようにする
    重要なボタンはプルダウンの中に隠さないで、すぐ見えるところに置きます。
  • メニューの長さを考える
    メニューが短すぎると(例えば2つ以下)、使いづらいかもしれません。メニューが長すぎると、目的の項目を探すのが大変です。
  • メニューのタイトルはシンプルに
    プルダウンボタンのメニューにタイトルを付ける必要がない場合は、付けません。
  • 破壊的な操作は目立たせる
    大切なデータを消すような操作(例えば、アカウント削除)は赤い文字で目立たせます。ユーザが間違えて押さないように、確認画面を表示します。
  • アイコンを使う
    必要に応じてメニューにわかりやすいアイコン(絵)を付けます。

反省・学んだこと

iOSのプルダウンを参考
ボタンは最低でも44px✕44pxの範囲は持たせる
選択内容に応じてアンダーラインをいれる
削除は赤字で目立たせる

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次