交互設(shè)計(jì)小技巧合集

　　在經(jīng)典的尼爾森十大啟發(fā)式當(dāng)中，「系統(tǒng)狀態(tài)可見(jiàn)性」可以說(shuō)是如今交互設(shè)計(jì)領(lǐng)域當(dāng)中，最為重要的原則之一。通過(guò)向用戶展現(xiàn)當(dāng)前的狀態(tài)，讓用戶擁有對(duì)系統(tǒng)的控制權(quán)，建立用戶對(duì)于產(chǎn)品的信任感，這也是這種設(shè)計(jì)啟發(fā)式的最重要的價(jià)值之一。
 

　　但是，想要做到可靠、易用，系統(tǒng)狀態(tài)展現(xiàn)的技巧是很講究的。今天AAA教育郭老師就帶大家了解一下交互設(shè)計(jì)小技巧，結(jié)合了不少實(shí)用的案例，希望對(duì)你有所幫助。
 

　　一、
 

　　展示用戶位置、進(jìn)度的視覺(jué)反饋
 

　　1、讓用戶知道自己在哪
 

　　沒(méi)有人會(huì)喜歡迷失方向，但是無(wú)論在現(xiàn)實(shí)生活還是在數(shù)字領(lǐng)域當(dāng)中，這種情況都會(huì)發(fā)生。讓用戶知道他們?cè)谀睦锸莿?chuàng)建良好導(dǎo)航體驗(yàn)的關(guān)鍵。應(yīng)用程序和網(wǎng)站都應(yīng)該凸顯當(dāng)前的導(dǎo)航選項(xiàng)，幫助用戶了解他們所在的位置。

 

　　Google 的底部導(dǎo)航欄設(shè)計(jì)
 

　　2、要經(jīng)過(guò)多少步驟來(lái)完成任務(wù)
 

　　這也是一個(gè)非?；镜牟僮鳎ㄟ^(guò)展現(xiàn)步驟數(shù)量，幫助用戶來(lái)預(yù)估完成這個(gè)過(guò)程所需要的時(shí)間。

 

　　Selecto 的調(diào)查問(wèn)卷的設(shè)計(jì)
 

　　二、
 

　　輔助用戶交互的視覺(jué)反饋
 

　　數(shù)字界面畢竟不是現(xiàn)實(shí)世界中的真實(shí)硬件機(jī)構(gòu)，用戶更多只能借助交互過(guò)程中的即時(shí)視覺(jué)反饋來(lái)確定是否完成了操作，即時(shí)的視覺(jué)反饋因此顯得非常重要。即時(shí)的視覺(jué)反饋?zhàn)層脩舻牟僮鞯玫搅艘曈X(jué)上的「認(rèn)可」，從而強(qiáng)化了「確信感」，這樣一來(lái)一回的確認(rèn)可以避免錯(cuò)誤的發(fā)生，比如可以避免用戶因?yàn)椤父杏X(jué)沒(méi)有點(diǎn)下去」而反復(fù)點(diǎn)擊。
 

　　這種視覺(jué)反饋的設(shè)計(jì)，最常見(jiàn)的范例就是點(diǎn)擊按鈕按下的微交互動(dòng)畫(huà)，它告知用戶「系統(tǒng)已經(jīng)捕捉到點(diǎn)擊交互了」。

 

　　AliAli 所設(shè)計(jì)的懸停點(diǎn)擊動(dòng)畫(huà)
 

　　但是在某些狀況下，按鈕的視覺(jué)反饋還有很多不同的呈現(xiàn)形式，有更多可見(jiàn)的、可理解的新形態(tài)，可以在原有的基礎(chǔ)上探索更多可能性，比如下面的
 

　　1、單擊點(diǎn)贊按鈕

 

　　2、開(kāi)關(guān)按鈕
 

　　這個(gè)開(kāi)關(guān)按鈕不僅有點(diǎn)擊動(dòng)效，而且色彩和按鈕標(biāo)識(shí)也隨之改變，更為清晰地表明狀態(tài)，甚至兼顧到了視覺(jué)障礙用戶。

 

