當前位置:首頁(yè) > 新聞中心 > 互聯(lián)網(wǎng)動(dòng)態(tài)
Apple 標志性的圓角曲線(xiàn)在 iPhone X 的應用責任編輯 :李飛    文章來(lái)源 :星翼創(chuàng )想(www.16qt59sf.cn)    發(fā)布時(shí)間 :2017-10-01    閱讀次數:3865     專(zhuān)題 :APP制作

iPhone 一直都是關(guān)于屏幕,Steve Jobs 在 2007 年發(fā)布會(huì )上就將第一代 iPhone 的 3.5 吋顯示屏稱(chēng)為“巨大的屏幕”,而在 iPhone 設計最初階段 也同“無(wú)邊泳池”這個(gè)意象相關(guān)聯(lián),所有的設計元素遵從于屏幕而不能讓用戶(hù)分心,全屏幕設計的 iPhone X 將對這一理念的執行提到具有劃時(shí)代意義的高度之上,由 iPhone X 劃分前后兩個(gè)時(shí)代。

但是僅一塊大屏幕無(wú)法開(kāi)啟未來(lái),屏占比和邊框寬度之類(lèi)的參數指標無(wú)法用來(lái)作為時(shí)代劃分的依據,用戶(hù)的認知并非受控于一些參數條,從 89% 增大到 90% 對用戶(hù)來(lái)說(shuō)并沒(méi)有質(zhì)的改變。質(zhì)的改變必須作用于用戶(hù)的認知,不是用語(yǔ)言上的假象或者宣傳手段來(lái)說(shuō)服,而是用真象和產(chǎn)品,遞出一把鑰匙,也就是設計。


一個(gè)革命性的產(chǎn)品背后有大量的技術(shù)的支撐,每一處創(chuàng )新的實(shí)現背后又有大量的繁雜的具體工作,但是用戶(hù)認識到的卻是產(chǎn)品的“外在形象”,這個(gè)外在形象具有自明性,并非技術(shù)使然,用戶(hù)認識到的產(chǎn)品的外在形象與技術(shù)無(wú)任何關(guān)系,比如用戶(hù)認識到的手機就是它的外在形象,手機里面的 CPU 或者制作這款手機的工藝等對用戶(hù)來(lái)說(shuō)沒(méi)有意義,因此,設計師工作的兩面性在于,臺前,需要將外在形象與背后的技術(shù)相隔離開(kāi),幕后,則需要為實(shí)現這個(gè)外在形象去與背后的技術(shù)形成關(guān)聯(lián)。我們看到的那些炫技的設計,就是設計師期望外在形象與背后技術(shù)形成關(guān)聯(lián),以及我們經(jīng)常能見(jiàn)到的那些以參數為目標的設計,也是如此。


產(chǎn)品的外在形象越簡(jiǎn)潔越易識別,越脫離技術(shù)關(guān)聯(lián)就越有說(shuō)服力。


很多手機廠(chǎng)商在宣傳自己的大屏幕手機時(shí),總會(huì )使用到一個(gè)手段,比如是平面廣告還是視頻上,那就是讓手機屏幕內的內容與所處的背景融合在一起,讓人感覺(jué)手機消失了,或者說(shuō)邊框消失了,這種宣傳手段在強調的恰恰是手機的技術(shù)參數一面,而與“外在形象”沒(méi)有太大關(guān)聯(lián)。


iPhone X 上脫離了技術(shù)關(guān)聯(lián)的就是全屏幕,而塑造 iPhone X 的全屏幕外在形象最重要的設計特征就是四個(gè)圓角。柔性 OLED 屏幕的切割和折疊,相應的電路堆疊技術(shù),或者是圓角處的次像素反走樣渲染等等技術(shù)內容,對廠(chǎng)家來(lái)說(shuō),可以用此輔助來(lái)向用戶(hù)說(shuō)明自己創(chuàng )新的獨特之處,但對于用戶(hù)來(lái)說(shuō),真正關(guān)心的只有外在形象,也就是這塊獨特的圓角全面屏。通常來(lái)說(shuō),如此大的圓角的屏幕是反技術(shù)的,不符合技術(shù)的理性導向,也就是為什么它需要更多額外技術(shù)支撐的原因,但在產(chǎn)品之上,在用戶(hù)關(guān)心的外在形象之上,這個(gè)圓角屏幕卻是非常自然的結果,依照手機的形態(tài)形成的均一的屏幕外輪廓符合全面屏的概念;而另外一面,突破常規的形象(屏幕總是四四方方的)則又能表現出它的革命性。

