直角還是圓角:按鈕設計背後的邏輯分析

編輯導語:按鈕設計成直角比較好還是圓角比較好呢?這看似是一個小問題,但是實際上關乎着用户的體驗感。本文作者就針對這個問題,為我們進行了按鈕設計背後的邏輯分析。

直角還是圓角:按鈕設計背後的邏輯分析

按鈕設計到底用直角還是圓角?面對這樣的問題要學會透過現象看本質,也就是透過按鈕看體驗。表面上看我們只是單純在設計按鈕,實際上每一次調整都關係到按鈕設計背後的用户體驗。

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

當深入到按鈕設計背後的用户體驗時,可能會遇到這些問題。為了讓按鈕突出,我們可以設計更大的尺寸、更亮的顏色和更深的陰影。

直角還是圓角:按鈕設計背後的邏輯分析

但在界面設計中,按不僅要突出,還要與其他元素保持適當的平衡,選擇圓角or直角起到關鍵作用。

一、圓角更易於識別?

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

直角還是圓角:按鈕設計背後的邏輯分析

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

所以在網格佈局中,圓角的效果更好。

直角還是圓角:按鈕設計背後的邏輯分析

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

直角還是圓角:按鈕設計背後的邏輯分析
二、應該使用全圓角嗎?

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

直角還是圓角:按鈕設計背後的邏輯分析

從內容上來看,Spotify的用户體驗全都與播放有關:播放音樂、播放播客、發現播放列表,因此App中的主要交互非常簡單。

圓角播放按鈕的設計與其他的圖標完全不一樣,反過來鼓勵用户點擊“播放”。

直角還是圓角:按鈕設計背後的邏輯分析
三、什麼時候不用全圓角?

在以下幾個情況中,全圓角的按鈕可能會導致可用性問題。

1. 全圓角按鈕看起來像標籤

與圓角半徑小的按鈕相比,全圓角按鈕看起來更像標籤。用户習慣於點按鈕而不是標籤,所以面對這樣的設計會感到困惑。

直角還是圓角:按鈕設計背後的邏輯分析
2. 全圓角按鈕無法顯示嵌套選項

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

直角還是圓角:按鈕設計背後的邏輯分析

這是一個很小的可點擊區域:

直角還是圓角:按鈕設計背後的邏輯分析

如果我們改用半圓角按鈕,可以把整個按鈕當作觸控區域。單擊後將顯示所有可用選項,這樣更有效。

直角還是圓角:按鈕設計背後的邏輯分析

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

直角還是圓角:按鈕設計背後的邏輯分析
3. 全圓角按鈕不能堆疊

每個頁面中通常僅有一個全圓角按鈕作為主要操作按鈕,起到引導和觸發的作用。

假設我們的數據表有10行,每行都有一個按鈕,那麼最終會有10個圓角按鈕,結果是它們看起來都像主操作按鈕,反而影響操作。

直角還是圓角:按鈕設計背後的邏輯分析

替代方法是使用無邊框按鈕進行堆疊佈局,就像iPhone通知的按鈕一樣,或者只在懸停時顯示按鈕選項。

通過最大程度地減少按鈕的出現,用户可以將精力集中在交互的內容上。

直角還是圓角:按鈕設計背後的邏輯分析
四、圓角的美學

圓角看起來很現代,應用圓角的趨勢始於移動端,然後擴展到Web端。圓角傳達了一種簡單、樂觀和開放的態度。這也解釋了為什麼它適用於許多設計系統,並在圖標、按鈕和插圖中被廣泛使用。

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

直角還是圓角:按鈕設計背後的邏輯分析
五、總結

按鈕應該用圓角還是直角沒有對錯之分,合適的才是最好的。

透過表面看本質,我們不僅僅是在調整按鈕的圓角弧度,實際上還在儘可能減少干擾,鼓勵和引導用户與產品交互。

本文由 @Clippp 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自 Pexels,基於 CC0 協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 1407 字。

轉載請註明: 直角還是圓角:按鈕設計背後的邏輯分析 - 楠木軒