音樂APP設計美學分析

王娟娟

鑒于目前主流音樂APP趣味性少，裝飾性低，功能龐雜瑣碎，用戶體驗不佳，且大多數以單色卡片式為主，也有部分單色系漸變，但這其中以粉色系為主，很少能體現音樂的活潑律動感。所以我設計了一款以黃色調為主的多色系漸變APP設計。在功能上力求精簡更貼合都市人群繁雜浮躁的心。在頁面排版布局方面也采取了很多大膽的創新。本文將對該APP設計進行詳細介紹，并結合目前主流的音樂APP及本人制作的第二版音樂APP進行比較分析，進一步論證上述觀點。并通過總結分析提升自身設計能力。

1音樂APP功能分析

1.1產品功能定位

因為這是一個小眾APP，解決客戶的需求點是簡潔輕松。而主流音樂APP往往包含“視”、“聽”、“唱”、“社交”、“互動”及其它商業內容，功能過于繁雜。因此我們將此APP功能設計為“聽”和“偏好定制”，通過用戶大數據統計，希望找到對味音樂更輕松便捷。功能思維導圖如下。（如圖1-1）

1.2產品結構

低保真產品原型圖如下（如圖1-2）。本圖介紹該APP的頁面分級和排版分布。鑒于主流APP已培養出的用戶習慣和人機工程學對操作失誤形成誤觸的解決方案，我們也將主菜單放在頁面上部。

1.3頁面分析

1.3.1起始頁

起始頁功能：介紹APP的特色，使用戶能直接了解產品特性。本APP特色如下（如圖1-3）：

1.3.1.1 多色系漸變與單色系微漸變對比，使畫面功能區分開來。

1.3.1.2 大量曲線應用，讓音樂的抽象律動及豐富性更直觀表現出來，增強起始頁面導入的功能 。也有高山流水遇知音的美意。

1.3.1.3 超大字體已然超出頁面是希望 繁忙的都市生活節奏可以在這一刻得到放松和釋放的感覺，同時文字部分介紹本產品的亮點。

1.3.1.4 頁面下方的頁面分割符號采取了創新，不僅清晰說明了頁面排序及導向，也十分活潑富有節奏感。

1.3.2個人頁面

個人頁面：用戶主頁的相關信息。個人頁面特色如下（如圖1-4）：

1.3.2.1 “毛玻璃”狀態欄，它是蘋果系統最早運用，目前安卓也在使用。半透密、可視化，不會阻擋視線，安心，視野更廣，能更大范圍看到頁面內容。

1.3.2.2 安卓卡片式播放欄，簡潔內容清晰，操作簡便，不易誤觸，懸浮式播放欄，卡片式微投影更有層次感，熱區數據使用標準式，符合人機工程學。

1.3.2.3 個人主頁和個人內容頁的版式有所創新，不規則幾何形按鈕和粘連式按鈕，更凸顯了音樂app的律動感。

1.3.3登錄頁、數據統計頁面

登錄頁：面功能清晰，已有的大眾用戶習慣無需過多繁復的解釋和重新培養。（如圖1-5）

數據統計頁面：偏好定制基于大數據統計的方法，用戶可根據自己的喜好來篩選未來系統的曲目推薦。（如圖1-6）

1.3.4我的收藏、設置菜單、歌單廣場

我的收藏：搜索ICON，采取象征式音符實心的形式，生動可愛且簡潔。用戶也容易辨識功能用途。卡片式對稱排列，清晰整潔，卡片之間空隙較大，能使背景更大范圍顯現出來，更具裝飾感。但在一般的行活里，會最大程度放大功能，但容易誤觸。收藏增加了點贊功能，利于大數據對用戶喜好的統計。（如圖1-7）

設置菜單：粘連式按鈕設計，與主頁面黃色調漸變不同，是溫馨的粉藍色系微漸變，有了很好的區分。主頁面加了陰影微模糊，與菜單頁面形成了明顯的主次對比，有視覺層次感。退出按鈕與漸變色調一，統一了畫面，也使得用戶不易察覺，繼而不易退出，避免客戶流失。（如圖1-8）

