〜ほぼ Daily UI vol.45〜 Info Card
要するにカードUIってことで合ってるかな。「リストで表示されるもので、あるオブジェクトの情報を詰め込んだもの」と定義して作ってみる。
参考にしたサイト・アプリ
Uber eats
YouTube Music
YouTube
Airbnb
デザインを考える上でのポイント
優先度のメリハリをつける
複数の情報を1カ所にまとめるので順番や色、大きさなどでメリハリをつける。Uber eats の信頼度みたいなものみたいに、テキストを小さくしても有彩色を付けてあげると望んだ印象を与えられそう感ある。
スマホデザインであれば先に幅と高さを決めておく
スマホだと幅がある程度制約があるので、それによってまず幅を決める。
一覧で起こしたいアクションを手軽にできるようにする
お気に入りに追加するなどの優先度が高いアクションがあればカードの中にアクションを用意してあげるのがいいだろう。
カード内に画像があれば画像の右上あたりにアイコンをおいたり、カード内の最下の位置にボタンを置いてあげるのがよくあるパターンなんじゃないかと思う。限られたスペースなので複数取り得るアクションがある場合は取捨選択するか、最悪「...」に詰め込んであげればいいかな。
自分のデザイン
病院の検索サイトみたいなの作ってみる。
カードに詰めたい情報は以下
- 病院の外観の画像
- 口コミ評価
- 病院名
- 住所
- 標榜している診療科
- 診療時間
- お気に入りができる
思ったこと
結構いい感じにまとまった