這篇文章所列舉的案例內(nèi)容都來(lái)源于我實(shí)際工作，有踩過(guò)的坑也有經(jīng)過(guò)思考提出的解決方案，在這里拿出來(lái)分享給大家，如果有不同意見(jiàn)可以在下方評(píng)論區(qū)進(jìn)行留言，一起探討學(xué)習(xí)。

本文主要總結(jié)了我在實(shí)際交互設(shè)計(jì)中的所遇見(jiàn)的細(xì)節(jié)問(wèn)題，來(lái)源于在繪制產(chǎn)品原型圖階段對(duì)于設(shè)計(jì)細(xì)節(jié)的思考，類屬于產(chǎn)品框架層的部分內(nèi)容，不涉及產(chǎn)品范圍層、結(jié)構(gòu)層的內(nèi)容。

一、loding加載頁(yè)面問(wèn)題——柵欄式加載還是焦點(diǎn)式加載

1.1 柵欄式加載

展示頁(yè)面的主要模塊區(qū)域，模塊區(qū)域內(nèi)的信息內(nèi)容呈現(xiàn)出加載樣式。

1.2 焦點(diǎn)式加載

頁(yè)面加載時(shí)只顯示底圖，加載完畢后才出現(xiàn)展示信息，加載時(shí)的loding圖標(biāo)可能就是一個(gè)圓圈也可以是產(chǎn)品icon，但這種形式統(tǒng)一叫做焦點(diǎn)式加載。

對(duì)比而言，柵欄式加載更適合運(yùn)用在區(qū)塊固定的頁(yè)面，而且是加載后需要有對(duì)應(yīng)的信息展示，如果沒(méi)有信息展示就會(huì)造成用戶的心理落差感，從而降低用戶體驗(yàn)，像豆瓣app就大量運(yùn)用柵欄式加載。而焦點(diǎn)式加載則運(yùn)用范圍更大，無(wú)論區(qū)塊是否固定，都可以使用焦點(diǎn)式加載，但視覺(jué)體驗(yàn)上不如柵欄式加載。

二、文字按鈕何時(shí)需要加下劃線

文字按鈕一般來(lái)講有兩種情況，帶下劃線或者沒(méi)有下劃線的（還有一種是鼠標(biāo)移上去時(shí)出現(xiàn)下滑線，這種也屬于前者），這兩種文字按鈕怎么運(yùn)用呢？

2.1 帶下劃線的文字按鈕

這種按鈕點(diǎn)擊后的觸發(fā)效果應(yīng)該是跳轉(zhuǎn)到一個(gè)新的鏈接地址或者打開新的頁(yè)面，如點(diǎn)擊一個(gè)用戶名，跳轉(zhuǎn)到此用戶的用戶主頁(yè)。還有一種情況是，在一個(gè)長(zhǎng)文本里將一個(gè)文字按鈕帶上下劃線，目的是明確的告知用戶這里是可以被點(diǎn)擊的。

2.2 普通文字按鈕

一般的文字按鈕是不帶下劃線的，點(diǎn)擊后的觸發(fā)效果可能是觸發(fā)彈窗，彈出浮層，切換tab等。

三、下拉按鈕和下拉復(fù)合按鈕的使用

如上圖左側(cè)為下拉按鈕，右側(cè)為下拉復(fù)合按鈕，左側(cè)下拉按鈕點(diǎn)擊展開下拉框，框中每個(gè)操作都是平級(jí)關(guān)系，而右側(cè)下拉復(fù)合按鈕其實(shí)是由一個(gè)主按鈕和一個(gè)下拉按鈕組成。主按鈕一般是主要操作，而下拉框內(nèi)的為次要操作，但主要操作和次要操作有著密切關(guān)系。例如下圖Facebook主頁(yè)網(wǎng)頁(yè)端的查看活動(dòng)日志按鈕，次級(jí)操作就是時(shí)間線設(shè)置。

四、下拉導(dǎo)航中的一級(jí)導(dǎo)航是否可點(diǎn)擊問(wèn)題

在正常操作過(guò)程中，帶有下拉次級(jí)導(dǎo)航的上一級(jí)導(dǎo)航是不能被點(diǎn)擊的，這里不能被點(diǎn)擊的意思是使用點(diǎn)擊操作不會(huì)觸發(fā)任何效果，如上圖顯示下拉次級(jí)導(dǎo)航是hover效果并不是點(diǎn)擊效果，這也與很多展開操作道理相同（如下圖）。

五、固定數(shù)量圖標(biāo)展示的兩種方式

如果在一個(gè)板塊或者一個(gè)條目中，有固定數(shù)目的icon需要展示，一般會(huì)有兩種方式。

?5.1 正負(fù)展示

正負(fù)展示（如下圖）即將所有可能出現(xiàn)的圖標(biāo)都展示出來(lái)，但是有數(shù)據(jù)/權(quán)限的圖標(biāo)高亮/全彩顯示，對(duì)于沒(méi)有數(shù)據(jù)/權(quán)限的圖標(biāo)置灰顯示。這種展示方式優(yōu)點(diǎn)是對(duì)于用戶來(lái)說(shuō)可以很快的認(rèn)知數(shù)據(jù)/權(quán)限的有無(wú)，即使在數(shù)據(jù)/權(quán)限全空的情況下也不會(huì)影響視覺(jué)效果。

