本篇是關(guān)于圓角的UI設(shè)計(jì)知識(shí)分享，主要分為兩個(gè)部分，第一部分介紹圓角在UI設(shè)計(jì)中的作用，第二部分是關(guān)于在界面中容易被忽略的圓角設(shè)計(jì)細(xì)節(jié)。

1. 在UI設(shè)計(jì)中圓角有什么作用

1.1 提升識(shí)別效率

視網(wǎng)膜中有塊區(qū)域叫做中央凹，是視覺(jué)最敏銳的區(qū)域。中央凹在處理圓形時(shí)速度最快，而在處理棱角邊緣時(shí)則需要調(diào)用大腦中更多的“神經(jīng)影像工具”。所以，圓角越大、越趨近于圓形，人眼在處理時(shí)速度越快。

多數(shù)情況，用戶使用App時(shí)在每個(gè)頁(yè)面的停留時(shí)間都比較有限，我們需要確保用戶在盡量短的時(shí)間內(nèi)高效獲取有效信息并完成相關(guān)操作，尤其對(duì)于工具類App來(lái)說(shuō)更是如此。

另外，巴羅神經(jīng)學(xué)研究所對(duì)“角”的科學(xué)研究發(fā)現(xiàn)，角的突顯性感知與角的度數(shù)呈線性變化關(guān)系，銳角比圓角產(chǎn)生更強(qiáng)的虛幻突顯性（The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles）。簡(jiǎn)單的說(shuō)就是，角越銳利，看起來(lái)就越突顯。而角出現(xiàn)的越凸顯，就越多地影響視覺(jué)的識(shí)別過(guò)程，導(dǎo)致識(shí)別變慢。

1.2 強(qiáng)化內(nèi)容引導(dǎo)

圓角具有其特殊的內(nèi)在指向性，在界面的容器（如卡片、頭像等）上使用圓角，會(huì)引導(dǎo)人們的目光聚焦在圓角矩形或圓形內(nèi)部的內(nèi)容上面。

而尖角的外擴(kuò)性會(huì)導(dǎo)致視覺(jué)發(fā)散，不能使用戶的注意力在第一時(shí)間集中到容器中的內(nèi)容本身。因此，作為內(nèi)容載體，帶有圓角的容器具備較強(qiáng)的內(nèi)容引導(dǎo)性，能夠讓用戶更加快速的獲取內(nèi)容信息。

1.3 傳遞正面情緒

在我們長(zhǎng)久以來(lái)形成的心智認(rèn)知中，認(rèn)為尖銳的物品具有危險(xiǎn)性，而圓潤(rùn)的物品更加安全。帶有弧度，造型相對(duì)圓潤(rùn)的物品更有助于制造正面情緒，工業(yè)設(shè)計(jì)中常用圓潤(rùn)平滑的造型來(lái)增加產(chǎn)品傳遞給用戶的安全和舒適性。

對(duì)于互聯(lián)網(wǎng)產(chǎn)品，我們也存在相同的認(rèn)知，所以在界面設(shè)計(jì)中使用圓角圖形，也同樣可以帶給用戶正面情緒。

1.4 呼應(yīng)設(shè)備外形

考慮到握持舒適度、安全性和生產(chǎn)工藝等原因，目前市面上多數(shù)的手機(jī)外觀和屏幕都是采用較大圓角的設(shè)計(jì)。隨著全面屏手機(jī)的興起，我們愈發(fā)能注意到從手機(jī)外型到內(nèi)部屏幕，圓角都是以一種嵌套的關(guān)系層層對(duì)應(yīng)的。

同樣的，為了遵循這種規(guī)律，同時(shí)延續(xù)從硬件到界面的設(shè)計(jì)語(yǔ)言，屏幕內(nèi)部界面中的圓角也是呈現(xiàn)出同樣的嵌套和對(duì)應(yīng)關(guān)系。

2. 圓角設(shè)計(jì)需要注意什么

接下來(lái)，說(shuō)說(shuō)在UI設(shè)計(jì)中容易被忽略的兩點(diǎn)問(wèn)題。

2.1 內(nèi)外圓角的對(duì)應(yīng)關(guān)系

首先，我們來(lái)看一個(gè)對(duì)比示例，你能發(fā)現(xiàn)左側(cè)彈窗的設(shè)計(jì)細(xì)節(jié)問(wèn)題嗎？左右兩個(gè)彈窗的不同之處僅在于按鈕的圓角半徑上，左側(cè)彈窗的設(shè)計(jì)問(wèn)題就是出現(xiàn)在這里。

前文中我們提到過(guò)界面中容器與其內(nèi)部元素的圓角是存在的對(duì)應(yīng)關(guān)系的，但這個(gè)細(xì)節(jié)有時(shí)在設(shè)計(jì)過(guò)程中會(huì)被我們忽略，導(dǎo)致的結(jié)果就是界面的細(xì)節(jié)經(jīng)不起推敲，影響視覺(jué)的美觀舒適。

我們需要考慮如何去解決這個(gè)問(wèn)題，如果僅僅是做一些個(gè)人練習(xí)或者單一獨(dú)立頁(yè)面，那么我們只須要在設(shè)計(jì)中注意這一點(diǎn)，通過(guò)觀察讓圓角在視覺(jué)上看起來(lái)對(duì)應(yīng)和諧即可。

