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