Apple 標志性的圓角曲線(xiàn)在 iPhone X 的應用,將其劃時(shí)代的意義通過(guò)外在形象向前推了一大步,并與其他廠(chǎng)家的類(lèi)似產(chǎn)品形成差距,人們將進(jìn)一步認為 iPhone X 才是真正的全面屏,而其他的設計,如屏幕的外輪廓沒(méi)有追隨機身形態(tài),都會(huì )被認為不夠徹底的。與此同時(shí),如果屏幕的圓角很小,它就更像一個(gè)技術(shù)革新產(chǎn)品,無(wú)法脫離技術(shù)關(guān)聯(lián)感,也就是無(wú)法為用戶(hù)的認知帶來(lái)革新。在 iPhone X 上,屏幕的圓角,以及因這個(gè)圓角形成的整體形象的重要性,從 Apple 對屏幕上端的缺口處理就可以得到驗證。從 Apple 的產(chǎn)品圖和宣傳資料上看,對屏幕的缺口(Notch)不僅毫無(wú)掩飾,而且還加以強調和渲染,為突出 Face ID,為形成一個(gè)標志性的視覺(jué)元素,也是以不避諱的方式在強調全屏幕形象。我們甚至可以確定,iPhone X 上端屏幕缺口兩側的圓角區域,就是為了營(yíng)造“外在形象”,從功能、技術(shù)和理性層面來(lái)說(shuō),更傾向于將屏幕上端做齊平而無(wú)缺口,這個(gè)外在形象是如此重要,Apple 甚至在軟件界面上也不去對這個(gè)缺口作過(guò)多的掩飾。



如我們所知,從 iOS 開(kāi)始,Apple 將產(chǎn)品上的圓角曲線(xiàn)應用到界面之上,主要是圍繞著(zhù)圓角四邊形的圖標上,而從 iPhone X 上的 iOS 11 上可以看到,在界面上加入了更多圓角曲線(xiàn)的元素,就像上圖所示的一角所展示,從外到內,形成了一層層更加連續的多度,從最外側的圓角開(kāi)始一直等距遞進(jìn)到電話(huà)圖標,如果去仔細核算,這個(gè)角落可以數出至少 7 條等距圓角曲線(xiàn)。


到處都是圓角。



早期的計算機采用的是 CRT 顯示器,而 CRT 顯示器是用真空玻璃管做成的,要保證它的安全和密閉性,以及可制造性,CRT 顯示器玻璃要做成凸面的,而且四周的外輪廓并非四四方方,而是向外凸的弧線(xiàn)形成的四邊形,四個(gè)角當然就為圓角,所以,早期的 CRT 顯示器基本都是外凸并且四角都有大圓角。


上圖分別是 1981 年的 Xerox Star 8010 和 1984 年的 Macintosh 電腦,可以看出當時(shí)圍繞著(zhù)屏幕的設計是如何抵消弧面屏幕的反直覺(jué)性,通常的方式就是用罩殼圈出一個(gè)相對四方的顯示區域,比如 Xerox Alto 那樣 ,而四角的圓角處理可以讓顯示區域顯得更平(因為四角形態(tài)收縮更厲害)。Xerox Star 8010 在罩殼下都為內容顯示區,而 Macintosh 則有大的黑邊,內容顯示區域面積更小也更為平坦,Macintosh 上的這個(gè)黑邊為界面顯示黑色,并非顯像管上的非顯示區,與“用黑色來(lái)掩蓋 iPhone X 上的屏幕缺口”同理。


Macintosh 界面四周有小小的圓角,可以看出是經(jīng)過(guò)設計的圓角。



左圖為 1983 年發(fā)行的 Lisa Office System 3.1(圖片來(lái)自 Wikipedia ),可以看到界面的四角,以及計算器的界面輪廓都出現了圓角四邊形。


