按鈕是UI設(shè)計中最常用的控件之一,但我們真的了解這種最常用的控件嗎?本文AAA教育的武老師對按鍵的12個知識點進(jìn)行了詳細(xì)的分解。雖然這篇文章很基礎(chǔ),但肯定會對你有所幫助。
很多時候,網(wǎng)站和應(yīng)用程序?qū)ν徊僮黝愋褪褂枚鄠€按鈕樣式。計算您使用的按鈕樣式的數(shù)量,并將它們與每個類型的一個樣式相匹配。標(biāo)準(zhǔn)按鈕類型包括:呼叫操作(CTA)、主要按鈕、次要按鈕、第三按鈕、成功按鈕、危險按鈕、鏈接按鈕等。
二、包含視覺反饋和狀態(tài)
按鈕狀態(tài),如懸停、按下和進(jìn)行中,為用戶提供所需的視覺反饋。如果沒有事件狀態(tài),用戶可能會對提交操作時發(fā)生的情況感到困惑。
按鈕類型應(yīng)該在風(fēng)格上加以區(qū)分,以便為其層次結(jié)構(gòu)提供視覺提示。一級動作按鈕應(yīng)比二級動作按鈕或三級動作按鈕更突出,并應(yīng)設(shè)計一個具有不可逆結(jié)果的附加動作。
四、保持按鈕樣式一致
任何設(shè)計風(fēng)格都可以使用,只要你保持整體風(fēng)格一致。如果您使用4PX的邊框半徑、細(xì)微的漸變和陰影,請確保您所有的按鈕類型都是這種樣式。
按鈕,尤其是圓形的矩形按鈕,其樣式通常類似于標(biāo)簽。如果在設(shè)計中使用這兩個組件,請確保添加足夠的視覺差異以避免混淆。你最不想看到的是,用戶憤怒地點擊一個元素,錯誤地認(rèn)為它是一個可操作的按鈕。
六、保持尺寸一致
無論您使用大寫、標(biāo)題大小寫、句子大小寫還是小寫,請確保您的不同按鈕類型是一致的。
七、知道何時使用圖標(biāo)
扣子堆在一起看起來很糟糕,就像長桌上的每一排一樣??紤]在具有重復(fù)內(nèi)容的上下文中使用更微妙的視覺樣式(如圖標(biāo))。
長按鈕或鏈接標(biāo)記會混淆用戶界面并迫使用戶思考。除非操作是唯一的、復(fù)雜的或可能導(dǎo)致不可逆的損害(例如刪除數(shù)據(jù)),否則操作標(biāo)記的內(nèi)容僅限于反映所需的操作。
九、標(biāo)簽應(yīng)該清楚地傳達(dá)它所代表的行為
不要讓用戶猜測按鈕的作用,尤其是如果它是不可逆的。清楚簡潔地解釋行動的后果。“是”、“否”和“取消”等標(biāo)簽可能會被誤解。在上面的例子中,用戶可以將“取消”解釋為確認(rèn)位置已被取消,而不是取消刪除。
十、在鏈接之間添加空間
不要忽略鏈接類型的操作按鈕。當(dāng)它們出現(xiàn)在一起時,請確保為它們添加足夠的空間。
按鈕標(biāo)簽的換行符降低了可讀性,看起來很糟糕。確保文本顯示在一行之內(nèi)。
十二、標(biāo)簽的長度不應(yīng)超過按鈕的寬度
顯然,我見過很多設(shè)計中按鈕文本的長度超過按鈕的寬度。使用間距控件,而不是硬編碼按鈕的寬度。另外,盡量減少字?jǐn)?shù)和字?jǐn)?shù),只為能傳達(dá)動作。也許最好的標(biāo)簽是根本沒有標(biāo)簽-也許是一個圖標(biāo)。
UI設(shè)計的小按鈕能帶來那么多思考,這篇文章的內(nèi)容你學(xué)到了嗎,更多資訊請持續(xù)關(guān)注AAA教育~
填寫下面表單即可預(yù)約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.lb577.com 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc