音楽プレーヤーアプリ（アプリケーションソフトウェア）の分析と再設計美しい音楽プレーヤーインターフェースの設計方法

無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜
この分析と評価は iOS プラットフォームに基づいており、代表的な音楽プレーヤーである QQ Music と Douban FM の 2 つが選択されています。これら 2 つの製品はすでに Web 上で膨大なユーザーベースを持ち、ある程度のユーザーの粘着性があるため、モバイルバージョンは Web バージョンの拡張であり、対象ユーザー、情報アーキテクチャ、コアエクスペリエンスなども Web バージョンの特徴的なスタイルを継承しています。これら 2 つの製品は、異なる位置付けを持つ 2 つのカテゴリの音楽プレーヤーを表すことができます。 1 つは大規模かつ包括的で、包括的な機能を備えており、ローカル音楽の管理、他のデバイスからの音楽の同期、良い音楽の発見など、ユーザーのさまざまなニーズを満たすことができます (類似のアプリケーション: Baidu Ting、Kuwo Music Box、iScrob)。 1 つは小型でシンプルで、操作が簡単で、ラジオを使用するのと同じように、電源を入れて聞くだけで、気に入らない場合はチャンネルを変更できます (同様のアプリケーション: Xiami FM、Console.fm)。
QQミュージック 1. インターフェースの概要

2. 需要分析対象ユーザー：音楽を愛する普通の若者とQQ製品の忠実なユーザー。
ユーザーのニーズ: いつでもどこでも音楽を聴くことができます。Wi-Fi がないときはローカル音楽を聴くことができ、Wi-Fi があるときはオンラインで聴くことができます。好きな曲をダウンロードしたり、他のデバイスで収集した曲を同期したりできます。
設計目標: ローカル音楽の再生、アカウントの同期、オンラインでの視聴、音楽の検索などの機能を提供します。
3. 情報アーキテクチャ QQ Music は、ローカルミュージック、マイミュージック、オンラインミュージックなどの 4 つの側面から情報を統合します。

「ローカルミュージック」では、歌手やアルバムのディメンションからローカルミュージックを再生できるほか、独自のローカルミュージックプレイリストを作成したり、ダウンロードしたキャッシュされた曲を検索したりすることもできます。
「マイミュージック」は、QQアカウントで収集した曲や作成したプレイリストをさまざまなデバイスで同期します。この同期サービスは、ユーザーの粘着性を高め、ユーザーが時間どおりにログインするという良い習慣を養うことができます。ソーシャル属性を強化するために、「曲を注文する」というサブメニューもあります。QQユーザーは友達のために曲を注文することができ、送信された曲はここに表示されます。
「オンラインミュージック」は素晴らしい音楽を発見できる場所です。「ラジオ」は「Douban FM」に似ており、さまざまなテーマの音楽をランダムに聴くことができます。システムは、コレクションや視聴習慣に基づいて、好みを推測することもできます。ここでは、ユーザーが音楽のトレンドをできるだけ早く理解できるように、新曲や人気曲のチャートを提供しています。ユーザー向けにテーマに沿った良質な音楽を選択する、Xiami Music に似たコレクションもあります。
「その他」には、個人アカウント、キャッシュ設定、スケジュールされたメッセージ通知、ソフトウェア情報などのいくつかの小さな情報が統合されています。
4. ページレイアウト

ほとんどの iOS ベースのアプリレイアウトと同様に、QQ Music のリストページでは、簡単に検索および拡張できるようにリストスタイルのレイアウトが使用されています。メインナビゲーションは画面の下部に固定され、セカンダリナビゲーションは上部にあり、左上隅には統一された戻るボタンがあり、右上隅には再生中の曲の詳細ページがあり、ユーザーは再生中の音楽をすばやく見つけ、停止、再生、お気に入り、ダウンロード、共有などの操作を実行できます。

曲の再生インターフェースは全画面で表示され、最もよく使用される再生/一時停止、前の曲/次の曲、音量調整ボタンがデフォルトで表示されます。ユーザーが曲のカバーをクリックすると、曲の進行状況、再生モード、お気に入り、ダウンロード、共有ボタンが表示され、ユーザーはここで対応する操作を実行できます。
5. ジェスチャー操作

曲の操作は複雑ではありません。QQ Music は、オンラインスライド、左右スライド、シングルクリックの操作ジェスチャーを採用しており、そのほとんどはユーザーにとってよく使われる、明らかなジェスチャー操作です。歌詞を確認するときだけ、アルバムカバーを左にスワイプし、写真を左下にスワイプすると歌詞が表示されます。この操作は見つけるのがあまり簡単ではありません。
豆瓣FM
1. インターフェースの概要

2. 需要分析ターゲットユーザー：音楽を愛する若者とDouban製品の忠実なユーザー。
ユーザーのニーズ: Douban FMのように、開くだけで、操作なしで好きな文学曲を再生できます。
設計目標: すっきりとしたインターフェース、シンプルな操作、正確な推奨事項、曲を再生するためのパスの短縮。
3. 情報アーキテクチャ

Douban FMの情報アーキテクチャははるかにシンプルで、レベルが浅く、操作が簡単です。ラジオをオンにするだけで、曲が再生されます。ユーザーは曲の上をスワイプして MHz を選択するか、リストから選択することができます。 Douban では、ユーザーがどの曲を聴くか選ぶ手間がかかりません。ユーザーは聴きたいカテゴリーを選択するだけで、Douban が自動的にそれを推奨します。 Douban は、ユーザーが「ラジオ局を大切に維持」し、ユーザーの長期的な使用習慣に基づいて、ユーザーがお気に入りに追加した曲や再度再生しないことを選択した曲を分析し、ユーザーの好みに合った曲を推奨することを望んでいます。
4. インターフェースレイアウト

