從圓角到圓角
iPhone 一直都是關(guān)于屏幕，Steve Jobs 在 2007 年發(fā)布會上就將第一代 iPhone 的 3.5 吋顯示屏稱為“巨大的屏幕”，而在 iPhone 設(shè)計最初階段也同“無邊泳池”這個意象相關(guān)聯(lián)，所有的設(shè)計元素遵從于屏幕而不能讓用戶分心，全屏幕設(shè)計的 iPhone X 將對這一理念的執(zhí)行提到具有劃時代意義的高度之上，由 iPhone X 劃分前后兩個時代。
但是僅一塊大屏幕無法開啟未來，屏占比和邊框?qū)挾戎惖膮?shù)指標無法用來作為時代劃分的依據(jù)，用戶的認知并非受控于一些參數(shù)條，從 89% 增大到 90% 對用戶來說并沒有質(zhì)的改變。質(zhì)的改變必須作用于用戶的認知，不是用語言上的假象或者宣傳手段來說服，而是用真象和產(chǎn)品，遞出一把鑰匙，也就是設(shè)計。
一個革命性的產(chǎn)品背后有大量的技術(shù)的支撐，每一處創(chuàng)新的實現(xiàn)背后又有大量的繁雜的具體工作，但是用戶認識到的卻是產(chǎn)品的“外在形象”，這個外在形象具有自明性，并非技術(shù)使然，用戶認識到的產(chǎn)品的外在形象與技術(shù)無任何關(guān)系，比如用戶認識到的手機就是它的外在形象，手機里面的 CPU 或者制作這款手機的工藝等對用戶來說沒有意義，因此，設(shè)計師工作的兩面性在于，臺前，需要將外在形象與背后的技術(shù)相隔離開，幕后，則需要為實現(xiàn)這個外在形象去與背后的技術(shù)形成關(guān)聯(lián)。我們看到的那些炫技的設(shè)計，就是設(shè)計師期望外在形象與背后技術(shù)形成關(guān)聯(lián)，以及我們經(jīng)常能見到的那些以參數(shù)為目標的設(shè)計，也是如此。
產(chǎn)品的外在形象越簡潔越易識別，越脫離技術(shù)關(guān)聯(lián)就越有說服力。
很多手機廠商在宣傳自己的大屏幕手機時，總會使用到一個手段，比如是平面廣告還是視頻上，那就是讓手機屏幕內(nèi)的內(nèi)容與所處的背景融合在一起，讓人感覺手機消失了，或者說邊框消失了，這種宣傳手段在強調(diào)的恰恰是手機的技術(shù)參數(shù)一面，而與“外在形象”沒有太大關(guān)聯(lián)。
iPhone X 上脫離了技術(shù)關(guān)聯(lián)的就是全屏幕，而塑造 iPhone X 的全屏幕外在形象最重要的設(shè)計特征就是四個圓角。柔性 OLED 屏幕的切割和折疊，相應(yīng)的電路堆疊技術(shù)，或者是圓角處的次像素反走樣渲染等等技術(shù)內(nèi)容，對廠家來說，可以用此輔助來向用戶說明自己創(chuàng)新的獨特之處，但對于用戶來說，真正關(guān)心的只有外在形象，也就是這塊獨特的圓角全面屏。通常來說，如此大的圓角的屏幕是反技術(shù)的，不符合技術(shù)的理性導(dǎo)向，也就是為什么它需要更多額外技術(shù)支撐的原因，但在產(chǎn)品之上，在用戶關(guān)心的外在形象之上，這個圓角屏幕卻是非常自然的結(jié)果，依照手機的形態(tài)形成的均一的屏幕外輪廓符合全面屏的概念；而另外一面，突破常規(guī)的形象（屏幕總是四四方方的）則又能表現(xiàn)出它的革命性。
Apple 標志性的圓角曲線在 iPhone X 的應(yīng)用，將其劃時代的意義通過外在形象向前推了一大步，并與其他廠家的類似產(chǎn)品形成差距，人們將進一步認為 iPhone X 才是真正的全面屏，而其他的設(shè)計，如屏幕的外輪廓沒有追隨機身形態(tài)，都會被認為不夠徹底的。與此同時，如果屏幕的圓角很小，它就更像一個技術(shù)革新產(chǎn)品，無法脫離技術(shù)關(guān)聯(lián)感，也就是無法為用戶的認知帶來革新。在 iPhone X 上，屏幕的圓角，以及因這個圓角形成的整體形象的重要性，從 Apple 對屏幕上端的缺口處理就可以得到驗證。從 Apple 的產(chǎn)品圖和宣傳資料上看，對屏幕的缺口（Notch）不僅毫無掩飾，而且還加以強調(diào)和渲染，為突出 Face ID，為形成一個標志性的視覺元素，也是以不避諱的方式在強調(diào)全屏幕形象。我們甚至可以確定，iPhone X 上端屏幕缺口兩側(cè)的圓角區(qū)域，就是為了營造“外在形象”，從功能、技術(shù)和理性層面來說，更傾向于將屏幕上端做齊平而無缺口，這個外在形象是如此重要，Apple 甚至在軟件界面上也不去對這個缺口作過多的掩飾。
如我們所知，從 iOS 開始，Apple 將產(chǎn)品上的圓角曲線應(yīng)用到界面之上，主要是圍繞著圓角四邊形的圖標上，而從 iPhone X 上的 iOS 11 上可以看到，在界面上加入了更多圓角曲線的元素，就像上圖所示的一角所展示，從外到內(nèi)，形成了一層層更加連續(xù)的多度，從最外側(cè)的圓角開始一直等距遞進到電話圖標，如果去仔細核算，這個角落可以數(shù)出至少 7 條等距圓角曲線。
到處都是圓角。
早期的計算機采用的是 CRT 顯示器，而 CRT 顯示器是用真空玻璃管做成的，要保證它的安全和密閉性，以及可制造性，CRT 顯示器玻璃要做成凸面的，而且四周的外輪廓并非四四方方，而是向外凸的弧線形成的四邊形，四個角當(dāng)然就為圓角，所以，早期的 CRT 顯示器基本都是外凸并且四角都有大圓角。
上圖分別是 1981 年的 Xerox Star 8010 和 1984 年的 Macintosh 電腦，可以看出當(dāng)時圍繞著屏幕的設(shè)計是如何抵消弧面屏幕的反直覺性，通常的方式就是用罩殼圈出一個相對四方的顯示區(qū)域，比如 Xerox Alto 那樣，而四角的圓角處理可以讓顯示區(qū)域顯得更平（因為四角形態(tài)收縮更厲害）。Xerox Star 8010 在罩殼下都為內(nèi)容顯示區(qū)，而 Macintosh 則有大的黑邊，內(nèi)容顯示區(qū)域面積更小也更為平坦，Macintosh 上的這個黑邊為界面顯示黑色，并非顯像管上的非顯示區(qū)，與“用黑色來掩蓋 iPhone X 上的屏幕缺口”同理。
Macintosh 界面四周有小小的圓角，可以看出是經(jīng)過設(shè)計的圓角。
左圖為 1983 年發(fā)行的 Lisa Office System 3.1（圖片來自 Wikipedia），可以看到界面的四角，以及計算器的界面輪廓都出現(xiàn)了圓角四邊形。
按 Andy Hertzfeld 在 The Original Macintosh 中所寫，Apple 在軟件界面上出現(xiàn)圓角四邊形可以追溯到 1981 年，Andy Hertzfeld 在 Round Rects Are Everywhere! 這一節(jié)中說到了圓角四邊形誕生時的故事。當(dāng)時 Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫出圓和橢圓，Steve Jobs 看了之后有另外的想法，他說：“圓和橢圓都不錯，但是能畫出帶圓角的四邊形嗎？我們現(xiàn)在也能畫出嗎？” Bill Atkinson 回答說很難做到，而且他認為并不真需要圓角四邊形，Steve Jobs 就立刻強烈回應(yīng)了：“到處都是圓角四邊形！看看這個房間周圍就知道了！”并且還帶著 Bill Atkinson 出去轉(zhuǎn)看可以碰到多少圓角四邊形，最后 Bill Atkinson 被說服，第二天下午就拿出了滿意的結(jié)果。
接著，圓角四邊形在 Apple 的軟件界面上到處都是了。
iOS 的圓角圖標
2013 年隨著 iOS 7 的發(fā)布，Apple 將 iOS 上的標志性的圓角圖標輪廓作了更新，將工業(yè)設(shè)計中的曲線連續(xù)概念應(yīng)用到了視覺設(shè)計之上，iOS 7 之前的圓角圖標，也包括通常的平面設(shè)計軟件中繪制的圓角四邊形，圓角部分為一段圓弧，那么在直線和曲線的連接點處曲率從 0 立刻過渡到一個恒定的數(shù)值，帶來的視覺感覺就是過渡不順暢，保證順暢就需要讓直線到曲線過渡中形成一個連續(xù)的變化，從 0 逐漸地過渡到某個數(shù)值，而不是從 0 跳動到某個數(shù)值。在實際操作中，并非一件簡單的事，曲線的過渡也是一件講究技藝的事，也要求一定的數(shù)學(xué)意識。
iOS 7 在介紹新的圓角圖標輪廓時，給出了上圖右的一張線框示意圖，圖中在圓角處密密麻麻的點讓人感到困惑，并非難以逆向破解，由于最近 Apple 在 UI Design Resources 上給出了 iOS UI 素材的下載，里面包含了這個圓角圖標輪廓的矢量圖，我們可以通過這個矢量圖可以挖掘到一些信息。
簡單的概念
在前文《J 的藝術(shù)，R 的藝術(shù)》已經(jīng)對曲率連續(xù)一些基本概念作過介紹，在此稍作重復(fù)一下。
上圖 a 為 1/4 圓弧過渡的圓角，iOS 7 之前的圓角圖標，通常平面軟件繪制的圓角四邊形，以及通常我們稱作“導(dǎo)圓角”，都為上圖 a 所示的方式。因為直線的曲率為 0，而圓弧的曲率為一固定值，所以從直線到圓弧有曲率的突變，雖然是切線連續(xù)（G1 連續(xù)），但是無法達到曲率連續(xù)（G2 連續(xù)），這種過渡的不順暢我們可以通過視覺很明顯地感覺到。
上圖 b 為用一段曲線替代了 1/4 圓弧作過渡，繪制時要求連接直線的兩端達到曲率連續(xù)，即這段曲線的曲率是從兩端的 0 逐漸連續(xù)的增大的，我們能夠從圖形的四個角上看到過渡順暢，但是，存在一個問題就是，看上去四個角不夠圓了。雖然光滑但不夠圓，我們也可以從曲率的示意圖中觀察到，這條曲線曲率的變化不具備圓的特征，因為圓的曲率處處相等，均質(zhì)而統(tǒng)一的。
我們需要做的是將上面兩種情況進行綜合，曲線與直線連接端來保證過渡的順暢，而盡可能提到曲線的圓度，即讓曲線中間段的部分曲率的變化極為緩和，接近圓的均質(zhì)統(tǒng)一的曲率特征。
上圖 C 就是采用這種策略的一種示意，曲線兩頭連續(xù)過渡，中間部分過渡緩慢，接近均等。
但是上圖 C 所示僅為一個粗略的示意，在實際的工作中，要求將會比這更高，比如說對圓度的要求到底是要多高，甚至包括曲率過渡是以怎樣的速度或加速度來進行也可能需要在考慮之中，另外也將牽涉到數(shù)據(jù)的傳遞，比如從設(shè)計到生產(chǎn)，如何來保證形狀在傳遞過程中的保真性。
但我們先否定幾個通常對 iOS 圓角圖標的猜測。
iOS 圓角圖標不是超橢圓
一個有趣的現(xiàn)象是，逆向如果是更多依賴于猜測，會發(fā)現(xiàn)結(jié)果就是指向自己的假設(shè)，而在討論 iOS 圓角圖標是怎樣的圖標和曲線，或者去擬合產(chǎn)品上的曲線，甲乙丙丁走向不同方向，而且誰都認為自己是正確的，而且一看擬合結(jié)果，嚴絲合縫。
比如 iOS 7 發(fā)布不久，有人認為是超橢圓（Superellipse），可能不少人看到超橢圓這個嚇人的專業(yè)詞就認為八九不離十了，而且一看兩者相擬合的圖，嚴絲合縫，而且還給出如何在 Photoshop 中使用的指南，但是殊不知平面軟件使用的 3 階貝塞爾曲線，而擬合用到的卻是一個 5 次方程式。其實超橢圓從頭到尾都是曲線，而沒有一條直線段，iOS 7 的圓角圖標明顯有直線部分，如果連這都能匹配上，可想而知用視覺來判斷是否高度擬合是多么不可信。
如 Wikipedia 所述，超橢圓是橢圓函數(shù)的一般化，即當(dāng)曲線階數(shù)為 2 的時候為橢圓，當(dāng)階數(shù)為 4 的時候，如上圖左所示為方圓形（Squircle），介于圓和方之間圖形（Nokia 的 MeeGo UI 圖標被認為是類似 Squircle ），上圖右為階數(shù)為 5 的曲線。
從視覺上就能看出超橢圓是曲線，找不到具有圓度的地方，從曲率分布示意圖就可以看出，曲率總是在連續(xù)過渡，而且階數(shù)越高加速度就越大，即曲率過渡的光滑程度越高。
與超橢圓有些類似的是 Rhino 里一個圓角工具（右鍵點擊），圓錐曲線圓角四邊形，是用一段圓錐曲線（二次曲線）繪制成 1/4 圖形，圓錐曲線圓角四邊形的一端極值為圓，而另外一端極值為直角四邊形，所以圓錐曲線圓角四邊形是不具有圓度的曲線。圓錐曲線因為階數(shù)不高，所以曲線的數(shù)學(xué)結(jié)構(gòu)較簡單，適合繪制一些不圓不方的圖形，可以與上面的超橢圓曲線來比較，就會發(fā)現(xiàn)圓錐曲線圓角四邊形的線條的塑造能力不及高階的曲線，即一個跨度內(nèi)曲線的形態(tài)塑造能力非常有限，所以除了特殊要求，通常很少用到這一類曲線。另外由于它是二次曲線，所以數(shù)據(jù)輸出的時候需留意。
iOS 圓角圖標不是羊角螺線
羊角螺線（Euler spiral 或者 Cornu spirals）同上面類似，如果來擬合 iOS 的圓角圖標，也可能會達到高度匹配的結(jié)果，但實際并不是。
以前羊角螺線常用于公路和鐵路工程之上，“以緩和直路線與圓曲路線之間的曲率變化”（Wikipedia 介紹）。而羊角螺線的主要特征是，它的曲率從 0 開始，而且是隨著曲線長度（弧長）增大而線性增大，所以當(dāng)一條羊角螺線的尾部與一個圓形相連時，那么這條曲線肯定是曲率連續(xù)的。如上圖右所示的兩種圖形，一條為與圓相連（圓角四邊形內(nèi)部），一條為一段羊角螺線的鏡像連接（圓角四邊形，左上角），它們都是曲率連續(xù)的（G2 連續(xù)）。
正因為羊角螺線的這個特性，隨著曲線長度的增大曲線呈線性增大，讓其具有不少應(yīng)用之處。在上圖右中，雖然我們看到了曲率的變化率曲線（紅線）具有尖點和不連續(xù)性，但是曲線本身（低一階次）是光滑連續(xù)的。上圖右的圓角四邊形左上角使用的是一段羊角螺線的鏡像連接，它的曲率從 0 線性增大到某個值，然后又降回到 0，按我們上面的基本概念中介紹，這樣的曲線是不具有圓度的。
那么羊角螺線既然有這樣的特征，我們可以在中間加入一段圓弧，如上圖右的圓角四邊形的右上角所示，就得到了一個連續(xù)的圓角，而且圓度有保證，首尾與直線段也是曲線連續(xù)，而且三段曲線形成的圓角的曲率的變化率，雖然不是連續(xù)的，但也是非常簡單的數(shù)學(xué)結(jié)構(gòu)，從 0 增大到某一數(shù)值，停留，然后再降到 0。而羊角螺線可以用三次曲線來趨近，那么在實際的應(yīng)用中就有相應(yīng)的方便之處，比如在平面的矢量繪圖軟件中使用，來繪制類似 iOS 圓角圖標的曲線連續(xù)圓角四邊形。
方法是，從 Wikipedia 可以下載到滿足使用的羊角螺線矢量圖（SVG），然后就是定義圓角曲線中圓弧的大小是多少，然后確定這段圓弧占圓角曲線總長度，也就是畫好如上圖 1 所示的圖形，然后按如圖 2 所示畫出圓弧一端的切線和法線，并畫出直線的垂線，形成一個類三角形，接著將這個類三角形移到羊角螺線之上，定好位置，如圖 3 所示，然后移動斜線，找到這條斜線與羊角螺線的相切位置，切斷羊角螺線如圖 4 所示，得到一段羊角螺線，作放大或縮小動作，裝入圓角曲線的圓弧兩頭，完畢如圖 5 所示。
這種繪制方法可以方便地在平面軟件內(nèi)完成，因為目前平面軟件沒有其他相應(yīng)的工具來直接或輔助繪制這樣的圓角四邊形，即保證曲率連續(xù)又保證圓度。那么曲線推敲的關(guān)鍵在于確定圓弧段的大小以及占整體曲線長度的比率。
用羊角螺線以這種方式（兩端羊角螺線中間圓?。├L制的圓角四邊形的缺點有兩個，一個就是形成的整條曲線它的曲率連續(xù)但曲率的變化率不連續(xù)，第二個就是羊角螺線段的曲率增大是線性的，所以雖然曲率具有加速度但曲率的變化率是恒定的。當(dāng)對曲線的品質(zhì)有更高要求時，或者是在三維產(chǎn)品上實現(xiàn)時，不僅對產(chǎn)品的形態(tài)還對產(chǎn)品的高光等光學(xué)表現(xiàn)有要求時，就可能需要用到更加光滑和連續(xù)的曲線了，因為重要的是，這一切的區(qū)別都有可能被眼睛看到。
iOS 圓角圖標
Apple 的 UI Design Resources 網(wǎng)頁上，提供了 iOS 的 UI 素材下載，在素材里面提供了 iOS 圓角圖標的矢量圖，可以導(dǎo)入各種繪圖軟件中使用，而且提供的矢量的布點方式和 iOS 7 發(fā)布時對圓角圖標描述的布點一樣，所以這個矢量圖的原真性就可以得到確認。
iOS 的圓角圖標從宏觀上看由 4 條直邊和 4 條曲線形成的圓角組成，從圓角曲線的曲率變化示意圖中可以看到它符合我們上面說的要求，即首先是曲率連續(xù)的曲線，然后能夠保證曲線的圓度，讓它看起來就像圓弧一樣，另外我們也可以看到曲率變化具有加速度，曲率變化的狀態(tài)大致可以分成五個階段，第一階段，也就是接近直線處，以緩慢的速度增加曲率，到達某一值進入第二階段，也就是快速增長階段，達到一定程度后，就連續(xù)光滑地過渡到第三階段，以極其平緩的速度變化幾乎勻速一般，也就是圓弧階段，之后的變化過程就是反方向，第四階段是快速降低，第五階段是緩慢降低到 0。
在圓角處“緩慢—加速—平緩—加速—緩慢”的變化軌跡是典型的，但具體到應(yīng)用上亦要看具體情況，并不是做到同 iOS 圓角圖標的曲率變化曲線就能符合各種要求的。
iOS 的圓角圖標在圓角處的曲線有 11 個分割點分成了 10 段曲線，它們都為 3 階貝塞爾曲線，如果仔細看這 10 段曲線，會發(fā)現(xiàn)它們前后相連并非是嚴格的曲率連續(xù)（G2 連續(xù)），看曲率示意圖在相鄰的兩端曲線見，曲率的數(shù)值有略微的跳動。并不是形成了尖點，而是有臺階段差，如上圖藍色圓圈處所示，這些臺階段差在每兩段前后相連的曲線交點處都能找到，只不過太小在上圖無法看出。
雖然再嚴格的數(shù)學(xué)意義上來說，這樣的曲線連接只能達到切線連續(xù)（G1 連續(xù)），但是我們談?wù)撌欠襁_到一種標準，還要看公差范圍，如果在公差范圍內(nèi)，那么它就是曲率連續(xù)。而更為重要的是，我們要從宏觀上從視覺上從實際應(yīng)用中去判斷，所以有這樣的臺階段差在這對曲線的光滑沒有影響。
那么這些線段和段差是如何生成的呢？我們先來分下一下圓角處的曲線。
如上圖所示，我們對分段的曲線進行測量，測量它的曲線長度（弧長），會發(fā)現(xiàn)上圖所標的這些線段的長度都是完全一樣的，除了靠近直線端的兩條曲線段，它是作了再次的分割。
而這個再次的分割，將一段曲線長度為 a 的曲線分成兩段曲線，曲線長度分別是 0.46*a 和 0.54*a，這個切割方式看上去很隨機，推斷有三種可能性：一種為作者留下的簽名，可用來追蹤（萬一被他人侵權(quán)使用）或其他作用；第二種可能是留下的干擾因素，來干擾逆向；第三種可能是為了保證數(shù)據(jù)在傳輸過程中的安全和保真性。
上圖是保證數(shù)據(jù)傳遞中的安全和保真性的一個例子，第一條曲線為 5 階曲線與直線曲率連續(xù)，所以交點位置的曲率為 0，如果這條曲率連續(xù)的曲線不作處理，傳遞給最高只有 3 階曲線的軟件，那么曲線轉(zhuǎn)化過程中很有可能變成中間這樣，如藍色所示位置曲線彎曲方向發(fā)生了變化，為了避免這種轉(zhuǎn)化過程中不必要的錯誤發(fā)生，在一些極值處，比如從 0 開始的變化，將其設(shè)置到一個與 0 接近的數(shù)值，比如上圖所示，可以給其一個非常微弱的曲率。（注：此為個人經(jīng)驗，并未經(jīng)過理論上的驗證）
我們可以不必去追究 0.46*a 和 0.54*a 的由來，因為我們能確定的是 iOS 的這寫曲線段的曲線長度（弧長）是均等的，而且都是 3 階曲線。那么，首先能否定的，這個圖形肯定不是設(shè)計師一條接一條畫出來的，也不是由程序自動生成的，因為這 10 段曲線是太多可能性里面的一種，所以合理的解釋就是通過其他曲線，更高階的曲線，轉(zhuǎn)換為多段的 3 階曲線，而這個轉(zhuǎn)換過程是以均等曲線長度為依據(jù)的，也就達到上述的多段曲線長度為 a 的曲線組成的圓角。
那么為什么不用 3 階多段的曲線來直接繪制呢？因為 3 階曲線內(nèi)部最多只滿足 G2 連續(xù)，所以無法用它來有效的繪制順暢的曲線，如果要使用多段的曲線就需要用到高階曲線，比如 5 階或 7 階。
iOS 圓角圖標是如何來保證圓度的呢，我們可以看一下圓角部分最中間的兩段曲線，按照上面長度的關(guān)系，中間兩段曲線占總曲線長度的 1/4。我們能看到一段曲線兩側(cè)的 R 值有微弱的差別，可以說明這兩段設(shè)計師就是以圓弧來要求的，但是為什么會不一樣，因為是用 3 次曲線來逼近圓弧，如果使用 2 次曲線就可以畫出曲率完全均等的圓弧，但是 2 次曲線的引入，將為后續(xù)圖形的追加以及數(shù)據(jù)傳遞帶來不可預(yù)見的復(fù)雜性，在 3D 相關(guān)的設(shè)計中，絕大多數(shù)的場景中，都需用 3 次曲線來繪制圓弧，基本上的軟件都提供 3 次曲線繪制圓形的工具。
因此，繪制問題就如上圖所示，需要事先確定的就是 X、R 和 L 的值，這些數(shù)值的確定就是這個圓角的設(shè)計工作。X 就是直線一端與圓弧圓心的距離，X 肯定為正值數(shù)字，用圓弧來形成的圓角，就是此前提到的 G1 連續(xù)圓角，X 值為 0。R 代表的圓角的大小，但因為我們要作的是曲率連續(xù)的圓角，使用到的一端圓弧小于 1/4，即上圖的 L 值，所以在設(shè)計 R 的大小時并不能完全依賴于 G1 連續(xù)圓角的感覺。X、R 和 L 值的確定是需要反復(fù)推敲，不斷畫草稿來尋找的過程。
一旦 X、R 和 L 值確定，我們就是怎么來繪制圖形的問題了。
上圖是達到 iOS 圓角圖標最直接快速的方法。圖 1 是在兩個直線段之間作一條 7 階 2 Span 的曲線，即總共控制點有 9 個控制點，7 階曲線具有很高的塑造性，而且在此處為對稱性圖形，所以只需要操作 4 個控制點就能完成任務(wù)，第 2 和第 3 個控制點受制于曲率連續(xù)將與直線共線。圖 2 是去擬合圓形，尤其是斜線區(qū)域內(nèi)要做到高度擬合，來回操作控制點。圖 3 是當(dāng)曲線調(diào)整到滿意后，從中間斷開。圖 4 是再向下斷，將圓角曲線的一半斷成均等的 4 等份，得到的 4 段曲線長度相同的 7 階曲線。圖 5 是將這 4 段 7 階曲線轉(zhuǎn)換為 3 階曲線（4 個控制點），并且作微調(diào)，保證兩兩相接的曲線切線連續(xù)，并且將曲率的段差控制到盡可能小。圖 6 就是鏡像后的結(jié)果。
這個繪制方法的關(guān)鍵點在于擬合圓部分，需要靠操作控制點，亦可借助一些分析工具（比如分析最大最小曲率的差值），讓曲線盡可能接近圓形。另外一個要點就是曲線要先分段再降階，這樣可以很好的控制好因降階帶來的形變，如果在第三步直接將完整的 7 階曲線轉(zhuǎn)為 3 階 8 段曲線，不僅形狀誤差會超出允許公差，更糟糕的曲率變化曲線將很難達到光滑。
而這個方法有一個缺點就是圓的擬合部分，需要耗費操作的時間，而且圓角曲線的中點并不在事先給出的確切位置上，改進方法如下。
讓一段 5 階 2 Span 的曲線一端與直線曲率連續(xù)，另外一頭與中間的圓弧去作曲率連續(xù)，其余操作手法類似上一方法，均分曲線段，降至三階曲線，微調(diào)曲率，鏡像完成。
以上方法都是指來完成類似 iOS 圖標圓角處 10 段曲線的繪制，而實際中有時候并不需要這么復(fù)雜，那么可考慮用以下方法。
我們已知了三段曲線，那么直接用一條 5 階的曲線完成直線和圓弧之間的連接，只要調(diào)整好曲線的曲率變化即可。
另外也可以用一條 3 階曲線來完成，當(dāng)使用 3 階曲線時，只有一個控制點可供操作，因為另外一個控制點要滿足與圓弧連續(xù)，又要與直線連續(xù)，就必然位于直線的延長線和圓弧端點處切線的交點上，所以可以拖動這個可供操作的控制點，來達到曲率連續(xù)，曲率連續(xù)的位置點存在并且只有一個，雖然用手拖動操作只能盡可能逼近，但正因為這樣的特點，即如果用 3 階曲線來完成直線和圓弧之間的曲率連續(xù)，這條 3 階曲線是確定的，所以可以用算法來完成求解，前提是前面說到的 X、R 和 L 值確定。在但 X、R 和 L 值確定的情況下，用此方法來形成三段曲線的連接，有時效果未必很好，比如上圖右下所示的 3 階曲線段，曲率的最大值出現(xiàn)在內(nèi)部而不是尾部，這將影響到曲線的質(zhì)量，如果此情況下 X 值可以變動，即這條 3 階曲線與直線連接位置可以微調(diào)，可能會帶來較好的效果。
盡管用 3 階曲線來完成圓角曲線的繪制相對簡單，只需要動一個控制點，但在平面軟件中來繪制，因為缺少曲率分析和呈現(xiàn)的模塊，所以還是難以實現(xiàn)操作。
前 Apple 出色的交互設(shè)計師 Bas Ording（就像 iOS 時代的 Bill Atkinson 一樣）在 2013 年申請了一項專利（2016 年獲準）US9396565，專利名稱是“用戶圖形界面元素中邊界的渲染”，專利內(nèi)容就是用 3 階曲線來繪制圓角四邊形，而基礎(chǔ)正是基于這條 3 階曲線的 4 個控制點具有約束性。
Bas Ording 采用算法來完成，基于 3 階曲線與兩段的直線和圓弧形成曲率連續(xù)后，這條 3 階曲線的控制點位置的特征。他的圓角生成需要先輸入圓弧段的半徑，以及圓弧兩邊兩條非圓弧曲線占圓角曲線整體弧長的比率，以這兩項參數(shù)輸入就可以生成圓角曲線，如果在輸入四邊形的長和寬，就可以生成圓角四邊形。他的算法我并沒全看明白，而他給出的結(jié)果是上圖中的 Q2Q1 間的距離是 Q3Q2 的兩倍，就可以看出這個算法并不能一般化（開始就設(shè)定了一個固定比率），只是涵蓋了某一個子集的曲線，可能他在計算過程中加入了其它限定因素。
以上是關(guān)于 iOS 圓角圖標及其實現(xiàn)的方法，只針對于平面的圖形效果，如果來繪制一條手機的輪廓線，肯定不會使用 iOS 圓角圖標那樣分成 10 段 3 階曲線，那將是另外一個更復(fù)雜的生成環(huán)境，數(shù)據(jù)的傳遞和實現(xiàn)就有更長的路徑。
圓角是一個小細節(jié)，就跟設(shè)計本身一樣，如果不在意，就沒必要大費周章，但如果在意這些細節(jié)，在意曲線的質(zhì)量，那追求是無止境的。
