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

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

　　建立認知
 

　　噓!在你的印象中按鈕是長啥樣的，思考一會……
 

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

 

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

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

 

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

 

　　按鈕的拆解
 

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

 

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

　　間距,對齊
 

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

 

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

 

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

 

　　合適的大小
 

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

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

 

　　邊緣平衡
 

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

 

　　行動呼吁
 

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

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

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

 

　　按鈕類型

 

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

　　圓角平衡
 

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

 

　　對齊圖標(biāo)
 

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

 

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

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

　　保持按鈕可讀性
 

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

 

　　良好的實踐
 

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

 

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

 

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

 

　　搭配文本
 

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

　　下拉按鈕
 

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

 

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

　　按鈕應(yīng)該放在用戶希望它們在的地方。這通常是指在描述性元素下面，并且通常與一邊對齊。
 

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

 

　　總結(jié)
 

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