項(xiàng)目背景

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

嶄新的平臺(tái)，改變的契機(jī)

與眾不同的WP風(fēng)格設(shè)計(jì)，決定了云音樂(lè)WP版在現(xiàn)有平臺(tái)上找不到任何可以直接移植的設(shè)計(jì)。不過(guò)，也正因?yàn)閺牧汩_(kāi)始，設(shè)計(jì)師得以放下“破壞用戶(hù)已有習(xí)慣”的思想包袱，重新審視這些年產(chǎn)品的痛，在WP上做一次大膽的改變。

化繁為簡(jiǎn),從不是件簡(jiǎn)單事。如何既保證功能體驗(yàn)完整，又體現(xiàn)WP平臺(tái)自身極簡(jiǎn)、輕量的特點(diǎn)，成了貫穿我們?cè)O(shè)計(jì)始終的思考。

一．更加簡(jiǎn)潔、高效的導(dǎo)航

為支撐起云音樂(lè)豐富的內(nèi)容，現(xiàn)有手機(jī)端均出現(xiàn)了原本PC/Web上才會(huì)出現(xiàn)的雙層甚至多層嵌套的導(dǎo)航結(jié)構(gòu)，以使信息更外顯。而WP極度扁平的導(dǎo)航結(jié)構(gòu)顯然無(wú)法消化云音樂(lè)日益擴(kuò)充的內(nèi)容。如果將目前層級(jí)結(jié)構(gòu)直接移植到WP，則“發(fā)現(xiàn)音樂(lè)”下的4個(gè)二級(jí)導(dǎo)航要變?yōu)槿肟?。這種設(shè)計(jì)用戶(hù)第一眼看不到任何有效信息，推薦等核心內(nèi)容的層級(jí)變深了，也不利于產(chǎn)品運(yùn)營(yíng)。

但若不考慮云音樂(lè)自身內(nèi)容的復(fù)雜性與可擴(kuò)展性，為了扁平而扁平，將所有內(nèi)容平鋪，表面上信息是外顯了，實(shí)際上獲取信息的效率反而降低：過(guò)多的橫滑選項(xiàng)讓人迷失，越靠后的內(nèi)容越難以到達(dá)。

因此內(nèi)容顯示的優(yōu)先級(jí)還是要有所取舍。扁平化的最終目的是讓用戶(hù)更快到達(dá)所需，任何風(fēng)格規(guī)范只是輔助達(dá)到目的的方法。為此，我們打破現(xiàn)有結(jié)構(gòu)，重新梳理了不同用戶(hù)類(lèi)型及其使用情境，最終將一級(jí)導(dǎo)航精減到4個(gè)：

1. 將原先“發(fā)現(xiàn)”里和推薦相關(guān)的內(nèi)容單獨(dú)提取出來(lái)作為一分支。這部分內(nèi)容在表現(xiàn)形式上講求直接呈現(xiàn)具體信息，方便“無(wú)目標(biāo)”型用戶(hù)快速發(fā)現(xiàn)云音樂(lè)的優(yōu)質(zhì)內(nèi)容。
2. 余下“發(fā)現(xiàn)”里的內(nèi)容則更針對(duì)“有目標(biāo)”型用戶(hù)，對(duì)于這類(lèi)用戶(hù)來(lái)說(shuō)，入口設(shè)計(jì)方便他們縱覽所有內(nèi)容模塊，從而快速定位自己所需。

這樣，不同用戶(hù)都可以快速切入主題，運(yùn)營(yíng)內(nèi)容和社交元素都得到了恰當(dāng)?shù)恼宫F(xiàn)，入口設(shè)計(jì)減少加載，保證首頁(yè)全景圖橫向?yàn)g覽過(guò)程中的流暢體驗(yàn)。

二．減少迷失感

全景圖式導(dǎo)航（Panorama）在體驗(yàn)上最大的一個(gè)弊端是，你無(wú)法在當(dāng)前屏看到全部導(dǎo)航，無(wú)法快速切換導(dǎo)航，只能通過(guò)依次橫滑去到達(dá)。如何減少這種周而復(fù)始地橫向?yàn)g覽所帶來(lái)的迷失感，讓用戶(hù)更快找到自己需要的東西？

