UI設(shè)計(jì)中按鈕設(shè)計(jì)攻略

　　UI設(shè)計(jì)創(chuàng)新技能層出不窮，UI設(shè)計(jì)滿足著形形色色各種垂直化的需求,在設(shè)計(jì)方面大家也是想方設(shè)法去做一些創(chuàng)新,希望自己能夠在各種應(yīng)用中脫穎而出,今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中按鈕設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說明。
 

　　建立認(rèn)知
 

　　噓!在你的印象中按鈕是長(zhǎng)啥樣的，思考一會(huì)……
 

　　沒錯(cuò)，一個(gè)按鈕應(yīng)該看起來像一個(gè)按鈕，需要讓用戶點(diǎn)。設(shè)計(jì)一個(gè)按鈕時(shí)，最重要的目的是讓它足夠突出，盡可能的區(qū)別于其它元素內(nèi)容，這樣避免與其他任何東西渾為一體。

 

　　好的設(shè)計(jì)應(yīng)符合用戶的認(rèn)知習(xí)慣
 

　　在數(shù)字產(chǎn)品中的F型瀏覽模式下，我們通常將與動(dòng)作相關(guān)的某些形狀和形式與頁面的風(fēng)格保持統(tǒng)一，所以我們的矩形按鈕看起來可以更好的與頁面進(jìn)行關(guān)聯(lián)統(tǒng)一。這就是為什么對(duì)于按鈕來說，矩形(或圓角矩形)總是最安全的選擇。

 

　　其他形狀和形式(三角形、圓形、有機(jī))對(duì)用戶來說是無法識(shí)別的。小心使用，只有當(dāng)你的產(chǎn)品的一般風(fēng)格需要偏離規(guī)范時(shí)才使用它們。

 

　　按鈕的拆解
 

　　在設(shè)計(jì)按鈕時(shí)，要記住這些元素，并明智地選擇它們。以設(shè)計(jì)規(guī)范和產(chǎn)品調(diào)性為基礎(chǔ)，考慮哪種按鈕的設(shè)計(jì)風(fēng)格更適合我們的產(chǎn)品并合理的運(yùn)用到更多界面設(shè)計(jì)中去。

 

　　可以使用網(wǎng)格基數(shù)設(shè)置填充和安全空間。在上面的例子中，左邊的內(nèi)部間距是垂直間距的兩倍，對(duì)于提高可讀性來說，垂直間距是一個(gè)安全的選擇。
 

　　間距,對(duì)齊
 

　　按鈕間距不均勻是所有界面中最常見的問題之一。仔細(xì)檢查按鈕標(biāo)簽是否水平和垂直居中。如果需要確定的話，可以創(chuàng)建指南。

 

　　除了基于網(wǎng)格的方法外，一個(gè)選擇按鈕間距的安全方法也可以用大寫W來完成，如果按鈕標(biāo)簽的每一邊都至少有1w適合你，你就是安全的。在側(cè)面，可以更好地使用2x w增加可讀性。

 

　　切記，不要忘記按鈕的安全空間，如果你有一組按鈕，那么每一個(gè)按鈕的安全空間應(yīng)該是不重疊的。

 

　　合適的大小
 

　　web和移動(dòng)按鈕都應(yīng)該有合適的最小尺寸。如果你的按鈕太小，就很難點(diǎn)擊它們。這可能會(huì)導(dǎo)致用戶卸載你的應(yīng)用程序。最好的方法是在移動(dòng)設(shè)備上以44 * 44的點(diǎn)數(shù)開始所有的交互元素。移動(dòng)按鈕的最佳位置在50左右。
 

　　對(duì)于基于光標(biāo)的設(shè)備32×32也可以。切記按鈕越大，操作的便利性越高。

 

　　邊緣平衡
 

　　如果你使用的是圓角按鈕，請(qǐng)記住將正確的圓角比率與屏幕上的其他元素對(duì)齊。切記對(duì)所有內(nèi)容使用相同的值會(huì)在邊界上造成不平衡感。

 

　　行動(dòng)呼吁
 

　　CTA是網(wǎng)站或應(yīng)用程序中最重要的可操作元素。它通常與銷售流程緊密相關(guān)。
 

　　在設(shè)計(jì)CTA按鈕時(shí)，請(qǐng)記住它必須突出。它所處的屏幕上不應(yīng)該有任何其他按鈕與它在視覺上競(jìng)爭(zhēng)或吸引注意力。實(shí)現(xiàn)這一點(diǎn)的最佳方法是使它成為屏幕上唯一具有獨(dú)特顏色或樣式的元素。別忘了考慮對(duì)比度，這樣你的按鈕就不會(huì)和背景混在一起了。
 

　　大小也很重要。如果太小，容易在瀏覽頁面時(shí)跳過。如果它太大，就會(huì)遭遇“圖片sh式瀏覽”，即忽略類似廣告的視覺元素。

 