因此這種展示方式一般應(yīng)用在對(duì)于有固定區(qū)域展示這些圖標(biāo)的情況下，不會(huì)因?yàn)閰^(qū)域位置限制圖標(biāo)數(shù)量。特別是在所有圖標(biāo)都是沒(méi)有數(shù)據(jù)/權(quán)限的情況而影響板塊或者區(qū)域面積，星級(jí)評(píng)分就是正負(fù)展示的常見(jiàn)例子。

5.2 省略展示

省略顯示（如下圖）即有數(shù)據(jù)/權(quán)限的就顯示出來(lái)，反之則不顯示。這種展示方式優(yōu)點(diǎn)在于在合理利用有限的展示區(qū)域，缺點(diǎn)是在沒(méi)有數(shù)據(jù)/權(quán)限的場(chǎng)景下，需要改變展示區(qū)域或者使用其他方式說(shuō)明無(wú)數(shù)據(jù)/權(quán)限情況。

六、必填情況下觸發(fā)驗(yàn)證的方式

在頁(yè)面/彈窗中，所有有輸入項(xiàng)都是必填項(xiàng)，此時(shí)何時(shí)校驗(yàn)輸入信息？

一般分為兩種情況：

• 一種是默認(rèn)情況下輸入項(xiàng)為空，則是先點(diǎn)擊保存/確定/下一步等觸發(fā)器然后觸發(fā)校驗(yàn)操作，如下圖左側(cè)。
• 第二種，是默認(rèn)情況下輸入項(xiàng)不為空，例如編輯某些設(shè)置，則在輸入框失去焦點(diǎn)后即校驗(yàn)，例如下圖右側(cè)所示，將原來(lái)有內(nèi)容的輸入框內(nèi)容清空，失去焦點(diǎn)后，立即校驗(yàn)。

七、關(guān)于三種提示的不同使用場(chǎng)景

如上圖，目前主要有三種頁(yè)面提示，提示的內(nèi)容包括成功、警告和錯(cuò)誤等反饋信息，這里以成功提示為例。

?7.1 全局提示

大家最常見(jiàn)的是全局提示，這種提示一般為操作反饋提示，具有及時(shí)性、輕量化的特點(diǎn)，一般運(yùn)用在用戶在進(jìn)行完某操作后，對(duì)操作結(jié)果的反饋。

7.2 系統(tǒng)通知提示

然后是系統(tǒng)通知提示，這種提示一般是由系統(tǒng)推送，具有不定時(shí)性，而且說(shuō)明的文案一般較復(fù)雜，或者帶有指示用戶進(jìn)行下一步操作的觸發(fā)點(diǎn)，一般運(yùn)用在一些特殊情況的通知，比如：郵件發(fā)送出去后被退回和系統(tǒng)需要通知用戶的內(nèi)容等。

7.3 警告提示

最后是警告提示，這種提示使用場(chǎng)景一般是比較重要的提示，需要用戶閱讀確認(rèn)，點(diǎn)擊關(guān)閉后才自動(dòng)消失。這種提示可以不以全局浮窗的形式出現(xiàn)，也可以單獨(dú)出現(xiàn)在頁(yè)面某個(gè)操作項(xiàng)附近，例如你對(duì)列表項(xiàng)進(jìn)行修改，此時(shí)在列表項(xiàng)的最上方出現(xiàn)此提示。

八、“開關(guān)”控件的延展設(shè)計(jì)

通過(guò)調(diào)研我們發(fā)現(xiàn)其實(shí)很多用戶對(duì)于現(xiàn)在通用的開關(guān)按鈕的認(rèn)知狀態(tài)并不明確，特別是一些智能手機(jī)的初級(jí)用戶，他們點(diǎn)擊這個(gè)按鈕，并不清楚何時(shí)是打開何時(shí)是關(guān)閉。而這些人在使用實(shí)際生活中的開關(guān)時(shí)從來(lái)不會(huì)有這種困擾，那是因?yàn)閷?shí)際生活中會(huì)有及時(shí)的指示反饋給他們，就像按一下開關(guān)，燈立刻就亮，大腦立刻收到反饋：我把開關(guān)打開了！

所以，我們也可以利用這種生活反饋，在控件開關(guān)上加入這種反饋因素（如上圖），把開關(guān)打開，左邊的小燈即點(diǎn)亮，把開關(guān)關(guān)閉，小燈即關(guān)閉置灰。等于給這個(gè)操作增加一個(gè)及時(shí)反饋，提升了用戶體驗(yàn)。

以上就是全部?jī)?nèi)容，所列的具體案例都是來(lái)自于我實(shí)際工作中的所遇到的問(wèn)題，希望能給你帶來(lái)一定的設(shè)計(jì)啟發(fā)，也希望被當(dāng)下大量理論原則、炫酷動(dòng)效的“浮躁”設(shè)計(jì)知識(shí)圍攻下，大家更加關(guān)注實(shí)際工作中設(shè)計(jì)上的細(xì)節(jié)，這才是提升用戶體驗(yàn)的關(guān)鍵！

本文案例參考了“Ant design”、“盈店通平臺(tái)”部分頁(yè)面和控件，如涉及侵權(quán)請(qǐng)聯(lián)系作者刪除。

作者：李小先生，公眾號(hào)：速食設(shè)計(jì)

本文由 @李小先生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議