網易雲音樂WP1.0設計項目實戰

 

　　WP 平台是很多設計師很少涉足的地方，優設之前發過一篇WP設計規范指南，今天網易的同學繼續上干貨，來一篇WP的設計項目實戰!作為一款有誠意的音樂APP，這次設計過程相當用心，值得學習的地方也很多，學習來。

　　項目背景

　　Windows Phone一直是各家公司缺少投入的平台，WP用戶不得不經常面對一個成熟的APP到了WP上就變得各種功能缺失、體驗支離破碎，他們渴望應用軟件在體驗上能和其它平台一樣受到同等重視，音樂APP也不例外。作為一款有誠意的音樂產品，打造名副其實“雲”的概念，網易雲音樂當然不會忽視WP用戶的呼聲，歷經重重困難於近期重磅推出“功能無閹割”的WP客戶端，還WP用戶一個完整的音樂體驗。

　　嶄新的平台，改變的契機

　　與眾不同的WP風格設計，決定了雲音樂WP版在現有平台上找不到任何可以直接移植的設計。不過，也正因為從零開始，設計師得以放下“破壞用戶已有習慣”的思想包袱，重新審視這些年產品的痛，在WP上做一次大膽的改變。

　　化繁為簡,從不是件簡單事。如何既保證功能體驗完整，又體現WP平台自身極簡、輕量的特點，成了貫穿我們設計始終的思考。

　　一、更加簡潔、高效的導航

　　為支撐起雲音樂豐富的內容，現有手機端均出現了原本PC/Web上才會出現的雙層甚至多層嵌套的導航結構，以使信息更外顯。而WP極度扁平的導航結構顯然無法消化雲音樂日益擴充的內容。如果將目前層級結構直接移植到WP，則“發現音樂”下的4個二級導航要變為入口。這種設計用戶第一眼看不到任何有效信息，推薦等核心內容的層級變深了，也不利於產品運營。

　　但若不考慮雲音樂自身內容的復雜性與可擴展性，為了扁平而扁平，將所有內容平鋪，表面上信息是外顯了，實際上獲取信息的效率反而降低：過多的橫滑選項讓人迷失，越靠後的內容越難以到達。

　　因此內容顯示的優先級還是要有所取捨。扁平化的最終目的是讓用戶更快到達所需，任何風格規范只是輔助達到目的的方法。為此，我們打破現有結構，重新梳理了不同用戶類型及其使用情境，最終將一級導航精減到4個：

　　將原先“發現”裡和推薦相關的內容單獨提取出來作為一分支。這部分內容在表現形式上講求直接呈現具體信息，方便“無目標”型用戶快速發現雲音樂的優質內容。

　　余下“發現”裡的內容則更針對“有目標”型用戶，對於這類用戶來說，入口設計方便他們縱覽所有內容模塊，從而快速定位自己所需。

　　這樣，不同用戶都可以快速切入主題，運營內容和社交元素都得到了恰當的展現，入口設計減少加載，保證首頁全景圖橫向浏覽過程中的流暢體驗。

　　二、減少迷失感

　　全景圖式導航(Panorama)在體驗上最大的一個弊端是，你無法在當前屏看到全部導航，無法快速切換導航，只能通過依次橫滑去到達。如何減少這種周而復始地橫向浏覽所帶來的迷失感，讓用戶更快找到自己需要的東西?

　　除了精減導航個數之外，我們也重新規劃了導航優先級，以便更重要的內容更容易在第一時間被發現：將“我的音樂”作為默認進入頁，因為這是每個用戶的“家”。然後從“家”出發去探索，根據內容優先級，依次經過推薦、發現和朋友動態。在設計上講究橫向浏覽過程中頁面布局的變化，用戶可通過視覺輔助確認自己當前所在模塊。

　　另外，旋律識別、搜索、設置等功能則被定義為“常用工具”，常駐在底部應用欄(App Bar)。這樣，用戶處在首頁任何地方都能一鍵調用，無需記憶和尋找。

　　三、利用平台特性，讓信息更扁平

　　歌單是雲音樂的內容核心。產品功能迭代至今，歌單界面已經變得臃腫不堪，但仍就有很多信息難以被發現。巴掌大的手機界面，如何盡可能讓信息外顯，同時界面又不失優雅?WP平台的一些全新特性讓我們看到了機會。

　　UI扁平化後，可點擊區域變得不可預期。在WP歌單頁，我們將信息與操作分離得更徹底，除了與歌曲列表關系緊密的播放、下載，其它所有針對歌單的操作都放置在應用欄(App Bar)，不再讓用戶滿屏地探索，使交互更加可預期。同時，利用WP軸心圖(Pivot)，將歌單的列表、介紹和評論並列呈現，無需跳轉，橫滑即可到達，使信息更外顯。這樣，歌單層次變得清晰，所有信息一目了然，所有功能一觸即達。

　　四、扁平≠平庸

　　UI扁平化削弱了不同應用之間的辨識度，在WP上似乎所有應用都長得差不多。我們一直堅信與眾不同的視覺能賦予產品強烈的個性，觸動人心。

　　播放頁是整個軟件的視覺中心也是情感中心。在視覺設計過程中，我們也嘗試了許多更為扁平化的方案以適應WP風格，但始終覺得缺乏自己的特色。最終在扁平化和差異化的抉擇中，我們選擇保留標志性的黑膠唱盤和血槽進度條，同時在其它細節上處理得更輕盈，營造一種沉浸式體驗。

　　信息回歸本質後，視覺亦然。視覺首先要符合其所處的環境，其次才是自己的性格。鮮艷的大色塊只適合首頁，內容頁則以黑白灰為主色調以突顯信息本身，但是完全素色的界面又顯得死氣沉沉。通過反復嘗試紅色運用在不同細節上的效果，最終達到紅色使界面更有個性的同時不搶內容。

　　設計過程中對色彩、間距、字號的精益求精，開發過程中的百余次微調，對設計師和開發都是極大的考驗。

　　總結：

　　“真正的簡潔不是刪繁就簡，而是在紛繁中建立秩序”。打造全功能版的網易雲音樂WP端，無論是設計還是開發都經歷了從混亂到有序的過程。

　　作為雲音樂大家族最晚起步的平台，Windows Phone平台小眾，項目資源少，平台限制多……盡管過程中遇到很多阻礙，我們仍然力求在這個用戶數不多的平台上打造最好的體驗,並為之日夜奮戰。

　　改變意味著風險，我們在WP1.0做了很多不一樣的嘗試，同時也意識到這個版本還有很多事來不及做。WPer，讓你們久等了，你們的支持與理解是我們不斷前進的動力!

　　——寫在WP1.0上線之際