我們熟悉的蘋果公司使用圓角卡片最早已追溯到2023年。當時， apple 的天才程式設計師 bill atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 lisa 和 macintosh 機器上快速畫出圓和橢圓。steve jobs 看了之後有另外的想法，他說：「圓和橢圓都不錯，但是能畫出帶圓角的四邊形嗎?我們現在也能畫出嗎?」 bill atkinson 回答說很難做到，而且他認為並不真需要圓角四邊形。steve jobs 就立刻強烈回應了：「到處都是圓角四邊形!看看這個房間周圍就知道了!」並且還帶著 bill atkinson 出去轉看可以碰到多少圓角四邊形，最後 bill atkinson 被說服，第二天下午就拿出了滿意的結果。
目錄1. 手機工業設計圓角的應用
2. 手機系統ui的圓角應用
3. 人眼識別圓角更加容易
4. 圓角的安全性、親密性
5. 圓角使得資訊更易於處理
6. 總結
1.手機工業設計圓角的應用
首先我們縱觀2023年當下各大廠商發布的手機，在工業設計上來看基本都採用了更加柔和的圓角設計。例如：iphone、samsung、小公尺、vivo等等
在螢幕設計上同樣選擇了圓角設計，在細節之處也保持了高度的統一，例如：在攝像頭位置的連線處同樣採用了圓角弧度作為過渡。我們以iphone為例：
可見圓角設計的應用已經成為硬體工業設計的中的非常重要的設計語言。
2.手機系統ui的圓角應用
不止是手機的工業硬體設計上採用了大量的圓角，各大廠商的手機系統 ui 也大量採用了圓角設計。大家最熟悉的可能就是 ios 系統裡的圓角設計，自2023年隨著 ios 7 的發布，apple 將 ios 上的標誌性的圓角標輪廓做了更新，將工業設計中的曲線連續概念應用到了視覺設計上，一直延續至今，在 ios 12 全面應用。
除了 ios ，android 的各大廠商也紛紛使用圓角設計，例如：samsung 的 one ui，都是採用了圓角的設計語言。
以及國內的 miui 10 的系統介面設計同樣使用了圓角作為設計語言。
3.人眼處理圓角更加容易
相對於其他圖形，人類的眼睛更容易識別圓角矩形而不是直角矩形，因為人在眼睛的生理構造上**凹(fovea centralis，是視網膜中視覺最敏銳的區域)在處理圓形時最快，而處理矩形邊緣則需要涉及大腦中更多的「神經影像工具」。所以，人眼處理圓角更容易，因為它們看起來比普通矩形更接近於圓。
例如： app store today頁面，通過圓角的卡片設計使用者可以快速識別內容，但如果換成直角的話則會提公升它的識別成本。
在巴羅(barrow)神經學研究所完成的關於「角(corners)」的科學研究發現，「角的突顯**知與角的度數的線性變化，銳角比鈍角產生更強的虛幻的突顯性」。換句話說，角越銳利，看起來就越顯而易見。而角出現的越凸顯，就越多對視覺過程產生影響。
例如：西瓜**改版中，將「銳角」的**按鈕改成了「圓角」的**按鈕，較少了銳角對使用者的視覺影響。
4.圓角更加安全
相對於銳角，圓角顯得更加柔和，具有安全感。尖銳的圖形或者物品更容易應用在警惕性的場景裡，會給人予以警示或者傷害。例如：危險的標示
圓角自身的圖形屬性則更加柔和、舒適，給人一種安全感和親密。例如：在設計玩具的時候會採用大量的圓角設計，來讓家長對其放下戒備心，讓家長覺得這是安全的，可以給孩子玩。試想哪個家長會給孩子一把刀子玩?
現在的少兒使用者群體增長也帶來了不可避免的趨勢，針對少兒使用者，由於群體的特殊性，少兒應用 app 中使用了大量的圓角設計，例如： abc mouse 中控制項都使用了大圓角的設計，使介面顯得富有童趣，且安全可靠。
5.圓角使得資訊更易於處理
a.圓角的引導性
圓角在使用地圖或圖表的場景中具有得天獨厚的優勢，圓角的弧度能夠更加平滑、連續的引導使用者的視線，符合使用者的頭部與眼睛的自然運動。而銳角則會迫使使用者的視線進行轉折，容易造成使用者視線的停頓。
例如：北京的地鐵地圖，在折線處都採用了圓角設計，具有很強的引導性，來幫助使用者快速查詢各個地鐵站點。
在一些具有引導性、指向性的圖示中大量使用圓角曲線，例如：高德地圖的導航介面，轉彎的轉折點使用了圓角作為過渡，引導使用者視線。
b.圓角的內指向性
在卡片上的應用中，由於邊緣圓角向內指向矩形的中心更加明顯，所以更加凸顯卡片內的內容。如圖例：
當多個卡片併排時，帶圓角的卡片具有更強的內部指向性，且相鄰的兩條線差異化較大，我們可以清楚分辨他們的邊界線，所以更加容易被分辨;而同樣大小的直角矩形的內部指向性較弱以及臨近的兩根「線」更加相似，分辨起來會相對困難一些。
例如： nice 的好貨頁面，通過簡單的修改我們再次比較一下直角與圓角在實際中的應用，我們可以看到，在識別直角卡片的時候我們需要耗費更多的精力，而圓角卡片則不要耗費過多的精力，且由於圓角的內指向性，圓角卡片能夠更好的承托卡片內的內容。
6.總結
1. 人眼的**凹在處理圓角的時候更加快捷方便，而銳角則會對眼睛造成過多的影響，不易處理。
2. 圓角更加具有安全感和親密性，這一點我們可以聯想到生活中對我們具有傷害性和威脅的物品，例如剪刀、危險標示等等。
3. 圓角的弧度符合人眼和頭部的自然運動，具有良好的引導性;在卡片中能夠清晰區分卡片的邊界，且圓角具有優秀的內指向性，更加凸顯卡片中的內容資訊。
關於圓角問題
圓角很容易實現 e這是經常使用的圓角表示方式。很實用，但不可避免地會出現一些問題。在標準盒模型中，制定的width，height指的是內容的寬度，也就是說，新增了邊框寬度時，元素所佔的空間尺寸會改變，這樣很有可能會影響到原有布局。當然，可以使用box sizing border box來拯救布局。當...
關於圓角border radius
一 border radius 可以同時設定1 4個值 a 1個值 控制4個圓角 b 2個值 第1個控制左上角和右下角 第2個值控制左下角和右上角 c 3個值 第1個控制 第2個值控制左下角和右上角 第三個值控制右下角 d 4個值 依次控制4個圓角 從左上角 到 左下角 單個圓角的設定 border...
關於切圓角的優化
當我們切圓角.比如在復用的cell中的某個控制項切圓角.我們會在滑動的時候覺得特別卡.這是由於離屏渲染所造成的.我們可以設定layer屬性中的shouldrasterize yes.在layer設定shouldrasterize yes之後，會把被光柵化的圖層儲存成位圖並快取起來，其中圓角或者陰影之...