UIトレース記録 Spotify編

こんにちは,ろりこです。


2回目のUIトレースはSpotifyです。


UIトレース

英語フォントは全てSF Pro Text Boldだと推測されました。サイズはタブを除いて大きくて17, 小さくて13でした。色は主に黒(#121212),グレー(#282828),白(#FFFFFF)で構成され,左上に茶色に近いオレンジでグラデーションがつけられていました。タブバーのアイコンは表示しているものが白(#FFFFFF),他はグレー(#929292)でした。格箱もおおよそiOSに準じており,関連性の高い箱は隣接していました。マージンは右側のみで16 pxでした。

一番気になったのは左上のグラデーションで,これがあることによって黒に抜け感が出てきます。これをオレンジ味にしたのは温かみを出すためでしょうか。トレースするまで存在に気がつきませんでした。



感想

このアプリは約2年ほど使用していますが,プレイリスト作成,再生以外あまり使いこなせていないです。これは私がこのアプリに求めた機能ですから満足していますし,マイナーな曲も入っていたりするのでとても使いやすいです。

トレースに際して感じたのですが,すごくシンプルでわかりやすいUIだと思います。複雑な操作がないので直感で操作できます。タブバーもHome, Search, Your Library, Premium(アップグレード)の4つなので,主な行動が全て網羅されます。選択肢の横にアイコンをつけるのも分かりやすさの秘密だと思いました。

面白いのはアイコンに用いられている緑がHomeタブに存在しないことです。私はこれでグラデーションを作った方が可愛いと思いました。