目次
UX-design #Day2（Spotify）
目次
Spotifyの検索を模写してみた！
２日目。今日はSpotifyの検索の画面を模写しました。シンプルでしたが、意外とフォントの細かい部分やパッディングなどを正確にやっていたら時間がかかりました。UX/UIデザインで気づいたことを書いていきます。ちなみにFigmaを使用しています。そのため、Figmaの機能名などが出てくるかもです。
（あ、今気づきましたが、私が何を聞いているのかわかってしまいますね。音楽の一時停止がそのままに。）
- 検索のやり方が２通りあることがわかる。キーワード検索の検索バーと、写真で検索のカメラアイコンがある。
- カメラアイコンはペンと円で作成できた。
- 検索バーの「何を聴きたいですか？」の文字間隔は6%くらいあり、広いなと感じた。間隔が広いだけでフォントサイズが大きく見える。確かに、この横幅いっぱいの検索バーに小さい文字だと、検索できることに気づかないかもしれない。
- この検索バーが親切なのは、横幅がこの大きさであること。アクセシビリティを考えているかわからないが、左利きと右利きの両方に対応している。
- ジャンルをチェックとすべてのジャンルの四角の角丸は値が異なっていた。それによって、異なるカテゴリーであることがわかりやすい。一番は縦長か横長か、により視覚的に異なる分類であることがすぐにわかる。めっちゃいい。
- この「音楽」や「#J-R&B」などの四角はFigmaのオートレイアウトで作成できた。子コンテナの位置を左下、左上で設定したらバッチリ。
コメントを送る
世界をUXデザインでより良くする
UXコピーでより良くする
明日も一緒に