iPhone 一直都是關(guān)于屏幕，Steve Jobs 在 2007 年發(fā)布會(huì)上就將第一代 iPhone 的 3.5 吋顯示屏稱為“巨大的屏幕”，而在 iPhone 設(shè)計(jì)最初階段 也同“無(wú)邊泳池”這個(gè)意象相關(guān)聯(lián)，所有的設(shè)計(jì)元素遵從于屏幕而不能讓用戶分心，全屏幕設(shè)計(jì)的 iPhone X 將對(duì)這一理念的執(zhí)行提到具有劃時(shí)代意義的高度之上，由 iPhone X 劃分前后兩個(gè)時(shí)代。
但是僅一塊大屏幕無(wú)法開(kāi)啟未來(lái)，屏占比和邊框?qū)挾戎惖膮?shù)指標(biāo)無(wú)法用來(lái)作為時(shí)代劃分的依據(jù)，用戶的認(rèn)知并非受控于一些參數(shù)條，從 89% 增大到 90% 對(duì)用戶來(lái)說(shuō)并沒(méi)有質(zhì)的改變。質(zhì)的改變必須作用于用戶的認(rèn)知，不是用語(yǔ)言上的假象或者宣傳手段來(lái)說(shuō)服，而是用真象和產(chǎn)品，遞出一把鑰匙，也就是設(shè)計(jì)。
一個(gè)革命性的產(chǎn)品背后有大量的技術(shù)的支撐，每一處創(chuàng)新的實(shí)現(xiàn)背后又有大量的繁雜的具體工作，但是用戶認(rèn)識(shí)到的卻是產(chǎn)品的“外在形象”，這個(gè)外在形象具有自明性，并非技術(shù)使然，用戶認(rèn)識(shí)到的產(chǎn)品的外在形象與技術(shù)無(wú)任何關(guān)系，比如用戶認(rèn)識(shí)到的手機(jī)就是它的外在形象，手機(jī)里面的 CPU 或者制作這款手機(jī)的工藝等對(duì)用戶來(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)向用戶說(shuō)明自己創(chuàng)新的獨(dú)特之處，但對(duì)于用戶來(lái)說(shuō)，真正關(guān)心的只有外在形象，也就是這塊獨(dú)特的圓角全面屏。通常來(lái)說(shuō)，如此大的圓角的屏幕是反技術(shù)的，不符合技術(shù)的理性導(dǎo)向，也就是為什么它需要更多額外技術(shù)支撐的原因，但在產(chǎn)品之上，在用戶關(guān)心的外在形象之上，這個(gè)圓角屏幕卻是非常自然的結(jié)果，依照手機(jī)的形態(tài)形成的均一的屏幕外輪廓符合全面屏的概念；而另外一面，突破常規(guī)的形象（屏幕總是四四方方的）則又能表現(xiàn)出它的革命性。
Apple 標(biāo)志性的圓角曲線在 iPhone X 的應(yīng)用，將其劃時(shí)代的意義通過(guò)外在形象向前推了一大步，并與其他廠家的類似產(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ú)法為用戶的認(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)到電話圖標(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è)房間周圍就知道了！”并且還帶著 Bill Atkinson 出去轉(zhuǎn)看可以碰到多少圓角四邊形，最后 Bill Atkinson 被說(shuō)服，第二天下午就拿出了滿意的結(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)，通常平面軟件繪制的圓角四邊形，以及通常我們稱作“導(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)象是，逆向如果是更多依賴于猜測(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è)嚇人的專業(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)為是類似 Squircle ），上圖右為階數(shù)為 5 的曲線。
從視覺(jué)上就能看出超橢圓是曲線，找不到具有圓度的地方，從曲率分布示意圖就可以看出，曲率總是在連續(xù)過(guò)渡，而且階數(shù)越高加速度就越大，即曲率過(guò)渡的光滑程度越高。
與超橢圓有些類似的是 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)塑造能力非常有限，所以除了特殊要求，通常很少用到這一類曲線。另外由于它是二次曲線，所以數(shù)據(jù)輸出的時(shí)候需留意。
iOS 圓角圖標(biāo)不是羊角螺線
羊角螺線（ Euler spiral 或者 Cornu spirals）同上面類似，如果來(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)繪制類似 iOS 圓角圖標(biāo)的曲線連續(xù)圓角四邊形。
方法是，從 Wikipedia 可以下載到滿足使用的 羊角螺線矢量圖 （SVG），然后就是定義圓角曲線中圓弧的大小是多少，然后確定這段圓弧占圓角曲線總長(zhǎng)度，也就是畫(huà)好如上圖 1 所示的圖形，然后按如圖 2 所示畫(huà)出圓弧一端的切線和法線，并畫(huà)出直線的垂線，形成一個(gè)類三角形，接著將這個(gè)類三角形移到羊角螺線之上，定好位置，如圖 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ú)法看出。
雖然再嚴(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)有影響。
本文轉(zhuǎn)載自網(wǎng)絡(luò)，版權(quán)歸原作者所有！
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://cctvsc.cn/news/industry/1906.html
