見出し画像

Dribbleで見つけたデザインをトレース04〜音楽再生画面縦タブ〜

04はこちらです!

画像1


デザインをみた所感

▼情報設計について
・縦タブ最近中国のECアプリで流行ってるみたい
・1画面目タイトル2つある 2つ目のタイトルの方が大きい
・2つ目のタイトルとタブが関連しているので、大項目に対して、それぞれページがある。
・大項目は、2画面目でリストになっている
・画面によって、プレイヤー(音楽どこまで再生してるかの指標)の向きが変わるのはユーザーが混乱しそう。2画面目、左にあるけど、親指の可動領域そんなにないからつらそう
・(チームメンバーより追記)自分の中で 進むもの=左から右 / 上から下 っていうのがあるので音楽が下から上に進んでいるの違和感
・アイコンが何を意味しているのかさっぱり。
・画面の縦横比的にiPhoneXっぽいんだけど、セーフエリア(※)広すぎる。
※セーフエリア:Appleのガイドラインで定められている、このエリア内にモノをおいてくださいの範囲 

画像2

参考:Human Interface Guidelines Adaptivity and Layout

▼グラフィック的なデザインについて
・文字小さめで余白たっぷり。
・CDジャケットだと難しいけど、独自に用意されたコンテンツなので画像onアイコンで前後に奥行きがでて立体感ある。(1画面目)
・ドロップシャドウもひと役買ってる感じ
・縦タブ、今どこにいるかちょっとわかりにくい?ページごとに全く違うレイアウトなら大丈夫だけど、コンテンツ同じだろうからみにくそう

トレース1画面目

画像3

四角の上に乗っている丸の位置が、わたしのは真ん中。
見本は1pxほど右にずれている。
さらに、上めな方が綺麗。
こういう微妙な感覚って、このトレースのやり方でいいのかな?身につくのかな?


トレース2画面目

画像4

左に並んだ4つの四角、角丸結構あるように見えたが、トレースして重ねるとそんなになかった
角丸、9pxだった。

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