APP設計的那些知識點:如何設計好按鈕Button

繼續(xù)上一篇文章《移動端APP設計那些知識點:icon設計的原則與創(chuàng)新》,我們這節(jié)課談談移動端APP設計那些知識點:如何設計好按鈕Button。

當然,button和icon設計都是在APP設計當中最常見的一些設計元素。也是APP的重要組成部分。

之前,25學堂分享了:

1、APP設計小技巧:如何進行APP按鈕設計與排版

2、手機APP設計規(guī)范:圖標和按鈕視覺設計規(guī)范

app按鈕和彈出層

那么,怎么樣才能設計好的按鈕Button呢? ? 阿里媽媽MUX團隊的大神給我們分享了四個方法。

做好以下4點就能設計出一個很好的按鈕設計:設計簡潔,文案明確,強對比,強引導

 

設計好按鈕的第一點:設計簡潔

將按鈕盡量設計簡潔,去掉不必要的形式感,過多的形式感會增加用戶對按鈕的迷惑造成判斷的錯誤;

如下圖的APP常用導航圖標按鈕設計

app常用的按鈕導航設計

app按鈕設計

 

設計好按鈕的第二點:文案要明確,要緊迫,要動詞

明確:

按鈕上的文案,作為導向來引導用戶的行為,首要的目的就是讓用戶能夠最快且清晰的明白他們的點擊將會觸達什么,因此提示性的文案一定要簡短,明確,且直指重點,減少用戶判斷的時間;

文案的明確很多時候要比設計,顏色等更為重要;

很多情況下會有2個按鈕同時出現(xiàn),是兩個完全相反的選擇的時候,只有成功設計了提示性的文案才能讓用戶立即的得出判斷;

 

緊迫:

像我們做的購物電商產(chǎn)品里面,使用帶有緊迫感的詞語更大程度的能讓用戶去采取行動。按鈕上加上“現(xiàn)在”“立即” “馬上”等文字,能大大提升按鈕的轉(zhuǎn)化率。這些文字能帶給用戶暗示和感知,如果再繼續(xù)等待下去,很有可能就會錯過這次大好的機會。

文案明確的按鈕設計

上圖中使用了“馬上去搶” “入場瘋搶”這種讓人感覺有緊迫感的文案;

 

善用動詞:

按鈕如果使用動詞,會讓用戶產(chǎn)生馬上去行動的心里暗示,同時動詞也帶有強烈的指向性,可以告訴用戶下一步該做什么;

app常用的按鈕導航設計2

可以看下如下兩組按鈕,一組是名詞,一組是動詞,比較下哪一個讓你看到更想去點擊;

按鈕設計

 

設計好按鈕的第三點:強對比

按鈕的強對比可以讓它們從頁面中脫穎而出,讓用戶能夠簡單地分辨出在哪兒點擊時,既提高了效率,也提高了產(chǎn)品的轉(zhuǎn)化率;

增強對比的方法主要是增強按鈕與背景顏色的對比,以及增強按鈕上文字與按鈕背景顏色的對比;

強對比按鈕設計

上圖中的按鈕使用了與背景對比很強的顏色,成為界面的焦點;

 

 

設計好按鈕的第四點:強引導

按鈕設計的時候通過一些引導性的設計,可以更好的引導用戶去判斷去點擊,提高產(chǎn)品的用戶體驗;

增強引導最直觀的做法就是顏色的選取,通過色彩心理學賦予用戶的感受,可以起到很好的引導的作用;

從顏色上去突出和區(qū)分你希望他去點擊的那個按鈕,幫助用戶去完成操作;

 

成組按鈕

當2個按鈕同時成組出現(xiàn)的時候,通過顏色去引導用戶去點擊你希望他完成的操作;

成組按鈕設計

 

要想達到最強的引導,給按鈕填充上顏色以及白色的文字,使用藍色、綠色或者紫色等看著較為舒緩的顏色最好;

 

成組按鈕設計2

在你希望引導用戶點擊的按鈕旁邊的按鈕,最好不要被填充上太明顯的顏色,會導致所有的按鍵之間的顏色對比變得太弱,讓用戶看到兩個按鈕時會經(jīng)過一翻思考后才能做出決策,反之,如果只讓它們顯示邊框則能更好的引導旁邊的按鈕;

 

不希望用戶點擊按鈕

諸如刪除,放棄等操作,從產(chǎn)品角度肯定是不希望用戶去做出的決策,可在設計的時候在顏色上做些文章,引導用戶三思而后行;

 

成組按鈕設計3

將這類按鈕填充上紅色,橙色等較為刺激的顏色,讓用戶看到的時候,從心理角度就開始思考,再去做決策;

 

以上就是大神給我們分享的一些關于APP設計的那些知識點:如何設計好按鈕Button的干貨。希望對各位有所幫助。

 

最后,25學堂再來啰嗦一下:

1. 任何按鈕Button設計都要因人而異,所謂以用戶為中心,UCD;

2. 按鈕設計一定要易見易讀;

3. 給我一個點你的理由。

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