如何讓按鈕設(shè)制作計的更迷人

2019-12-06 點擊量：

按鈕的不同分類如下：

* 動作按鈕

* 常用按鈕樣式

* 按鈕的顏色和形狀

* 按鈕狀態(tài)和反饋

* 標簽按鈕

* 觸摸屏按鈕

* 按鈕的位置

* 系統(tǒng)按鈕

* 總結(jié)

 

動作按鈕 

我們將分析按鈕的層次結(jié)構(gòu)和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決于它們的外觀，而是取決于用戶的行為。

 

1_1.行為召喚（CTA / C2A）

在設(shè)計中行為召喚按鈕通常會提示用戶注冊/立即購買等。在產(chǎn)品設(shè)計中如果強烈建議用戶應(yīng)該做的事情應(yīng)該使用CTA按鈕。

行為召喚按鈕

對于CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人注目。

 

1_2.主要操作按鈕

雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應(yīng)該是一個強大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應(yīng)該在用戶可能想要“下一步”、“完成”、“開始”等的情況下使用。

主要操作按鈕

對于主要操作，我喜歡使用實心按鈕。

 

1_3.次要操作按鈕

從“返回”的輔助按鈕到“下一步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們?yōu)橛脩籼峁┑闹饕僮鞯膫溥x方案。

主按鈕旁邊的輔助按鈕的兩種設(shè)計

我更傾向于使用線性按鈕或文本鏈接作為輔助按鈕。

 

1_4.三級按鈕

三級按鈕通常用于其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃一掃”、“編輯”或“刪除”之類的內(nèi)容，前提是它們不是主要操作。

不同形式的三級按鈕

一般來說，人們會使用較小或較不突出的按鈕樣式。

 

常用按鈕樣式 

下面我們將介紹常見的按鈕樣式，不同風(fēng)格的按鈕樣式和他們的使用技巧。

 

2_1.實心按鈕

實心按鈕是帶有實心填充的按鈕。

一個實心按鈕

 

2_2.線性和幽靈按鈕

線性按鈕和實心按鈕正好相反，一個沒有填充的按鈕 – 只是一個輪廓。雖然經(jīng)常互換使用，嘉瑞廣告，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深一點更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺一點更明顯）。

線性按鈕（左）和幽靈按鈕（右）

 

2_3.圓形按鈕

圓形按鈕其邊緣設(shè)置為最大圓角半徑。

圓形按鈕

 

2_4.FAB（懸浮按鈕）

懸浮按鈕是一種巧妙的設(shè)計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像一個圖標按鈕，但實際上它們用在屏幕上的主要操作按鈕。

一個懸浮按鈕

如果您想了解有關(guān)FAB的更多信息，我建議您在Material Design的網(wǎng)站上查看( https://material.io/design/components/buttons-floating-action-button.html )

 

2_5.文字鏈接

文本鏈接是一種非常簡單的按鈕類型。有幾種不同的方式可以表明它是一個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。

文本鏈接的不同樣式

在顏色方面，大多數(shù)網(wǎng)站使用藍色，因為它是最容易識別的。為什么文本鏈接的顏色會使用藍色？它一直追溯到是萬維網(wǎng)的發(fā)明者，在他選擇顏色時發(fā)現(xiàn)藍色很酷的一種顏色，即使是色盲的人通常也能看到它。

 

2_6.帶圖標的標簽按鈕

圖標按鈕越來越受歡迎，一些按鈕仍然需要一個標簽來確保按鈕的語意明了。

帶圖標的標簽按鈕

處理圖標和標簽時最棘手的事情是弄清楚字體組合的圖標有多大。

方法1：讓圖標的大小對齊字體的頂線。

方法2：讓圖標的大小對齊字體的行高。需要注意的是確保圖標和字體的組合視覺均衡。

 

2_7.圖標按鈕