見出し画像

Daily Cocoda! #31

デザインを独学しております。ぼいです。

デザインをインプット・アウトプットできるCocodaさんにて、UIデザインのお題をこなすDaily Cocoda!(Daily UI)をやっております。

今回のお題は、「フリマアプリの検索結果画面」でした。

画像1

画像2

参考にしたもの

メルカリ、ラクマ、ebay、Spotify

意図

作ったもの

  1. 検索画面

  2.検索して見つからなかった時の画面

<検索画面>

検索画面、検索フィルター(アイコン)、探し方のサジェスト、検索履歴、ボイス入力

検索結果画面の「探し方を選ぶ」のあたりはspotifyを参考にしてみました。

<検索して見つからなかった時の画面>

検索画面、検索フィルター(アイコン)、検索条件を変えるボタン、フレンドリーな文言


アプリのリサーチ段階でメルカリ、ラクマ、paypayフリマ共に情報設計が似ているなあと思いました。検索バーの下にセグメント(おすすめ、カテゴリ、ピックアップ)が表示されてて、横スクロールするとセグメントタブが永遠にぐるぐる回る。ホームは商品で溢れてて、いきなり情報量が多いなという感じがしました。これはこれで色々な製品が出品されていることを実感できるけど。

一方、ebayは検索するか、カテゴリやセール品などのグループから入って初めて商品が出てくる感じ。段階を踏んでいて、ユーザーが取るべき行動に集中しやすい気がするので個人的にはこっちの方がスキです。使ったことないけど。したがって、今回はebayをイメージしながら作ってみました。


画像3


それと、これまでXDのプラグインundraw(フリーのイラスト挿入プラグイン)を使ってアプリの名前と共にパッケージ(上記みたいなの)を作っていたのですが今回からやめました笑 見る人(ユーザー)にとっては不要だなと思いまして。
次回から、制作した画面だけをアップロードしていこうと思います。

引き続き頑張ります〜!

以上!


この記事が気に入ったらサポートをしてみませんか?