本篇是(shì)關于圓角的(de)UI設計(jì)知(zhī)識分(fēn)©σ享，主要(yào)分(fēn)為(wèi)兩個(gè)↓<₩部分(fēn)，第一(yī)部分(fēn)介紹圓角在UI設計(j≈★ì)中的(de)作(zuò)用(yòng)，第二部分(fēn)是(shì)關于↓λ在界面中容易被忽略的(de)圓角設計(jì)細節。跟著(zheα₹)天健世紀科(kē)技(jì)小(xiǎo)編一(yī)起來(lá₹≠πi)看(kàn)看(kàn)吧(ba)~

一(yī)、在UI設計(jì)中圓角有(yǒu♣∞≤)什(shén)麽作(zuò)用(yòng) 

1. 提升識别效率 

視(shì)網膜中有(yǒu)塊區(qū)域叫做(z₹≈uò)中央凹，是(shì)視(shì)覺最敏銳的(de)Ω£區(qū)域。中央凹在處理(lǐ)圓形時(shí)速度最φ 快(kuài)，而在處理(lǐ)棱角邊緣時(噀shí)則需要(yào)調用(yòng)大(dà)腦(nǎo)中更多(d∞​βuō)的(de)“神經影(yǐng)像工(gōng)具”。所以，圓角∞♠越大(dà)、越趨近(jìn)于圓形，人(rén)眼在處理±'β(lǐ)時(shí)速度越快(kuài)。 π★→;

多(duō)數(shù)情況，用(yòng≠≥$)戶使用(yòng)App時(shí)在每↑∏個(gè)頁面的(de)停留時(shí)間(jiān)都(d←φ ↕ōu)比較有(yǒu)限，我們需要(yào)确保用(yòng)戶在☆→€>盡量短(duǎn)的(de)時(shí)間(jiān)內(nèi)高(gāoδ ☆)效獲取有(yǒu)效信息并完成相(xiàng)關操≤↔‌作(zuò)，尤其對(duì)于工(gōng)具類App來(lβ‍ái)說(shuō)更是(shì)如(rú)此&♠。 

另外(wài)，巴羅神經學研究所對(duì)“角”的(d♥±ε>e)科(kē)學研究發現(xiàn)，角的(de)突顯性感知(<↔δ✘zhī)與角的(de)度數(shù)呈線性變化(h£©uà)關系，銳角比圓角産生(shēng)更強的$₹δ♣(de)虛幻突顯性（The perceive ©×™d salience of the corner varied linear→λ♥ly with the angle of the corner. Sharp ¥♥<♦angles generated strong≠$er illusory salience than shallow an₽$Ω£gles）。簡單的(de)說(shuō)就(j‌α∞Ωiù)是(shì)，角越銳利，看(kàn)起來(lái)" ↕就(jiù)越突顯。而角出現(xiàn)的(de)越凸顯，就(☆≈"jiù)越多(duō)地(dì)影(yǐng)響視(shì)覺的(de)識别過‌₹&™程，導緻識别變慢(màn)。 

2. 強化(huà)內(nèi)容引導 

圓角具有(yǒu)其特殊的(de)內(nèi‍↑)在指向性，在界面的(de)容器(qì)（如(rúπε∏ε)卡片、頭像等）上(shàng)使用(yòng)圓角，會(huì)引導$©±人(rén)們的(de)目光(guāng)聚ε☆σ焦在圓角矩形或圓形內(nèi)部的(de)內(nèΩ∞πi)容上(shàng)面。 

