圓形還是方形？這是一個問題。

我們應該用圓形按鈕變成尖角按鈕嗎？圓形按鈕是否具有更好的可用性？我們如何做出明智的按鈕決定？

當你深入了解應用程序中的圓形按鈕后面的UX時，可能會遇到這些問題。我們知道更大的按鈕尺寸，更亮的顏色和更強的陰影可以使按鈕更加突出，但在動作按鈕和其他非交互元素之間找到正確的平衡是很有挑戰性的。

圓角更容易辨認嗎？

圓角更容易具有辨識性。當我們連續對齊卡片時，當它們具有圓角時，更容易計算卡片的總數。

 

圓角比尖角更容易識別

 

這是因為卡片角落的可辨別邊緣引導我們的眼睛識別視覺差異。相反，具有尖角的卡片看起來彼此相同且統一，這不太可能吸引我們的注意力。

在網格布局中，圓角的表現更好。

例如，在TurboTax的儀表板上，與使用尖角卡的中間部分相比，使用圓形卡的頂部非常引人注目。

 

Turbotax 儀表板

 

我應該使用完全圓形的按鈕嗎？

全圓形按鈕具有足夠空間的接口。在Spotify移動和Web應用程序中，全圓綠色按鈕的放置非常成功地引導用戶注意。

Spotify應用程序中的圓形按鈕
 

從上下文來講，由于Spotify用戶體驗完全與游戲有關：播放音樂，播放播客和發現播放列表，因此應用程序中的主要交互非常簡單。全方位播放按鈕與專輯和列表UI極為不同，這反過來又鼓勵用戶點擊“播放”。

 

Spotify中“Play”的互動

 

什么時候全圓形按鈕不起作用？

有幾個實例，全圓形按鈕可能會導致可用性問題。

1.全圓形按鈕看起來像標簽。

當完全圓形的按鈕看起來與標簽完全一樣時，用戶會感到困惑：“我是否點擊按鈕或過濾器？”

 

圓形按鈕或標簽？這很難說。

 

2.完全圓形的按鈕在顯示嵌套選項時失敗。

完全圓角的按鈕通常包含一個V形圖標，表示有可用的嵌套選項。觸發嵌套選項的有效觸摸區域鎖定為V形圖標（16x16或24x24像素）的大小。

可能夠嗎？這是一個相當小的區域點擊。

 

Apple不鼓勵使用圓形按鈕作為動作按鈕。全圓形按鈕通常專門用于“ 幫助 ”或呈現互斥選項（單選按鈕）。

 

來自Apple 人機界面指南的圖像

 

3.全圓形按鈕不適合堆疊。

當我們在表格和卡片中堆疊完全圓形的按鈕時，它們看起來不合適。假設我們有一個有10行的數據表并且每行都有一個按鈕，我們最終會得到10個圓形按鈕，它們看起來都像是主要的動作按鈕。

替代方案是我們可以使用無邊框按鈕，例如新macOS通知中的按鈕，或僅在懸停時顯示按鈕選項。通過最小化按鈕的存在，用戶可以專注于他們正在與之交互的應用程序。

 

使用非邊框按鈕進行堆疊布局

 

圓角的美學

圓角看起來很現代。應用完整圓角的動力從移動開始，然后擴展到Web UI。圓角傳達了簡約，樂觀和開放的感覺。它可能解釋了為什么許多設計系統適用于圓角并在圖標，按鈕和插圖中廣泛使用它們。

Chrome瀏覽器的最新更新開始使用全圓形地址欄來指示其在移動設備上的圓形Google搜索欄的合并功能。在登錄新頁面之前，用戶可以在鍵入期間獲得搜索結果的簡要視圖。

 

新的Chrome搜索欄

 

與圓形外觀對齊，工具欄中的其他按鈕具有圓形懸停狀態。在其他更新的Google應用程序（如日歷，Gmail和云端硬盤）中很容易找到圓形。

摘要

在按鈕上應用圓形外觀或銳角外觀之間沒有對錯。鼓勵和授權用戶與應用程序交互，并通過各種方式減少干擾。

 

分享最新鮮的設計文章！提供最優質的設計服務！