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