而尖角的(de)外(wài)擴性會(huì)導緻視(shì)覺發散，不(bù)&≠¥能(néng)使用(yòng)戶的(de)∞∞≈∏注意力在第一(yī)時(shí)間(jiān)集中到(dào)容器(qì"₽)中的(de)內(nèi)容本身(shēn)。因此，作(zuò)為(wèi)α¶內(nèi)容載體(tǐ)，帶有(yǒu)圓角的(de)容器(qì)具備較強的✔≠¶★(de)內(nèi)容引導性，能(néng)夠讓€×用(yòng)戶更加快(kuài)速的(de)獲取內(nèi)βσ容信息。  

3. 傳遞正面情緒 

在我們長(cháng)久以來(lái)形成的(de)©₽αβ心智認知(zhī)中，認為(wèi)尖銳的(de)物(wù)品具有(y♠∞↕ǒu)危險性，而圓潤的(de)物(wù)品更加安全。帶有(₽₹∑¶yǒu)弧度，造型相(xiàng)對(duì)圓潤的(d>'&Ωe)物(wù)品更有(yǒu)助于制(zhì)造正面情緒，工(Ω≠gōng)業(yè)設計(jì)中常用(yò‌Ω♥πng)圓潤平滑的(de)造型來(lái)§★增加産品傳遞給用(yòng)戶的(de)安全和(h ♦€é)舒适性。 

對(duì)于互聯網産品，我們也(yě)存在相(xiàng)同的ε€(de)認知(zhī)，所以在界面設計(jì)中使用(yòng)圓角圖形，也&>(yě)同樣可(kě)以帶給用(yòng)戶正面情緒÷♣‌☆。  

4. 呼應設備外(wài)形 

考慮到(dào)握持舒适度、安全性和(hé)生(shēng)産工(gōn↓∑g)藝等原因，目前市(shì)面上(shàng)多(duō)數(α↔φ$shù)的(de)手機(jī)外(wài)觀和(✔♣→hé)屏幕都(dōu)是(shì)采用(y× £¥òng)較大(dà)圓角的(de)設計(jì)。随著(zhe>♥​)全面屏手機(jī)的(de)興起，我們愈發能(néng)注€"λ 意到(dào)從(cóng)手機(jī)外(wài)型到←♦€ε(dào)內(nèi)部屏幕，圓角都(dōu)是(shì)以一(yī)種嵌套≤©≈→的(de)關系層層對(duì)應的(de)。 

同樣的(de)，為(wèi)了(le)遵循這(zhè)£¥種規律，同時(shí)延續從(cóng)硬件(jiàn)Ω↕到(dào)界面的(de)設計(jì)語言，€↕→←屏幕內(nèi)部界面中的(de)圓角也(yě)是(sβ€hì)呈現(xiàn)出同樣的(de)嵌套和(hé)對(duì)應關系& ✘。 

二、圓角設計(jì)需要(yào)注意什(shén)麽 ♥≥$Ω;

接下(xià)來(lái)，說(shuō →© )說(shuō)在UI設計(jì)中容易被忽略的(de)兩點問(Ω♠≥​wèn)題。 

1. 內(nèi)外(wài)圓角的(de)對(dβ¶uì)應關系 

首先，我們來(lái)看(kàn)一(yī)個(gè)對(duì)比示δβ®σ例，你(nǐ)能(néng)發現(xiàn)♦γ左側彈窗(chuāng)的(de)設計(jì)細節問(wèn)題嗎€₹(ma)？左右兩個(gè)彈窗(chuāng)的(‌γ₽♥de)不(bù)同之處僅在于按鈕的(de)圓角半徑'₽☆∑上(shàng)，左側彈窗(chuāng)的(de)設計(✔©‌&jì)問(wèn)題就(jiù)是(shì)出現(xiàn)在這(zhè≤"≈$)裡(lǐ)。 

前文(wén)中我們提到(dào)過界面中容器(qì)σ ★與其內(nèi)部元素的(de)圓角是(shì)→¶♥存在的(de)對(duì)應關系的(de)，但(dà∏$•​n)這(zhè)個(gè)細節有(yǒu)時(shí)在設計(jì)過程¥π≥¥中會(huì)被我們忽略，導緻的(de)結果★±↕就(jiù)是(shì)界面的(de)細節經不(bù)起Ω  推敲，影(yǐng)響視(shì)覺的(de)美(měi)觀舒适。 <÷×δ

我們需要(yào)考慮如(rú)何去(qù)解‌♣決這(zhè)個(gè)問(wèn)題，如(rú)果∑®僅僅是(shì)做(zuò)一(yī)些(xiē)個(gè)人(ré↑β↕€n)練習(xí)或者單一(yī)獨立頁面，那(‍>₩nà)麽我們隻須要(yào)在設計(jì)中注意這(zh÷∞è)一(yī)點，通(tōng)過觀察讓圓角在視$β(shì)覺上(shàng)看(kàn)起↓‍βσ來(lái)對(duì)應和(hé)諧即可¶≈∏(kě)。 

但(dàn)是(shì)如(rú)果你(nλα♦λǐ)要(yào)去(qù)制(zhì)定一(yī)套設計(jì)★"規範或在一(yī)個(gè)已經成熟的(de)産品中去(q♥"&ù)進行(xíng)設計(jì)，我們就(jiù)須要(y↑©↔&ào)在保證視(shì)覺效果的(de)前提下(x™'₽ià)讓界面中的(de)圓角參數(shù)更加嚴謹一(yī)些(xiē)，以∏ε♦&便于規範的(de)使用(yòng)人(rén)員(yuán)了(l$→e)解參數(shù)為(wèi)什(shén)麽是(shì)∑±↓§這(zhè)個(gè)，如(rú)何得(de)到(dào)的(de)？以≈<及，後續遵從(cóng)何種規則去(qù)進行(xíπ↑Ωng)設計(jì)，來(lái)保證不(bù)同設計(jì)☆<λ師(shī)産出标準的(de)一(yī)緻。&nbs↑∑✔p;

我們在網上(shàng)可(kě)以看(kàn)到(dào)好"÷(hǎo)多(duō)教程告訴你(nǐ)：外(wài)部容器(qì)圓角半徑γ₩♠☆ = 內(nèi)部元素的(de)圓角半徑&Ω≠ + 二者間(jiān)距

△圖片來(lái)源于網絡 

但(dàn)我認為(wèi)這(zhè) ©種計(jì)算(suàn)方式是(shì)有(yǒu)問(wèn)題的(de)÷←ε♦，首先，多(duō)數(shù)情況下(xià)我們是(shΩ™ì)根據外(wài)部容器(qì)來(lái)推導計(jì)算(suàn)內(☆∑↕nèi)部元素圓角，而不(bù)是(shì)從(cóng)內(nèi)向外(w'£ài)，比如(rú)：iOS從(cóng)手機(jī)屏幕→Dock欄→Do↕☆÷ck欄中的(de)圖标都(dōu)是(shì)存在圓角的(de)對(d¶$★&uì)應關系，我相(xiàng)信應該不(bù)是(shì)先→↑→确定內(nèi)部圖标的(de)圓角再向外(wà✔•♣i)推導容器(qì)和(hé)屏幕圓角的(de)'π。然後，如(rú)果我們向內(nèi)推導'‌，這(zhè)個(gè)計(jì)算(suàn)公式就(jiù)僅在一←♥γ(yī)定條件(jiàn)下(xià)成立，因為(w​♥♦φèi)在二者間(jiān)距大(dà)于外(wài)部容器(qì)圓角半 £φ≥徑的(de)時(shí)候，內(nèi)部元素的(de)圓角‍♠÷£半徑就(jiù)成了(le)負數(shù)。₩α​← 

那(nà)麽如(rú)何計(jì)算(suàn)是(sφΩ≤hì)相(xiàng)對(duì)嚴謹的(de)呢(ne←γ‍)？ 

我們從(cóng)外(wài)向內(nèi)推導，在外←>(wài)部容器(qì)圓角固定的(de)情況下(x♦εià)，內(nèi)部元素的(de)圓角半徑與它∑¶到(dào)外(wài)部容器(qì)的(de)距離(lí)相(xià€®÷ng)關，在理(lǐ)想情況下(xià)：→₽↓ 

內(nèi)部元素的(de)圓角半徑 = 外(wài)部容器(q&♣ì)圓角半徑 - 二者間(jiān)距 

但(dàn)是(shì)，和(hé)前面提到(dào)過的(de)問(wèn☆λ↓)題一(yī)樣，以上(shàng)的(de)計(j ε®ì)算(suàn)公式有(yǒu)一(yī)定的(de)局限β≈，比如(rú)在外(wài)部圓角很(hěn)小(xiπ≠>≠ǎo)的(de)情況下(xià)，就(jiù)♣≤無法去(qù)根據間(jiān)距計(jì)算(suà∞β₹n)內(nèi)部的(de)圓角參數(shù)。 

對(duì)此，我推導出了(le)一(yī)套當存在圓角嵌套情況下(xi•‍à)，用(yòng)于輔助定義圓角參數(shù)的(de)規則：內(nè¥λ≤÷i)外(wài)卡片 (元素) 圓角差值必須要(yào)小(xiǎo)于¥¥或等于卡片 (元素) 間(jiān)距。并且，內(nèi)外★☆(wài)卡片 (元素) 圓角差值越大(dà)，內πα♥≠(nèi)外(wài)卡片 (元素) 之間(jiān)的(d≠₽₩e)間(jiān)距取值範圍越靈活。 

具體(tǐ)的(de)推導過程如(rú)下(xià)： 

01. 當內(nèi)外(wài)卡片圓角差值等于卡片間(jiān)距時ε‍ ©(shí)，內(nèi)外(wài)圓角“完美(měi)∞≤&”對(duì)應。當內(nèi)外(wài)卡片圓角差值大(dà)于卡片間(j↕©♦iān)距時(shí)，圓角部分(fēn)出現(xiàn)明(m‌δ↑±íng)顯視(shì)覺問(wèn)題； 

02. 內(nèi)外(wài)圓角“完美(m¥αěi)”對(duì)應卡片的(de)圓角部分(fēn)的(de)間(j€☆iān)距看(kàn)起來(lái)比直線位置要(yàα♣​o)顯得(de)略小(xiǎo)，所以當卡片間(jiān)距不$&(bù)變，內(nèi)部圓角在一(yī)定範圍內(nèiβ÷)變大(dà)時(shí)，在視(shì)覺上(shàng)內(nèi₩λ₽→)外(wài)圓角仍然是(shì)可(kě)對(duì)應的(de)，但(® ™dàn)是(shì)當內(nèi)部圓角過大(dà)時(∏§✔shí)，則會(huì)出現(xiàn)問(wèn)題₽ ←。結合這(zhè)兩步可(kě)得(de)出結論a：內(nèi)Ωβσ外(wài)卡片圓角差值必須小(xiǎo)于或等于卡片間↓‍‌(jiān)距； 

03. 根據步驟2，內(nèi)部卡片圓角略大(dà)于“完美(mě₩₩♠★i)”對(duì)應圓角時(shí)，內(nèi)外(×≠‍wài)卡片圓角也(yě)是(shì)能(néng∞σ♦)夠形成呼應的(de)； 

04. 此時(shí)，在步驟3的(de)基礎上(shàλφ≈ng)，當內(nèi)外(wài)卡片間(jiān)距變大(dà)時(sh‍≥í) (18px→34px)，左側示例圖的 €λ(de)內(nèi)外(wài)圓角依然可(kě)以對(duì)應，但(δα≤•dàn)是(shì)右側示例圖的(de)內(nèi)部圓角看(kàn≠‌πε)起來(lái)會(huì)過大(dà)，由¶‌•此可(kě)得(de)出結論b：在滿足規← ↕則a的(de)條件(jiàn)下(xià)，內(nèi)外( " wài)卡片圓角差值越大(dà)，內(nèiφε±)外(wài)卡片之間(jiān)的(de)×¥πφ間(jiān)距取值範圍越靈活。

2. 文(wén)字到(dào)圓角容器(qì)的(de)內(nèi)邊≤™距 

下(xià)面來(lái)說(shuō)εσ® 第二個(gè)容易被忽略的(de)問(wèn)題，文(wén)字內(nèiεγ∏)容到(dào)圓角容器(qì)的(de)內 ≠×(nèi)邊距。如(rú)果将容器(qì)內(nèi)的(de)文(wén)≤↓≤字粗略看(kàn)做(zuò)一(yī)個(gè)矩形₽✘σ，那(nà)麽結合前文(wén)中提到(dào)的(de)↕→₽內(nèi)外(wài)圓角對(duì)應關系，文(wén)字到(&≈≈dào)容器(qì)的(de)內(nèi)邊距應随♦¶♣著(zhe)容器(qì)圓角半徑的(de)增加₹®$而增加； 

另外(wài)一(yī)點，在我們增加容器(qì)的(de)圓Ω✔∑角半徑後，導緻容器(qì)內(nèi)部空(kōng)間(jiān)被壓縮，圓♥↔"角半徑越大(dà)越明(míng)顯，我們也(yě)‌δ∞✘需要(yào)去(qù)調整內(nèi)邊距✘∏，以保證視(shì)覺上(shàng)的(de)透氣和(♦¶≤↑hé)呼吸感 。 

最後，補充一(yī)點，在前面一(yī)張示例圖中我們可(kě)以α‍看(kàn)到(dào)，雖然我們通(tōng)過調★✘♥整間(jiān)距的(de)方式，讓界面的(de)視(shì)覺看(kàφα©>n)起來(lái)更加的(de)舒适美(měi)觀，但(dàn)是(sh♠≠αì)同時(shí)，也(yě)因間(jiān)距的(de‌≤")增加造成了(le)屏幕橫縱空(kōng)間(j≈Ω£αiān)利用(yòng)率的(de)下(xià)降，↑λ↓♣所以在工(gōng)作(zuò)中需要(yào)根據實際情況綜合考量，¥₩去(qù)定義圓角及內(nèi)容間(jiān)距。