歌單廣場：推薦最新歌曲資訊，熱門歌單等功能。卡片式功能項，精致的圓角處理，與整體弧線相吻合，又使畫面富有靈動生氣。右下角加播放按鈕，可方便用戶體驗。層迭式BANNER，滑動質感，富有趣味性。（如圖1-9）

1.3.5歌單頁、發現音樂、主題頁

歌單頁：BANNER圖文分割式排版，圖文結合，功能綜合，可互動點贊。分享ICON音符象征意義實心，可愛與扎實并存，也更容易使用戶發現。（如圖1-10）

發現音樂：卡片式排列，簡潔清晰，使得都市壓力大的生活，感受放松和精簡信息的介紹。項目間的間隔也在標準熱區的基礎上拉大，增加放松感，但保證圖文清晰。（如圖1-11）

主體頁：發現音樂的次級頁面。圖文介紹音樂的相關資訊，增加互動功能，如點贊留言，使app也有較小的社交功能。使用戶能找到志同道合，喜好相同的朋友。浮動式播放欄不在沉底處，可根據習慣放置，防止誤觸。（如圖1-12）

1.3.6播放頁、每日一推

播放頁：雙進度條豐富了畫面，唱片式加圖片的旋轉，雖然唱片環繞進度條沒有操作功能，但增加了仿真趣味。簡潔清晰的播放操作區基于已有的用戶習慣而定，較少用的功能收集在綜合按鈕中。（如圖1-13）

每日一推：卡片式排列，微投影增加層次感，可直接點擊播放，功能清晰簡單，播放與分享，更易找到相同喜歡的人群。如果不喜歡，可以換一批推送，增加數據統計的精確性。單獨的播放欄，是卡片式，不影響用戶之前的播放，獨立播放，回到上級頁面可切換回自己的播放列表。（如圖1-14）

2市場上同類產品設計對比

2.1酷狗音樂（功能、形式、色彩等分析）（如圖2-1）

2.1.1 傳統導入頁面，介紹版式更新內容及功能，標準頁面滑動符。

2.1.2 安卓特色卡片式扁平化ICON。

2.1.3 仿生唱片播放欄。

2.1.4 長條banner，專業行活放大功能項，減少空隙留白，商業用途濃重。

2.1.5 主色調單色系，菜單欄基本無裝飾，MBE精簡線條ICON（個人頁面）。

2.1.6 APP功能繁多，包含看、聽、唱和互動（直播）。

2.2網易云音樂（功能、形式、色彩等分析）（如圖2-2）

2.2.1 安卓特色卡片式扁平化ICON和MBE精簡線條ICON組合運用。

2.2.2 簡潔隱藏播放欄。

2.2.3 長條banner，專業行活放大功能項，減少空隙留白，商業用途濃重但更偏向于新聞用途。

2.2.4 主色調單色系，菜單欄基本無裝飾，MBE精簡線條ICON（次級頁面）。

2.2.5 APP功能繁多，包含看、聽、和社交。

2.3比較分析

市場上的APP產品被稱作“行活”，因此它更注重商業用途及開放商利益。“行活”沒有褒貶義的感情色彩，只是一類產品的設計方式。而我們在做概念性設計時思考方式與其不同，更注重式樣和功能的創新探索。形成了如下對比：

2.3.1相較于行活，我的導入頁面版式新穎，運用了新的色彩搭配。

2.3.2 相較于行活，我的產品功能更簡潔，對客戶的需求更有針對性。

2.3.3 我的產品審美趣味高，在整體形勢上更大膽。

2.3.4 然而行活的邏輯較我的產品邏輯性更強，功能整合更完善。

2.3.5 行活在“熱區”（人機工程學）的設定中，使功能區域最大化，易發生誤觸，視覺壓迫擁擠。

2.3.6 我的產品裝飾性更高。

3同產品功能下其他方案對比

在制作這款軟件的同時，我制作了另一款備選方案—“爵樂”。“爵樂”軟件針對于喜愛爵士樂的客戶群體，版式上更偏向于主流設計。下面我們對“爵樂”的功能、形式、色彩等分析。

3.1導入頁（如圖3-1）

3.1.1 圓形劃分頁面版式，添加顏色處理高清照片，文案介紹功能主旨。

