Ui設(shè)計中的按鈕設(shè)計分析

　　很多小伙伴都思考過這樣一個問題：按鈕設(shè)計到底用直角還是圓角?今天AAA教育郭老師給大家分析一下UI設(shè)計中的按鈕設(shè)計。本文透過表面分析本質(zhì)，對按鈕設(shè)計的理解帶來質(zhì)的提升。
 

　　直角按鈕需要換成圓角按鈕嗎?圓角按鈕的可用性是否更好?如何選擇合適的按鈕樣式?
 

　　當(dāng)深入到按鈕設(shè)計背后的用戶體驗時，可能會遇到這些問題。為了讓按鈕突出，我們可以設(shè)計更大的尺寸、更亮的顏色和更深的陰影。

 

　　但在界面設(shè)計中，按鈕不僅要突出，還要與其他元素保持適當(dāng)?shù)钠胶?，選擇圓角or直角起到關(guān)鍵作用。
 

　　圓角更易于識別?
 

　　毫無疑問，圓角的識別度比直角更高。把兩類卡片各自對齊，我們能更容易計算出圓角卡片的總數(shù)。

 

　　這是因為圓角卡片的邊角有更明顯的邊緣，可以引導(dǎo)我們的視覺差異。相反，直角卡片看起來彼此一樣，因此不太可能引起我們的注意。
 

　　所以在網(wǎng)格布局中，圓角的效果更好。

 

　　例如在TurboTax界面中，使用圓角卡片的上半部分要比使用直角卡片的下半部分更引人注目。

 

　　應(yīng)該使用全圓角嗎?
 

　　在有足夠空間的界面中，全圓角按鈕的表現(xiàn)會更好。例如在Spotify的移動端和web端中，全圓角的綠色按鈕非常成功地吸引了用戶的注意力。

 

　　從內(nèi)容上來看，Spotify的用戶體驗全都與播放有關(guān)：播放音樂、播放播客、發(fā)現(xiàn)播放列表，因此App中的主要交互非常簡單。
 

　　圓角播放按鈕的設(shè)計與其他的圖標(biāo)完全不一樣，反過來鼓勵用戶點擊“播放”。

 

　　什么時候不用全圓角?
 

　　在以下幾個情況中，全圓角的按鈕可能會導(dǎo)致可用性問題。
 

　　1、全圓角按鈕看起來像標(biāo)簽
 

　　與圓角半徑小的按鈕相比，全圓角按鈕看起來更像標(biāo)簽。用戶習(xí)慣于點按鈕而不是標(biāo)簽，所以面對這樣的設(shè)計會感到困惑。

 

　　2、全圓角按鈕無法顯示嵌套選項
 

　　當(dāng)全圓角按鈕帶有可用的嵌套選項時，通常會在右側(cè)顯示一個V形圖標(biāo)。觸發(fā)嵌套選項的有效觸控區(qū)域就鎖定到V形圖標(biāo)的大小(16或24像素)。

 

　　這是一個很小的可點擊區(qū)域。

 

　　如果我們改用半圓角按鈕，可以把整個按鈕當(dāng)作觸控區(qū)域。單擊后將顯示所有可用選項，這樣更有效。

 

　　蘋果不建議將圓形按鈕作為操作按鈕。全圓角按鈕通常用于“幫助”或“選擇”。

 

　　3、全圓角按鈕不能堆疊每個頁面中通常僅有一個全圓角按鈕作為主要操作按鈕，起到引導(dǎo)和觸發(fā)的作用。假設(shè)我們的數(shù)據(jù)表有10行，每行都有一個按鈕，那么最終會有10個圓角按鈕，結(jié)果是它們看起來都像主操作按鈕，反而影響操作。

 

　　替代方法是使用無邊框按鈕進(jìn)行堆疊布局，就像iPhone通知的按鈕一樣，或者只在懸停時顯示按鈕選項。通過最大程度地減少按鈕的出現(xiàn)，用戶可以將精力集中在交互的內(nèi)容上。

 

　　圓角的美學(xué)
 

　　圓角看起來很現(xiàn)代。應(yīng)用圓角的趨勢始于移動端，然后擴展到Web端。
 

　　圓角傳達(dá)了一種簡單、樂觀和開放的態(tài)度。這也解釋了為什么它適用于許多設(shè)計系統(tǒng)，并在圖標(biāo)、按鈕和插圖中被廣泛使用。
 

　　更新后的谷歌瀏覽器也將之前的直角搜索框改成了全圓角的形式。用戶在搜索時還可以獲得搜索結(jié)果的簡要視圖。

 

　　總結(jié)
 

　　按鈕應(yīng)該用圓角還是直角沒有對錯之分，合適的才是最好的。
 

　　透過表面看本質(zhì)，我們不僅僅是在調(diào)整按鈕的圓角弧度，實際上還在盡可能減少干擾，鼓勵和引導(dǎo)用戶與產(chǎn)品交互。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。