項目背景

Windows Phone一直是(shi)各(ge)家公司缺少投入的(de)平臺，WP用戶(hu)不(bu)得不(bu)經(jing)常面(mian)對一個成熟的(de)APP到了WP上就變(bian)得各(ge)種(zhong)功(gong)能(neng)缺失、體驗(yan)支離(li)破碎，他們渴望(wang)應用軟件(jian)在體驗(yan)上能(neng)和其它平臺一樣受(shou)到同等(deng)重(zhong)(zhong)視(shi)，音樂(le)(le)APP也不(bu)例(li)外。作(zuo)為一款有誠意的(de)音樂(le)(le)產品(pin)，打(da)造名副其實“云”的(de)概念，網易(yi)云音樂(le)(le)當然(ran)不(bu)會忽視(shi)WP用戶(hu)的(de)呼聲(sheng)，歷經(jing)重(zhong)(zhong)重(zhong)(zhong)困(kun)難于近期重(zhong)(zhong)磅推出“功(gong)能(neng)無閹(yan)割”的(de)WP客(ke)戶(hu)端(duan)，還WP用戶(hu)一個完(wan)整(zheng)的(de)音樂(le)(le)體驗(yan)。

嶄新的平臺，改變的契機

與眾(zhong)不(bu)同的(de)WP風(feng)格(ge)設(she)計，決定了(le)云音(yin)樂WP版(ban)在(zai)現有(you)平臺上(shang)找不(bu)到任何可以直(zhi)接(jie)移植的(de)設(she)計。不(bu)過，也正因(yin)為從零開(kai)始，設(she)計師得(de)以放下“破壞(huai)用戶已有(you)習慣”的(de)思想包袱，重(zhong)新(xin)審視這些年產品的(de)痛，在(zai)WP上(shang)做一次(ci)大膽的(de)改變。

化繁為簡,從不是件簡單事(shi)。如(ru)何既(ji)保證功(gong)能體(ti)驗(yan)完整，又(you)體(ti)現WP平(ping)臺自身極簡、輕(qing)量的特(te)點，成了貫穿我們設計始終的思(si)考。

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

為支撐起(qi)云音(yin)(yin)樂豐富(fu)的內容，現有手(shou)機(ji)端均出(chu)現了(le)原本(ben)PC/Web上才(cai)會出(chu)現的雙層(ceng)甚至多層(ceng)嵌套的導航結(jie)構，以(yi)使信息(xi)更外顯。而WP極度扁平的導航結(jie)構顯然無法消化云音(yin)(yin)樂日益擴充的內容。如果(guo)將目(mu)前層(ceng)級結(jie)構直接(jie)移植(zhi)到WP，則“發現音(yin)(yin)樂”下(xia)的4個二(er)級導航要(yao)變(bian)為入口。這種設(she)計用戶第一眼看不(bu)(bu)到任何有效信息(xi)，推薦等(deng)核心內容的層(ceng)級變(bian)深了(le)，也不(bu)(bu)利于產品運營。

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

因此(ci)內容顯示的(de)(de)優先(xian)級(ji)還是(shi)要有所(suo)取舍。扁平化的(de)(de)最終目的(de)(de)是(shi)讓用(yong)(yong)戶更快到達(da)所(suo)需，任(ren)何(he)風格(ge)規范(fan)只(zhi)是(shi)輔助達(da)到目的(de)(de)的(de)(de)方法(fa)。為(wei)此(ci)，我(wo)們打破現有結構(gou)，重新梳理了不同用(yong)(yong)戶類型及(ji)其使用(yong)(yong)情境，最終將一(yi)級(ji)導航精減到4個：

1. 將原先“發現”里和推薦相關的內容單獨提取出來作為一分支。這部分內容在表現形式上講求直接呈現具體信息，方便“無目標”型用戶快速發現云音樂的優質內容。
2. 余下“發現”里的內容則更針對“有目標”型用戶，對于這類用戶來說，入口設計方便他們縱覽所有內容模塊，從而快速定位自己所需。

這樣(yang)，不(bu)同(tong)用戶都可以快速(su)切入主(zhu)題，運營內容(rong)和社交元(yuan)素都得到了恰(qia)當的(de)展現，入口設計(ji)減(jian)少加(jia)載，保證首頁全景圖(tu)橫向(xiang)瀏覽過程中(zhong)的(de)流暢體驗。

二．減少迷失感

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

除了精減導(dao)航個(ge)數之外，我們也重(zhong)新規劃(hua)了導(dao)航優(you)(you)先(xian)(xian)級，以便更重(zhong)要的內容更容易在(zai)(zai)第一(yi)時間被發(fa)(fa)現：將(jiang)“我的音(yin)樂”作(zuo)為默認(ren)進入頁，因為這是每個(ge)用戶的“家”。然后從“家”出(chu)發(fa)(fa)去探(tan)索，根據內容優(you)(you)先(xian)(xian)級，依次經過推薦、發(fa)(fa)現和(he)朋友動(dong)態(tai)。在(zai)(zai)設計上講(jiang)究橫(heng)向瀏覽(lan)過程(cheng)中頁面布局的變化，用戶可通(tong)過視覺輔助確(que)認(ren)自己當(dang)前(qian)所在(zai)(zai)模(mo)塊。

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

