曲線，一個(gè)更接近完美的答案

編注：視頻文字稿內(nèi)容由少數(shù)派整理以方便閱讀查找，要了解完整信息，建議直接觀看視頻。

這是一個(gè)完美的正方形，每條邊都十分平滑、順暢，沒(méi)有瑕疵。試著把尖角變成 1/4 的圓進(jìn)行連接，便得到了一個(gè)圓角矩形。在大多數(shù)平面繪圖軟件中，圓角矩形都是用這種方法繪制出來(lái)的。但是它的線條足夠順滑嗎？

我們放大它的一角，在曲線與直線連接的地方過(guò)渡其實(shí)是不自然的。200多年前，人們便開始嘗試對(duì)平滑過(guò)渡的曲線進(jìn)行計(jì)算，于是后來(lái)便誕生了很多種緩和曲線，在諸如測(cè)繪、工業(yè)設(shè)計(jì)之類的工作中起著十分重要的作用。

畫面中的「羊角螺線」就是其中之一，我們使用羊角螺線起點(diǎn)處的這段曲線繪制一個(gè)圓角矩形，會(huì)得到一個(gè)過(guò)渡十分順滑的結(jié)果。相比之下，右邊那個(gè)簡(jiǎn)單粗暴的圓角矩形，也就顯得十分粗糙。

而經(jīng)過(guò)優(yōu)化的形狀，與 中 App 圖標(biāo)的輪廓看起來(lái)幾乎一模一樣。在 iOS 7 之后，蘋果開始大規(guī)模采用這種曲線過(guò)渡的規(guī)范，使得「曲率連續(xù)」這個(gè)概念不再由專業(yè)設(shè)計(jì)師獨(dú)享，而是成為了更多愛好者們所熱衷的話題，「G2 連續(xù)」這個(gè)詞也被更多人所熟知。

僅僅是點(diǎn)與點(diǎn)的貼合可以稱為「G0 連續(xù)」，在點(diǎn)與點(diǎn)連續(xù)的基礎(chǔ)上如果還有相切關(guān)系，那就可以稱為「G1 連續(xù)」，而如果它們的曲率還有著更為連續(xù)的變化，可以稱為「G2 連續(xù)」。當(dāng)然，這種描述并不精確，但是理解至此暫且足夠。

用通俗點(diǎn)的方法來(lái)說(shuō)，其實(shí)就是讓曲率以一種看起來(lái)好像先慢后快的方式達(dá)到峰值，使其更加順滑，這與動(dòng)畫中的速度曲線倒還有那么一點(diǎn)點(diǎn)的異曲同工之妙。如果以勻速前進(jìn)，看起來(lái)就會(huì)比較生硬，而如果讓它突然加速再緩慢停止，就會(huì)模擬慣性，產(chǎn)生一種絲滑的感覺。

在很多平面軟件中繪制曲線的功能被稱為「鋼筆工具」，而它們的本質(zhì)一般都是一種叫做的「貝濟(jì)埃」的曲線，其實(shí)更多時(shí)候人們?cè)敢夥Q其為「貝塞爾」。這次所聊的 Bézier 曲線由法國(guó)人提出，所以按照法語(yǔ)發(fā)音應(yīng)該叫做「貝濟(jì)埃」更為恰當(dāng)。

這是一種通過(guò)設(shè)定幾個(gè)點(diǎn)然后插值進(jìn)行擬合的方法，數(shù)理邏輯在這里不做深究。我寫了一個(gè)模擬程序進(jìn)行演示，看看就好。

通過(guò)遞歸的方式，我們可以繪制出更高階的貝濟(jì)埃曲線。以 、 為首的平面軟件產(chǎn)品，采用的都是三次貝濟(jì)埃曲線。但 的曲率工具和 的鋼筆智能模式分別使用了完全不同的算法，這兩種算法產(chǎn)生的曲線必然經(jīng)過(guò)節(jié)點(diǎn)，無(wú)法通過(guò)手柄進(jìn)行靈活的調(diào)整，但是卻能夠自動(dòng)生成較為順滑的曲線，在 CAD 中這比較常見，這里就不多贅述了。