　　3、書(shū)簽按鈕微交互
 

　　這個(gè)書(shū)簽按鈕通過(guò)色彩的虛實(shí)變化來(lái)呈現(xiàn)書(shū)簽已添加的狀態(tài)，頗為巧妙。

 

　　三、
 

　　呈現(xiàn)系統(tǒng)狀態(tài)的視覺(jué)反饋
 

　　1、系統(tǒng)正忙于什么事情
 

　　當(dāng)系統(tǒng)正在加載，正在執(zhí)行，正在運(yùn)行的過(guò)程中，通過(guò)動(dòng)效來(lái)告知用戶系統(tǒng)并沒(méi)有停止，而是正忙于執(zhí)行某件事情，是避免用戶誤解的手段。在用戶等待的過(guò)程中，通常會(huì)使用無(wú)限加載的動(dòng)效(一般使用在低于10s的操作中)：

 

　　對(duì)于超過(guò)10s的更長(zhǎng)的執(zhí)行過(guò)程，無(wú)限加載的動(dòng)效會(huì)顯得令人沮喪，這個(gè)時(shí)候使用進(jìn)度條會(huì)更好：

 

　　這些視覺(jué)反饋很大程度上降低了系統(tǒng)給人的不確定感。
 

　　對(duì)于移動(dòng)端應(yīng)用，在初始加載階段所使用的啟動(dòng)動(dòng)畫(huà)界面，是否精心設(shè)計(jì)，決定了用戶對(duì)于整個(gè)產(chǎn)品的第一印象，優(yōu)秀的初始加載動(dòng)畫(huà)能夠?qū)⒂脩舻淖⒁饬慕乖甑牡却薪夥懦鰜?lái)。

 

　　2、內(nèi)容加載
 

　　當(dāng)用戶需要時(shí)間來(lái)加載內(nèi)容的時(shí)候，建議使用一種特殊的的容器「界面骨架」來(lái)展現(xiàn)。
 

　　這種臨時(shí)的內(nèi)容容器不僅能夠幫助用戶快速地了解界面的整體框架，構(gòu)建用戶預(yù)期，并且能夠在后臺(tái)快速地加載數(shù)據(jù)，漸進(jìn)式地幫用戶獲得信息。

 

　　這種設(shè)計(jì)方式對(duì)于移動(dòng)端和桌面端的設(shè)計(jì)同樣適用：

 

　　4、
 

　　觸發(fā)事件
 

　　1、通知和提醒
 

　　有效的通知和提醒，能幫用戶意識(shí)到有新的事情正在發(fā)生。在多數(shù)時(shí)候，我們建議設(shè)計(jì)師使用微妙的動(dòng)畫(huà)來(lái)進(jìn)行通知，因?yàn)閯?dòng)畫(huà)效果會(huì)自然地吸引用戶的注意力，人類的雙眼的動(dòng)態(tài)視覺(jué)其實(shí)是非常強(qiáng)的。

 

　　2、提示用戶采取行動(dòng)
 

　　在很多情況下，用戶界面中會(huì)有很多地方會(huì)需要用戶提交信息。比如，需要用戶提交表單，或者用戶創(chuàng)建了一個(gè)密碼，但是在復(fù)雜度上不足需要修正，或者填寫(xiě)郵箱來(lái)訂閱信息的時(shí)候，郵箱格式出錯(cuò)，等等。使用適當(dāng)?shù)囊曈X(jué)反饋總能夠更加有效地將問(wèn)題告知用戶。

 

　　5、
 

　　結(jié)語(yǔ)
 

　　讓用戶有掌控感，就是為用戶創(chuàng)造更好的體驗(yàn)。在很多設(shè)計(jì)方案中，視覺(jué)反饋會(huì)因?yàn)榉N種原因被削弱了，甚至被忽略了。但是當(dāng)用戶在和 UI 進(jìn)行交互的時(shí)候，期望度和可動(dòng)性其實(shí)是高度依賴于這些動(dòng)效和微交互，而這正是設(shè)計(jì)師需要設(shè)計(jì)出優(yōu)秀視覺(jué)反饋效果的原因所在。
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。