Win 10是一個全新的系統(tǒng),沒有完善的交互設(shè)計規(guī)范、也沒有足夠多的成熟的設(shè)計案例可供參考。這樣一個橫跨PC、平板和手機(jī)的應(yīng)用,原本在各個平臺的細(xì)分體驗應(yīng)該如何平衡和取舍呢?來看網(wǎng)易云音樂如何通過打磨設(shè)計細(xì)節(jié),拿到壓倒性的五星好評! 探索合適的導(dǎo)航框架 在導(dǎo)航設(shè)計上,UWP應(yīng)用就給我們出了道難題。不同于一般的信息展示類應(yīng)用,云音樂功能模塊多且邏輯層級復(fù)雜,并且在大小屏幕上都早已探索出了一套適合各自平臺的、截然不同的導(dǎo)航結(jié)構(gòu),無法單純的用響應(yīng)式設(shè)計去解決,或多或少得犧牲掉現(xiàn)有各自平臺的一些交互習(xí)慣。 最終,我們決定在PC和平板上采用類似PC端的結(jié)構(gòu),充分發(fā)揮大屏幕的優(yōu)勢,側(cè)邊欄承載了應(yīng)用的主要功能模塊,使信息最大程度的扁平化。同時融入Win10的設(shè)計語言,比如能自動或手動控制收起的漢堡菜單,使用戶獲得更佳的沉浸式體驗。 在靈活的鼠標(biāo)和笨拙的手指之間徘徊 在Win10設(shè)計過程中,我們爭議最大的地方莫過于,同一個應(yīng)用程序,既可以用鼠標(biāo)、又可以用手指作為輸入媒介。如何更好地設(shè)計交互,以致在使用這兩種截然不同的工具時都能獲得較好的操作體驗? 1、最頻繁使用的歌曲列表 對于音樂軟件中出鏡率最高的歌曲列表,如果你是用鼠標(biāo)的PC用戶,會習(xí)慣性的雙擊播放;如果你是用相對不夠靈巧的手指操作的平板或手機(jī)用戶,則會覺得單擊一下就應(yīng)該播放了吧!那UWP應(yīng)用該如何處理是好? 參考了Win10系統(tǒng)自帶的Groove音樂應(yīng)用,我們引入單擊歌曲呈選中狀態(tài),出現(xiàn)播放icon,點擊icon開始播放音樂,同時為PC用戶適配了雙擊播放。至此舍棄了觸屏界面的單擊播放交互,心里是相當(dāng)糾結(jié)的。 又比如列表中的歌手名和專輯名,是否應(yīng)該響應(yīng)點擊事件?可以看到在PC布局下,歌手名和專輯名都有足夠大的展示空間和熱區(qū),顯然是可以點擊直接去查看更方便啊。 但一旦響應(yīng)式到了手機(jī)布局下,這時候如果歌手和專輯再能響應(yīng)點擊的話,就會大大增加誤操作的幾率。
2、動態(tài)列表,請給我點反應(yīng) 動態(tài)列表中的一條動態(tài),在觸屏界面應(yīng)該可以響應(yīng)整個背景區(qū)域的點擊進(jìn)入動態(tài)詳情頁;但在鼠標(biāo)操作界面又覺得不應(yīng)該有如此大面積的熱區(qū),而是響應(yīng)某個局部區(qū)域點擊進(jìn)入動態(tài)詳情頁(不然的話鼠標(biāo)在動態(tài)頁面上移動就始終處于hover狀態(tài))。 手機(jī): PC: 無處安放的帳號消息和設(shè)置 自Win10頂部把標(biāo)題欄改成極窄的一條,高度也不能自定義以后,原本在PC上不假思索會安置在右上角的帳號消息和設(shè)置變得無家可歸了。我們能發(fā)現(xiàn)Win10的一些官方應(yīng)用通常將這些入口設(shè)計在漢堡菜單底部。 但運(yùn)用到云音樂上并不是很合適。因為底部緊挨著播放控制條,左下角操作過于密集,看上去也不是很美觀。 對于這些交互細(xì)節(jié),微軟官方也并未給出明確的處理方式,或者一舉兩得的系統(tǒng)控件。因此對于Win10通用平臺體驗和交互的解讀,設(shè)計過程中我們內(nèi)部也經(jīng)常存在爭論。是優(yōu)先PC體驗、還是并重手機(jī)體驗?是每一處都為各個平臺做交互細(xì)分處理,還是考慮到開發(fā)簡潔性而舍棄部分平臺的交互體驗? 之所以叫Beta版,是因為我們也在摸索。我們希望做出一個在各個平臺都有著流暢體驗,同時具備Win10特征的網(wǎng)易云音樂。 未來的Win10云音樂 云音樂Win10 Beta版上線后,壓倒性的五星好評給了我們極大的鼓勵,盡管還存在眾多的不完善之處,但我們看到了用戶的熱情、理解和期待!未來,我們將持續(xù)優(yōu)化Win10設(shè)計細(xì)節(jié),如更好的響應(yīng)式設(shè)計,同時不斷完善功能。敬請期待!