按 Andy Hertzfeld 在 The Original Macintosh 中所寫(xiě),Apple 在軟件界面上出現圓角四邊形可以追溯到 1981 年,Andy Hertzfeld 在 Round Rects Are Everywhere! 這一節中說(shuō)到了圓角四邊形誕生時(shí)的故事。當時(shí) Apple 的天才程序員 Bill Atkinson 正向團隊展示他是如何用一種聰明的方法可以在僅有 68000 處理器的 Lisa 和 Macintosh 機器上快速畫(huà)出圓和橢圓,Steve Jobs 看了之后有另外的想法,他說(shuō):“圓和橢圓都不錯,但是能畫(huà)出帶圓角的四邊形嗎?我們現在也能畫(huà)出嗎?” Bill Atkinson 回答說(shuō)很難做到,而且他認為并不真需要圓角四邊形,Steve Jobs 就立刻強烈回應了:“到處都是圓角四邊形!看看這個(gè)房間周?chē)椭懒?!”并且還帶著(zhù) Bill Atkinson 出去轉看可以碰到多少圓角四邊形,最后 Bill Atkinson 被說(shuō)服,第二天下午就拿出了滿(mǎn)意的結果。


接著(zhù),圓角四邊形在 Apple 的軟件界面上到處都是了。


iOS 的圓角圖標


2013 年隨著(zhù) iOS 7 的發(fā)布,Apple 將 iOS 上的標志性的圓角圖標輪廓作了更新,將工業(yè)設計中的曲線(xiàn)連續概念應用到了視覺(jué)設計之上,iOS 7 之前的圓角圖標,也包括通常的平面設計軟件中繪制的圓角四邊形,圓角部分為一段圓弧,那么在直線(xiàn)和曲線(xiàn)的連接點(diǎn)處曲率從 0 立刻過(guò)渡到一個(gè)恒定的數值,帶來(lái)的視覺(jué)感覺(jué)就是過(guò)渡不順暢,保證順暢就需要讓直線(xiàn)到曲線(xiàn)過(guò)渡中形成一個(gè)連續的變化,從 0 逐漸地過(guò)渡到某個(gè)數值,而不是從 0 跳動(dòng)到某個(gè)數值。在實(shí)際操作中,并非一件簡(jiǎn)單的事,曲線(xiàn)的過(guò)渡也是一件講究技藝的事,也要求一定的數學(xué)意識。


iOS 7 在介紹新的圓角圖標輪廓時(shí),給出了上圖右的一張線(xiàn)框示意圖,圖中在圓角處密密麻麻的點(diǎn)讓人感到困惑,并非難以逆向破解,由于最近 Apple 在 UI Design Resources 上給出了 iOS UI 素材的下載 ,里面包含了這個(gè)圓角圖標輪廓的矢量圖,我們可以通過(guò)這個(gè)矢量圖可以挖掘到一些信息。


簡(jiǎn)單的概念



在前文《J 的藝術(shù),R 的藝術(shù)》已經(jīng)對曲率連續一些基本概念作過(guò)介紹,在此稍作重復一下。


上圖 a 為 1/4 圓弧過(guò)渡的圓角,iOS 7 之前的圓角圖標,通常平面軟件繪制的圓角四邊形,以及通常我們稱(chēng)作“導圓角”,都為上圖 a 所示的方式。因為直線(xiàn)的曲率為 0,而圓弧的曲率為一固定值,所以從直線(xiàn)到圓弧有曲率的突變,雖然是切線(xiàn)連續(G1 連續),但是無(wú)法達到曲率連續(G2 連續),這種過(guò)渡的不順暢我們可以通過(guò)視覺(jué)很明顯地感覺(jué)到。


上圖 b 為用一段曲線(xiàn)替代了 1/4 圓弧作過(guò)渡,繪制時(shí)要求連接直線(xiàn)的兩端達到曲率連續,即這段曲線(xiàn)的曲率是從兩端的 0 逐漸連續的增大的,我們能夠從圖形的四個(gè)角上看到過(guò)渡順暢,但是,存在一個(gè)問(wèn)題就是,看上去四個(gè)角不夠圓了。雖然光滑但不夠圓,我們也可以從曲率的示意圖中觀(guān)察到,這條曲線(xiàn)曲率的變化不具備圓的特征,因為圓的曲率處處相等,均質(zhì)而統一的。


