UI設計第一站 - UI設計師交流學習平臺

網易云音樂WIN10 BETA版的設計經驗總結

時間:2016-07-10 10:50:00來源:UEDC人氣:

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

探索合適的導航框架

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

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

wyy201607081

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

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

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

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

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

wyy201607082

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

wyy201607083

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

wyy201607084

2、動態列表,請給我點反應

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

手機:

wyy201607085

PC:

wyy201607086

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

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

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

wyy201607087

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

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

未來的Win10云音樂

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

原文鏈接

本文鏈接地址:http://www.5945172.live/article/634.html

非特殊說明,轉載請注明:本文轉自UI設計第一站

【特色推薦】

設計尺寸看這里 http://www.5945172.live/chicun/

找素材一站就夠 http://so.ui001.com/

UI設計網址導航 http://hao.ui001.com/

官方微博:@UI設計第一站發布干貨與設計資訊

官方微信:搜索公眾號名稱UI設計第一站或微信號:uidiyi關注我們

官方QQ群:群號59411183點擊自動加群,與2000名設計師交流設計,分享素材

建議:看到好的文章或素材,記得分享到微博等媒體,讓更多的朋友知道,加入收藏夾也可以方便日后查閱。

  • 贊一下又不會懷孕
  • 收藏好文章要收藏噢
分享到:

設計資訊

更多

設計教程

更多

素材下載

更多

閱讀排行

更多

服務中心

更多
山东黄金股票行情