三.利用平臺特性，讓信息更扁平

歌單(dan)是云音樂的(de)內容核心(xin)。產品功能迭(die)代至今，歌單(dan)界面已經變得臃腫不堪，但仍就有很多信(xin)息難以(yi)被發現。巴(ba)掌大(da)的(de)手機(ji)界面，如何盡可能讓(rang)信(xin)息外顯，同時界面又不失(shi)優雅(ya)？WP平臺的(de)一些全(quan)新特性讓(rang)我們看到了機(ji)會。

UI扁(bian)平化后，可(ke)(ke)點擊區域變得(de)不可(ke)(ke)預期。在WP歌(ge)單(dan)(dan)頁，我們(men)將信息與操(cao)作(zuo)(zuo)分離得(de)更(geng)徹底，除了(le)與歌(ge)曲列表(biao)關系緊密(mi)的(de)(de)播放、下(xia)載，其(qi)它所有(you)針對歌(ge)單(dan)(dan)的(de)(de)操(cao)作(zuo)(zuo)都放置(zhi)在應用欄（App Bar)，不再讓用戶滿(man)屏地探索，使交(jiao)互更(geng)加可(ke)(ke)預期。同時(shi)，利(li)用WP軸心圖（Pivot），將歌(ge)單(dan)(dan)的(de)(de)列表(biao)、介紹和評(ping)論(lun)并(bing)列呈現，無需跳轉，橫滑(hua)即(ji)可(ke)(ke)到達(da)，使信息更(geng)外顯。這樣，歌(ge)單(dan)(dan)層次變得(de)清(qing)晰，所有(you)信息一(yi)目了(le)然，所有(you)功(gong)能(neng)一(yi)觸(chu)即(ji)達(da)。

四:扁平≠平庸

UI扁平化削弱了不(bu)同應用之(zhi)間(jian)的(de)(de)辨識(shi)度，在WP上(shang)似(si)乎所(suo)有應用都長得差不(bu)多。我們一直堅信與眾(zhong)不(bu)同的(de)(de)視(shi)覺能(neng)賦予產品強烈的(de)(de)個性，觸(chu)動人(ren)心。

播放(fang)頁是整個(ge)軟(ruan)件(jian)的視覺(jue)(jue)中心(xin)也是情感中心(xin)。在視覺(jue)(jue)設計(ji)過程中，我們(men)也嘗試了許(xu)多(duo)更為(wei)扁平化的方案以適應WP風(feng)格，但始終覺(jue)(jue)得缺乏(fa)自己的特色。最(zui)終在扁平化和(he)差異化的抉擇中，我們(men)選擇保(bao)留標志性(xing)的黑膠唱盤和(he)血槽進度(du)條(tiao)，同(tong)時在其(qi)它細節上處理得更輕盈，營造一種沉(chen)浸(jin)式(shi)體(ti)驗(yan)。

信(xin)息回(hui)歸本(ben)質后(hou)，視覺亦然。視覺首先要(yao)符合其所處的(de)環境，其次才(cai)是(shi)自己的(de)性格。鮮艷的(de)大(da)色(se)(se)(se)塊只適合首頁，內(nei)(nei)容頁則(ze)以(yi)(yi)黑白(bai)灰為(wei)主色(se)(se)(se)調以(yi)(yi)突顯信(xin)息本(ben)身(shen)，但是(shi)完全素(su)色(se)(se)(se)的(de)界面又(you)顯得死(si)氣沉沉。通過反復(fu)嘗試紅色(se)(se)(se)運(yun)用(yong)在不同細節上的(de)效果(guo)，最終(zhong)達(da)到紅色(se)(se)(se)使界面更(geng)有(you)個性的(de)同時不搶內(nei)(nei)容。

設計(ji)過程中對(dui)色彩、間(jian)距、字號的精(jing)(jing)益求(qiu)精(jing)(jing)，開發過程中的百余次微調，對(dui)設計(ji)師和開發都(dou)是極(ji)大(da)的考驗(yan)。

總結：

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

作為云音樂大家族最晚起步(bu)的平(ping)臺(tai)，Windows Phone平(ping)臺(tai)小眾，項(xiang)目資源少，平(ping)臺(tai)限制多(duo)……盡管過程中遇到很多(duo)阻礙，我們(men)仍然力求在這個用戶數不多(duo)的平(ping)臺(tai)上(shang)打造最好的體(ti)驗,并為之日夜奮戰。

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

——寫在WP1.0上線之際