Hi-iD：曲線的繪制如同打鐵，達(dá)到恰到好處是一門手藝。
以iOS 7電話圖標(biāo)為例，介紹一種用 Adobe Illustrator 繪制復(fù)雜光滑曲線的策略。

復(fù)雜光滑曲線不是指線條的宏觀形狀復(fù)雜，比如有很多凸起、凹陷、轉(zhuǎn)折和突變之類，它從宏觀上看就是一整條曲線，光滑指的是曲線過渡順暢，無論是急速的還是柔和的過渡，都是光滑順暢的。策略指的是一種制作的方法，它可能并不牽扯到基本原理層面，而曲線的原理層面就是數(shù)學(xué)，在這只是一種應(yīng)用。

但也從一些制作的曲線基本概念開始。

相關(guān)推薦：
《illustrator新手教程：創(chuàng)建酷炫時尚的多邊形背景》
《手把手教你用illustrator創(chuàng)建精細(xì)的信封》
《巧用illustrator的涂抹打造文字草圖特效》

Adobe Illustrator 和其他平面矢量軟件一樣，使用的是貝塞爾曲線，而且是三次曲線，用四個控制點來描述和控制曲線，而在 Illustrator 中控制部分定為了錨點和手柄，所以一段曲線是由首尾兩個錨點控制線條的始末位置，而首尾的手柄控制線條的形態(tài)。

在用鋼筆工具來繪制曲線時，就是點擊 A 拖動到 a 再點擊 B 拖動到 c 也就是確定了 b 形成 AB 這條曲線，那么，在通常情況下使用鋼筆來繪制曲線是通過拖動來實現(xiàn)的，而不像三維軟件中的一些曲線繪制工具是通過放置 A a b B 來實現(xiàn)的，Illustrator 的這種繪制方法的好處就是感覺更易控制（感覺上是兩個點來確定的），缺點最明顯一點就是 c，也就是說當(dāng)你要繪制 b 時，c 已經(jīng)確定，也就是說這段曲線如果還要延續(xù)下去，那么 c 已經(jīng)事先確定了，如果你在繪制 B 點時，對下一段的曲線沒有概念的話，只為了達(dá)到 b 的要求放置了 c 而沒有意識到下一段，將給繪制工作帶來更多的后續(xù)工作，通過再調(diào)整手柄控制點。

在一些介紹曲線繪制教程中，可以看到一個 1/3 規(guī)則，也就是從錨點到手柄控制點的距離 d 大概是 1/3 曲線長度，這當(dāng)然是一種通常的經(jīng)驗，并不是要嚴(yán)格遵守的，需要看曲線的形態(tài)。

1/3 規(guī)則是為了避免類似右邊出現(xiàn)的情況。其實這個規(guī)格很容易理解，我們追求的曲線在數(shù)學(xué)描述上應(yīng)該越簡單越好，簡單不只是數(shù)量上最少，比如最少的控制點，還有一個重要點就是均勻，均勻就是每一個控制點的權(quán)重是均勻的，不一定每一個控制點的權(quán)重要一樣，但是如果左右錨點間的曲線是對稱的，那么控制點的權(quán)重就需要一樣，不僅包括曲線拉伸的權(quán)重還包括曲線方向的權(quán)重。簡單說就是不能過分拉伸以及松弛，而是以簡單的方法保持緊繃。

一段曲線，即兩個錨點兩個手柄形成的曲線是容易繪制和控制的，只需要耐心調(diào)整就可以了，因為任何變化都可以在容易控制的范圍內(nèi)。但是，復(fù)雜的曲線不是兩個錨點形成的一段曲線，它至少得是三個錨點以上。

如果我們?nèi)ダL制一段曲線，能使用兩個錨點來形成當(dāng)然是最好，如果此時在曲線中間再放置一個錨點是自添麻煩，一下子將軍控制的復(fù)雜度翻倍，但是由于形狀的需求，必須要放置更多的錨點，一段簡單曲線能表達(dá)的形狀是有限的。

多了一個錨點，去擬合一條曲線，所謂擬合就是比如先手繪好的形狀然后掃描將圖像輸入軟件然后是勾畫輪廓，有時我們并沒有這個步驟，比如對照著手繪直接繪制，而且單憑一個腦袋，有的甚至憑感覺，這時候，會出現(xiàn)一個情況，就是繪制一條看上去形狀差不多的曲線，可以有很多繪制方法，錨點放這可以，放在那也可以，只不過把手柄拖長一點，那么該如何選擇呢。

