10月に作成したUIまとめ

デザイナーのasatoです。
今回は10月に個人的に作成したUIデザインをまとめてみようと思います。
今回デザインを作成するにあたって、Cocoda Training内にあるDaily Cocoda!のDaily UIというサービスを使用しました。
Cocoda Trainingとは、デザインのお題が掲載されているサービスです。
※現在こちらのサービスは終了しています。

1つ目　フリマアプリの商品購入動線

意図（振り返り）
詳細ページでは値段やいいね数が一目で分かるように目立たせています。
購入ページでは選択や確認が必要な箇所の背景をグレーにして分かりやすくしています。全体的に購入の阻害にならないように分かりやすくかつシンプルな画面になるよう心がけました。
色は水色にして爽やかでクリーンな印象を与えるようにしました。

2つ目　メンズヘアサロンの検索画面

意図（振り返り）
こちらは社内で月一で開催されているUI/UX制作物デザイン批評会に提出したものとなります。(そのためBefore/Afterが存在します)
男性向けのアプリだったので、モノクロベースの配色にしてスタイリッシュさを出しています。
また検索は様々な方向性からできるようにし、ニーズを満たすようにしています。
検索結果画面ではユーザーが見たいであろう情報を一通り並べ、更に気になったら詳細ページへ飛べるようにしています。

批評で頂いたのは、
・目的で探すの背景でシェービングの部分が黒と重なり読みづらい
・カードの文字色が薄い
・検索画面の画像部分が丸くて違和感がある
・検索のエリアの頻出地域は最初から選べるようにした方が親切では
・履歴のカードが小さく、押しづらそう
・履歴で現在地からの距離の項目があると良いかも
でした。
なので、Afterではそちらの要素を盛り込んでいます。

3つ目　移動経路の表示画面

意図（振り返り）
移動経路表示ということで、検索時にはいくつか予測が出るようにしています。また、移動手段もいくつか選択肢が出てくるようにし、わかりやすくなるようにしています。
現在地は緑色にして自分が今どこにいるのか目立つようにしています。
地図自体が要素が多いので、その他の要素自体はあまりノイズにならないようにシンプルにしてみました。

さいごに
今回もUIを作成してみました。
あと残り2つとなりました。
いよいよ次回で最後の投稿となります！