婷婷激情五月九九九,久久日小视频

按鈕在UI設(shè)計中無處不在，它的功能又很普通但又重要，比如上期我們分享的《提高轉(zhuǎn)化率的界面，終極觸發(fā)設(shè)計指南》就提及了按鈕對觸發(fā)用戶購買的重要性，所以今天繼續(xù)分享8個按鈕設(shè)計細節(jié)，特別適用于網(wǎng)頁和APP設(shè)計上使用，如果是新手設(shè)計師更需要閱讀本文，來一起學(xué)習(xí)。

最重要的要知道，

一個按鈕應(yīng)該看起來“像按鈕一樣”

設(shè)計按鈕時最重要的規(guī)則是使其足夠明顯突出，因此不會與其他任何東西混淆。

我們通常習(xí)慣了某種樣式的按鈕，他們一般涉及到一些操作。這些按鈕與類似的按鈕看起來越像越好。這就是為什么對于按鈕來說，矩形（或圓角矩形）始終是最適合的選擇。

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

設(shè)計按鈕時，請記住每一個元素，并合理地選擇它們。以品牌手冊為基準，考慮哪種按鈕將與品牌相匹配并很好地適應(yīng)界面。

應(yīng)該使用網(wǎng)格基數(shù)來設(shè)置填充和安全邊距。在上面的示例中，橫向間距是縱向間距的兩倍，這是提高可讀性的安全選擇。

按鈕間距不均勻是所有界面中最常見的問題之一。仔細檢查按鈕標簽是否在水平和垂直方向上居中。如果需要確定的話可以創(chuàng)建一個新的規(guī)范。

除了基于網(wǎng)格的方法外，還可以使用大寫W來選擇合適的按鈕間距。如果按鈕標簽的每一側(cè)至少適合1W，那么就是合適的。文字到按鈕邊框的間距最好使用2W來提高可讀性。

不要忘記按鈕的安全空間。這兩個按鈕之間要有一定的空隙，否則會導(dǎo)致點擊錯誤。

網(wǎng)頁和移動按鈕都應(yīng)具有正確的最小尺寸。如果按鈕太小的話，將很難點擊或單擊它們。用戶會沮喪，并可能導(dǎo)致用戶卸載您的應(yīng)用程序。最好的方法是從移動設(shè)備上的所有交互式元素的44 x 44點(需要查詢）開始。

最好的地方是 50左右用于移動按鈕。在基于光標的設(shè)備中，32 x 32也應(yīng)該起作用。請記住，即使在網(wǎng)頁上，也遵循“按鈕越大，使用起來就越容易”的原則。

重要按鈕其實也可以與圖標配合去使用。比如說在顯示“結(jié)帳”一詞的前提下，可以加入的購物車圖標更快速地讓用戶進行識別。

在按鈕標簽之后放置向右箭頭或>形符號，可以更清晰的去引導(dǎo)用戶。用戶如果“繼續(xù)”操作的話，可增加一個CTA的按鈕，方便用戶點擊。

與平面按鈕相比，帶有陰影的按鈕也會更增加用戶的點擊欲望，并且能更快地引起用戶的注意。在按鈕中添加一個彌散式投影，讓它在背景中清晰地展示出來。關(guān)于按鈕陰影的實際操作將在文章后面闡述。

圓形按鈕被認為比鋒利的邊緣更具有親和力。但是，與此同時，這使得它們的內(nèi)容設(shè)計變得更加復(fù)雜。如果你在按鈕上方保留了對齊的文本，則圓角越圓，則該文本在視覺上將越小。它會讓你感覺好像左邊距同時在兩個位置中。

在按鈕上進行良好的圖標對齊是最困難的事情。在多數(shù)情況下，字體粗細和圖標粗細之間的關(guān)系和對齊圖標直接相關(guān)且有特定的聯(lián)系。但是，有一條簡單而有用的規(guī)則在大多數(shù)情況下都適用。

根據(jù)我們的圓角半徑，我們創(chuàng)建了一個圓或正方形，其大小等于按鈕的高度。在它里面我們創(chuàng)建另外一個形狀來放置圖標。它應(yīng)該有一個填充在這個較大的形狀里。與我們的文字高度相同，然后我們將圖標放在較小的形狀里。如果是向右箭頭“>”，最好使箭頭高度與文本高度相同，并且你還可以根據(jù)字體寬度去衡量圖標的線性寬度。兩者的統(tǒng)一性越緊密，最終展示出來的效果會越好。