化繁爲簡——網易雲音(yīn)樂(yuè)WP1.0設計(jì)思考

項目背景

Windows Phone一直是各家公司缺少(shǎo)投入的(de)平台，WP用(yòng)戶不得不經常面對一個(gè)成熟的(de)APP到(dào)了WP上(shàng)就變得各種功能(néng)缺失、體驗支離(lí)破碎，他(tā)們渴望應用(yòng)軟件(jiàn)在體驗上(shàng)能(néng)和(hé)其它平台一樣受到(dào)同等重視，音(yīn)樂(yuè)APP也(yě)不例外。作爲一款有(yǒu)誠意的(de)音(yīn)樂(yuè)産品，打造名副其實“雲”的(de)概念，網易雲音(yīn)樂(yuè)當然不會(huì)忽視WP用(yòng)戶的(de)呼聲，曆經重重困難于近期重磅推出“功能(néng)無閹割”的(de)WP客戶端，還WP用(yòng)戶一個(gè)完整的(de)音(yīn)樂(yuè)體驗。

嶄新的(de)平台，改變的(de)契機

與衆不同的(de)WP風格設計(jì)，決定了雲音(yīn)樂(yuè)WP版在現有(yǒu)平台上(shàng)找不到(dào)任何可(kě)以直接移植的(de)設計(jì)。不過，也(yě)正因爲從零開(kāi)始，設計(jì)師(shī)得以放(fàng)下“破壞用(yòng)戶已有(yǒu)習(xí)慣”的(de)思想包袱，重新審視這些年産品的(de)痛，在WP上(shàng)做一次大(dà)膽的(de)改變。

化繁爲簡,從不是件(jiàn)簡單事。如(rú)何既保證功能(néng)體驗完整，又(yòu)體現WP平台自身極簡、輕量的(de)特點，成了貫穿我們設計(jì)始終的(de)思考。

一．更加簡潔、高(gāo)效的(de)導航

爲支撐起雲音(yīn)樂(yuè)豐富的(de)内容，現有(yǒu)手機端均出現了原本PC/Web上(shàng)才會(huì)出現的(de)雙層甚至多層嵌套的(de)導航結構，以使信息更外顯。而WP極度扁平的(de)導航結構顯然無法消化雲音(yīn)樂(yuè)日益擴充的(de)内容。如(rú)果将目前層級結構直接移植到(dào)WP，則“發現音(yīn)樂(yuè)”下的(de)4個(gè)二級導航要變爲入口。這種設計(jì)用(yòng)戶第一眼看不到(dào)任何有(yǒu)效信息，推薦等核心内容的(de)層級變深了，也(yě)不利于産品運營。

但(dàn)若不考慮雲音(yīn)樂(yuè)自身内容的(de)複雜性與可(kě)擴展性，爲了扁平而扁平，将所有(yǒu)内容平鋪，表面上(shàng)信息是外顯了，實際上(shàng)獲取信息的(de)效率反而降低：過多的(de)橫滑選項讓人(rén)迷失，越靠後的(de)内容越難以到(dào)達。

因此内容顯示的(de)優先級還是要有(yǒu)所取舍。扁平化的(de)最終目的(de)是讓用(yòng)戶更快到(dào)達所需，任何風格規範隻是輔助達到(dào)目的(de)的(de)方法。爲此，我們打破現有(yǒu)結構，重新梳理(lǐ)了不同用(yòng)戶類型及其使用(yòng)情境，最終将一級導航精減到(dào)4個(gè)：

1. 将原先“發現”裏和(hé)推薦相(xiàng)關的(de)内容單獨提取出來作爲一分(fēn)支。這部分(fēn)内容在表現形式上(shàng)講求直接呈現具體信息，方便“無目标”型用(yòng)戶快速發現雲音(yīn)樂(yuè)的(de)優質内容。
2. 餘下“發現”裏的(de)内容則更針對“有(yǒu)目标”型用(yòng)戶，對于這類用(yòng)戶來說，入口設計(jì)方便他(tā)們縱覽所有(yǒu)内容模塊，從而快速定位自己所需。

這樣，不同用(yòng)戶都(dōu)可(kě)以快速切入主題，運營内容和(hé)社交元素都(dōu)得到(dào)了恰當的(de)展現，入口設計(jì)減少(shǎo)加載，保證首頁全景圖橫向浏覽過程中的(de)流暢體驗。

二．減少(shǎo)迷失感

