網(wǎng)易云音樂更新到了2.0,相比之前增加不少功能模塊,很多交互細(xì)節(jié)也做了調(diào)整。
一、系統(tǒng)狀態(tài)可見原則?Visibility of system status
在網(wǎng)頁上用戶進(jìn)行了操作,比如單擊,單擊hover,右鍵或是滾動(dòng),頁面控件都要給出相應(yīng)的反應(yīng);同時(shí),還要給出這個(gè)操作的結(jié)果,比如等待加載、操作錯(cuò)誤等等。除此之外,用戶新進(jìn)入一個(gè)頁面,也需要給用戶以提示信息,否則用戶會(huì)不知道是自己操作錯(cuò)誤,還是網(wǎng)絡(luò)錯(cuò)誤還是APP本身出錯(cuò)。
二、環(huán)境貼切原則 Match between system and the real world
1、考慮到用戶都是普通人,因此文案盡量不使用術(shù)語,而是要契合用戶特征;盡可能從真實(shí)世界中提取設(shè)計(jì)元素,可以采用隱喻設(shè)計(jì)提示用戶功能。不讓用戶形成認(rèn)知障礙。
2、另外就是要契合用戶使用場(chǎng)景,讓操作結(jié)果和用戶的心智模型一致。
下圖中,歌單名字都十分口語化,讓用戶能夠預(yù)期到其中的內(nèi)容
三、用戶的控制性和自由度 ?User control and freedom?
這個(gè)原則是避免誤操作的原則,在Google docs中,總是能夠讓你隨時(shí)撤銷你的操作,因?yàn)檫@是一款用戶不斷進(jìn)行編輯的軟件,因此出錯(cuò)的可能性很大。
在云音樂中,撤銷操作相對(duì)麻煩,比如你已經(jīng)開始下載一首歌了,不能馬上撤銷下載,只能去“正在下載”頁面取消,這確實(shí)會(huì)給進(jìn)行了誤操作的用戶帶來困擾,但是由于它是一款操作并不頻繁的APP,因此我作為用戶這一點(diǎn)也可以接受(在使用中,我極少出現(xiàn)類似的誤操作)

四、Consistency and standards 一致性和標(biāo)準(zhǔn)化
界面所有的元素,包括文字,圖形,各小模塊的樣式都要又一致的語義。
比如標(biāo)題顏色#000,字號(hào)14px;副標(biāo)題顏色#666,字號(hào)12px;歌詞字號(hào)12px,#999。每一個(gè)頁面的元素的樣式和它表達(dá)的語義一定要一致,不至于讓用戶造成誤解。

五、防錯(cuò)原則?Error prevention
1、通過頁面元素重排來避免錯(cuò)誤。比如當(dāng)用戶沒有輸入密碼時(shí),提交按鈕置灰。
2、通過二次提示來避免
六、識(shí)別比記憶好?Recognition rather than recall
用戶輸入內(nèi)容提交切換到下一個(gè)頁面后,在這個(gè)頁面最好顯示用戶在上個(gè)頁面輸入的信息。
下圖頁面記錄了我在上一個(gè)頁面輸入的手機(jī)號(hào)
七、靈活高效,能夠適合各種類型的用戶?Flexibility and efficiency of use
這一點(diǎn)網(wǎng)易云音樂做得非常好。如果是新手用戶顯示如下,有大量推薦音樂,可以讓用戶試聽;
如果切換到“我的音樂”模塊,可以看到“從豆瓣、蝦米導(dǎo)入”;如果是已經(jīng)登錄的用戶打開APP,默認(rèn)界面是我的歌單。

八、審美和簡(jiǎn)約的設(shè)計(jì)(易掃原則)?Aesthetic and minimalist design
互聯(lián)網(wǎng)用戶在看頁面的時(shí)候幾乎是目光掃過,如果沒有能夠抓住用戶眼球的地方,那么這個(gè)頁面設(shè)計(jì)基本就失敗了。所以要突出重點(diǎn)信息,和周圍的信息形成良好的對(duì)比。
登錄按鈕是最明顯的。其實(shí)這里有設(shè)計(jì)不足之處,用戶為完整輸入,應(yīng)將按鈕只會(huì),避免用戶誤點(diǎn),同時(shí)也避免了開發(fā)時(shí)的字符驗(yàn)證等等。
九、幫助用戶識(shí)別,診斷,并從錯(cuò)誤中恢復(fù)?Help users recognise, diagnose, and recover from errors
網(wǎng)絡(luò)錯(cuò)誤、用戶操作錯(cuò)誤時(shí),及時(shí)提示錯(cuò)誤原因和可能的解決辦法。
十、幫助文檔?Help and documentation
人性化幫助,最常見的是新手引導(dǎo);但是網(wǎng)易云音樂最讓我感動(dòng)的地方是,它們有運(yùn)營人員來解決用戶的問題。某次我向云音樂報(bào)錯(cuò),竟然收到真人的回復(fù),還和它對(duì)話了。
人性化的對(duì)話窗口,如下圖