Douban FM のインターフェースは非常にシンプルです。アプリを開くと、曲の再生インターフェースが表示され、いいね、再生停止、次の曲のボタンのみが表示されます。曲の上をスライドすると Hz を選択できます。現在再生中の曲が徐々に消え、新しい曲が徐々に鳴り始め、非常にスムーズな移行が行われます。
Doubanはラジオ局として位置づけられているため、聞きたいときにオンにして、聞きたくないときには閉じることができ、再生や一時停止のボタンもシンプルになっています。アルバムをクリックすると、カバーが反転して曲の評価が表示されます。

左上のボタンをクリックすると、曲のカテゴリを選択するためのリストページに入ります。リストページはプライベート MHz とパブリック MHz に分かれています。プライベートMHzは、ユーザーの習慣やユーザーが収集した曲に基づいてDoubanが推奨する曲を指し、パブリックMHzは特定のテーマに沿った良い曲を推奨します。
右上隅の設定ボタンをクリックすると、設定がリマインダーメッセージの形式で表示され、Douban のインターフェースが節約されます。そのため、Douban FM は曲の再生ページとリストページの 2 ページのみで、真のミニマリズムを実現しています。

Douban FM のインターフェースもスキューモーフィックなデザインのメタファーを採用しています。たとえば、音楽が再生されていないときの背景はラジオのスピーカーのように見え、アルバムの裏面の詳細は実際の CD の裏面のように見えるように作られています。
音楽プレーヤーの再設計 1. 製品の位置付けと情報アーキテクチャこの音楽プレーヤーの再設計は、さまざまなシナリオでユーザーのニーズを満たすことができる総合的な音楽プレーヤーとして位置付けられています。オンラインで良い音楽を発見したり、曲を収集してダウンロードしたり、ローカル音楽を管理して再生したり、音楽を検索したりすることができます。
既存製品の分析を通じて、情報アーキテクチャが深く、推奨される音楽コンテンツがさらに豊富であることがわかりました。ユーザーのニーズの観点から見ると、ユーザーは、ただ漫然と音楽を聴くときに、良い音楽を勧められたり、最新の人気音楽が何かを知ることを望んでいます。目的を持って音楽を聴くとき、ユーザーは自分の好きな音楽や地元の音楽をすぐに見つけたり、聴きたい曲を検索したりしたいと考えています。既存の製品を分析したところ、多くのアプリがさまざまなラジオ局、コレクション、ランキングなど、目もくらむような数のおすすめを提供しており、ユーザーを混乱させるだけでなく、製品を肥大化させていることがわかりました。
製品機能を再定義する際には、ラジオ局やコレクションなど類似の機能とのレコメンデーションを統合し、テーマやミュージシャンなど異なる側面からのレコメンデーションを行っていきたいと考えています。同時に、情報アーキテクチャをフラット化し、ユーザーの操作経路を短縮したいと考えています。あまり使用されないセカンダリアクションを「その他」に配置して、主要なタスクを強調表示します。情報アーキテクチャの概要は次のとおりです。

2. 製品プロトタイプの設計製品を選別した後、プロトタイプは次のように作成されます。

情報アーキテクチャを参照して、主要な製品ナビゲーションを画面の下部に配置し、セカンダリナビゲーションを上部に配置します。フラットな情報アーキテクチャ。コレクション以外のセカンダリページはありません。ユーザーがプライマリナビゲーションを切り替えると、ユーザーが最も頻繁に使用するページである最初のタブページがデフォルトで表示されます。この時点で、音楽リストを表示するには 1 回のクリックのみが必要です。

既存の音楽プレーヤーでは通常、曲をクリックすると新しいページに移動して曲を再生します。ユーザーが他のページを閲覧した後に音楽をオフにしたい場合、再生ページに再度入る必要があり、ページの深さが増加します。
一時停止、前の曲/次の曲、お気に入り、ダウンロード、再生の進行状況など、再生ページの操作と情報は、比較的小さな領域に統合され、音楽プレーヤーのリストページの下部に配置され、いつでも簡単に操作できます。ユーザーが歌詞を表示したい場合は、プレーヤーを上にスワイプして歌詞を展開することができます。

ユーザーがポップアップ操作レイヤーのクリックに慣れてきたら、別の方法に切り替えることもできます。曲を右にスワイプすると、曲の次のレイヤーにコレクションとダウンロードの操作が表示されます。もちろん、初めて使用する場合は、何らかのガイダンスが必要になります。
WeChatは振ることができますし、もちろん音楽プレーヤーも振ることができます。気に入らない曲が聞こえたら、振るだけで変更できます。

Web インターフェースでドロップダウンメニューを使用することは、スペースを節約し、スケーラビリティを向上させる良い方法です。モバイル端末もこれを参考にすることができます。あまり使用されないセカンダリアクションは、クリックするとスライドアウトします。
音楽アプリでは検索機能がわかりにくい位置にあることが多いです。どのページに配置すべきでしょうか？特定のページに配置した場合、そのページの内容内でしか検索できません。すべてのページに配置するのは冗長すぎますし、別の検索ページを用意する必要もありません。結局のところ、検索機能は頻繁に使用される機能ではありません。検索機能は使用頻度が低いことを考慮して、今回は検索を「その他」に配置しました。検索ボックスは縦にスライドアウトした後、横にもスライドアウトでき、オンラインとローカルのすべてのコンテンツに対してグローバル検索を行うことができます。