除了精減導(dǎo)航個(gè)數(shù)之外，我們也重新規(guī)劃了導(dǎo)航優(yōu)先級(jí)，以便更重要的內(nèi)容更容易在第一時(shí)間被發(fā)現(xiàn)：將“我的音樂(lè)”作為默認(rèn)進(jìn)入頁(yè)，因?yàn)檫@是每個(gè)用戶(hù)的“家”。然后從“家”出發(fā)去探索，根據(jù)內(nèi)容優(yōu)先級(jí)，依次經(jīng)過(guò)推薦、發(fā)現(xiàn)和朋友動(dòng)態(tài)。在設(shè)計(jì)上講究橫向?yàn)g覽過(guò)程中頁(yè)面布局的變化，用戶(hù)可通過(guò)視覺(jué)輔助確認(rèn)自己當(dāng)前所在模塊。

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

三.利用平臺(tái)特性，讓信息更扁平

歌單是云音樂(lè)的內(nèi)容核心。產(chǎn)品功能迭代至今，歌單界面已經(jīng)變得臃腫不堪，但仍就有很多信息難以被發(fā)現(xiàn)。巴掌大的手機(jī)界面，如何盡可能讓信息外顯，同時(shí)界面又不失優(yōu)雅？WP平臺(tái)的一些全新特性讓我們看到了機(jī)會(huì)。

UI扁平化后，可點(diǎn)擊區(qū)域變得不可預(yù)期。在WP歌單頁(yè)，我們將信息與操作分離得更徹底，除了與歌曲列表關(guān)系緊密的播放、下載，其它所有針對(duì)歌單的操作都放置在應(yīng)用欄（App Bar)，不再讓用戶(hù)滿(mǎn)屏地探索，使交互更加可預(yù)期。同時(shí)，利用WP軸心圖（Pivot），將歌單的列表、介紹和評(píng)論并列呈現(xiàn)，無(wú)需跳轉(zhuǎn)，橫滑即可到達(dá)，使信息更外顯。這樣，歌單層次變得清晰，所有信息一目了然，所有功能一觸即達(dá)。

四:扁平≠平庸

UI扁平化削弱了不同應(yīng)用之間的辨識(shí)度，在WP上似乎所有應(yīng)用都長(zhǎng)得差不多。我們一直堅(jiān)信與眾不同的視覺(jué)能賦予產(chǎn)品強(qiáng)烈的個(gè)性，觸動(dòng)人心。

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

信息回歸本質(zhì)后，視覺(jué)亦然。視覺(jué)首先要符合其所處的環(huán)境，其次才是自己的性格。鮮艷的大色塊只適合首頁(yè)，內(nèi)容頁(yè)則以黑白灰為主色調(diào)以突顯信息本身，但是完全素色的界面又顯得死氣沉沉。通過(guò)反復(fù)嘗試紅色運(yùn)用在不同細(xì)節(jié)上的效果，最終達(dá)到紅色使界面更有個(gè)性的同時(shí)不搶內(nèi)容。

設(shè)計(jì)過(guò)程中對(duì)色彩、間距、字號(hào)的精益求精，開(kāi)發(fā)過(guò)程中的百余次微調(diào)，對(duì)設(shè)計(jì)師和開(kāi)發(fā)都是極大的考驗(yàn)。

總結(jié)：

“真正的簡(jiǎn)潔不是刪繁就簡(jiǎn)，而是在紛繁中建立秩序”。打造全功能版的網(wǎng)易云音樂(lè)WP端，無(wú)論是設(shè)計(jì)還是開(kāi)發(fā)都經(jīng)歷了從混亂到有序的過(guò)程。

作為云音樂(lè)大家族最晚起步的平臺(tái)，Windows Phone平臺(tái)小眾，項(xiàng)目資源少，平臺(tái)限制多……盡管過(guò)程中遇到很多阻礙，我們?nèi)匀涣η笤谶@個(gè)用戶(hù)數(shù)不多的平臺(tái)上打造最好的體驗(yàn),并為之日夜奮戰(zhàn)。

改變意味著風(fēng)險(xiǎn)，我們?cè)赪P1.0做了很多不一樣的嘗試，同時(shí)也意識(shí)到這個(gè)版本還有很多事來(lái)不及做。WPer，讓你們久等了，你們的支持與理解是我們不斷前進(jìn)的動(dòng)力！

——寫(xiě)在WP1.0上線(xiàn)之際