激情六月丁香婷婷|亚洲色图AV二区|丝袜AV日韩AV|久草视频在线分类|伊人九九精品视频|国产精品一级电影|久草视频在线99|在线看的av网址|伊人99精品无码|午夜无码视频在线

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

人性化的ui按鈕設(shè)計技巧，來學習一下

發(fā)布時間：2024-04-03 12:24:28 瀏覽量：246次

現(xiàn)代人越來越離不開智能設(shè)備

面對屏幕上無數(shù)的按鈕

點還是不點是個問題

像是我加班的按鈕從來關(guān)閉不了

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

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

01

按閱讀順序放置按鈕

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

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

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

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

02

用形狀區(qū)分按鈕

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

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

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

03

用顏色推進點擊

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

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

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

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

如果用同色系的不同明度的顏色來區(qū)分按鈕，效果就更加明顯了！

04

文本的粗細

不要以為掌握了以上技巧就可以放松了，我們可以做更多，來優(yōu)化細節(jié)。跟用不同明度的顏色一樣，不同優(yōu)先級的文本也應(yīng)該有相應(yīng)的變化。

不同選項的文本，用不同粗細來表示。這個例子中，“checkout”用了粗體來強調(diào)自己的優(yōu)先級。

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

05

加個圖標

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

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

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

～此文轉(zhuǎn)載，如有侵權(quán)，請聯(lián)系刪除

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定