人性化的ui按鈕設計技巧

現代人越來越離不開智能設備,面對屏幕上無數的按鈕,點還是不點是個問題。像是我加班的按鈕從來關閉不了。

不知道大家有沒有發現,按鈕越多,我們點擊得越慢。這是因為只要有按鈕,我們的下意識就會“檢查”它們,直到確認無誤后才會”決定”點擊。

讓用戶在繁多的按鈕當中找到需要點擊的那一個,其實是有技巧的,以下5個point,只要運用恰當,點擊率一定會直線上升。

1,按閱讀順序放置按鈕

不少app都會有這樣的錯誤:把最重要的按鈕放在第一位,想要吸引用戶的注意力。這其實是違反人眼的閱讀習慣的,在劃動屏幕閱讀的時代里,用戶反而會注意到這些按鈕的樣式,而不是順序。

按鈕的順序不是為了被看到,而是為了更快的被點擊。將最重要的按鈕放在第一位,而不是根據閱讀順序從上往下放置,是十分反人類的。

將最重要的按鈕設置為高亮,并且順著閱讀順序放置,避免了要用戶重新檢查按鈕,讓他們能夠從上往下看清選項,用最快的時間做出決定。

這種做法除了符合人眼視覺流程,也符合我們使用智能設備的習慣,按鈕在下方更方便我們的手指頭點擊。

2,用形狀區分按鈕

還有一個經常出現的錯誤就是只用文本來表示按鈕,設計師僅僅用文本來表達次選項,這種設計非常不利于“引導”用戶點擊,也容易讓用戶只看到首選項。

文本按鈕還會讓用戶產生困惑,分不清這是按鈕還是信息,這種不確定性會讓他們直接跳過這些按鈕。

除了文本按鈕,點擊區域太小也會讓人感到不知所措。所以把文字放在按鈕形狀里面能夠有效讓人覺得這是一個按鈕,并引導人點擊。

3,用顏色推進點擊

通常首選項的按鈕都是很容易被識別的,因為它要引導用戶達到目的。如果你不確定到底要怎么要設置,可以想想用戶使用app時的需求是什么,他們想要達到什么目標。

像是購物app,用戶的最終目標是買東西,所以高亮的首選項應該是付款。以上這個例子,“keep shopping”和“購物車”都是次選項。

“keep shopping”讓用戶返回繼續看詳情或者瀏覽其他商品,“購物車”則是查看已經選了哪些東西。相比之下,這兩個選項,“購物車”的優先級要比“keep shopping”高,因為查看購物車后,還有一次引導用戶付款的“機會”。

顏色能夠為推進用戶點擊做出貢獻,尤其是當顏色和按鈕文本不一樣顏色的時候,更容易引導用戶點進去。

如果用同色系的不同明度的顏色來區分按鈕,效果就更加明顯了!

4,文本的粗細

不要以為掌握了以上技巧就可以放松了,我們可以做更多,來優化細節。

跟用不同明度的顏色一樣,不同優先級的文本也應該有相應的變化。

不同選項的文本,用不同粗細來表示。這個例子中,“checkout”用了粗體來強調自己的優先級。

從視覺上來看,三種不同的粗細度,反應了它們之間的關系,但不會造成視覺效果的突兀,又能引導用戶點擊。

5,加個圖標

最后一個技巧,是為讓你的按鈕更加“人性化”。前面我們強調了用顏色來區分優先級,不過有一類人群,這個技巧不起作用,那就是眼盲的人。所以,需要用別的方式來提醒他們。

沒錯!就是加圖標!用圖形來強調,如此一來就能確保所有用戶都能注意到這個按鈕了,即使是沒有顏色,它還是整個頁面中最閃亮的星!

 

今天的分享就到這啦,如果以上錯誤例子你都做過的話,看完文章趕緊改正過來!千萬不要做完自我感覺都挺好!今天的反面例子,經過層層優化,變成了正面例子!

 

 

 

 

原文:https://uxmovement.com/mobile/5-techniques-to-make-mobile-call-to-action-buttons-intuitive/

每天更新,
全站高品質素材免費下載!