以web端為例:我的交互設(shè)計細(xì)節(jié)手冊(上)
這篇文章所列舉的案例內(nèi)容都來源于我實際工作,有踩過的坑也有經(jīng)過思考提出的解決方案,在這里拿出來分享給大家,如果有不同意見可以在下方評論區(qū)進行留言,一起探討學(xué)習(xí)。
本文主要總結(jié)了我在實際交互設(shè)計中的所遇見的細(xì)節(jié)問題,來源于在繪制產(chǎn)品原型圖階段對于設(shè)計細(xì)節(jié)的思考,類屬于產(chǎn)品框架層的部分內(nèi)容,不涉及產(chǎn)品范圍層、結(jié)構(gòu)層的內(nèi)容。
一、loding加載頁面問題——柵欄式加載還是焦點式加載
1.1 柵欄式加載
展示頁面的主要模塊區(qū)域,模塊區(qū)域內(nèi)的信息內(nèi)容呈現(xiàn)出加載樣式。
1.2 焦點式加載
頁面加載時只顯示底圖,加載完畢后才出現(xiàn)展示信息,加載時的loding圖標(biāo)可能就是一個圓圈也可以是產(chǎn)品icon,但這種形式統(tǒng)一叫做焦點式加載。
對比而言,柵欄式加載更適合運用在區(qū)塊固定的頁面,而且是加載后需要有對應(yīng)的信息展示,如果沒有信息展示就會造成用戶的心理落差感,從而降低用戶體驗,像豆瓣app就大量運用柵欄式加載。而焦點式加載則運用范圍更大,無論區(qū)塊是否固定,都可以使用焦點式加載,但視覺體驗上不如柵欄式加載。
二、文字按鈕何時需要加下劃線
文字按鈕一般來講有兩種情況,帶下劃線或者沒有下劃線的(還有一種是鼠標(biāo)移上去時出現(xiàn)下滑線,這種也屬于前者),這兩種文字按鈕怎么運用呢?
2.1 帶下劃線的文字按鈕
這種按鈕點擊后的觸發(fā)效果應(yīng)該是跳轉(zhuǎn)到一個新的鏈接地址或者打開新的頁面,如點擊一個用戶名,跳轉(zhuǎn)到此用戶的用戶主頁。還有一種情況是,在一個長文本里將一個文字按鈕帶上下劃線,目的是明確的告知用戶這里是可以被點擊的。
2.2 普通文字按鈕
一般的文字按鈕是不帶下劃線的,點擊后的觸發(fā)效果可能是觸發(fā)彈窗,彈出浮層,切換tab等。
三、下拉按鈕和下拉復(fù)合按鈕的使用
如上圖左側(cè)為下拉按鈕,右側(cè)為下拉復(fù)合按鈕,左側(cè)下拉按鈕點擊展開下拉框,框中每個操作都是平級關(guān)系,而右側(cè)下拉復(fù)合按鈕其實是由一個主按鈕和一個下拉按鈕組成。主按鈕一般是主要操作,而下拉框內(nèi)的為次要操作,但主要操作和次要操作有著密切關(guān)系。例如下圖Facebook主頁網(wǎng)頁端的查看活動日志按鈕,次級操作就是時間線設(shè)置。
四、下拉導(dǎo)航中的一級導(dǎo)航是否可點擊問題
在正常操作過程中,帶有下拉次級導(dǎo)航的上一級導(dǎo)航是不能被點擊的,這里不能被點擊的意思是使用點擊操作不會觸發(fā)任何效果,如上圖顯示下拉次級導(dǎo)航是hover效果并不是點擊效果,這也與很多展開操作道理相同(如下圖)。
五、固定數(shù)量圖標(biāo)展示的兩種方式
如果在一個板塊或者一個條目中,有固定數(shù)目的icon需要展示,一般會有兩種方式。
?5.1 正負(fù)展示
正負(fù)展示(如下圖)即將所有可能出現(xiàn)的圖標(biāo)都展示出來,但是有數(shù)據(jù)/權(quán)限的圖標(biāo)高亮/全彩顯示,對于沒有數(shù)據(jù)/權(quán)限的圖標(biāo)置灰顯示。這種展示方式優(yōu)點是對于用戶來說可以很快的認(rèn)知數(shù)據(jù)/權(quán)限的有無,即使在數(shù)據(jù)/權(quán)限全空的情況下也不會影響視覺效果。
因此這種展示方式一般應(yīng)用在對于有固定區(qū)域展示這些圖標(biāo)的情況下,不會因為區(qū)域位置限制圖標(biāo)數(shù)量。特別是在所有圖標(biāo)都是沒有數(shù)據(jù)/權(quán)限的情況而影響板塊或者區(qū)域面積,星級評分就是正負(fù)展示的常見例子。
5.2 省略展示
省略顯示(如下圖)即有數(shù)據(jù)/權(quán)限的就顯示出來,反之則不顯示。這種展示方式優(yōu)點在于在合理利用有限的展示區(qū)域,缺點是在沒有數(shù)據(jù)/權(quán)限的場景下,需要改變展示區(qū)域或者使用其他方式說明無數(shù)據(jù)/權(quán)限情況。
六、必填情況下觸發(fā)驗證的方式
在頁面/彈窗中,所有有輸入項都是必填項,此時何時校驗輸入信息?
一般分為兩種情況:
- 一種是默認(rèn)情況下輸入項為空,則是先點擊保存/確定/下一步等觸發(fā)器然后觸發(fā)校驗操作,如下圖左側(cè)。
- 第二種,是默認(rèn)情況下輸入項不為空,例如編輯某些設(shè)置,則在輸入框失去焦點后即校驗,例如下圖右側(cè)所示,將原來有內(nèi)容的輸入框內(nèi)容清空,失去焦點后,立即校驗。
七、關(guān)于三種提示的不同使用場景
如上圖,目前主要有三種頁面提示,提示的內(nèi)容包括成功、警告和錯誤等反饋信息,這里以成功提示為例。
?7.1 全局提示
大家最常見的是全局提示,這種提示一般為操作反饋提示,具有及時性、輕量化的特點,一般運用在用戶在進行完某操作后,對操作結(jié)果的反饋。
7.2 系統(tǒng)通知提示
然后是系統(tǒng)通知提示,這種提示一般是由系統(tǒng)推送,具有不定時性,而且說明的文案一般較復(fù)雜,或者帶有指示用戶進行下一步操作的觸發(fā)點,一般運用在一些特殊情況的通知,比如:郵件發(fā)送出去后被退回和系統(tǒng)需要通知用戶的內(nèi)容等。
7.3 警告提示
最后是警告提示,這種提示使用場景一般是比較重要的提示,需要用戶閱讀確認(rèn),點擊關(guān)閉后才自動消失。這種提示可以不以全局浮窗的形式出現(xiàn),也可以單獨出現(xiàn)在頁面某個操作項附近,例如你對列表項進行修改,此時在列表項的最上方出現(xiàn)此提示。
八、“開關(guān)”控件的延展設(shè)計
通過調(diào)研我們發(fā)現(xiàn)其實很多用戶對于現(xiàn)在通用的開關(guān)按鈕的認(rèn)知狀態(tài)并不明確,特別是一些智能手機的初級用戶,他們點擊這個按鈕,并不清楚何時是打開何時是關(guān)閉。而這些人在使用實際生活中的開關(guān)時從來不會有這種困擾,那是因為實際生活中會有及時的指示反饋給他們,就像按一下開關(guān),燈立刻就亮,大腦立刻收到反饋:我把開關(guān)打開了!
所以,我們也可以利用這種生活反饋,在控件開關(guān)上加入這種反饋因素(如上圖),把開關(guān)打開,左邊的小燈即點亮,把開關(guān)關(guān)閉,小燈即關(guān)閉置灰。等于給這個操作增加一個及時反饋,提升了用戶體驗。
以上就是全部內(nèi)容,所列的具體案例都是來自于我實際工作中的所遇到的問題,希望能給你帶來一定的設(shè)計啟發(fā),也希望被當(dāng)下大量理論原則、炫酷動效的“浮躁”設(shè)計知識圍攻下,大家更加關(guān)注實際工作中設(shè)計上的細(xì)節(jié),這才是提升用戶體驗的關(guān)鍵!
本文案例參考了“Ant design”、“盈店通平臺”部分頁面和控件,如涉及侵權(quán)請聯(lián)系作者刪除。
作者:李小先生,公眾號:速食設(shè)計
本文由 @李小先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議
文字按鈕出現(xiàn)下滑線的原因是最根本原因難道不是要照顧到不能察覺到色差的人嗎?
學(xué)到了!
非常感謝您的分享!
有個疑問:Loading的這個詞是不小心打錯了吧?
是的 謝謝指正
最后按鈕的開關(guān)狀態(tài)其實已經(jīng)能反應(yīng)操作了吧,打開就亮色,關(guān)閉灰色。
點贊
催更啦
關(guān)于最后那個開關(guān)的,想請教下,這種開關(guān)樣式,從移動端移植到PC端是否合適,我一直傾向于使用復(fù)選框樣式。
我移植過,丑的不要不要的
不一定丑,Google網(wǎng)頁上已經(jīng)都開始用這種開關(guān)了,看多了感覺還行吧!畢竟手機上已經(jīng)普及了,看到網(wǎng)頁上這種開關(guān)也不會覺得奇怪。
明人不說暗話,我喜歡你的頭像
謝謝 ??
最近正好在糾結(jié)交互的問題,就看到這篇文章,開森,謝謝作者
希望對你有所幫助
期待下部
正在整理資料,請多關(guān)注下
我覺得這是一種習(xí)慣的問題,但是在設(shè)計上來說。個人覺得越簡單易懂的設(shè)計是最好的也是最難的。簡單中不失去創(chuàng)意,創(chuàng)意中不庸俗
設(shè)計的最終目的就是讓生活變簡單美好
這種通過自己實際工作經(jīng)驗得出的總結(jié)都是反復(fù)有過思考和討論,最具學(xué)習(xí)價值 ?? ,等待繼續(xù)更新哦
謝謝,一起進步
沙發(fā)~李小先生寫的好棒,學(xué)習(xí)了????
謝謝支持 ??
共同進步??