UI設計中按鈕設計攻略

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

　　建立認知
 

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

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

 

　　好的設計應符合用戶的認知習慣
 

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

 

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

 

　　按鈕的拆解
 

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

 

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

　　間距,對齊
 

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

 

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

 

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

 

　　合適的大小
 

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

　　對于基于光標的設備32×32也可以。切記按鈕越大，操作的便利性越高。

 

　　邊緣平衡
 

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

 

　　行動呼吁
 

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

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

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

 

　　按鈕類型

 

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

　　圓角平衡
 

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

 

　　對齊圖標
 

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

 

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

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

　　保持按鈕可讀性
 

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

 

　　良好的實踐
 

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

 

　　在按鈕標簽后放置右箭頭或向右標志會使識別性更強，按鈕的引導性更強。

 

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

 

　　搭配文本
 

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

　　下拉按鈕
 

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

 

　　層次結構
 

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

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

 

　　總結
 

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