全景圖式導航（Panorama）在體驗上(shàng)最大(dà)的(de)一個(gè)弊端是，你(nǐ)無法在當前屏看到(dào)全部導航，無法快速切換導航，隻能(néng)通過依次橫滑去到(dào)達。如(rú)何減少(shǎo)這種周而複始地(dì)橫向浏覽所帶來的(de)迷失感，讓用(yòng)戶更快找到(dào)自己需要的(de)東西(xī)？

除了精減導航個(gè)數之外，我們也(yě)重新規劃了導航優先級，以便更重要的(de)内容更容易在第一時間被發現：将“我的(de)音(yīn)樂(yuè)”作爲默認進入頁，因爲這是每個(gè)用(yòng)戶的(de)“家”。然後從“家”出發去探索，根據内容優先級，依次經過推薦、發現和(hé)朋友(yǒu)動态。在設計(jì)上(shàng)講究橫向浏覽過程中頁面布局的(de)變化，用(yòng)戶可(kě)通過視覺輔助确認自己當前所在模塊。

另外，旋律識别、搜索、設置等功能(néng)則被定義爲“常用(yòng)工(gōng)具”，常駐在底部應用(yòng)欄（App Bar)。這樣，用(yòng)戶處在首頁任何地(dì)方都(dōu)能(néng)一鍵調用(yòng)，無需記憶和(hé)尋找。

三.利用(yòng)平台特性，讓信息更扁平

歌單是雲音(yīn)樂(yuè)的(de)内容核心。産品功能(néng)叠代至今，歌單界面已經變得臃腫不堪，但(dàn)仍就有(yǒu)很多信息難以被發現。巴掌大(dà)的(de)手機界面，如(rú)何盡可(kě)能(néng)讓信息外顯，同時界面又(yòu)不失優雅？WP平台的(de)一些全新特性讓我們看到(dào)了機會(huì)。

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

四:扁平≠平庸

UI扁平化削弱了不同應用(yòng)之間的(de)辨識度，在WP上(shàng)似乎所有(yǒu)應用(yòng)都(dōu)長得差不多。我們一直堅信與衆不同的(de)視覺能(néng)賦予産品強烈的(de)個(gè)性，觸動人(rén)心。

播放(fàng)頁是整個(gè)軟件(jiàn)的(de)視覺中心也(yě)是情感中心。在視覺設計(jì)過程中，我們也(yě)嘗試了許多更爲扁平化的(de)方案以适應WP風格，但(dàn)始終覺得缺乏自己的(de)特色。最終在扁平化和(hé)差異化的(de)抉擇中，我們選擇保留标志性的(de)黑(hēi)膠唱盤和(hé)血槽進度條，同時在其它細節上(shàng)處理(lǐ)得更輕盈，營造一種沉浸式體驗。

信息回歸本質後，視覺亦然。視覺首先要符合其所處的(de)環境，其次才是自己的(de)性格。鮮豔的(de)大(dà)色塊隻适合首頁，内容頁則以黑(hēi)白灰爲主色調以突顯信息本身，但(dàn)是完全素色的(de)界面又(yòu)顯得死氣沉沉。通過反複嘗試紅色運用(yòng)在不同細節上(shàng)的(de)效果，最終達到(dào)紅色使界面更有(yǒu)個(gè)性的(de)同時不搶内容。

設計(jì)過程中對色彩、間距、字号的(de)精益求精，開(kāi)發過程中的(de)百餘次微調，對設計(jì)師(shī)和(hé)開(kāi)發都(dōu)是極大(dà)的(de)考驗。

總結：

“真正的(de)簡潔不是删繁就簡，而是在紛繁中建立秩序”。打造全功能(néng)版的(de)網易雲音(yīn)樂(yuè)WP端，無論是設計(jì)還是開(kāi)發都(dōu)經曆了從混亂到(dào)有(yǒu)序的(de)過程。

作爲雲音(yīn)樂(yuè)大(dà)家族最晚起步的(de)平台，Windows Phone平台小(xiǎo)衆，項目資源少(shǎo)，平台限制(zhì)多……盡管過程中遇到(dào)很多阻礙，我們仍然力求在這個(gè)用(yòng)戶數不多的(de)平台上(shàng)打造最好的(de)體驗,并爲之日夜奮戰。

改變意味著(zhe)風險，我們在WP1.0做了很多不一樣的(de)嘗試，同時也(yě)意識到(dào)這個(gè)版本還有(yǒu)很多事來不及做。WPer，讓你(nǐ)們久等了，你(nǐ)們的(de)支持與理(lǐ)解是我們不斷前進的(de)動力！

——寫在WP1.0上(shàng)線之際