　　按鈕類型

 

　　文本鏈接是在web頁面上擁有可操作元素的第一種方式。因此，帶下劃線的藍(lán)色鏈接是頁面中最快識(shí)別的元素。幾乎每個(gè)人都會(huì)將它與一個(gè)行動(dòng)關(guān)聯(lián)起來，并試圖單擊它。
 

　　圓角平衡
 

　　按鈕也可以通過它們的邊框圓角改變。記住，每個(gè)項(xiàng)目都是獨(dú)一無二的——如果你的品牌形象只有直角，強(qiáng)行加入圓角按鈕則會(huì)使真?zhèn)€UI風(fēng)格不一致。同理，在一個(gè)項(xiàng)目中混合幾個(gè)不同的圓角半徑也會(huì)導(dǎo)致一致性和可讀性問題，除非是有意為之。

 

　　對(duì)齊圖標(biāo)
 

　　在按鈕上進(jìn)行較好的圖標(biāo)對(duì)齊是最困難的事情。在許多情況下，字體粗細(xì)和圖標(biāo)的粗細(xì)之間的關(guān)系直接影響它們。但是，有一條簡(jiǎn)單而有用的規(guī)則在大多數(shù)情況下都適用。

 

　　根據(jù)我們的圓角半徑，我們創(chuàng)建一個(gè)圓或是正方形，其大小等于按鈕的高度。在其中，我們創(chuàng)建另一個(gè)形狀來容納icon。它與我們的文字高度相同。然后，將圖標(biāo)放置在較小的形狀內(nèi)。
 

　　如果是人字形，最好使高度與字高相同，并且你還可以根據(jù)字體高度檢查線寬。匹配越緊密，最終的按鈕效果越好。
 

　　保持按鈕可讀性
 

　　設(shè)計(jì)一個(gè)好按鈕，要確保讓它們?cè)诓煌沫h(huán)境下都能適應(yīng)得很好。許多應(yīng)用程序和網(wǎng)站現(xiàn)在都添加了“暗模式”，這導(dǎo)致了至少兩個(gè)完全不同版本的產(chǎn)品。按鈕的顏色應(yīng)該與大多數(shù)背景很好地配合?？梢詣?chuàng)建一個(gè)像下面這樣的簡(jiǎn)單測(cè)試器，并始終高對(duì)比度和可讀性。

 

　　良好的實(shí)踐
 

　　重要的按鈕也可以很好地與圖標(biāo)配合使用。比如結(jié)帳可以通過購(gòu)物籃或購(gòu)物車圖標(biāo)快速識(shí)別，但前提是也要出現(xiàn)“結(jié)帳”這個(gè)詞。

 

　　在按鈕標(biāo)簽后放置右箭頭或向右標(biāo)志會(huì)使識(shí)別性更強(qiáng)，按鈕的引導(dǎo)性更強(qiáng)。

 

　　與平面按鈕相比，有陰影的按鈕更容易點(diǎn)擊，也更容易被注意到。在按鈕中添加一個(gè)微妙的陰影，使它從背景中更加突出。關(guān)于按鈕陰影的設(shè)計(jì)稍后討論。

 

　　搭配文本
 

　　圓角按鈕被認(rèn)為比矩形的按鈕更加友好和積極。但與此同時(shí)，它們也使圍繞設(shè)計(jì)內(nèi)容變得更加困難。如果將左對(duì)齊的文本放在按鈕上方，則圓角越大，該文本在視覺上適合的范圍就越小。它讓你感覺好像左邊空白處在同一直線上。
 

　　下拉按鈕
 

　　在設(shè)計(jì)按鈕/下拉組合時(shí)，圓角也是需要注意的。當(dāng)展開按鈕時(shí)，它會(huì)下拉展現(xiàn)另一快區(qū)域，使左側(cè)空白邊緣扭曲，在視覺上處理文本更加困難(觀察第二張圖)

 

　　層次結(jié)構(gòu)
 

　　按鈕應(yīng)該放在用戶希望它們?cè)诘牡胤?。這通常是指在描述性元素下面，并且通常與一邊對(duì)齊。
 

　　這與我們?yōu)g覽頁面的方式相匹配——從上到下沿著左邊緣(也稱為f型模式)。如果你想在不違反常規(guī)的情況下保持安全，選擇第一張圖片。

 

　　總結(jié)
 

　　當(dāng)你開始設(shè)計(jì)主按鈕、輔助按鈕、三級(jí)按鈕時(shí)，請(qǐng)記住每次都要針對(duì)幾個(gè)因素進(jìn)行檢查，即使是很小的不一致或不對(duì)齊等都會(huì)導(dǎo)致轉(zhuǎn)化率降低。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。