憑感覺，憑經(jīng)驗，因為這是手藝。不過，重要的是要記住"均勻"這個詞，追求"最簡單"。

一旦將錨點增加到 4 個呢，這將會變得非常非常復(fù)雜，即使有經(jīng)驗的人，依然需要通過后續(xù)不斷的調(diào)整來取得滿意結(jié)果。

繪制曲線的目標(biāo)是確定，而不是看上去差不多就行了，也就是包含在"簡單"之內(nèi)，每一個點都能確定，就像一個圓形，它的幾個控制點就是確定的。而我們繪制曲線的確定當(dāng)然不是 100% 的確定，而且一種確切感，如果經(jīng)驗豐富，就能知道下一個控制點在什么位置了。

但是，如果一段曲線是對稱的，那么我們就多了一種確定了， 在繪制錨點的時候就可以左邊這一點與右邊這一點同樣高，依此類推，我們可以找到很多確定，或者去擬合這種確定，比如比例上的，這段是那段的一半等等。而是用網(wǎng)格輔助來作圖，也可以視作是尋找確定。

即使我們使用了網(wǎng)格，確定了 4 個錨點的以及手柄拉伸的長度和方向，也需要很大的工作量，而在實際中我們使用的方法還是依賴于眼睛，達(dá)到大概需求后再去規(guī)整尺寸，錨固好這些"確定"，在規(guī)整過程中不斷調(diào)整。

但這種方式是沒有效率的，尤其是錨點數(shù)量達(dá)到和超過 4 個的復(fù)雜曲線的時候。

類似 iOS 7 電話圖標(biāo)的形狀，左右對稱顯而易見，但是很難用 3 個錨點來確定這個形狀，尤其是還要求"均勻"，沒有過分拉伸或者形狀擬合程度高。

用 Illustrator 來繪制曲線的時候，很少是直接下手繪制的，正是因為我們上面說的曲線沒有確定性，不像四邊形和圓形以及這些基本形狀的組合圖像那樣，確定是事先的。所以無論我們是不是輸入手繪進(jìn)行擬合，在繪制過程中總是處在一種擬合狀態(tài)的。

而在這提出的一中繪制策略，就是在這些復(fù)雜光滑曲線的繪制過程中引入更多的確定性，就像意識到圖形是對稱一樣，我們要找到一些內(nèi)在邏輯，控制著線條以可控的方式組合成。

這種策略就是曲線的拆解，將復(fù)雜光滑的曲線拆解中曲線繪制最基本的單位，就是兩個錨點兩個手柄的一段曲線，然后就拆解后的曲線連接，再作一些細(xì)微調(diào)整。

兩個錨點的曲線是可控的，也就是說有很高的確定性，而且手柄長度是獨立控制的，而不像通常繪制中（見開頭說的我們是通過繪制 c 來取得 b 的）前后影響的巨大，而手柄方向在繪制和后續(xù)連接和調(diào)整過程中很容易控制。

那么曲線繪制的技藝就轉(zhuǎn)變?yōu)榍€拆解的技藝了，而拆解的技藝仍然以"均勻"和"簡單"為宗旨，也就是說如果有對稱和類似對稱，那就是最容易拆解的部分了，如果很難拆解，那么我們?nèi)シ治銮€的曲率變化，結(jié)合我們對兩個錨點的基本曲線的可供形狀的意識，以"簡單"為目標(biāo)去尋找卻開點。

這種拆解策略在三維中也是通用的，只不過操作手段不一樣而已，在這，我們依賴的操作手段就是開頭的曲線的基本控制單元。

注：圖形只是示例，這種拆解并不唯一，而且我是通過自己的方式去擬合 Apple 的那個 120*120 px 的圖標(biāo)，誤差肯定很大。這種方法是在三維和二維之間互導(dǎo)發(fā)現(xiàn)的，比如將一條高階的光滑曲線導(dǎo)入三次貝塞爾曲線環(huán)境中，看軟件是如何自動放置錨點的。

原文地址：zhihu
作者：Hi-iD

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設(shè)計師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計指南http://hao.uisdc.com/ps/。
設(shè)計微博：擁有粉絲量61萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：