大家好，我是Clippp脓恕。今天為大家?guī)淼奈恼率?b>「按鈕」設計膜宋。很多小伙伴都思考過這樣一個問題：按鈕設計到底用直角還是圓角？本文透過表面分析本質(zhì)炼幔，對按鈕設計的理解帶來質(zhì)的提升秋茫。
直角按鈕需要換成圓角按鈕嗎？圓角按鈕的可用性是否更好乃秀？如何選擇合適的按鈕樣式肛著？
當深入到按鈕設計背后的用戶體驗時，可能會遇到這些問題跺讯。為了讓按鈕突出枢贿，我們可以設計更大的尺寸、更亮的顏色和更深的陰影刀脏。
但在界面設計中局荚，按鈕不僅要突出，還要與其他元素保持適當?shù)钠胶猓?/b>選擇圓角or直角起到關鍵作用愈污。
一耀态、圓角更易于識別？
毫無疑問暂雹，圓角的識別度比直角更高首装。把兩類卡片各自對齊，我們能更容易計算出圓角卡片的總數(shù)杭跪。
這是因為圓角卡片的邊角有更明顯的邊緣仙逻，可以引導我們的視覺差異。相反涧尿，直角卡片看起來彼此一樣桨醋，因此不太可能引起我們的注意。
所以在網(wǎng)格布局中现斋，圓角的效果更好喜最。
例如在TurboTax界面中，使用圓角卡片的上半部分要比使用直角卡片的下半部分更引人注目庄蹋。
二瞬内、應該使用全圓角嗎迷雪？
在有足夠空間的界面中，全圓角按鈕的表現(xiàn)會更好虫蝶。例如在Spotify的移動端和web端中章咧，全圓角的綠色按鈕非常成功地吸引了用戶的注意力。
從內(nèi)容上來看能真，Spotify的用戶體驗全都與播放有關：播放音樂赁严、播放播客、發(fā)現(xiàn)播放列表粉铐，因此App中的主要交互非常簡單疼约。
圓角播放按鈕的設計與其他的圖標完全不一樣，反過來鼓勵用戶點擊“播放”蝙泼。
三程剥、什么時候不用全圓角？
在以下幾個情況中汤踏，全圓角的按鈕可能會導致可用性問題织鲸。
1、全圓角按鈕看起來像標簽
與圓角半徑小的按鈕相比溪胶，全圓角按鈕看起來更像標簽搂擦。用戶習慣于點按鈕而不是標簽，所以面對這樣的設計會感到困惑哗脖。
2瀑踢、全圓角按鈕無法顯示嵌套選項
當全圓角按鈕帶有可用的嵌套選項時，通常會在右側顯示一個V形圖標懒熙。觸發(fā)嵌套選項的有效觸控區(qū)域就鎖定到V形圖標的大小(16或24像素)丘损。
這是一個很小的可點擊區(qū)域普办。
如果我們改用半圓角按鈕工扎，可以把整個按鈕當作觸控區(qū)域。單擊后將顯示所有可用選項衔蹲，這樣更有效肢娘。
蘋果不建議將圓形按鈕作為操作按鈕。全圓角按鈕通常用于“幫助”或“選擇”舆驶。
3橱健、全圓角按鈕不能堆疊
每個頁面中通常僅有一個全圓角按鈕作為主要操作按鈕，起到引導和觸發(fā)的作用沙廉。
假設我們的數(shù)據(jù)表有10行拘荡，每行都有一個按鈕，那么最終會有10個圓角按鈕撬陵，結果是它們看起來都像主操作按鈕珊皿，反而影響操作网缝。
替代方法是使用無邊框按鈕進行堆疊布局，就像iPhone通知的按鈕一樣蟋定，或者只在懸停時顯示按鈕選項粉臊。
通過最大程度地減少按鈕的出現(xiàn)，用戶可以將精力集中在交互的內(nèi)容上驶兜。
四扼仲、圓角的美學
圓角看起來很現(xiàn)代。應用圓角的趨勢始于移動端抄淑，然后擴展到Web端屠凶。
圓角傳達了一種簡單、樂觀和開放的態(tài)度蝇狼。這也解釋了為什么它適用于許多設計系統(tǒng)阅畴，并在圖標、按鈕和插圖中被廣泛使用迅耘。
更新后的谷歌瀏覽器也將之前的直角搜索框改成了全圓角的形式贱枣。用戶在搜索時還可以獲得搜索結果的簡要視圖。
總結
按鈕應該用圓角還是直角沒有對錯之分颤专，合適的才是最好的纽哥。
透過表面看本質(zhì)，我們不僅僅是在調(diào)整按鈕的圓角弧度栖秕，實際上還在盡可能減少干擾春塌，鼓勵和引導用戶與產(chǎn)品交互。
精彩推薦：