但是如果你要去制定一套設(shè)計(jì)規(guī)范或在一個(gè)已經(jīng)成熟的產(chǎn)品中去進(jìn)行設(shè)計(jì)，我們就須要在保證視覺(jué)效果的前提下讓界面中的圓角參數(shù)更加嚴(yán)謹(jǐn)一些，以便于規(guī)范的使用人員了解參數(shù)為什么是這個(gè)，如何得到的？以及，后續(xù)遵從何種規(guī)則去進(jìn)行設(shè)計(jì)，來(lái)保證不同設(shè)計(jì)師產(chǎn)出標(biāo)準(zhǔn)的一致。

我們?cè)诰W(wǎng)上可以看到好多教程告訴你：外部容器圓角半徑 = 內(nèi)部元素的圓角半徑 + 二者間距

△圖片來(lái)源于網(wǎng)絡(luò)

但我認(rèn)為這種計(jì)算方式是有問(wèn)題的，首先，多數(shù)情況下我們是根據(jù)外部容器來(lái)推導(dǎo)計(jì)算內(nèi)部元素圓角，而不是從內(nèi)向外，比如：iOS從手機(jī)屏幕→Dock欄→Dock欄中的圖標(biāo)都是存在圓角的對(duì)應(yīng)關(guān)系，我相信應(yīng)該不是先確定內(nèi)部圖標(biāo)的圓角再向外推導(dǎo)容器和屏幕圓角的。然后，如果我們向內(nèi)推導(dǎo)，這個(gè)計(jì)算公式就僅在一定條件下成立，因?yàn)樵诙唛g距大于外部容器圓角半徑的時(shí)候，內(nèi)部元素的圓角半徑就成了負(fù)數(shù)。

那么如何計(jì)算是相對(duì)嚴(yán)謹(jǐn)?shù)哪兀?/p>

我們從外向內(nèi)推導(dǎo)，在外部容器圓角固定的情況下，內(nèi)部元素的圓角半徑與它到外部容器的距離相關(guān)，在理想情況下：

內(nèi)部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距

但是，和前面提到過(guò)的問(wèn)題一樣，以上的計(jì)算公式有一定的局限，比如在外部圓角很小的情況下，就無(wú)法去根據(jù)間距計(jì)算內(nèi)部的圓角參數(shù)。

對(duì)此，我推導(dǎo)出了一套當(dāng)存在圓角嵌套情況下，用于輔助定義圓角參數(shù)的規(guī)則：內(nèi)外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且，內(nèi)外卡片 (元素) 圓角差值越大，內(nèi)外卡片 (元素) 之間的間距取值范圍越靈活。

具體的推導(dǎo)過(guò)程如下：

1. 當(dāng)內(nèi)外卡片圓角差值等于卡片間距時(shí)，內(nèi)外圓角“完美”對(duì)應(yīng)。當(dāng)內(nèi)外卡片圓角差值大于卡片間距時(shí)，圓角部分出現(xiàn)明顯視覺(jué)問(wèn)題；

2. 內(nèi)外圓角“完美”對(duì)應(yīng)卡片的圓角部分的間距看起來(lái)比直線位置要顯得略小，所以當(dāng)卡片間距不變，內(nèi)部圓角在一定范圍內(nèi)變大時(shí)，在視覺(jué)上內(nèi)外圓角仍然是可對(duì)應(yīng)的，但是當(dāng)內(nèi)部圓角過(guò)大時(shí)，則會(huì)出現(xiàn)問(wèn)題。結(jié)合這兩步可得出結(jié)論a：內(nèi)外卡片圓角差值必須小于或等于卡片間距；

3. 根據(jù)步驟2，內(nèi)部卡片圓角略大于“完美”對(duì)應(yīng)圓角時(shí)，內(nèi)外卡片圓角也是能夠形成呼應(yīng)的；

4. 此時(shí)，在步驟3的基礎(chǔ)上，當(dāng)內(nèi)外卡片間距變大時(shí) (18px→34px)，左側(cè)示例圖的內(nèi)外圓角依然可以對(duì)應(yīng)，但是右側(cè)示例圖的內(nèi)部圓角看起來(lái)會(huì)過(guò)大，由此可得出結(jié)論b：在滿足規(guī)則a的條件下，內(nèi)外卡片圓角差值越大，內(nèi)外卡片之間的間距取值范圍越靈活；

2.2 文字到圓角容器的內(nèi)邊距

下面來(lái)說(shuō)第二個(gè)容易被忽略的問(wèn)題，文字內(nèi)容到圓角容器的內(nèi)邊距。如果將容器內(nèi)的文字粗略看做一個(gè)矩形，那么結(jié)合前文中提到的內(nèi)外圓角對(duì)應(yīng)關(guān)系，文字到容器的內(nèi)邊距應(yīng)隨著容器圓角半徑的增加而增加；

另外一點(diǎn)，在我們?cè)黾尤萜鞯膱A角半徑后，導(dǎo)致容器內(nèi)部空間被壓縮，圓角半徑越大越明顯，我們也需要去調(diào)整內(nèi)邊距，以保證視覺(jué)上的透氣和呼吸感 。

最后，補(bǔ)充一點(diǎn)，在前面一張示例圖中我們可以看到，雖然我們通過(guò)調(diào)整間距的方式，讓界面的視覺(jué)看起來(lái)更加的舒適美觀，但是同時(shí)，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據(jù)實(shí)際情況綜合考量，去定義圓角及內(nèi)容間距。