モバイル向けUIの検索機能アイディア18選

モバイルデバイスユーザーの急速な増加につれて、Webサイトやあらゆるアプリケーションのモバイル対応が必須となりました。

デスクトップとモバイルのインターフェイスはまったく違う環境です。小さなスクリーンになると、表示できる面積が限られてしまいます。このとき、ミニマリスト的な思考を取り入れる必要があります。

今回は、検索機能をつけるときに参考になるアイディアをご紹介します。より良いモバイルアプリのUIデザインが作れますように。

1. FABボタンが変化する

2. 検索バーがバウンスする

3. カレンダーアプリでは、検索画面と直近のスケジュールが同時に表示される

4. 検索ワードと地域を同時に検索

5. メールアプリでは常に検索窓を表示させる

6. 検索と、金額指定が同時にできる

7. 背景に溶け込むような検索窓

8. 高度な検索機能は、シンプルに見やすく

9. 入力フィールドに「Search Food」という提案

10. チャットルームを検索できる

11. 陰影をつける

12. 条件検索は選択肢式に

13. 日付の指定とワード検索は別軸にする

14. ロケーションとフリーワードを同時に指定する

15. 今どの画面を見ているのかがわかる

16. タグで検索ができる

17. 大きめな検索欄

18. 検索時にハンバーガーメニューを消す

参考になるデザインはありましたか？

検索窓デザインの基本を知りたい人は、こちらの記事もどうぞ↓