今天在微博上看到日本航空(JAL)的視頻廣告(Youtube 和騰訊視頻),這個廣告叫做《The Art of J》(J 的藝術(shù)),共分三篇,分別是《Precision》、《Privacy》和《CONNECTIONS》(精度、隱私和連接)。廣告視頻拍攝得很美,比如《Precision》中廚師憑著高超的技藝使每一個手工做出的壽司重量都是 27 克,打出的廣告語是“Precision is in our culture.”(精度在我們的文化中),五次獲得世界上最準(zhǔn)時航班的殊榮,用手工難于控制的壽司重量與航班的精準(zhǔn)形成對應(yīng)的閱讀關(guān)系。接著的《Privacy》是來講座椅空間和乘坐環(huán)境的私密性好,沒有什么東西能來打擾你,一位折紙藝術(shù)家在他的商務(wù)艙內(nèi)作出了一件復(fù)雜又漂亮的折紙作品。通過 JAL 的網(wǎng)站可以看到這是他們商務(wù)艙的座位,這一套的座位設(shè)計以直線型為主,在轉(zhuǎn)角等地方使用了很多三角元素,看上去整個空間都是平整和有效率,不受打擾。
但是在看《Privacy》這個視頻時,全程都在受打擾,而打擾來自于旋轉(zhuǎn)桌,這個帶圓角的旋轉(zhuǎn)桌設(shè)計與整體艙位設(shè)計看上去有點格格不入,大圓角與小圓角的直線折角設(shè)計,更怪異的是這個桌子的四個圓角還是不一樣的大小,繞著順時針方向一級級增大。
有意思的是,《Privacy》這支廣告中的道具擺設(shè)卻很細致,看上圖這個具有顏色漸變的紙片的排列,右上和右下兩處角落的紙片似乎在印證 1 和 2 兩處的圓角大小不同,雖然左下違背了這一規(guī)律,但是可以看出上圖的四個圓角依次在增大,按照 JAL 的網(wǎng)站對這個旋轉(zhuǎn)桌子的示意,可以判斷這幾處的圓角設(shè)計并不是因為旋轉(zhuǎn)這個功能需要來確定的,或許通過圓角的大小在示意旋轉(zhuǎn)的方向,如果是這樣就太過于隱晦了。
比圓角大小更“干擾”人的是圓角處理,設(shè)計師使用了簡單的圓角工具,圓弧與兩頭直線的過渡方式只是 G1 切線連續(xù),看右上角的大圓角處尤其明顯,兩段直線,中間一段 1/4 的圓弧形成的圓角。
如今人們經(jīng)過 Apple 產(chǎn)品的美學(xué)特征熏陶,尤其是 2013 年 iOS 7 發(fā)布時,將界面的圓角四邊形圖片也改成了曲率連續(xù)的圓角四邊形后,不只是設(shè)計師,大眾對這些細節(jié)的處理也敏感和直接了,或許以前只是覺得不太順暢,現(xiàn)在就會立刻發(fā)覺。在平面上討論圓角的形態(tài),各種連續(xù)的表現(xiàn),[ i D 公 社 ] 在 2009 年就經(jīng)過一次討論。
G0 還是 G1 連續(xù)指的是兩條曲線形成連接的數(shù)學(xué)關(guān)系(直線是曲線的一種),曲線具有曲率(按定義說就是曲線上某個點的切線方向角對弧長的轉(zhuǎn)動率),大小即曲率半徑的倒數(shù),所以通常我們說一條曲線越平緩,越接近直線也就是它越“不曲”,就是曲率越小,曲率越大曲線就越彎曲。連續(xù)就是調(diào)查連接處的曲率關(guān)系。
如上圖所示(圖形來自與 Alias 幫助頁面),有 G0、G1、G2 和 G3 四種連續(xù),G3 以上的連續(xù)可以按 G3 的描述向上理解,但是除了特殊需求,通常很少用到 G3 以上的連續(xù)。上圖綠色的如梳子一樣的線,表示著此處曲率的大?。ㄔ介L曲率越大),稱作曲率梳狀線,曲率梳狀線的外輪廓形成曲線也是連續(xù)的。G0(位置連續(xù))指的是兩條曲線相連接,但是兩條曲線僅僅是相連接,在連接點位置的切線方向不一致,所以梳狀線在此處形成了一個角度。G1(切線連續(xù))指的是兩條曲線不僅僅是相連接,在連接點位置的切線方向一致,但是曲率半徑的大小不相等,所以梳狀線在此處雖然共線但各有長短。G2(曲率連續(xù))指的是兩條曲線不僅僅是相連接,在連接點位置的切線方向一致,而且曲率半徑的大小也相等,所以梳狀線在此處不僅共線而且長短相同。G3(曲率連續(xù))指的是兩條曲線不僅僅是相連接,在連接點位置的切線方向一致,而且曲率半徑的大小也相等,進一步在此處的曲率變化率也是相同,所以梳狀線在此處不僅共線而且長短相同,而且梳狀線的外輪廓線在連接點位置是切線連續(xù)的。更高階的連續(xù)形式就是依次往下推進。
在直角上形成的圓角如上圖所示,僅僅以 G1 和 G2 為例子,直線的曲率為 0,它的曲率變化率也為 0,所以在與直線相連時,G3 及更高的連續(xù)沒有意義。G1 就是使用 1/4 的圓弧來形成兩條直線的連接的,圓弧的曲率在曲線的每一處都是相等的,所以與直線相連,就形成了從 0 到某一個曲率的跳動,在視覺效果上就是曲線的不連續(xù)感,在曲率發(fā)生變動的一段。而 G2 保證了曲率從 0 逐漸增大的過程,所以在視覺效果上它是連續(xù)光滑的。而從直線到曲線不同的過渡形態(tài),也會帶來不同的結(jié)果。
上圖來自這,顯示了同一連續(xù)條件下,即 G2 曲率連續(xù)情況下,不同的過渡形態(tài),可以從梳妝線的形狀來對比,即曲率變化的加速度的不同。左圖為先緩和再急劇在緩和,右圖為先急劇再緩和(接近勻速)在急劇,中間的為介于兩者之間,左圖容易在中間形成曲率的最大值,而右圖中端更接近圓形。
在用 G2 連續(xù)的曲線來制作圓角時,一般需參照上圖右的梳狀線形態(tài),因為我們需要用一條曲率連續(xù)變化的曲線來模擬曲率恒定的圓,G0 連續(xù)的圓角即 1/4 圓弧雖然在頭尾處的曲率突變給人帶來不順暢的視覺體驗,但是它的圓度是確定的,我們用 G2 連續(xù)的曲線來制作,除了需照顧到頭尾過度的順暢,還要照顧到它的中間段與圓足夠接近,也就是要求保證它的圓度,讓它的曲率看上去盡可能相同,那么在圓角上,我們識別到“曲”的地方就是中間段,所以它的曲率變化梳狀線應(yīng)該如右圖所示。
上圖來自這,圓弧形成的圓角好處就是它的數(shù)字是確定的,也就是可以描述,可以口頭傳遞,所以在設(shè)計和制作過程中,形態(tài)的傳遞很方便,比如說“R=5 mm”的圓角,即使我們在此處用 G2 的曲線來模擬,我們也會說 R 等于多少,自由曲線 NURBS 曲線是計算機來描述的,無法口頭描述。所以在日常的工作中,我們通常會先確定這個 R 值,然后再來繪制過渡曲線,而我們繪制的 G2 曲線需要一個過渡的區(qū)間,這個區(qū)間往往需要比圓弧形成的圓角過渡更大,以便在中部達到跟圓弧圓角一樣的數(shù)值,即我們確定的 R,如上圖所示,左圖為 G0 的圓弧圓角過渡,中間為變化區(qū)間不變,但是中間的 R 值就發(fā)生了變化,而右圖則把兩頭的連接點位置向各自方向后退,以便曲線的中段達到所需的 R 值。
G1 和 G2 連續(xù)的不同數(shù)學(xué)特性不只是在正視的情況下能夠識別出來,在透視的情況下也能分辨而出,透視是在視平面上的投射,所以是從 0 跳到一個數(shù)字,還是從 0 逐漸過渡到一個數(shù)字,投射之后這種特征是維持的。
但是最終作用于我們的是視覺效果,而不是數(shù)學(xué)關(guān)系,我們可以辨別處不同的順暢程度,但是無法測出它的數(shù)學(xué)結(jié)構(gòu),而且我們看到的所有東西都是模擬世界的實體,數(shù)學(xué)只是對關(guān)系的一種歸納。就好像我們用放大鏡去看產(chǎn)品的每條邊線,它們都是連續(xù)的,只有我們通過辨別和歸納后,才能猜出設(shè)計師是否采用了 G2 曲線連續(xù),所以,我們對曲線連續(xù)的分辨和執(zhí)行,除了在軟件中使用各種數(shù)學(xué)工具檢測外,更重要的是退到宏觀一層,就像去看待一個已經(jīng)制造完的產(chǎn)品去觀察。
也就是說,并不是 G2 連續(xù)是萬能的,或者時刻都必要的。
就好像《Privacy》這個視頻中,我們最容易判斷它是 G1 連續(xù)的就是來自與右上角的大圓弧,原因不在于它的 R 值大,而是與直線邊形成的對比關(guān)系,比如上圖所示的左圖,就很難分辨出它是 G1 連續(xù)還是 G2 連續(xù)。
另外從制作的矢量圖到輸出成上圖的點陣圖,有一個柵格化的過程,柵格化就像是工業(yè)生產(chǎn)中的一種加工,它也有加工精度,加工會影響到最終曲線連續(xù)的視覺特征。比如在設(shè)計圖紙上圓角過渡是 G1 切線連續(xù),但是到了機床、拋光、打磨等等生產(chǎn)制程,圓角過渡可能變得更自然順暢,尤其是如上圖左這樣的小圓角,如果是大圓角,像 JAL 商務(wù)艙旋轉(zhuǎn)桌的左上角一樣,就很難通過后續(xù)的加工過程來自我修正,因為它太大了必須在設(shè)計時就作出決定;在矢量圖到點陣圖的柵格化過程中也會如此,所以時刻關(guān)注宏觀化后的效果也是同樣重要的。