如何用 Adobe Illustrator 等繪製 iOS 7 里的圓角四邊形？

此圖來自 iOS 7 beta for Developers
iOS 7 的圖標並非簡單的圓角矩形：iOS 7 的圓角圖標是怎樣一個圖形？

這是我的一個嘗試，以及一些思考。

並不是每個像素對得上，我的繪製過程很簡單，如下：

1. 以 120 px 邊長為例，繪製 27 px 的圓角。（我沒嘗試過以 26 px 及其他為基礎的繪製，或許可以）
2. 把圓弧兩端的控制點向後拖動 8 px 而控制柄向前拖動 3 px。（都是相對於最原始的位置！）
3. 左上段圓弧處理完後。

關於 iOS 7 圖標圓角四邊形的特殊性已經在這個問題（iOS 7 的圓角圖標是怎樣一個圖形？）中討論過一些，很多人也發現了這個改變，比如這：Jony Ive Is So Obsessive He Gave iOS 7 Icons The Same Rounded Corners As The iMac

從這張圖 http://dribbble.com/shots/1110779-iOS-7-Icon-Rounded-Corner-Radius 中可以看出表面上這個圓弧的變動很微小，可以說就是幾個像素，但是給整體帶來的變化非常大，如果你開始注意，那麼就會發現差別非常大，看了 iOS 7 的圓角圖標後再去看 iOS 6 就會察覺出它的不光滑，尤其在圓弧與直線的交接點，iOS 6 其實已經很好的消除了這種不光滑感，通過圓角弧度與整體的比例關係，如果你再去看其他一些圓角四邊形，就更容易發現。

一旦發現再也回不去了？我並不這麼認為，我在這個回答 iOS 7 的圓角圖標是怎樣一個圖形？中提到簡單數學描述的線條和高階複雜數學描述線條的差別，前者有時會顯得簡潔純粹，後者可能因為精緻而顯得世故圓滑以及過於傾向於人（馴服化,tame）而脫離物質的本質。比如深澤直人的很多設計都是這種簡潔的圓弧過渡。

我看過其他一些對這個新圓角的逆向繪製文件，但我看到的是它們在圓角部分和上圖一樣，放滿了編輯點。我還不清楚 Apple 的圖標繪製視頻中這些點的意思，我不認為是線條的編輯點，因為這樣複雜度超出了想像。

我看到一些對曲線連續的介紹，很多都有錯誤，不同類型的連續的簡要介紹可以見這：Continuity 在三維世界中，不同的連續類型，尤其是 G0～G2 很容易分辨，尤其在有高光的時候，G0 就是位置連續只要兩者連接在一起就是，G1 在日常最常見的就是 R 角過渡，當你移動來觀察表面上高光的走勢，在圓弧面它很順暢在移動，但移動到邊線位置時，會發現高光在那囤積了，而 G2 則高光可以很順暢的過渡過去（或擴散或消失），只不過這個變化的速率有不同。

在平面中，不同的連續在一些特殊例子中會有所表現，比如圓角四邊形。但 G2 連續這個數學概念（即連接點處不僅切線一致而且曲率半徑相同）在平面設計中並沒什麼需求，更何況在目前的軟體系統，諸如 Adobe Illustrator 等只有三階的貝塞爾曲線，用它來實現所謂 G2 連續有點緣木求魚了（比如實現一段 5 階曲線的連續至少需要 2段 3 階曲線）。所以，我認為在平面中只要有光滑過渡這個概念就行，在直線和曲線過渡時尤其要注意，而圓角四邊形則看情況選擇是否要作修整。

基於這點思考，我就通過將那段圓弧的控制點後退一點來達到光滑過渡的要求，這是一種常用的方法，在三維中也是，後退是因為儘可能保證圓弧的形狀，也有點像通常對粗加工品打磨拋光一樣。這種操作在曲線的曲率變化上同 G2 連續類似，只不過不是 100% 達到數學描述，但平面是以視覺為準的。

這種方法同樣是最簡單的，所以，我認為也是合理的。

補充：另一中繪製方法也挺普遍，就是 iOS 7 icon template for Sketch ，但是如果去對比像素，發現比我的方法還差很多（或許還能細調的餘地），但是相對其他還是簡單的而且可以作設計指引。其實，在三維軟體中使用高階曲線形成的連續導入只有三階貝塞爾的軟體中也會生成如此，即中間增加了一個編輯點。但是，這種方法，並沒能反映背後的生成邏輯。而我上面提供的思考以及編輯的小技巧可以沿用到其他場景中。