Daily UI challenge #009 Music Player

Daily UI 9個目の課題は、Music Player。
はじめは音楽アプリをデザインしようと思っていました。
こんな感じです。

Adobe XDの自動アニメーションをただただ楽しんでいます。
アプリ全体となるといつ作り終わるかわからないので、今回は音楽を再生する部分、プレイヤーに絞ってデザインしました。

まずは既存のMusic Playerをトレース

Apple MusicとSpotifyのプレイヤー部分をトレースしました。

トレースして気づいた点

2つのプレイヤーの共通点

・画面上部をスワイプするとプレイヤーを最小化できる。
・曲の詳しい設定（プレイリスト追加、シェアなど）は設定のアイコンをタップするとプレイヤーに上に重ねて表示される。表示された設定はキャンセルボタンで非表示。元の画面に戻る。

Apple Music

・白背景。
・アクセントとなる色は少しピンクよりの鮮やかな赤。アーティスト名、アルバムタイトルや、プレイリストに追加などの設定の文字に使われている。
・CDジャケットの大きさは画面幅の67%くらい。
・曲のシャッフル、リピートは画面をスクロールすると表示される。

Spotify

・背景は黒をベースに再生する音楽のジャケット写真をぼかして表示。
・CDジャケットはApple Musicより大きく画面幅の83%くらいの大きさ。
・CDジャケットの背後に四角があって、そこをスワイプすると再生している曲の歌詞が表示される。
・文字は重要度が高いものは白、それ以下はグレー。
・音量を調整するバーは省略されている。
・文字の大きははApple Musicより小さい。そのためか、要素間のスペースがApple Music よりも広いように見える。

Music Playerのワイヤーフレームを作成

UIトレースをして得たことを元に、より使いやすいプレーヤーになるようにワイヤーフレームを作成しました。

ワイヤーフレーム作成時にこだわった点は以下の通りです。

・CDジャケットの大きさは画面幅の70%に。大きすぎず、小さすぎず。スクロールすることなく他の要素が画面のに収まる大きさに。
・曲名の下にアーティスト名とアルバム名
・音量を調整するシークバーは他で代用可能なので省略。
・曲のシャッフル、リピートの設定を再生ボタンの下に。
・曲に関する細かい設定は既存のサービスと同様にプレイヤーの上の重ねて表示させるようにしました。画面いっぱいには表示させるのではなく、女子が片手でも操作できるくらいの大きさにコンパクトにまとめました。

既存のプレイヤーを刷新することはせずに、たくさんの人に浸透していると思われる既存のプレイヤーを生かしつつ、より使いやすくなるように設計しました。

Music Playerのデザインを完成させる

主に以下の点にこだわってデザインしました。

・背景は、CDジャケットが何色であったとしてもその世界を壊さないようにしたいので白にしました。
・アーティスト名、アルバムタイトルや再生ボタンに使ったアクセントの色は（実装可能かどうかは置いておいて）、CDジャケットでより使われている色をピックアップして色を設定しました。
・再生ボタン、早送り/巻き戻しのなどのアイコンは角を丸くして柔らかい印象になるようにしました。

シークバー（今どこを再生しているのかを表示するバー）の動きや、曲に関する細かい設定が表示される動きはAdobe XDの自動アニメーションの機能を使って表現しました。

Daily UI challenge #009 Music Player

トレース、ワイヤーフレーム、デザインそれぞれの画像や、Music Playerが動く様子の動画はBehanceにまとめて投稿しています。ぜひBehanceページをぜひご覧ください！

Daily UI challenge #009 Music Player on Behance
https://www.behance.net/gallery/72609631/Daily-UI-challenge-009-Music-Player