我們需要做的是將上面兩種情況進(jìn)行綜合,曲線(xiàn)與直線(xiàn)連接端來(lái)保證過(guò)渡的順暢,而盡可能提到曲線(xiàn)的圓度,即讓曲線(xiàn)中間段的部分曲率的變化極為緩和,接近圓的均質(zhì)統一的曲率特征。


上圖 C 就是采用這種策略的一種示意,曲線(xiàn)兩頭連續過(guò)渡,中間部分過(guò)渡緩慢,接近均等。


但是上圖 C 所示僅為一個(gè)粗略的示意,在實(shí)際的工作中,要求將會(huì )比這更高,比如說(shuō)對圓度的要求到底是要多高,甚至包括曲率過(guò)渡是以怎樣的速度或加速度來(lái)進(jìn)行也可能需要在考慮之中,另外也將牽涉到數據的傳遞,比如從設計到生產(chǎn),如何來(lái)保證形狀在傳遞過(guò)程中的保真性。


但我們先否定幾個(gè)通常對 iOS 圓角圖標的猜測。


iOS 圓角圖標不是超橢圓


一個(gè)有趣的現象是,逆向如果是更多依賴(lài)于猜測,會(huì )發(fā)現結果就是指向自己的假設,而在討論 iOS 圓角圖標是怎樣的圖標和曲線(xiàn),或者去擬合產(chǎn)品上的曲線(xiàn),甲乙丙丁走向不同方向,而且誰(shuí)都認為自己是正確的,而且一看擬合結果,嚴絲合縫。


比如 iOS 7 發(fā)布不久, 有人認為 是超橢圓( Superellipse ),可能不少人看到超橢圓這個(gè)嚇人的專(zhuān)業(yè)詞就認為八九不離十了,而且一看兩者 相擬合的圖 ,嚴絲合縫,而且還給出如何在 Photoshop 中使用的指南,但是殊不知平面軟件使用的 3 階貝塞爾曲線(xiàn),而擬合用到的卻是一個(gè) 5 次方程式。其實(shí)超橢圓從頭到尾都是曲線(xiàn),而沒(méi)有一條直線(xiàn)段,iOS 7 的圓角圖標明顯有直線(xiàn)部分,如果連這都能匹配上,可想而知用視覺(jué)來(lái)判斷是否高度擬合是多么不可信。


如 Wikipedia 所述 ,超橢圓是橢圓函數的一般化,即當曲線(xiàn)階數為 2 的時(shí)候為橢圓,當階數為 4 的時(shí)候,如上圖左所示為方圓形( Squircle ),介于圓和方之間圖形(Nokia 的 MeeGo UI 圖標被認為是類(lèi)似 Squircle ),上圖右為階數為 5 的曲線(xiàn)。


從視覺(jué)上就能看出超橢圓是曲線(xiàn),找不到具有圓度的地方,從曲率分布示意圖就可以看出,曲率總是在連續過(guò)渡,而且階數越高加速度就越大,即曲率過(guò)渡的光滑程度越高。



與超橢圓有些類(lèi)似的是 Rhino 里一個(gè)圓角工具(右鍵點(diǎn)擊),圓錐曲線(xiàn)圓角四邊形,是用一段圓錐曲線(xiàn)(二次曲線(xiàn))繪制成 1/4 圖形,圓錐曲線(xiàn)圓角四邊形的一端極值為圓,而另外一端極值為直角四邊形,所以圓錐曲線(xiàn)圓角四邊形是不具有圓度的曲線(xiàn)。圓錐曲線(xiàn)因為階數不高,所以曲線(xiàn)的數學(xué)結構較簡(jiǎn)單,適合繪制一些不圓不方的圖形,可以與上面的超橢圓曲線(xiàn)來(lái)比較,就會(huì )發(fā)現圓錐曲線(xiàn)圓角四邊形的線(xiàn)條的塑造能力不及高階的曲線(xiàn),即一個(gè)跨度內曲線(xiàn)的形態(tài)塑造能力非常有限,所以除了特殊要求,通常很少用到這一類(lèi)曲線(xiàn)。另外由于它是二次曲線(xiàn),所以數據輸出的時(shí)候需留意。


