UI小按鈕基礎(chǔ)技巧原則

　　按鈕是UI設(shè)計(jì)中最常用的控件之一，但我們真的了解這種最常用的控件嗎？本文AAA教育的武老師對按鍵的12個(gè)知識點(diǎn)進(jìn)行了詳細(xì)的分解。雖然這篇文章很基礎(chǔ)，但肯定會對你有所幫助。
 

　　一、每個(gè)按鈕只能有一種樣式
 

　　很多時(shí)候，網(wǎng)站和應(yīng)用程序?qū)ν徊僮黝愋褪褂枚鄠€(gè)按鈕樣式。計(jì)算您使用的按鈕樣式的數(shù)量，并將它們與每個(gè)類型的一個(gè)樣式相匹配。標(biāo)準(zhǔn)按鈕類型包括：呼叫操作(CTA)、主要按鈕、次要按鈕、第三按鈕、成功按鈕、危險(xiǎn)按鈕、鏈接按鈕等。
 

　　二、包含視覺反饋和狀態(tài)
 

　　按鈕狀態(tài)，如懸停、按下和進(jìn)行中，為用戶提供所需的視覺反饋。如果沒有事件狀態(tài)，用戶可能會對提交操作時(shí)發(fā)生的情況感到困惑。
 

　　三、區(qū)分按鈕類型
 

　　按鈕類型應(yīng)該在風(fēng)格上加以區(qū)分，以便為其層次結(jié)構(gòu)提供視覺提示。一級動(dòng)作按鈕應(yīng)比二級動(dòng)作按鈕或三級動(dòng)作按鈕更突出，并應(yīng)設(shè)計(jì)一個(gè)具有不可逆結(jié)果的附加動(dòng)作。
 

　　四、保持按鈕樣式一致
 

　　任何設(shè)計(jì)風(fēng)格都可以使用，只要你保持整體風(fēng)格一致。如果您使用4PX的邊框半徑、細(xì)微的漸變和陰影，請確保您所有的按鈕類型都是這種樣式。
 

　　五、非按鈕不應(yīng)看起來像按鈕
 

　　按鈕，尤其是圓形的矩形按鈕，其樣式通常類似于標(biāo)簽。如果在設(shè)計(jì)中使用這兩個(gè)組件，請確保添加足夠的視覺差異以避免混淆。你最不想看到的是，用戶憤怒地點(diǎn)擊一個(gè)元素，錯(cuò)誤地認(rèn)為它是一個(gè)可操作的按鈕。
 

　　六、保持尺寸一致
 

　　無論您使用大寫、標(biāo)題大小寫、句子大小寫還是小寫，請確保您的不同按鈕類型是一致的。
 

　　七、知道何時(shí)使用圖標(biāo)
 

　　扣子堆在一起看起來很糟糕，就像長桌上的每一排一樣?？紤]在具有重復(fù)內(nèi)容的上下文中使用更微妙的視覺樣式(如圖標(biāo))。
 

　　八、避免長標(biāo)簽
 

　　長按鈕或鏈接標(biāo)記會混淆用戶界面并迫使用戶思考。除非操作是唯一的、復(fù)雜的或可能導(dǎo)致不可逆的損害(例如刪除數(shù)據(jù))，否則操作標(biāo)記的內(nèi)容僅限于反映所需的操作。
 

　　九、標(biāo)簽應(yīng)該清楚地傳達(dá)它所代表的行為
 

　　不要讓用戶猜測按鈕的作用，尤其是如果它是不可逆的。清楚簡潔地解釋行動(dòng)的后果。“是”、“否”和“取消”等標(biāo)簽可能會被誤解。在上面的例子中，用戶可以將“取消”解釋為確認(rèn)位置已被取消，而不是取消刪除。
 

　　十、在鏈接之間添加空間
 

　　不要忽略鏈接類型的操作按鈕。當(dāng)它們出現(xiàn)在一起時(shí)，請確保為它們添加足夠的空間。
 

　　十一、不換行標(biāo)簽文本
 

　　按鈕標(biāo)簽的換行符降低了可讀性，看起來很糟糕。確保文本顯示在一行之內(nèi)。
 

　　十二、標(biāo)簽的長度不應(yīng)超過按鈕的寬度
 

　　顯然，我見過很多設(shè)計(jì)中按鈕文本的長度超過按鈕的寬度。使用間距控件，而不是硬編碼按鈕的寬度。另外，盡量減少字?jǐn)?shù)和字?jǐn)?shù)，只為能傳達(dá)動(dòng)作。也許最好的標(biāo)簽是根本沒有標(biāo)簽-也許是一個(gè)圖標(biāo)。

        UI設(shè)計(jì)的小按鈕能帶來那么多思考，這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請持續(xù)關(guān)注AAA教育~