16個(gè)簡單的提高用戶體驗(yàn)的UX及UI設(shè)計(jì)技巧

             

用戶體驗(yàn)是一個(gè)發(fā)現(xiàn)的過程。我們經(jīng)常主張用戶體驗(yàn)并不隨著某個(gè)項(xiàng)目而開始與結(jié)束。只要你的產(chǎn)品還在,用戶體驗(yàn)流程就永遠(yuǎn)不會(huì)結(jié)束。當(dāng)涉及數(shù)字產(chǎn)品時(shí),總有改進(jìn)和成長的空間值得探索,所以設(shè)計(jì)過程是產(chǎn)品成長過程中不可分割的一部分。


不過在談及可用性和設(shè)計(jì)原則時(shí),我們可以毫不猶豫地應(yīng)用一些經(jīng)過驗(yàn)證和測試的原則。大可不必重新造輪子。


我們挑選了16個(gè)能夠帶來增長的UX和UI技巧,從而節(jié)省你的腦力專注于更復(fù)雜的UX和產(chǎn)品挑戰(zhàn)。



1. 最佳效果的召喚行動(dòng)按鈕(CTA)

                      

如果為按鈕添加上下文信息,那么效果會(huì)更好,但是信息盡量不要超過三個(gè)單詞,比如可以用”加入購物車“替代”加入“,用”立即購買“替代”購買“。



2.移動(dòng)端上的文字

                      

已經(jīng)有大量的測試表明,移動(dòng)設(shè)備上最好的可讀性原則是確保每行單詞個(gè)數(shù)不超過9個(gè),即不超過50—60個(gè)字母。



3. 移動(dòng)端的召喚行動(dòng)按鈕(CTA)

                      

移動(dòng)端的召喚行動(dòng)按鈕應(yīng)該比大多數(shù)設(shè)計(jì)師使用的大小都大。麻省理工學(xué)院(MIT)的觸覺實(shí)驗(yàn)室的研究結(jié)果表明,大多數(shù)成年人食指的平均寬度為16—20毫米,因此合適的按鈕尺寸應(yīng)該為40—50px寬。



4.電商表單

                      

不確定何時(shí)使用單選按鈕何時(shí)使用下拉列表。這個(gè)UX原則非常簡單:當(dāng)選項(xiàng)少于5個(gè)時(shí)候使用單選按鈕,當(dāng)選項(xiàng)超過5個(gè)時(shí)使用下拉表單。



5.分頁或無限滾動(dòng)

                      

許多UX設(shè)計(jì)師都傾向于使用無限滾動(dòng)來讓設(shè)計(jì)更具時(shí)尚和現(xiàn)代感。然而,這不適用于試圖找到正確內(nèi)容的用戶。實(shí)驗(yàn)證明無限滾動(dòng)頁面適用于內(nèi)容探索,而分頁適用于以目標(biāo)為導(dǎo)向的用戶體驗(yàn),比如電商網(wǎng)站或數(shù)據(jù)豐富的網(wǎng)站。



6.默認(rèn)選項(xiàng)——用還是不用

                      

輸入和額外的點(diǎn)擊具有很高的交互成本。要提高表單的轉(zhuǎn)化率,可以提供默認(rèn)選項(xiàng),提示用戶所需的以及高頻的選項(xiàng)。



7. 如何使用圖標(biāo)

                      

濫用圖標(biāo)是一個(gè)UI錯(cuò)誤,經(jīng)常會(huì)有損用戶體驗(yàn)。圖標(biāo)的使用應(yīng)該具備明顯的用意,加強(qiáng)無法用文字表達(dá)的內(nèi)容,一定不要將實(shí)際功能隱藏在模糊的圖標(biāo)下。UX黃金法則是:當(dāng)文本不足以解釋操作時(shí),可以使用圖標(biāo)。



8.錯(cuò)誤消息

                      

為了提高轉(zhuǎn)化率,請務(wù)必提供糾正錯(cuò)誤的建議,從而減輕用戶的認(rèn)知負(fù)擔(dān)。保持人性化和幽默感,避免用戶在面對錯(cuò)誤屏幕或錯(cuò)誤消息時(shí)流失。



9.清單或是單選按鈕

                      

這里的UX原則很簡單:對于多選使用清單,對于單選使用單選按鈕。任何設(shè)計(jì)師都應(yīng)該這樣做。



10. 使用占位符體現(xiàn)樣例

                      

使用占位符可以設(shè)定更好的情境并增加表單轉(zhuǎn)換率。但是你需要再多做一步,使用示例而不是只顯示用戶需要輸入的內(nèi)容項(xiàng)。例如,顯示電話號碼如“+44 757 869”,而不是“輸入電話號碼:”或者是“hi@pony.studio”而不是"電子郵件"。這是一個(gè)經(jīng)過驗(yàn)證的用戶體驗(yàn)原則。



11. 移動(dòng)端提供更寬的可點(diǎn)擊區(qū)域

                      

回顧第三項(xiàng)法則中提到的麻省理工研究,移動(dòng)端上更寬的按鈕以及可點(diǎn)擊區(qū)域總是比小的UI組件效果更好。所以如果設(shè)計(jì)允許,一定要在移動(dòng)端上使用比單選按鈕、下拉菜單或復(fù)制鏈接更寬、更大的視覺選項(xiàng)。



12. 使用顏色分類

                      

采用顏色標(biāo)簽用于分類可以降低用戶認(rèn)知負(fù)擔(dān),所以可以在關(guān)鍵的設(shè)計(jì)元素上使用顏色區(qū)分。但風(fēng)險(xiǎn)在于不要過度使用顏色,因?yàn)檫@可能會(huì)產(chǎn)生相反的效果,并影響用戶體驗(yàn)的層次。



13.表單文本輸入框按鈕

           


始終為文本輸入框旁的按鈕使用不同顏色,以確保該按鈕不會(huì)與文本輸入?yún)^(qū)域融合在一起,并作為CTA按鈕突顯出來。



14. 完美的行間距

           


我們都希望字體大小和行距之間能有一個(gè)完美的比例,但是很抱歉我們將打破這個(gè)希望——并沒有通用的完美比例。通用UX原則是:保持行間距比字體大小高20–30%,從而提高可讀性。通常這個(gè)比例范圍可以適用于大多數(shù)情況。



15.總是有效的字體大小

           


如果所有設(shè)計(jì)都使用相同的字體大小,那么世界將會(huì)變得非常無聊。如果你為了保險(xiǎn)起見,16px字號和1.5倍行高是通用的方案。這是適合正文的最安全的選項(xiàng)。



16. 重疊圖像使外觀更優(yōu)雅

           


如果你想給設(shè)計(jì)增添些別致的色彩,可以選擇重疊圖片,這尤其適用于設(shè)計(jì)用戶個(gè)人資料頁面或卡片。為確保樣式的平衡,請確保圖像邊緣顏色與背景色匹配。


— — — —

Stef Ivanov是Pony Studio的創(chuàng)始人和首席設(shè)計(jì)師。PonyStudio是一家專門設(shè)計(jì)早期數(shù)字產(chǎn)品的產(chǎn)品設(shè)計(jì)工作室。



原文鏈接:

https://medium.com/design-for-growth/16-ux-and-ui-design-tips-that-always-deliver-growth-6bacd9fd25fe

作者:Stef Ivanov


每天更新,
全站高品質(zhì)素材免費(fèi)下載!