本篇是關(guān)于圓角的UI設(shè)計知識分享，主要分為兩個部分，第一部分介紹圓角在UI設(shè)計中的作用，第二部分是關(guān)于在界面中容易被忽略的圓角設(shè)計細節(jié)。
視網(wǎng)膜中有塊區(qū)域叫做中央凹，是視覺最敏銳的區(qū)域。中央凹在處理圓形時速度最快，而在處理棱角邊緣時則需要調(diào)用大腦中更多的“神經(jīng)影像工具”。所以，圓角越大、越趨近于圓形，人眼在處理時速度越快。
多數(shù)情況，用戶使用App時在每個頁面的停留時間都比較有限，我們需要確保用戶在盡量短的時間內(nèi)高效獲取有效信息并完成相關(guān)操作，尤其對于工具類App來說更是如此。
另外，巴羅神經(jīng)學(xué)研究所對“角”的科學(xué)研究發(fā)現(xiàn)，角的突顯性感知與角的度數(shù)呈線性變化關(guān)系，銳角比圓角產(chǎn)生更強的虛幻突顯性（The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles）。簡單的說就是，角越銳利，看起來就越突顯。而角出現(xiàn)的越凸顯，就越多地影響視覺的識別過程，導(dǎo)致識別變慢。
圓角具有其特殊的內(nèi)在指向性，在界面的容器（如卡片、頭像等）上使用圓角，會引導(dǎo)人們的目光聚焦在圓角矩形或圓形內(nèi)部的內(nèi)容上面。
而尖角的外擴性會導(dǎo)致視覺發(fā)散，不能使用戶的注意力在第一時間集中到容器中的內(nèi)容本身。因此，作為內(nèi)容載體，帶有圓角的容器具備較強的內(nèi)容引導(dǎo)性，能夠讓用戶更加快速的獲取內(nèi)容信息。
在我們長久以來形成的心智認知中，認為尖銳的物品具有危險性，而圓潤的物品更加安全。帶有弧度，造型相對圓潤的物品更有助于制造正面情緒，工業(yè)設(shè)計中常用圓潤平滑的造型來增加產(chǎn)品傳遞給用戶的安全和舒適性。
對于互聯(lián)網(wǎng)產(chǎn)品，我們也存在相同的認知，所以在界面設(shè)計中使用圓角圖形，也同樣可以帶給用戶正面情緒。
考慮到握持舒適度、安全性和生產(chǎn)工藝等原因，目前市面上多數(shù)的手機外觀和屏幕都是采用較大圓角的設(shè)計。隨著全面屏手機的興起，我們愈發(fā)能注意到從手機外型到內(nèi)部屏幕，圓角都是以一種嵌套的關(guān)系層層對應(yīng)的。
同樣的，為了遵循這種規(guī)律，同時延續(xù)從硬件到界面的設(shè)計語言，屏幕內(nèi)部界面中的圓角也是呈現(xiàn)出同樣的嵌套和對應(yīng)關(guān)系。
接下來，說說在UI設(shè)計中容易被忽略的兩點問題。
首先，我們來看一個對比示例，你能發(fā)現(xiàn)左側(cè)彈窗的設(shè)計細節(jié)問題嗎？左右兩個彈窗的不同之處僅在于按鈕的圓角半徑上，左側(cè)彈窗的設(shè)計問題就是出現(xiàn)在這里。
前文中我們提到過界面中容器與其內(nèi)部元素的圓角是存在的對應(yīng)關(guān)系的，但這個細節(jié)有時在設(shè)計過程中會被我們忽略，導(dǎo)致的結(jié)果就是界面的細節(jié)經(jīng)不起推敲，影響視覺的美觀舒適。
我們需要考慮如何去解決這個問題，如果僅僅是做一些個人練習(xí)或者單一獨立頁面，那么我們只須要在設(shè)計中注意這一點，通過觀察讓圓角在視覺上看起來對應(yīng)和諧即可。
但是如果你要去制定一套設(shè)計規(guī)范或在一個已經(jīng)成熟的產(chǎn)品中去進行設(shè)計，我們就須要在保證視覺效果的前提下讓界面中的圓角參數(shù)更加嚴謹一些，以便于規(guī)范的使用人員了解參數(shù)為什么是這個，如何得到的？以及，后續(xù)遵從何種規(guī)則去進行設(shè)計，來保證不同設(shè)計師產(chǎn)出標準的一致。
我們在網(wǎng)上可以看到好多教程告訴你：外部容器圓角半徑 = 內(nèi)部元素的圓角半徑 + 二者間距
△圖片來源于網(wǎng)絡(luò)
但我認為這種計算方式是有問題的，首先，多數(shù)情況下我們是根據(jù)外部容器來推導(dǎo)計算內(nèi)部元素圓角，而不是從內(nèi)向外，比如：iOS從手機屏幕→Dock欄→Dock欄中的圖標都是存在圓角的對應(yīng)關(guān)系，我相信應(yīng)該不是先確定內(nèi)部圖標的圓角再向外推導(dǎo)容器和屏幕圓角的。然后，如果我們向內(nèi)推導(dǎo)，這個計算公式就僅在一定條件下成立，因為在二者間距大于外部容器圓角半徑的時候，內(nèi)部元素的圓角半徑就成了負數(shù)。
那么如何計算是相對嚴謹?shù)哪兀?/p>
我們從外向內(nèi)推導(dǎo)，在外部容器圓角固定的情況下，內(nèi)部元素的圓角半徑與它到外部容器的距離相關(guān)，在理想情況下：
內(nèi)部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距
但是，和前面提到過的問題一樣，以上的計算公式有一定的局限，比如在外部圓角很小的情況下，就無法去根據(jù)間距計算內(nèi)部的圓角參數(shù)。
對此，我推導(dǎo)出了一套當存在圓角嵌套情況下，用于輔助定義圓角參數(shù)的規(guī)則：內(nèi)外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且，內(nèi)外卡片 (元素) 圓角差值越大，內(nèi)外卡片 (元素) 之間的間距取值范圍越靈活。
具體的推導(dǎo)過程如下：
1. 當內(nèi)外卡片圓角差值等于卡片間距時，內(nèi)外圓角“完美”對應(yīng)。當內(nèi)外卡片圓角差值大于卡片間距時，圓角部分出現(xiàn)明顯視覺問題；
2. 內(nèi)外圓角“完美”對應(yīng)卡片的圓角部分的間距看起來比直線位置要顯得略小，所以當卡片間距不變，內(nèi)部圓角在一定范圍內(nèi)變大時，在視覺上內(nèi)外圓角仍然是可對應(yīng)的，但是當內(nèi)部圓角過大時，則會出現(xiàn)問題。結(jié)合這兩步可得出結(jié)論a：內(nèi)外卡片圓角差值必須小于或等于卡片間距；
3. 根據(jù)步驟2，內(nèi)部卡片圓角略大于“完美”對應(yīng)圓角時，內(nèi)外卡片圓角也是能夠形成呼應(yīng)的；
4. 此時，在步驟3的基礎(chǔ)上，當內(nèi)外卡片間距變大時 (18px→34px)，左側(cè)示例圖的內(nèi)外圓角依然可以對應(yīng)，但是右側(cè)示例圖的內(nèi)部圓角看起來會過大，由此可得出結(jié)論b：在滿足規(guī)則a的條件下，內(nèi)外卡片圓角差值越大，內(nèi)外卡片之間的間距取值范圍越靈活；
下面來說第二個容易被忽略的問題，文字內(nèi)容到圓角容器的內(nèi)邊距。如果將容器內(nèi)的文字粗略看做一個矩形，那么結(jié)合前文中提到的內(nèi)外圓角對應(yīng)關(guān)系，文字到容器的內(nèi)邊距應(yīng)隨著容器圓角半徑的增加而增加；
另外一點，在我們增加容器的圓角半徑后，導(dǎo)致容器內(nèi)部空間被壓縮，圓角半徑越大越明顯，我們也需要去調(diào)整內(nèi)邊距，以保證視覺上的透氣和呼吸感 。
最后，補充一點，在前面一張示例圖中我們可以看到，雖然我們通過調(diào)整間距的方式，讓界面的視覺看起來更加的舒適美觀，但是同時，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據(jù)實際情況綜合考量，去定義圓角及內(nèi)容間距。
對于 UI 設(shè)計師來說，圖標設(shè)計的能力至關(guān)重要，也是提升感官體驗的重要方向。對于一些初入行業(yè)的設(shè)計師，習(xí)慣下載圖標素材應(yīng)付項目需求，失去了動手能力培養(yǎng)的機會。甚至一些多年工作經(jīng)驗的老司機，依然還擺脫不了使用素材的習(xí)慣，稍微復(fù)雜一點的技法就會難以駕馭。
1. 切勿過度素材化
對于初入職場的設(shè)計師來說，偶爾運用素材可以理解，但是一定要學(xué)會拆解和分析，掌握還原設(shè)計的技巧和能力。
過度依賴素材容易導(dǎo)致思維固化，不愿意去創(chuàng)造，失去創(chuàng)新設(shè)計的能力；也容易導(dǎo)致眼高手低，有想法卻實現(xiàn)不出來，極容易萌生放棄的念頭；素材拼貼形式完成的設(shè)計，在規(guī)范性和細節(jié)性上面也是大打折扣的，導(dǎo)致設(shè)計作品不夠精細化和規(guī)范性。
2. 刻意練習(xí)強化
我們需要通過刻意練習(xí)來提升圖標設(shè)計的能力，根據(jù)一萬小時定律，技法層面的提升都是通過反復(fù)磨練達到的。
3. 擺脫素材才能規(guī)范化
圖標設(shè)計從素材習(xí)慣過度到設(shè)計動手其實很容易，但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設(shè)計規(guī)范化的關(guān)鍵，然后再統(tǒng)一風(fēng)格和細節(jié)規(guī)范，掌握數(shù)字化關(guān)系也是需要我們反復(fù)研究的課題。
比如以這個天氣圖標來舉例，相信很多同學(xué)都能畫出來，但是有沒有把控里面的數(shù)字關(guān)系就難說了。通過以下示意圖我們可以看出來，大圓和小圓之間的比例關(guān)系是 4:3，而間距的關(guān)系也與圓形的大小有著數(shù)字關(guān)系。這些數(shù)字關(guān)系可以使得圖標設(shè)計更加精細化，也能引導(dǎo)我們?nèi)ヌ剿髟O(shè)計背后量化的標準和關(guān)系。
4. 質(zhì)感的層層強化
當我們繪制完圖標的造型之后，運用合適的風(fēng)格進行質(zhì)感強化也是尤為重要的。這里我先運用其中的一個風(fēng)格來完成，選擇了磨砂玻璃質(zhì)感的效果。為了質(zhì)感和層級關(guān)系更加明顯，這里單獨對局部進行了光影強化和邊界處理，看看以下步驟拆解圖感受一下。
備注：運用的軟件功能是背景模糊，Sketch 或者 Figma 等軟件皆可實現(xiàn)。
5. 延展界面場景
為了進一步強化圖標練習(xí)，延展了一個簡單的界面場景，一個由宮格布局組合成的界面設(shè)計。為了填充所需的內(nèi)容，先把之前的一些圖標作品放進去占個位置。雖然都是質(zhì)感一類的圖標，但是由于透視、配色、風(fēng)格和細節(jié)規(guī)范等不一致，整體還是存在一定的排斥感。
6. 根據(jù)界面環(huán)境重新調(diào)整
由于界面設(shè)計屬于深色主題，之前練習(xí)的天氣圖標放入場景中顯得過于突出，而且玻璃質(zhì)感的通透性沒有得到很好的發(fā)揮。于是根據(jù)界面環(huán)境對天氣圖標進行了重新調(diào)整，以深色關(guān)系調(diào)整了云朵部分，針對太陽的配色和尺寸比例也進行了調(diào)整，如以下效果圖。
7. 延續(xù)風(fēng)格補全設(shè)計
以調(diào)整后的天氣圖標作為風(fēng)格規(guī)范，延續(xù)了其它業(yè)務(wù)場景的圖標設(shè)計，在透視關(guān)系、細節(jié)規(guī)范、配色比例和光影效果等方面進行了直接延續(xù)。在光影方向上面選擇了縱向區(qū)分，左邊三個選擇左上角打光，右邊三個選擇右上角打光。（當然也可以統(tǒng)一一個方向設(shè)置光影）
8. 統(tǒng)一性還是差異化
完成的整體設(shè)計視覺風(fēng)格雖然比較統(tǒng)一，但是也有一些問題存在。圖標之間缺少差異化，過度統(tǒng)一容易視覺疲勞，于是在統(tǒng)一性和差異化上面開始糾結(jié)了。
為了既保障圖標設(shè)計表達的統(tǒng)一性，又能形成視覺感的差異化，做出了調(diào)整配色關(guān)系的決定。根據(jù)天氣圖標的配色關(guān)系延續(xù)出了其它色系，看看最終的效果如何。
你喜歡哪一版？
關(guān)于統(tǒng)一性和差異化因人而異，在朋友圈征集意見也是各有差異，那么你會喜歡哪一版呢？歡迎留言區(qū)一起互動交流。
藍藍設(shè)計的小編 http://www.kadanni.com.cn
