2025-3-18 天宇 移動端UI設計文章及欣賞
本篇是關于圓角的UI設計知識分享，主要分為兩個部分，第一部分介紹圓角在UI設計中的作用，第二部分是關于在界面中容易被忽略的圓角設計細節。
視網膜中有塊區域叫做中央凹，是視覺最敏銳的區域。中央凹在處理圓形時速度最快，而在處理棱角邊緣時則需要調用大腦中更多的“神經影像工具”。所以，圓角越大、越趨近于圓形，人眼在處理時速度越快。
多數情況，用戶使用App時在每個頁面的停留時間都比較有限，我們需要確保用戶在盡量短的時間內高效獲取有效信息并完成相關操作，尤其對于工具類App來說更是如此。
另外，巴羅神經學研究所對“角”的科學研究發現，角的突顯性感知與角的度數呈線性變化關系，銳角比圓角產生更強的虛幻突顯性（The perceived salience of the corner varied linearly with the angle of the corner. Sharp angles generated stronger illusory salience than shallow angles）。簡單的說就是，角越銳利，看起來就越突顯。而角出現的越凸顯，就越多地影響視覺的識別過程，導致識別變慢。
圓角具有其特殊的內在指向性，在界面的容器（如卡片、頭像等）上使用圓角，會引導人們的目光聚焦在圓角矩形或圓形內部的內容上面。
而尖角的外擴性會導致視覺發散，不能使用戶的注意力在第一時間集中到容器中的內容本身。因此，作為內容載體，帶有圓角的容器具備較強的內容引導性，能夠讓用戶更加快速的獲取內容信息。
在我們長久以來形成的心智認知中，認為尖銳的物品具有危險性，而圓潤的物品更加安全。帶有弧度，造型相對圓潤的物品更有助于制造正面情緒，工業設計中常用圓潤平滑的造型來增加產品傳遞給用戶的安全和舒適性。
對于互聯網產品，我們也存在相同的認知，所以在界面設計中使用圓角圖形，也同樣可以帶給用戶正面情緒。
考慮到握持舒適度、安全性和生產工藝等原因，目前市面上多數的手機外觀和屏幕都是采用較大圓角的設計。隨著全面屏手機的興起，我們愈發能注意到從手機外型到內部屏幕，圓角都是以一種嵌套的關系層層對應的。
同樣的，為了遵循這種規律，同時延續從硬件到界面的設計語言，屏幕內部界面中的圓角也是呈現出同樣的嵌套和對應關系。
接下來，說說在UI設計中容易被忽略的兩點問題。
首先，我們來看一個對比示例，你能發現左側彈窗的設計細節問題嗎？左右兩個彈窗的不同之處僅在于按鈕的圓角半徑上，左側彈窗的設計問題就是出現在這里。
前文中我們提到過界面中容器與其內部元素的圓角是存在的對應關系的，但這個細節有時在設計過程中會被我們忽略，導致的結果就是界面的細節經不起推敲，影響視覺的美觀舒適。
我們需要考慮如何去解決這個問題，如果僅僅是做一些個人練習或者單一獨立頁面，那么我們只須要在設計中注意這一點，通過觀察讓圓角在視覺上看起來對應和諧即可。
但是如果你要去制定一套設計規范或在一個已經成熟的產品中去進行設計，我們就須要在保證視覺效果的前提下讓界面中的圓角參數更加嚴謹一些，以便于規范的使用人員了解參數為什么是這個，如何得到的？以及，后續遵從何種規則去進行設計，來保證不同設計師產出標準的一致。
我們在網上可以看到好多教程告訴你：外部容器圓角半徑 = 內部元素的圓角半徑 + 二者間距
△圖片來源于網絡
但我認為這種計算方式是有問題的，首先，多數情況下我們是根據外部容器來推導計算內部元素圓角，而不是從內向外，比如：iOS從手機屏幕→Dock欄→Dock欄中的圖標都是存在圓角的對應關系，我相信應該不是先確定內部圖標的圓角再向外推導容器和屏幕圓角的。然后，如果我們向內推導，這個計算公式就僅在一定條件下成立，因為在二者間距大于外部容器圓角半徑的時候，內部元素的圓角半徑就成了負數。
那么如何計算是相對嚴謹的呢？
我們從外向內推導，在外部容器圓角固定的情況下，內部元素的圓角半徑與它到外部容器的距離相關，在理想情況下：
內部元素的圓角半徑 = 外部容器圓角半徑 - 二者間距
但是，和前面提到過的問題一樣，以上的計算公式有一定的局限，比如在外部圓角很小的情況下，就無法去根據間距計算內部的圓角參數。
對此，我推導出了一套當存在圓角嵌套情況下，用于輔助定義圓角參數的規則：內外卡片 (元素) 圓角差值必須要小于或等于卡片 (元素) 間距。并且，內外卡片 (元素) 圓角差值越大，內外卡片 (元素) 之間的間距取值范圍越靈活。
具體的推導過程如下：
1. 當內外卡片圓角差值等于卡片間距時，內外圓角“完美”對應。當內外卡片圓角差值大于卡片間距時，圓角部分出現明顯視覺問題；
2. 內外圓角“完美”對應卡片的圓角部分的間距看起來比直線位置要顯得略小，所以當卡片間距不變，內部圓角在一定范圍內變大時，在視覺上內外圓角仍然是可對應的，但是當內部圓角過大時，則會出現問題。結合這兩步可得出結論a：內外卡片圓角差值必須小于或等于卡片間距；
3. 根據步驟2，內部卡片圓角略大于“完美”對應圓角時，內外卡片圓角也是能夠形成呼應的；
4. 此時，在步驟3的基礎上，當內外卡片間距變大時 (18px→34px)，左側示例圖的內外圓角依然可以對應，但是右側示例圖的內部圓角看起來會過大，由此可得出結論b：在滿足規則a的條件下，內外卡片圓角差值越大，內外卡片之間的間距取值范圍越靈活；
下面來說第二個容易被忽略的問題，文字內容到圓角容器的內邊距。如果將容器內的文字粗略看做一個矩形，那么結合前文中提到的內外圓角對應關系，文字到容器的內邊距應隨著容器圓角半徑的增加而增加；
另外一點，在我們增加容器的圓角半徑后，導致容器內部空間被壓縮，圓角半徑越大越明顯，我們也需要去調整內邊距，以保證視覺上的透氣和呼吸感 。
最后，補充一點，在前面一張示例圖中我們可以看到，雖然我們通過調整間距的方式，讓界面的視覺看起來更加的舒適美觀，但是同時，也因間距的增加造成了屏幕橫縱空間利用率的下降，所以在工作中需要根據實際情況綜合考量，去定義圓角及內容間距。