3.1.2 傳統線條頁面滑動符指示，引入啟始頁，清晰歡迎按鈕。

3.1.3 右上角跳過按鈕過小，雖不符合用戶需求，但極大符合開發商的初衷。

3.2啟始頁、注冊頁、登錄頁（如圖3-2）

3.2.1 啟始頁：MBE簡易流線型LOGO，單色微漸變底色烘托爵士樂的格調和迷離氛圍。粉色漸變字體設計凸顯音樂APP的靈動感。

3.2.2 注冊頁：照片單色漸模糊處理，與單色漸變融洽銜接為背景不突兀，分隔符分隔的兩部分功能區。圓弧的信息欄稍顯笨拙但與LOGO呼應。

3.2.3 登錄頁：基本同上。

3.3本周精選、本周排名、主頁面（如圖3-3）

3.3.1 本周精選：單色系微漸變底色，沉浸式狀態欄，是整體視覺面積感覺變大和統一，滑動放大BANNER交互體驗增添趣味。熱區大小如規定（人機工程學）。

3.3.2 本周排名：列表式，每部分分隔較寬。視覺不擁擠。

3.3.3 主頁面（爵動態）：大型圓弧任務欄及狀態欄采取沉浸式，新穎統一，與LOGO呼應，卡片層疊同色系裝飾背景增加層疊感。功能按鈕半透明底色強調易找尋。

3.4播放頁面（如圖3-4）

播放頁面兩種模式：

3.4.1 歌詞模式：毛玻璃處理圖片為背景，精簡易操作播放板塊，其他功能統一于右上角按鈕處。

3.4.2圖片模式：唱片圖案，層疊排列可滑動查看，方形設計，較圓形來說，更清晰，圖片內容損失少。單色系微漸變背景，教歌詞模式播放欄更清晰。

3.5個人中心頁、爵關注、爵士館、搜索頁面（如圖3-5）

3.5.1 個人中心頁：單色微漸變MBE的ICON，頭像位于任務欄中央，標志頁面對稱分布。播放欄懸浮，MBE的按鈕設計，與ICON相呼應。單色微漸變底色，加方形照片信息與播放頁呼應。

3.5.2 一級頁面-爵關注：添加互動功能，了解你喜歡的歌手或作者，發現新鮮動態，積極互動。同色系單色按鈕，并非微漸變顯得畫面和按鈕功能不凌亂。

3.5.3 一級頁面-爵士館：醒目大面積BANNER，第一眼了解每日最新音樂信息，大數據統計推薦個人可能感興趣的音樂。發布近期相關音樂資訊新聞。

3.5.4 搜索頁面：微漸變卡片式ICON按鈕，提示查找類別，用戶更輕松，如果底色非留白，字體選擇白色與之呼應配合。如果文字在留白處，字體是相同微漸變或單色。

3.6比較分析

3.6.1 “爵樂”相較于我的第一版APP是單色系漸變，既顯得活潑律動又統一整潔，粉色系基調較為主流。

3.6.2 大多數頁面排版對稱分布，均衡穩重。

3.6.3 頁面留白運用較好。較第一版APP更清新。

3.6.4 新視覺技術運用更廣泛，但樣式更傳統。

3.6.5 裝飾性及審美趣味：行活大于“爵樂”大于第一版APP

3.6.6 “爵樂”較第一版APP邏輯較為清晰，功能實現更高穩定。

結語

通過分析對比市場主流音樂APP及同類APP方案“爵樂”，我制作的第一款軟件，色調明快、版式等創新度高、可適配性高、定制及簡便、功能單一、排版概念化、更具形式感，但整體邏輯性欠佳。作為現當代的設計類學生，所做的概念性設計雖沒有上線被大眾使用，但在設計上更應大膽突破，勇于創新，積極探索。習近平倡導“科技是第一生產力、創新是引領發展第一動力”，創新對審美格調的提高有積極的作用。更要注重審美與功能相結合，設計產品應使二者相互融合。注重功能的完善就會形成功能美，形式感應依附于功能，為功能服務。通過專業領域的學習及課余的設計實踐，我會進一步提高自身專業能力。