如何設計按鈕更迷人？

動作按鈕 我們將分析按鈕的層次結構和它們通信的語言。雖然有些按鈕通熟易懂，但按鈕操作不取決於它們的外觀，而是取決於用戶的行為。 1_1.行為召喚（CTA / C2A）在設計中行為召喚按鈕通常會提示用戶註冊/立即購買等。在產品設計中如果強烈建議用戶應該做的事情應該使用CTA按鈕。 行為召喚按鈕對於CTA按鈕，我喜歡使用圓形按鈕，這樣會更引人註目。 1_2.主要操作按鈕雖然CTA按鈕和主按鈕看起來相同，但我喜歡將它們分開。主按鈕應該是壹個強大的視覺指示器，可以幫助用戶完成他們的旅程。主按鈕應該在用戶可能想要“下壹步”、“完成”、“開始”等的情況下使用。主要操作按鈕對於主要操作，我喜歡使用實心按鈕。 1_3.次要操作按鈕從“返回”的輔助按鈕到“下壹步”的主按鈕，或從“編輯”的輔助按鈕到“保存”的主按鈕。輔助按鈕是我們為用戶提供的主要操作的備選方案。 主按鈕旁邊的輔助按鈕的兩種設計我更傾向於使用線性按鈕或文本鏈接作為輔助按鈕。 1_4.三級按鈕三級按鈕通常用於其他操作，可能暫時不是用戶想要做的事情。比如“添加朋友”、“掃壹掃”、“編輯”或“刪除”之類的內容，前提是它們不是主要操作。不同形式的三級按鈕壹般來說，人們會使用較小或較不突出的按鈕樣式。 常用按鈕樣式 下面我們將介紹常見的按鈕樣式，不同風格的按鈕樣式和他們的使用技巧。 2_1.實心按鈕實心按鈕是帶有實心填充的按鈕。 壹個實心按鈕 2_2.線性和幽靈按鈕線性按鈕和實心按鈕正好相反，壹個沒有填充的按鈕 – 只是壹個輪廓。雖然經常互換使用，但我更喜歡將線性按鈕視為淺色（在白底下按鈕的輪廓和文本顏色深壹點更明顯），將幽靈按鈕視為深色（在黑底下按鈕的輪廓和文本顏色淺壹點更明顯）。 線性按鈕（左）和幽靈按鈕（右） 2_3.圓形按鈕圓形按鈕其邊緣設置為最大圓角半徑。 圓形按鈕 2_4.FAB（懸浮按鈕）懸浮按鈕是壹種巧妙的設計模式，Google Material Design中更加受歡迎。雖然它們可能看起來像壹個圖標按鈕，但實際上它們用在屏幕上的主要操作按鈕。 壹個懸浮按鈕如果您想了解有關FAB的更多信息，我建議您在Material Design的網站上查看( ponents/buttons-floating-action-button.html ) 2_5.文字鏈接文本鏈接是壹種非常簡單的按鈕類型。有幾種不同的方式可以表明它是壹個鏈接。它可以是顏色/下劃線/鏈接的文本，甚至就是文本本身（例如“閱讀更多”）。 文本鏈接的不同樣式在顏色方面，大多數網站使用藍色，因為它是最容易識別的。為什麽文本鏈接的顏色會使用藍色？它壹直追溯到是萬維網的發明者，在他選擇顏色時發現藍色很酷的壹種顏色，即使是色盲的人通常也能看到它。 2_6.帶圖標的標簽按鈕圖標按鈕越來越受歡迎，壹些按鈕仍然需要壹個標簽來確保按鈕的語意明了。 帶圖標的標簽按鈕處理圖標和標簽時最棘手的事情是弄清楚字體組合的圖標有多大。方法1：讓圖標的大小對齊字體的頂線。方法2：讓圖標的大小對齊字體的行高。需要註意的是確保圖標和字體的組合視覺均衡。 2_7.圖標按鈕圖標按鈕沒有標簽，只是壹個圖標。因為它們沒有標簽，所以它們在界面中節省了大量空間。圖標按鈕還可以將其他圖標按鈕壹起排列在它們的小空間中。圖標按鈕具有不同的風格如果妳在為計算機認知度較低的人群設計產品時，我建議使用帶標簽的按鈕 – 尤其是那些很抽象的語意。 2_8.帶圖標的文本鏈接某些文本鏈接可能帶有圖標。這些通常不會在正文中使用。各種帶圖標的文本鏈接 按鈕的顏色和形狀 在設計按鈕時，需要考慮以下幾個不同的元素。 3_1.顏色在設計產品時，妳應該要考慮有視覺障礙的人。為確保每個人都可以訪問妳的顏色，妳可以使用在線對比度檢查器。我使用的是那個。( / )不同顏色的按鈕 另外，在選擇顏色時應該考慮色彩心理學。紅色按鈕多用於刪除，黃色按鈕多用於警示等。“刪除”、“警告”、“保存”和“更多”按鈕 3_2.邊界半徑邊界半徑為按鈕提供了很多個性化設計。具有更圓半徑的按鈕看起來更有趣。 不同邊界半徑設置的按鈕 3_3.投影按鈕上的投影使按鈕更加自然引人註意。陰影也可用於指示不同的狀