網(wǎng)易云音樂更新到了2.0长捧,相比之前增加不少功能模塊亿鲜,很多交互細節(jié)也做了調整痢站。
一枚钓、系統(tǒng)狀態(tài)可見原則?Visibility of system status
在網(wǎng)頁上用戶進行了操作,比如單擊瑟押,單擊hover搀捷,右鍵或是滾動,頁面控件都要給出相應的反應多望;同時嫩舟,還要給出這個操作的結果,比如等待加載怀偷、操作錯誤等等家厌。除此之外,用戶新進入一個頁面椎工,也需要給用戶以提示信息饭于,否則用戶會不知道是自己操作錯誤蜀踏,還是網(wǎng)絡錯誤還是APP本身出錯。
二掰吕、環(huán)境貼切原則 Match between system and the real world
1果覆、考慮到用戶都是普通人,因此文案盡量不使用術語殖熟,而是要契合用戶特征局待;盡可能從真實世界中提取設計元素,可以采用隱喻設計提示用戶功能菱属。不讓用戶形成認知障礙钳榨。
2、另外就是要契合用戶使用場景纽门,讓操作結果和用戶的心智模型一致薛耻。
下圖中,歌單名字都十分口語化赏陵,讓用戶能夠預期到其中的內容
三饼齿、用戶的控制性和自由度 ?User control and freedom?
這個原則是避免誤操作的原則,在Google docs中瘟滨,總是能夠讓你隨時撤銷你的操作,因為這是一款用戶不斷進行編輯的軟件能颁,因此出錯的可能性很大杂瘸。
在云音樂中,撤銷操作相對麻煩伙菊,比如你已經(jīng)開始下載一首歌了败玉,不能馬上撤銷下載,只能去“正在下載”頁面取消镜硕,這確實會給進行了誤操作的用戶帶來困擾运翼,但是由于它是一款操作并不頻繁的APP,因此我作為用戶這一點也可以接受(在使用中兴枯,我極少出現(xiàn)類似的誤操作)
四血淌、Consistency and standards 一致性和標準化
界面所有的元素,包括文字财剖,圖形悠夯,各小模塊的樣式都要又一致的語義。
比如標題顏色#000躺坟,字號14px沦补;副標題顏色#666,字號12px咪橙;歌詞字號12px夕膀,#999虚倒。每一個頁面的元素的樣式和它表達的語義一定要一致,不至于讓用戶造成誤解产舞。
五魂奥、防錯原則?Error prevention
1、通過頁面元素重排來避免錯誤庞瘸。比如當用戶沒有輸入密碼時捧弃,提交按鈕置灰。
2擦囊、通過二次提示來避免
六违霞、識別比記憶好?Recognition rather than recall
用戶輸入內容提交切換到下一個頁面后,在這個頁面最好顯示用戶在上個頁面輸入的信息瞬场。
下圖頁面記錄了我在上一個頁面輸入的手機號
七买鸽、靈活高效,能夠適合各種類型的用戶?Flexibility and efficiency of use
這一點網(wǎng)易云音樂做得非常好贯被。如果是新手用戶顯示如下眼五,有大量推薦音樂,可以讓用戶試聽彤灶;
如果切換到“我的音樂”模塊看幼,可以看到“從豆瓣、蝦米導入”幌陕;如果是已經(jīng)登錄的用戶打開APP诵姜,默認界面是我的歌單。
八搏熄、審美和簡約的設計(易掃原則)?Aesthetic and minimalist design
互聯(lián)網(wǎng)用戶在看頁面的時候幾乎是目光掃過棚唆,如果沒有能夠抓住用戶眼球的地方,那么這個頁面設計基本就失敗了心例。所以要突出重點信息宵凌,和周圍的信息形成良好的對比。
登錄按鈕是最明顯的止后。其實這里有設計不足之處瞎惫,用戶為完整輸入,應將按鈕只會译株,避免用戶誤點微饥,同時也避免了開發(fā)時的字符驗證等等。
九古戴、幫助用戶識別欠橘,診斷,并從錯誤中恢復?Help users recognise, diagnose, and recover from errors
網(wǎng)絡錯誤现恼、用戶操作錯誤時肃续,及時提示錯誤原因和可能的解決辦法黍檩。
十、幫助文檔?Help and documentation
人性化幫助始锚,最常見的是新手引導刽酱;但是網(wǎng)易云音樂最讓我感動的地方是,它們有運營人員來解決用戶的問題瞧捌。某次我向云音樂報錯棵里,竟然收到真人的回復,還和它對話了姐呐。
人性化的對話窗口殿怜,如下圖