iOS 圓角圖標不是羊角螺線(xiàn)



羊角螺線(xiàn)( Euler spiral 或者 Cornu spirals)同上面類(lèi)似,如果來(lái)擬合 iOS 的圓角圖標,也可能會(huì )達到高度匹配的結果,但實(shí)際并不是。


以前羊角螺線(xiàn)常用于公路和鐵路工程之上,“以緩和直路線(xiàn)與圓曲路線(xiàn)之間的曲率變化”( Wikipedia 介紹 )。而羊角螺線(xiàn)的主要特征是,它的曲率從 0 開(kāi)始,而且是隨著(zhù)曲線(xiàn)長(cháng)度(弧長(cháng))增大而線(xiàn)性增大,所以當一條羊角螺線(xiàn)的尾部與一個(gè)圓形相連時(shí),那么這條曲線(xiàn)肯定是曲率連續的。如上圖右所示的兩種圖形,一條為與圓相連(圓角四邊形內部),一條為一段羊角螺線(xiàn)的鏡像連接(圓角四邊形,左上角),它們都是曲率連續的(G2 連續)。


正因為羊角螺線(xiàn)的這個(gè)特性,隨著(zhù)曲線(xiàn)長(cháng)度的增大曲線(xiàn)呈線(xiàn)性增大,讓其具有不少應用之處。在上圖右中,雖然我們看到了曲率的變化率曲線(xiàn)(紅線(xiàn))具有尖點(diǎn)和不連續性,但是曲線(xiàn)本身(低一階次)是光滑連續的。上圖右的圓角四邊形左上角使用的是一段羊角螺線(xiàn)的鏡像連接,它的曲率從 0 線(xiàn)性增大到某個(gè)值,然后又降回到 0,按我們上面的基本概念中介紹,這樣的曲線(xiàn)是不具有圓度的。


那么羊角螺線(xiàn)既然有這樣的特征,我們可以在中間加入一段圓弧,如上圖右的圓角四邊形的右上角所示,就得到了一個(gè)連續的圓角,而且圓度有保證,首尾與直線(xiàn)段也是曲線(xiàn)連續,而且三段曲線(xiàn)形成的圓角的曲率的變化率,雖然不是連續的,但也是非常簡(jiǎn)單的數學(xué)結構,從 0 增大到某一數值,停留,然后再降到 0。而羊角螺線(xiàn)可以用三次曲線(xiàn)來(lái)趨近,那么在實(shí)際的應用中就有相應的方便之處,比如在平面的矢量繪圖軟件中使用,來(lái)繪制類(lèi)似 iOS 圓角圖標的曲線(xiàn)連續圓角四邊形。



方法是,從 Wikipedia 可以下載到滿(mǎn)足使用的 羊角螺線(xiàn)矢量圖 (SVG),然后就是定義圓角曲線(xiàn)中圓弧的大小是多少,然后確定這段圓弧占圓角曲線(xiàn)總長(cháng)度,也就是畫(huà)好如上圖 1 所示的圖形,然后按如圖 2 所示畫(huà)出圓弧一端的切線(xiàn)和法線(xiàn),并畫(huà)出直線(xiàn)的垂線(xiàn),形成一個(gè)類(lèi)三角形,接著(zhù)將這個(gè)類(lèi)三角形移到羊角螺線(xiàn)之上,定好位置,如圖 3 所示,然后移動(dòng)斜線(xiàn),找到這條斜線(xiàn)與羊角螺線(xiàn)的相切位置,切斷羊角螺線(xiàn)如圖 4 所示,得到一段羊角螺線(xiàn),作放大或縮小動(dòng)作,裝入圓角曲線(xiàn)的圓弧兩頭,完畢如圖 5 所示。


這種繪制方法可以方便地在平面軟件內完成,因為目前平面軟件沒(méi)有其他相應的工具來(lái)直接或輔助繪制這樣的圓角四邊形,即保證曲率連續又保證圓度。那么曲線(xiàn)推敲的關(guān)鍵在于確定圓弧段的大小以及占整體曲線(xiàn)長(cháng)度的比率。


