中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：按鈕設(shè)計(jì)成直角比較好還是圓角比較好呢？這看似是一個(gè)小問(wèn)題，但是實(shí)際上關(guān)乎著用戶的體驗(yàn)感。本文作者就針對(duì)這個(gè)問(wèn)題，為我們進(jìn)行了按鈕設(shè)計(jì)背后的邏輯分析。

按鈕設(shè)計(jì)到底用直角還是圓角？面對(duì)這樣的問(wèn)題要學(xué)會(huì)透過(guò)現(xiàn)象看本質(zhì)，也就是透過(guò)按鈕看體驗(yàn)。表面上看我們只是單純?cè)谠O(shè)計(jì)按鈕，實(shí)際上每一次調(diào)整都關(guān)系到按鈕設(shè)計(jì)背后的用戶體驗(yàn)。

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

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

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

一、圓角更易于識(shí)別？

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

這是因?yàn)閳A角卡片的邊角有更明顯的邊緣，可以引導(dǎo)我們的視覺(jué)差異。相反，直角卡片看起來(lái)彼此一樣，因此不太可能引起我們的注意。

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

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

二、應(yīng)該使用全圓角嗎？

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

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

圓角播放按鈕的設(shè)計(jì)與其他的圖標(biāo)完全不一樣，反過(guò)來(lái)鼓勵(lì)用戶點(diǎn)擊“播放”。

三、什么時(shí)候不用全圓角？

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

1. 全圓角按鈕看起來(lái)像標(biāo)簽

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

2. 全圓角按鈕無(wú)法顯示嵌套選項(xiàng)

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

這是一個(gè)很小的可點(diǎn)擊區(qū)域：

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

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

3. 全圓角按鈕不能堆疊

每個(gè)頁(yè)面中通常僅有一個(gè)全圓角按鈕作為主要操作按鈕，起到引導(dǎo)和觸發(fā)的作用。

假設(shè)我們的數(shù)據(jù)表有10行，每行都有一個(gè)按鈕，那么最終會(huì)有10個(gè)圓角按鈕，結(jié)果是它們看起來(lái)都像主操作按鈕，反而影響操作。

替代方法是使用無(wú)邊框按鈕進(jìn)行堆疊布局，就像iPhone通知的按鈕一樣，或者只在懸停時(shí)顯示按鈕選項(xiàng)。

通過(guò)最大程度地減少按鈕的出現(xiàn)，用戶可以將精力集中在交互的內(nèi)容上。

四、圓角的美學(xué)

圓角看起來(lái)很現(xiàn)代，應(yīng)用圓角的趨勢(shì)始于移動(dòng)端，然后擴(kuò)展到Web端。圓角傳達(dá)了一種簡(jiǎn)單、樂(lè)觀和開(kāi)放的態(tài)度。這也解釋了為什么它適用于許多設(shè)計(jì)系統(tǒng)，并在圖標(biāo)、按鈕和插圖中被廣泛使用。

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

五、總結(jié)

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

透過(guò)表面看本質(zhì)，我們不僅僅是在調(diào)整按鈕的圓角弧度，實(shí)際上還在盡可能減少干擾，鼓勵(lì)和引導(dǎo)用戶與產(chǎn)品交互。

#專欄作家#

Clippp，微信公眾號(hào)：Clip設(shè)計(jì)夾，人人都是產(chǎn)品經(jīng)理專欄作家。每周定期分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議