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ù)的理性導向，也就是為什么它需要更多額外技術(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 顯示器玻璃要做成凸面的，而且四周的外輪廓并非四四方方，而是向外凸的弧線形成的四邊形，四個角當然就為圓角，所以，早期的 CRT 顯示器基本都是外凸并且四角都有大圓角。
上圖分別是 1981 年的 Xerox Star 8010 和 1984 年的 Macintosh 電腦，可以看出當時圍繞著屏幕的設(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é)中說到了圓角四邊形誕生時的故事。當時 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ù)學意識。
iOS 7 在介紹新的圓角圖標輪廓時，給出了上圖右的一張線框示意圖，圖中在圓角處密密麻麻的點讓人感到困惑，并非難以逆向破解，由于最近 Apple 在 UI Design Resources 上給出了 iOS UI 素材的下載 ，里面包含了這個圓角圖標輪廓的矢量圖，我們可以通過這個矢量圖可以挖掘到一些信息。
簡單的概念
在前文《J 的藝術(shù)，R 的藝術(shù)》已經(jīng)對曲率連續(xù)一些基本概念作過介紹，在此稍作重復一下。
上圖 a 為 1/4 圓弧過渡的圓角，iOS 7 之前的圓角圖標，通常平面軟件繪制的圓角四邊形，以及通常我們稱作“導圓角”，都為上圖 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ù)的一般化，即當曲線階數(shù)為 2 的時候為橢圓，當階數(shù)為 4 的時候，如上圖左所示為方圓形（ Squircle ），介于圓和方之間圖形（Nokia 的 MeeGo UI 圖標被認為是類似 Squircle ），上圖右為階數(shù)為 5 的曲線。
從視覺上就能看出超橢圓是曲線，找不到具有圓度的地方，從曲率分布示意圖就可以看出，曲率總是在連續(xù)過渡，而且階數(shù)越高加速度就越大，即曲率過渡的光滑程度越高。
與超橢圓有些類似的是 Rhino 里一個圓角工具（右鍵點擊），圓錐曲線圓角四邊形，是用一段圓錐曲線（二次曲線）繪制成 1/4 圖形，圓錐曲線圓角四邊形的一端極值為圓，而另外一端極值為直角四邊形，所以圓錐曲線圓角四邊形是不具有圓度的曲線。圓錐曲線因為階數(shù)不高，所以曲線的數(shù)學結(jié)構(gòu)較簡單，適合繪制一些不圓不方的圖形，可以與上面的超橢圓曲線來比較，就會發(fā)現(xiàn)圓錐曲線圓角四邊形的線條的塑造能力不及高階的曲線，即一個跨度內(nèi)曲線的形態(tài)塑造能力非常有限，所以除了特殊要求，通常很少用到這一類曲線。另外由于它是二次曲線，所以數(shù)據(jù)輸出的時候需留意。
iOS 圓角圖標不是羊角螺線
羊角螺線（ Euler spiral 或者 Cornu spirals）同上面類似，如果來擬合 iOS 的圓角圖標，也可能會達到高度匹配的結(jié)果，但實際并不是。
以前羊角螺線常用于公路和鐵路工程之上，“以緩和直路線與圓曲路線之間的曲率變化”（ Wikipedia 介紹 ）。而羊角螺線的主要特征是，它的曲率從 0 開始，而且是隨著曲線長度（弧長）增大而線性增大，所以當一條羊角螺線的尾部與一個圓形相連時，那么這條曲線肯定是曲率連續(xù)的。如上圖右所示的兩種圖形，一條為與圓相連（圓角四邊形內(nèi)部），一條為一段羊角螺線的鏡像連接（圓角四邊形，左上角），它們都是曲率連續(xù)的（G2 連續(xù)）。
正因為羊角螺線的這個特性，隨著曲線長度的增大曲線呈線性增大，讓其具有不少應(yīng)用之處。在上圖右中，雖然我們看到了曲率的變化率曲線（紅線）具有尖點和不連續(xù)性，但是曲線本身（低一階次）是光滑連續(xù)的。上圖右的圓角四邊形左上角使用的是一段羊角螺線的鏡像連接，它的曲率從 0 線性增大到某個值，然后又降回到 0，按我們上面的基本概念中介紹，這樣的曲線是不具有圓度的。
那么羊角螺線既然有這樣的特征，我們可以在中間加入一段圓弧，如上圖右的圓角四邊形的右上角所示，就得到了一個連續(xù)的圓角，而且圓度有保證，首尾與直線段也是曲線連續(xù)，而且三段曲線形成的圓角的曲率的變化率，雖然不是連續(xù)的，但也是非常簡單的數(shù)學結(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)鍵在于確定圓弧段的大小以及占整體曲線長度的比率。
用羊角螺線以這種方式（兩端羊角螺線中間圓弧）繪制的圓角四邊形的缺點有兩個，一個就是形成的整條曲線它的曲率連續(xù)但曲率的變化率不連續(xù)，第二個就是羊角螺線段的曲率增大是線性的，所以雖然曲率具有加速度但曲率的變化率是恒定的。當對曲線的品質(zhì)有更高要求時，或者是在三維產(chǎn)品上實現(xiàn)時，不僅對產(chǎn)品的形態(tài)還對產(chǎn)品的高光等光學表現(xiàn)有要求時，就可能需要用到更加光滑和連續(xù)的曲線了，因為重要的是，這一切的區(qū)別都有可能被眼睛看到。
iOS 圓角圖標
Apple 的 UI Design Resources 網(wǎng)頁上，提供了 iOS 的 UI 素材下載，在素材里面提供了 iOS 圓角圖標的矢量圖，可以導入各種繪圖軟件中使用，而且提供的矢量的布點方式和 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ù)學意義上來說，這樣的曲線連接只能達到切線連續(xù)（G1 連續(xù)），但是我們談?wù)撌欠襁_到一種標準，還要看公差范圍，如果在公差范圍內(nèi)，那么它就是曲率連續(xù)。而更為重要的是，我們要從宏觀上從視覺上從實際應(yīng)用中去判斷，所以有這樣的臺階段差在這對曲線的光滑沒有影響。
本文轉(zhuǎn)載自網(wǎng)絡(luò)，版權(quán)歸原作者所有！
文章轉(zhuǎn)載請保留網(wǎng)址：http://aberdeenanguscattle.com/news/industry/1906.html