用羊角螺線(xiàn)以這種方式(兩端羊角螺線(xiàn)中間圓?。├L制的圓角四邊形的缺點(diǎn)有兩個(gè),一個(gè)就是形成的整條曲線(xiàn)它的曲率連續但曲率的變化率不連續,第二個(gè)就是羊角螺線(xiàn)段的曲率增大是線(xiàn)性的,所以雖然曲率具有加速度但曲率的變化率是恒定的。當對曲線(xiàn)的品質(zhì)有更高要求時(shí),或者是在三維產(chǎn)品上實(shí)現時(shí),不僅對產(chǎn)品的形態(tài)還對產(chǎn)品的高光等光學(xué)表現有要求時(shí),就可能需要用到更加光滑和連續的曲線(xiàn)了,因為重要的是,這一切的區別都有可能被眼睛看到。


iOS 圓角圖標



Apple 的 UI Design Resources 網(wǎng)頁(yè)上,提供了 iOS 的 UI 素材下載,在素材里面提供了 iOS 圓角圖標的矢量圖,可以導入各種繪圖軟件中使用,而且提供的矢量的布點(diǎn)方式和 iOS 7 發(fā)布時(shí)對圓角圖標描述的布點(diǎn)一樣,所以這個(gè)矢量圖的原真性就可以得到確認。


iOS 的圓角圖標從宏觀(guān)上看由 4 條直邊和 4 條曲線(xiàn)形成的圓角組成,從圓角曲線(xiàn)的曲率變化示意圖中可以看到它符合我們上面說(shuō)的要求,即首先是曲率連續的曲線(xiàn),然后能夠保證曲線(xiàn)的圓度,讓它看起來(lái)就像圓弧一樣,另外我們也可以看到曲率變化具有加速度,曲率變化的狀態(tài)大致可以分成五個(gè)階段,第一階段,也就是接近直線(xiàn)處,以緩慢的速度增加曲率,到達某一值進(jìn)入第二階段,也就是快速增長(cháng)階段,達到一定程度后,就連續光滑地過(guò)渡到第三階段,以極其平緩的速度變化幾乎勻速一般,也就是圓弧階段,之后的變化過(guò)程就是反方向,第四階段是快速降低,第五階段是緩慢降低到 0。


在圓角處“緩慢—加速—平緩—加速—緩慢”的變化軌跡是典型的,但具體到應用上亦要看具體情況,并不是做到同 iOS 圓角圖標的曲率變化曲線(xiàn)就能符合各種要求的。



iOS 的圓角圖標在圓角處的曲線(xiàn)有 11 個(gè)分割點(diǎn)分成了 10 段曲線(xiàn),它們都為 3 階貝塞爾曲線(xiàn),如果仔細看這 10 段曲線(xiàn),會(huì )發(fā)現它們前后相連并非是嚴格的曲率連續(G2 連續),看曲率示意圖在相鄰的兩端曲線(xiàn)見(jiàn),曲率的數值有略微的跳動(dòng)。并不是形成了尖點(diǎn),而是有臺階段差,如上圖藍色圓圈處所示,這些臺階段差在每?jì)啥吻昂笙噙B的曲線(xiàn)交點(diǎn)處都能找到,只不過(guò)太小在上圖無(wú)法看出。


雖然再?lài)栏竦臄祵W(xué)意義上來(lái)說(shuō),這樣的曲線(xiàn)連接只能達到切線(xiàn)連續(G1 連續),但是我們談?wù)撌欠襁_到一種標準,還要看公差范圍,如果在公差范圍內,那么它就是曲率連續。而更為重要的是,我們要從宏觀(guān)上從視覺(jué)上從實(shí)際應用中去判斷,所以有這樣的臺階段差在這對曲線(xiàn)的光滑沒(méi)有影響。

本文轉載自網(wǎng)絡(luò ),版權歸原作者所有!


文章轉載請保留網(wǎng)址:http://www.16qt59sf.cn/news/industry/1906.html

掃碼添加微信
159 8667 8737
24小時(shí)電話(huà)