Win 10是一個全新的系統(tǒng)，沒有完善的交互設計規(guī)范、也沒有足夠多的成熟的設計案例可供參考。這樣一個橫跨PC、平板和手機的應用，原本在各個平臺的細分體驗應該如何平衡和取舍呢？來看網(wǎng)易云音樂如何通過打磨設計細節(jié)，拿到壓倒性的五星好評！

探索合適的導航框架

在導航設計上，UWP應用就給我們出了道難題。不同于一般的信息展示類應用，云音樂功能模塊多且邏輯層級復雜，并且在大小屏幕上都早已探索出了一套適合各自平臺的、截然不同的導航結(jié)構(gòu)，無法單純的用響應式設計去解決，或多或少得犧牲掉現(xiàn)有各自平臺的一些交互習慣。

最終，我們決定在PC和平板上采用類似PC端的結(jié)構(gòu)，充分發(fā)揮大屏幕的優(yōu)勢，側(cè)邊欄承載了應用的主要功能模塊，使信息最大程度的扁平化。同時融入Win10的設計語言，比如能自動或手動控制收起的漢堡菜單，使用戶獲得更佳的沉浸式體驗。

在靈活的鼠標和笨拙的手指之間徘徊

在Win10設計過程中，我們爭議最大的地方莫過于，同一個應用程序，既可以用鼠標、又可以用手指作為輸入媒介。如何更好地設計交互，以致在使用這兩種截然不同的工具時都能獲得較好的操作體驗？

1、最頻繁使用的歌曲列表

對于音樂軟件中出鏡率最高的歌曲列表，如果你是用鼠標的PC用戶，會習慣性的雙擊播放；如果你是用相對不夠靈巧的手指操作的平板或手機用戶，則會覺得單擊一下就應該播放了吧！那UWP應用該如何處理是好？

參考了Win10系統(tǒng)自帶的Groove音樂應用，我們引入單擊歌曲呈選中狀態(tài)，出現(xiàn)播放icon，點擊icon開始播放音樂，同時為PC用戶適配了雙擊播放。至此舍棄了觸屏界面的單擊播放交互，心里是相當糾結(jié)的。

又比如列表中的歌手名和專輯名，是否應該響應點擊事件？可以看到在PC布局下，歌手名和專輯名都有足夠大的展示空間和熱區(qū)，顯然是可以點擊直接去查看更方便啊。

但一旦響應式到了手機布局下，這時候如果歌手和專輯再能響應點擊的話，就會大大增加誤操作的幾率。

2、動態(tài)列表，請給我點反應

動態(tài)列表中的一條動態(tài)，在觸屏界面應該可以響應整個背景區(qū)域的點擊進入動態(tài)詳情頁；但在鼠標操作界面又覺得不應該有如此大面積的熱區(qū)，而是響應某個局部區(qū)域點擊進入動態(tài)詳情頁（不然的話鼠標在動態(tài)頁面上移動就始終處于hover狀態(tài)）。

手機：

PC：

無處安放的帳號消息和設置

自Win10頂部把標題欄改成極窄的一條，高度也不能自定義以后，原本在PC上不假思索會安置在右上角的帳號消息和設置變得無家可歸了。我們能發(fā)現(xiàn)Win10的一些官方應用通常將這些入口設計在漢堡菜單底部。

但運用到云音樂上并不是很合適。因為底部緊挨著播放控制條，左下角操作過于密集，看上去也不是很美觀。

對于這些交互細節(jié)，微軟官方也并未給出明確的處理方式，或者一舉兩得的系統(tǒng)控件。因此對于Win10通用平臺體驗和交互的解讀，設計過程中我們內(nèi)部也經(jīng)常存在爭論。是優(yōu)先PC體驗、還是并重手機體驗？是每一處都為各個平臺做交互細分處理，還是考慮到開發(fā)簡潔性而舍棄部分平臺的交互體驗？

之所以叫Beta版，是因為我們也在摸索。我們希望做出一個在各個平臺都有著流暢體驗，同時具備Win10特征的網(wǎng)易云音樂。

未來的Win10云音樂

云音樂Win10 Beta版上線后，壓倒性的五星好評給了我們極大的鼓勵，盡管還存在眾多的不完善之處，但我們看到了用戶的熱情、理解和期待！未來，我們將持續(xù)優(yōu)化Win10設計細節(jié)，如更好的響應式設計，同時不斷完善功能。敬請期待！

「人氣過萬的優(yōu)秀實戰(zhàn)案例教程」

大眾點評：《大眾點評智慧餐廳LOGO設計全過程總結(jié)》

紅包預熱HTML 5：《聊聊刷一刷紅包預熱HTML 5背后的設計過程》

火影游戲HTML 5：《揭秘騰訊火影游戲HTML 5背后的設計故事》

原文地址：uedc.163

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com