音樂APP設計美學分析

王娟娟

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

1音樂APP功能分析

1.1產(chǎn)品功能定位

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

1.2產(chǎn)品結構

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

1.3頁面分析

1.3.1起始頁

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

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

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

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

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

1.3.2個人頁面

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

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

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

1.3.2.3 個人主頁和個人內(nèi)容頁的版式有所創(chuàng)新，不規(guī)則幾何形按鈕和粘連式按鈕，更凸顯了音樂app的律動感。

1.3.3登錄頁、數(shù)據(jù)統(tǒng)計頁面

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

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

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

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

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

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

1.3.5歌單頁、發(fā)現(xiàn)音樂、主題頁

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

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

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

1.3.6播放頁、每日一推

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

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

2市場上同類產(chǎn)品設計對比

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

2.1.1 傳統(tǒng)導入頁面，介紹版式更新內(nèi)容及功能，標準頁面滑動符。

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

2.1.3 仿生唱片播放欄。

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

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

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

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

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

2.2.2 簡潔隱藏播放欄。

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

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

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

2.3比較分析

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

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

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

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

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

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

2.3.6 我的產(chǎn)品裝飾性更高。

3同產(chǎn)品功能下其他方案對比

在制作這款軟件的同時，我制作了另一款備選方案—“爵樂”?！熬魳贰避浖槍τ谙矏劬羰繕返目蛻羧后w，版式上更偏向于主流設計。下面我們對“爵樂”的功能、形式、色彩等分析。

3.1導入頁（如圖3-1）

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

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

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

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

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

3.2.2 注冊頁：照片單色漸模糊處理，與單色漸變?nèi)谇暯訛楸尘安煌回＃指舴指舻膬刹糠止δ軈^(qū)。圓弧的信息欄稍顯笨拙但與LOGO呼應。

3.2.3 登錄頁：基本同上。

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

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

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

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

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

播放頁面兩種模式：

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

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

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

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

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

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

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

3.6比較分析

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

3.6.2 大多數(shù)頁面排版對稱分布，均衡穩(wěn)重。

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

3.6.4 新視覺技術運用更廣泛，但樣式更傳統(tǒng)。

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

3.6.6 “爵樂”較第一版APP邏輯較為清晰，功能實現(xiàn)更高穩(wěn)定。

結語

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