大家好,我是Clippp。今天為大家?guī)?lái)的文章是「鄰近性」原則。通過(guò)鄰近性我們可以提前預(yù)測(cè)用戶的主要行為和目標(biāo),并讓產(chǎn)品更靈活地響應(yīng)~
鄰近可以理解為“在空間、時(shí)間或關(guān)系上的接近”。舉個(gè)?,當(dāng)我們打電話時(shí),把手機(jī)靠近耳朵屏幕會(huì)自動(dòng)熄滅,這種反饋就考慮了鄰近性。
利用鄰近性,我們可以觀察用戶的操作或觸發(fā)路徑,使產(chǎn)品更快作出響應(yīng)。
一、產(chǎn)品可用性體驗(yàn)
在Google Maps中,導(dǎo)航視圖通過(guò)環(huán)境光傳感器自動(dòng)調(diào)整深色或淺色方案。
每當(dāng)用戶在弱光環(huán)境下與地圖交互時(shí),地圖頁(yè)會(huì)自動(dòng)切換成暗模式以防止眼睛疲勞,為用戶提供更好的可用性。
我們可以在應(yīng)用和網(wǎng)站中加入鄰近性原則,以提供更豐富的可用性體驗(yàn)。
二、鄰近性在產(chǎn)品中的作用
提高效率
產(chǎn)品/應(yīng)用與用戶之間的交互應(yīng)該快速進(jìn)行,不需要用戶等待。鄰近性有助于預(yù)測(cè)用戶的行為,使應(yīng)用提前或及時(shí)做出響應(yīng)。
在上圖中,當(dāng)光標(biāo)快速移動(dòng)到右上角時(shí)產(chǎn)品可以預(yù)測(cè)用戶下一步想打開表單,所以不需要點(diǎn)擊按鈕就能打開表單,節(jié)省用戶的時(shí)間和精力。
強(qiáng)化反饋
持續(xù)的反饋有助于用戶了解他們?cè)趫?zhí)行操作時(shí)成功與否。鄰近性為用戶提供實(shí)時(shí)反饋,輔助用戶操作。
填寫表單時(shí)如果用戶沒(méi)填完就準(zhǔn)備點(diǎn)擊按鈕,表單會(huì)產(chǎn)生即時(shí)的視覺(jué)反饋,提示用戶完成全部操作。
直觀行為
當(dāng)用戶習(xí)慣了某類操作后,在很多場(chǎng)景下可以不用思考就能完成產(chǎn)品的使用。
在上圖中當(dāng)用戶靠近右側(cè)的菜單按鈕時(shí),菜單選項(xiàng)卡會(huì)逐漸滑入,在用戶點(diǎn)擊按鈕或交互前引導(dǎo)用戶了解信息。
三、觸發(fā)和反饋
當(dāng)用戶打開應(yīng)用或刪除圖像時(shí),產(chǎn)品會(huì)通過(guò)改變狀態(tài)或執(zhí)行操作等方式做出響應(yīng),形成一個(gè)互動(dòng)循環(huán)。
接下來(lái)通過(guò)兩個(gè)實(shí)例來(lái)驗(yàn)證鄰近性的應(yīng)用:
返回頂部按鈕
在連續(xù)滾動(dòng)的網(wǎng)頁(yè)的右下角通常有一個(gè)“返回頂部”按鈕,幫助用戶輕松導(dǎo)航到頂部。
“返回頁(yè)首”是很必要的選項(xiàng),但有時(shí)它會(huì)與主要內(nèi)容(圖像或文本)重疊,反而影響體驗(yàn)。
通過(guò)預(yù)測(cè)用戶觸發(fā),利用鄰近性來(lái)顯示或隱藏“返回頂部”按鈕:
當(dāng)用戶想回到頁(yè)面頂部時(shí)會(huì)向上滾動(dòng),通過(guò)向上滾動(dòng)觸發(fā)器來(lái)預(yù)測(cè)用戶的操作,顯示“返回頂部”按鈕;
通過(guò)下滑觸發(fā)器來(lái)隱藏“返回頂部”按鈕,既減少界面混亂又能為用戶提供更多的內(nèi)容空間。
表單驗(yàn)證
有的表單長(zhǎng)度不止一屏,用戶需要向下滑動(dòng)來(lái)填寫每項(xiàng)信息,如果最后提交的時(shí)候顯示驗(yàn)證錯(cuò)誤,這種情況會(huì)讓用戶非常煩惱。
如果用戶跳過(guò)或填寫了錯(cuò)誤的信息,可以利用下滑手勢(shì)來(lái)提醒用戶,幫助用戶快速定位到有問(wèn)題的選項(xiàng)。
總結(jié)
通過(guò)鄰近性來(lái)預(yù)測(cè)用戶的行為有助于創(chuàng)建更直觀的界面,在提升可用性的同時(shí),創(chuàng)造令人愉快的產(chǎn)品體驗(yàn)。
原文:medium.muz.li/proximity-in-product-interaction-design-deb527b1c336
作者:Nitish Khagwal
譯者:Clippp(文章翻譯已獲得作者的正式授權(quán))
-END-
【轉(zhuǎn)載說(shuō)明】  若上述素材出現(xiàn)侵權(quán),請(qǐng)及時(shí)聯(lián)系我們刪除及進(jìn)行處理:[email protected]