去掉三次貝濟(jì)埃曲線內(nèi)部的杠桿，便是我們所熟知的鋼筆工具的模樣了。起始點(diǎn)與結(jié)束點(diǎn)就是我們?cè)谲浖欣L制的節(jié)點(diǎn)，而其余兩個(gè)點(diǎn)形成了我們用來(lái)調(diào)整曲線的手柄。設(shè)計(jì)師們?nèi)绾尾拍茉诠?jié)點(diǎn)繁多、復(fù)雜的情況下，繪制出連接更順滑的曲線呢？

回到短片開頭，那個(gè)粗糙的圓角矩形，我們將每一個(gè)節(jié)點(diǎn)向內(nèi)進(jìn)行偏移，然后再適當(dāng)拉長(zhǎng)手柄，其實(shí)就可以對(duì)曲率連續(xù)進(jìn)行一定程度的優(yōu)化。這種調(diào)整在數(shù)理上并不精準(zhǔn)，但在平常的工作中如果只是為了滿足觀眾的視覺其實(shí)已經(jīng)足夠了。

有一些軟件中有著相關(guān)功能，比如 中的 原生就能滿足這個(gè)需求。

在使用貝濟(jì)埃曲線進(jìn)行繪制的時(shí)候，有著一個(gè)重要的規(guī)范。首先要盡可能的將節(jié)點(diǎn)放在「極值點(diǎn)」的位置，然后讓節(jié)點(diǎn)與手柄保持水平或垂直對(duì)齊，這可以讓繪制變得更加容易。因?yàn)檫@樣只需要調(diào)整手柄的長(zhǎng)度就可以擬合自己想要的曲線結(jié)果，這個(gè)規(guī)則在字體設(shè)計(jì)中尤為重要。

因?yàn)樵诘途绕聊簧希惴〞?huì)根據(jù)這種位置的節(jié)點(diǎn)對(duì)顯示效果加以優(yōu)化，專業(yè)的字體設(shè)計(jì)軟件甚至?xí)凶詣?dòng)添加極值點(diǎn)的功能，但是在例如宣傳美術(shù)、藝術(shù)插畫領(lǐng)域等，這些最終會(huì)輸出固定精度位圖的情況，倒也可以適當(dāng)放松標(biāo)準(zhǔn)。

在字體設(shè)計(jì)領(lǐng)域中也有著經(jīng)典的案例，「筑紫明朝體」是一款應(yīng)用于印刷及平面設(shè)計(jì)領(lǐng)域的字體，并不是為了在數(shù)位屏幕上顯示而設(shè)計(jì)的。藤田重信用極少的節(jié)點(diǎn)數(shù)量繪制了優(yōu)美的曲線線條，相應(yīng)地也就降低了字體文件的大小，品質(zhì)極高。

了解了這些規(guī)范，我們嘗試著繪制這樣的一個(gè)形狀。你可能會(huì)在起始、結(jié)束、中間設(shè)定三個(gè)節(jié)點(diǎn)構(gòu)成這個(gè)形狀，但這樣我們會(huì)發(fā)現(xiàn)線條中間出現(xiàn)了不順暢的情況，還需要對(duì)這個(gè)節(jié)點(diǎn)進(jìn)行單獨(dú)的調(diào)節(jié)。而調(diào)整后，他與手柄也無(wú)法以水平的對(duì)齊方式存在了。

但其實(shí)我們將這個(gè)節(jié)點(diǎn)刪除，拉長(zhǎng)兩端的手柄，同樣可以繪制出這個(gè)形狀。如此看來(lái)，之前中間的點(diǎn)就是在徒增煩惱。這個(gè)案例告訴我們，要在滿足效果的前提下，盡可能簡(jiǎn)化節(jié)點(diǎn)的數(shù)量。即便如此，一個(gè)圖形還是有可能以多種不同的布點(diǎn)方式繪制出來(lái)，都是熟能生巧和經(jīng)驗(yàn)之談了，需要我們勤加練習(xí)。

這是 X 底部的 Dock 欄，而這是 12 底部的 Dock 欄。相同的系統(tǒng)，卻有著完全不同曲率的圓角。這是為了和機(jī)身外觀的圓角形成更好的呼應(yīng)。曲率從工業(yè)設(shè)計(jì)走進(jìn)圖形領(lǐng)域，從平面之外傳播到平面之內(nèi)，這一條條排比舒適的順滑曲線卻又讓它在平面之內(nèi)超越了平面。

我們?cè)谠O(shè)計(jì)的究竟是什么，是圓角嗎？不。

是在設(shè)計(jì)一個(gè)更接近完美的答案。