iOS 7 的圓角圖標是怎樣一個圖形?

圖片截自: Apple - iOS 7 (即 design_icondraw.mp4: http://movies.apple.com/media/us/ios/ios7/f34c5445-5a9c-4b3a-9556-8efe89147559/design_icondraw/design_icondraw.mp4)
它是圓角嗎?如果逆向繪製,它是怎樣的數值關係(比如定一個基本單位長度 a)


研究了一下, 應該是用的兩個對稱的羊角曲線(Euler spiral)拼出來的。

截取羊角曲線上的一段, 從原點開始斜率取從0到1

具體用了笨方法, 在AI上用45°傾斜的直線去切

具體用了笨方法, 在AI上用45°傾斜的直線去切

對稱複製一下

對稱複製一下

最後是效果圖, 和官網截圖完美契合

最後是效果圖, 和官網截圖完美契合

效果圖

效果圖


^____________^


2017/10/20 補充,請見專欄文章:從圓角到圓角

以下答案 2013/06/15 撰寫

---

我作一下補充,從逆向繪圖的角度開始。我覺得逆向是了解一個設計的最好手段,無論是簡單大概的還是複雜精確的,而逆向會碰到兩個問題,這兩個也是設計生成的最主要的人為操作:選擇和邏輯。邏輯比較容易找到線索,比如是同心圓或者內接外切還是中心線對齊等等再到複雜泛化一點的邏輯,而選擇摻雜於邏輯之中,有時較難確定。

僅僅是對這個圖形的逆向解讀,與評價 iOS 7 及其他無關。

iOS 7 的圖標圖形,在官方網站中有繪製演示( Apple - iOS 7),粗一看就是根據各種幾何關係(就是邏輯)生成的圖形,而且發布會那天開頭有一個視頻也是類似這種點線形式的圖形呈現。下面是我的一個逆向繪製:

1. 120 px 的正方形。為什麼是 120 px,因為以 iPhone 為例。
2. 27 px 四周圓角。為什麼 27 px,這是一種選擇,或許是經過列舉比較選擇而出的(我傾向於這,具體下面有介紹),或者 27 是個好數字。
3. 沿倒角圓弧作內接正方形。
4. 作內接正方形的內接圓。以內接正方形邊長的 0.6 為直徑作圓,為什麼是 0.6,這是一個選擇,選擇背後的考慮或許可以挖,在這略過。
5. 再以剛才的圓作內接正方形。
6. 以剛才的內接正方形作內接圓。
7. 拉出那些分割線。
8. 開始處理圓弧部分,放大以便看得清。
9. 切掉 1/2 圓弧以及部分上邊直線。
10. 在這兩線段之間作 G2 連續過渡(曲率連續)的曲線。
11. 對稱複製剛才的半段。
12. 處理剩餘其他幾個角。

可能從 9 開始的處理方式很多人不太了解,因為這是工業設計中較常用的處理手段。但因為都是關於視覺對曲線過渡的感官體驗,所以在平面設計中也能碰到,在此作一下簡略介紹。

通常在平面設計軟體中(我接觸有限,包括腳本之類並沒去查詢過)圓角就是軟體提供的默認工具,那麼畫圓角四邊形就是一個矩形的數值可以個圓角的弧度值。

上圖 2 就是一個圓角四邊形,它有兩個數值(因為是正方形),邊長和半徑為 27 的圓弧。這樣的過度,在圖示紅點處,曲率發生了突變(曲率就是半徑的倒數),從 0 直接跳到 1/27 了,這種突變在視覺上的體驗是怎樣呢?

現實是這個問題很複雜,因為人的視覺感知力有閾度,而且不同情況下會不同比如環境等等,但不可否認的是,這個曲率突變是存在的。而這在產品設計中就非常容易察覺了,特別是高光介入,而且產品的三維帶動人動態的去感知,儘管可能人是不動的,比如曲線不流暢就是曲率過度的問題。

上圖 12 就是用曲率連續的曲線來過度,它已經不是圓弧了,所以不能簡單用 R=27 的圓弧來形容了,而是高階的曲線,用這條曲線來擬合圓弧,是的在視覺上感覺它還是一段 R 值恆定的圓弧。而實際上,它從 0 到 27 有一段連續的過度了,在視覺上它就更加流暢。

這裡面牽扯到很多問題,像圓弧這些曲線(有時稱「歐幾里德」曲線)是確定的、簡潔的以及有數據的,而高階曲線的數學描述是複雜的,有時前者會更純粹而後者過於馴服化。從這一點來說,上面步驟中 9 是一種協調,因為這可以保證了中間點的弧度確定是 27,如果我不是半段半段來擬合,而是整個 1/4 圓弧用曲線來擬合,那就在理論上沒有確定的點了,除了兩頭的無窮大半徑。

我這個逆向做對了嗎,沒有,因為我也只是擬合,而且 Apple 那個動畫中圓弧上的幾個點不好解讀,如果解讀成曲線內的 point (簡單理解成曲線內分段點吧,說詳細還複雜),那麼看上去連接直線一方的過度有過壓縮,理解成分段的指示,那就不太理解連接直線處的兩個點,因為看上去不是均分。

另外在曲線的連續上沒必要做到 G3 連續,所謂 G2 連續如上所說是曲率連續而 G3 是曲率連續的曲線曲率連續。

曲率連續在平面設計是否必要?看情況。即使圓角四邊形,也要看情況,有的過度處的生硬察覺不出,因為和整體的比例有關,有的很容易察覺出,有的還能帶動視覺產生各種偏差感知,比如直線段的向內凹陷等等。

平常遇到圓角四邊形的時候可以注意一下,尤其是那種大大咧咧的設計,就很容易體會到那種不連續的不舒服。在這不列舉了。

一個簡單的例子,就是 iPhone,很多 App 製作演示的時候就是直接用圓角四邊形模擬的,而實際上它不是圓角,右側是用 Apple 官方外觀圖紙配上去的,而左側來自:Mailbox - Put Email In Its Place

那麼在使用平面軟體時如何考慮這個問題,其實通常情況不必考慮這個問題,因為只要仔細控制貝塞爾曲線的控制點和手柄就可以了,你感覺光滑連續漂亮了就可以了,因為視覺是判決者,只是在直線到曲線過渡是要多注意。另外 Type is Beautiful 曾經有過一篇文章:FF-DIN 圓體之工藝、設計與性感 裡面有一些類似的介紹及手段,就是作好直線到曲線部分的緩衝,在這篇來說,就是曲率的連續過渡。

至於圓角四邊形,除了通過比例關係來校正外,或許有插件能快速繪製?或者等軟體方了。

補充:另外的圖形生成方式可見 @Ami 的答案,需要補充的是,逆向或者猜測生成過程是尋找設計內的邏輯,而不是設計師的生產過程,設計師設計可能更沒有邏輯,而尺寸的規整或許是最後。

補充 2:步驟 10 和 11 具體操作時需要一些編輯,如果直接 G2 連續還是會在兩半段圓弧的中間形成曲率的一個下凹尖點。以及在原圓弧中點出要求新曲線的弧度半徑為 27 是沒有必要的,因為只是一個點的弧度,只要要求這個位置就行,也就是首中尾三個位置確定,中間曲線去擬合原 27 的圓弧。

補充 3:如何用 Adobe Illustrator 等繪製 iOS 7 里的圓角四邊形?


之前的答案騙了不少票數,但是我覺得思路錯了,所以重寫一遍。

Hi-iD的答案給我不少啟發,他的出發點才是對的,所以我決定從視頻本身入手。

這一切的前提是:蘋果展示的視頻是如何從零建構圖標,在這一點上我相信蘋果。
——————————————————————————————————————
視頻截圖開始:

這是一個120 px的正方形

這是一個120 px的正方形

開始導圓角,並且出現8個點,將正方形分成9塊(9宮格?),但要注意的這裡並不是均勻分割,中間的正方形要大一些(據我測量是38PX:44Px:38Px),我猜測是在視覺上有所考慮,見下圖:

開始導圓角,並且出現8個點,將正方形分成9塊(9宮格?),但要注意的這裡並不是均勻分割,中間的正方形要大一些(據我測量是38PX:44Px:38Px),我猜測是在視覺上有所考慮,見下圖:

可以看出如果是均分的話,中間部分的圖案在視覺上偏小,繼續截圖

可以看出如果是均分的話,中間部分的圖案在視覺上偏小,繼續截圖

這是前後兩幀截圖,仔細看圓角部分,可以看出後面那一張圓角已經變為G2過渡(具體解釋看Hi-iD的答案),由此可以推測,圖標應該是先直接導圓角,後處理成G2連接。

這是前後兩幀截圖,仔細看圓角部分,可以看出後面那一張圓角已經變為G2過渡(具體解釋看Hi-iD的答案),由此可以推測,圖標應該是先直接導圓角,後處理成G2連接。

這是完整的參考線,之後的圖標多多少少都在參考線上做文章,可以看看下面這些截圖:

這是完整的參考線,之後的圖標多多少少都在參考線上做文章,可以看看下面這些截圖:

可以猜測,ive是想在圖標設計上帶入一種框架,使之具有一定的統一性,結構性,規範性(難道是覺得之前的圖標太亂?)。

可以猜測,ive是想在圖標設計上帶入一種框架,使之具有一定的統一性,結構性,規範性(難道是覺得之前的圖標太亂?)。
————————————————————————————————————————————
現在回答問題:
1. 不是圓角,而是G2的曲線連接。
2. 如果按視頻的邏輯來看,應該不存在數值關係,更多是視覺上的考慮。至於之前為什麼能測量出來,我覺得是巧合。



《設計幾何學》中提到兩個矩形,一種是有理分數比的固定矩形,一種是√2 √3 √5 以及黃金分割率 這類的無理分數的動態矩形。看看這個確實接近某些規則。讀了這本書大概沒啥有用的東西,但到現在有一個觀點:很多美背後隱含接近某種規律,但有時候利用這些規則也會創造枯燥。
還有個有趣的 Mac mini,我在 iOS 7 發布前就預測這個過度角應該變小,像 Mac mini 這個,可惜沒能如願。


目前iOS7視頻中的圖標倒角不太清晰,擬合的曲線有多種解法,但個人傾向於簡單的三次方程x^3+y^3=1(為方便計算,這裡常數取1)

先用 wolfram alpha 取x^3+y^3=1(0&


然後截取曲線(164*164 px),縮小後和官網視頻最大尺寸下的截圖對比,比較契合:

另一個問題是:三次方曲線倒角為什麼比圓角更平滑?我們還可以藉助wolfram alpha找到答案,首先求出兩者的曲率方程:


可以看出,圓(二次方曲線)的曲率是半徑的倒數,三次方曲線曲率則比較複雜,代入原方程,得到曲率變化的圖像:


真相出來了,三次方曲線的曲率是從0開始增加,然後回到0,正好和直線(曲率為0)平滑過渡;為了更好的直觀表示,我們可以將曲率直觀的在圖像上反映出來,即在曲線的法線方向顯示曲率。
我們可以利用法線方程y-f(t_{1})=(-1/f,和距離方程(x-t_{1})^2  +  (y-t_{2} )^2=k^2,解出曲線上的點(t_{1},t_{2})對應的曲率點(x,y),省略計算過程,方程圖像如下:

iOS6 和 ios7圓角對比如下,紅線為曲率:

iOS7圖標外框線的曲率是連續變化的,視覺上沒有「斷點」;且圖標更向四個圓角外「彎曲」,因此即使採用比 iOS6 更大的倒角也顯得飽滿。


那「圓角」弧線,其實是橢圓的一部分,如果你聽說過Reuleaux triangle,你就會明白。參考鏈接1:Reuleaux Triangle -- from Wolfram MathWorld參考鏈接2:Wolfram Demonstrations Project,本鏈接中,你需要安裝mathematica或者wolfram的播放器才可以播放動畫演示。

其實設計的關鍵,就是得到這段紅色曲線(橢圓的一部分),即,完美的視覺「圓角」:


這段曲線的參數方程為:x=1-coseta -sqrt{3} sineta 
,y=1-sineta -sqrt{3}coseta ,eta in left[ pi /6,pi /3 
ight]
隨便一個計算軟體,比如mathematica,mapple,matlab,就可以畫出來。

看這個mathematica生成的效果,我覺得這個圓角極盡完美。大家試試,和蘋果iOS7的那個擬合對比一下,看看是否一樣。


以下只討論關於「圓角」的問題。非科班出身,如果有說錯的地方,請指正。
首先借用一張圖(來源:曲線的連續-騰訊ISUX)說明一下什麼是 G2 曲線連續(這圖可能有些不嚴謹,看個大概意思吧):

G1 製作簡單,成功率高,在某些場合很實用,所以非常常用。

G1 製作簡單,成功率高,在某些場合很實用,所以非常常用。
視覺設計和外觀要求較高的工業產品,一般要求 G2 連續。
G3、G4 更加平滑完美,但要達到這種效果,消耗的資源太多,而視覺效果只比 G2 好一點,所以只在要求非常高的產品上才會應用。

怎麼畫出 G2 連續的曲線?
我不知道蘋果是怎麼畫的,可能他們有更高級的工具,也可能他們根本沒考慮 G2 什麼的,完全依靠視覺判斷手工調整。下面只說說如果我們想畫出類似效果,應該怎麼辦。
Adobe Photoshop 和 Illustrator 里只能畫貝塞爾曲線,要畫出 G2 連續的曲線,需要能畫出 B 樣條(B-Spline)曲線。關於貝塞爾曲線和 B 樣條曲線在數學上的解釋請自行 Google,簡單的說,貝塞爾曲線是 B 樣條曲線的一個特例或者說子集。 B 樣條可以進一步推廣為非均勻有理樣條(NURBS,non uniform rational B-spline)。
專業的三維設計軟體似乎一般都可以畫這種曲線(汽車設計之類 G2 曲面是基本要求,不像在平面設計中可能還屬於高級要求)。
除此之外,Microsoft Expression Design 4(免費)和 CorelDRAW X5 之後的版本,都有畫 B 樣條曲線的功能。
在這裡可以看到 CorelDRAW 中的 B 樣條工具演示,我覺得這種畫法比貝塞爾曲線要直觀得多。
單純用 Adobe 系列軟體或許也能手工調整模擬類似效果,不過比較麻煩。可以考慮用上述那些軟體繪製之後,再導入到 Adobe 系列軟體中進一步處理。
其中 Microsoft Expression Design 4 尤其好,不但是免費的,而且可以把已經畫好的曲線轉化為 B 樣條曲線。畫完之後,還可以直接 Ctrl-c、Ctrl-v 複製到 Illustrator 中並保持可編輯性!(微軟家偶爾也會出好東西呀……)

上圖是我用 Microsoft Expression Design 4 畫的,一個是普通圓角矩形,一個是用了 B 樣條曲線的,你能看出哪個是哪個嗎?

上圖是我用 Microsoft Expression Design 4 畫的,一個是普通圓角矩形,一個是用了 B 樣條曲線的,你能看出哪個是哪個嗎?


從搜Marc Edward過來,想知道iOS7圖標那個圓角矩形怎麼畫出來的,但是找不到很精確的畫法,也看了大家的畫法,總有幾步是,怎麼說呢,不知道怎麼來的?(懵.jpg)Ellen Zheng的答案里的Michael Flarup的黃金比例推算畫法沒看到,大概要梯子才能跳得過去吧。。。

於是自己動手了。

用的是Ai,因為要徒手,所以關鍵是創造出各個參考點。感謝Ami讓我一開始就注意ICON九宮格的中心格要大一些,我覺得這個很關鍵,因為關係到ICON那個特殊的圓角起始點。

不割了,開始畫。

如下圖,畫120×120矩形,交叉連接各個頂點可以得出中心點,作內切圓(下面如果我沒特別說明的話,都是指切最外面那個大矩形哈),再連接圓的上下左右頂點,生產出各個圓心點,作內切圓。圓的作用主要就是劃1/2、求中點。




如上圖,特殊圓角起始點得出來了(藍點)。

接著是畫圓角。圓角頂點的確認也蠻重要的(就是下圖那個紅點),現在想來這是碰到的最大坑。一開始看著位置差不多讓我以為圓角頂點就在1/4圓上,所以用下圖的藍點為心作內切圓,從此踏上求從藍心圓斜率如何平滑躍遷到1/4圓斜率的失足路,當然求平滑斜率這個過程更難,試到後來沒思路了想暴力破解,拿官方視頻截了圖來對,才發現另一個事實:人家的圓角頂點離1/4圓是有點距離的。知道了真相的友誼小船眼淚差點沒掉下來T T。排除掉巧合或偏差的想法,這才找出了下圖紅點作為圓角點,當然,這個圓角點和官圖是契合的。

那麼,現在就變成怎麼將藍心圓斜率平滑躍遷成目標圓角斜率(這句話好拗口,明白是要搞斜率就OK。。。)。

於是漫長的躍遷之旅就這樣波瀾壯闊地展開(什麼鬼,衛星變軌了嗎忽忽忽)——

先找出所有圓心點(下圖的藍叉),至於為什麼是這些點,結合藍心圓到目標圓角心肯定在這條對角線上+建立起來的柵格系統+一點點「如果我是設計師的話」的直覺+試了幾次然後和官方視頻截圖對照,就得出來了(大概吧 &> &< ),而直覺里我比較篤定的一點是,肯定跟1/2有關,你看所有的關鍵點都是在某些1/2位置上。

傳說中的藍心圓:

我凸:



畫上面這幾個形狀的原則是,從大的畫起,下一個與上一個相切,拉好大小相切再拉凸(這個原則真的很難畫啊 T T)。

最後用鋼筆勾線:

加粗看看:


鋼筆勾的時候,從圓角起始點到頂點之間按官圖那5個位置來設錨點是能畫出由5個圓疊合拉出的形狀的(其實真正起修斜率作用的是後面4個圓),而且這個形狀和官方視頻上的ICON輪廓吻合。

但,除掉起始位置,是不是一定要在那4個位置來設錨點,好像又不一定,我在上面貼出來的圖就不是從官方那裡取錨點,而是在附近找的斜率突躍的4個位置(這些位置不確定是不是我看糊了眼找出來的,也可能我心下覺得拉了4個圓來平滑掉斜率應該是有4個相關點吧&> &<啊好巧你也這麼認為嗎),最後出來的形狀和官圖還是挺吻合的(考慮了誤差在內,這個誤差下面說)。

不知道如果是機器製圖的話會不會能確認出4個唯一點。我曾經也想畫出4個相交點來釘死這些位置,但無奈求不出好的參照圓/切線/等分線等,畫出的交點都和官圖不能完全吻合,甚至有些點吻合,有些就偏離一些些這樣。

下面放出自己取位置作出的輪廓和官方的對照圖,還算吻合吧。為什麼說有誤差呢,因為後來拉了幾個輔助圓來看天氣圖標,發現太陽和青線、雲朵和紫線都沒有嚴格相切,差幾毫這樣,所以ICON輪廓和官方輪廓沒有完全吻合大概也是因為有誤差,大概吧(笑)。但這個畫法應該是可行的(至少,至少應該有靠近到真相吧?真的有吧?啊啊啊,不知道啊,總覺得那4個相切圓太難畫得不尋常啊)。

最後再看看PS上的效果:

希望有人能夠分享更輕鬆、更正確的徒手畫法方案。

……………………………………………………………


iOS 7 的icon不是純圓角矩形,具體是什麼形狀我無法用語言描述……但大體上是接近26-27px的圓角矩形

曲線部分錨點那麼多是因為修正了傳統圓角矩形的2個視覺錯覺:

  • 直線和曲線的介面處會有個小【稜角】,這個和矢量的刪格化也有一點點關係
  • 直線中間會有凹進去的感覺

現在都沒了,舒服很多


不知道要是其他公司設計了這個圖標,大家會不會這麼感興趣。各種高深的理論,技法都被搬出來了,因為這是蘋果設計呀,背後肯定隱藏著很多神秘的東西。不知道是不是真的是這樣,我是沒見過身邊哪個設計師為了一造型,搬出各種幾何理論做支撐,他們唯一的標準是:視覺和諧。所以,個人認為蘋果設計師在設計這個圖標的時候,並沒有去考慮那麼多幾何理論,也沒有去在意這個R要做到哪一個數值,靠的就是一種設計直覺,滿足了視覺和諧就夠了。
回到圖標本身,個人認為這個圖標與之前其他很多圖標唯一的不同是:它將倒角的連續性從G1提高到了所謂的G2。(為什麼是所謂的?從純粹的數學定義講,直線跟曲線是不存在G2及以上的連續性的。)也沒有其他特別之處了。
最後,這倒角矩形的設計在我眼中很一般,因為直線做倒角永遠都感覺不和諧。


我實際操作了一下,在rhino建模對比。
從ios7 ai圖 倒入rhino如下圖


40X40mm 從曲線曲率圖可以看出,每條邊直線部分為12mm
於是,建立兩條12mm直線 放到原框位置做G2連續,並調整,盡量與原圖匹配 ,如下圖

紅色線為新建曲線 ,白色線為其曲率圖,黑色線為原圖曲線

紅色線為新建曲線 ,白色線為其曲率圖,黑色線為原圖曲線
可以發現如果使用G2連續並不能與原曲線進行匹配。
但是,猛然間發現,代表新建曲線曲率的白色線與黑色線很接近
故建立G3曲線進行匹配。

成了!

成了!
通過調整G3曲線,可以與原圖基本契合。
實際操作的結果是,ios7 新圖標的倒角處曲線為G3連續曲線。
求大牛們批判!


(大家猜這個的答案已經變成像尋找聖杯一樣的東西了哈哈,引用 Marc Edwards 的推:This is silly, but fun.)

推薦一個迄今看起來最接近真相的模版,來自 App Icon Template 的作者 Michael Flarup 根據官方視頻的網格由黃金比例推算出的。

詳情見此:Start making iOS 7 Icons with the App Icon Template 3.0
模版下載見此:App Icon Template

下圖左側是Marc Edwards的超橢圓,右側是黃金比例法,背後的紫紅色是官方圖標,可見右側更接近官方:(轉載自上述博文)


我知道一個這樣的東東
x^n+y^n=1
這個方程的圖像,當n等於2的時候它是個圓大家都知道,當n比較大的時候它就比較像一個圓角矩形
當n無窮大的時候它就是個正方形
可以自行walfame


用wolframalpha大致擬合了一下,推斷這個圓角應該是 x^3+y^3=a 的三次曲線(G2連續):

PS.高速公路彎道用到這種曲線,這樣汽車拐彎時,可以平滑的轉動方向盤~

PS.高速公路彎道用到這種曲線,這樣汽車拐彎時,可以平滑的轉動方向盤~


剛翻譯完一篇關於視覺尺寸和物理尺寸的文章,有一些關於IOS7的圓角圖標的說明。如下:


第一個是在Sketch中創建的圓角矩形,第二個則是「超橢圓」,也被叫做Lame曲線。是被一個叫做Gabriel Lamé的法國數學家基於數學公式從一個類四角星的形狀變化而來的,看上去更圓。

Marc Edwards使用Lame的曲線創造除了一個順滑的視覺效果完美的形狀。從IOS7開始的ICON就是基於這個形狀

後來這個形狀加上了黃金比例和網格,來指導設計師設計新的ICON。

使用超橢圓的好處是能看上去更加的圓潤。另一方面,這些非標準的形狀要應用在實際的屏幕中是比較麻煩的。一方面要結合各種SVGs文件,一方面也需要載入一些公式和腳本或者是像APPLE處理APP ICON一樣用PNG蒙版的方式。

對於設計過程本身來說,有一個簡單的處理方法。只需要雙擊進入可調整貝塞爾曲線的狀態,手動將兩個圓角的控制桿拉近一點即可。

這樣的效果在尖銳的角上會更明顯,這在畫線路或者是地鐵路的時候很重要。

全文:比圓更圓—視覺感知在UI中的應用

原作:https://medium.muz.li/optical-effects-9fca82b4cd9a


看了幾個回答,覺得都存在某些問題,所以又看了幾遍圖片和視頻,個人認為這種幾何圖形應該邏輯很強,而不像 @Hi-iD Hi-iD 所認為的「27是個好數字」類似這種感性成分較多的選擇,當然他的回答啟發性很強,並能引用很多相關知識,這點非常贊; @Ami Ami的解答方向很對,但是也缺少邏輯-元素間的相互關係-比例,一個設計中很重要的因素。所以我用比例做了一下嘗試,結果如下:

關於當中的比例,發現一個巧合是符合斐波那契數列,這個數列在iOS7宣傳視頻中的計算器應用中也有體現,其實iOS的照片裁減比例也如此。

關於當中的比例,發現一個巧合是符合斐波那契數列,這個數列在iOS7宣傳視頻中的計算器應用中也有體現,其實iOS的照片裁減比例也如此。

排名第一的答案我驗證過,其實並不能完全吻合,可能引用了羊角螺線這樣一個概念讓大家覺得比較玄乎,事實上羊角螺線上隨機取一段夾角45°的圓弧作對稱然後調整端點的位置,也能做得很接近該圓角矩形。

排名第一的答案我驗證過,其實並不能完全吻合,可能引用了羊角螺線這樣一個概念讓大家覺得比較玄乎,事實上羊角螺線上隨機取一段夾角45°的圓弧作對稱然後調整端點的位置,也能做得很接近該圓角矩形。
至於我這種做法的圓弧,是混接兩條直線的端點,高階連續(G3或G4), 然後通過45°角中點,這種線理論上有很多,但實際在特定要求下只有一條,圖中我只做到了無限接近,但還沒完全重合(工具限制,另外,我覺得AI肯定是畫不出來的)。
最後,該比例應用到120x120px上做填充會讓一些區域劃分到半個像素,但如果是線條做1像素描邊則剛好居中,非常巧妙。


說設計師不考慮數學模型和參數,只能說他根本不懂工業設計。
工業設計和平面設計的最大區別就是需要在數控機床上加工生產,沒有數學模型和參數輸入,機床就不會正確工作的。


吐槽下平面圖標做G2連續基本沒毛用,工業設計用G2甚至更高的連續是因為實體曲面在反光下人的肉眼可以輕易察覺G1和G2的區別。這一看就是某位工業設計師在指導蘋果的UIUX團隊開發
根據ami的回答加上我對於蘋果工業設計團隊的一點點膚淺的了解。我認為是類似alias裡面建模常用的方法:
先將直角做倒圓角處理,然後用類似alias里align的自動連續工具將該圓角兩頭連接處自動生成最接近的G2連續即可。
沒實際驗證過。
不過從之前蘋果三星官司的公布資料可以看出蘋果似乎是主要用alias做ID數據面建模。那麼考慮到ive這個搞工業設計的必然能影響UX設計的團隊,加上圖標特地做了G2連續,這樣的猜測還是有合理性的。


蘋果來了一句:我看著舒服所以隨便設置一個圓角值。


英文字體的曲線中經常會用到這種曲線,過渡自然而優美。另外,Meego的圖標要比ios7還要有味道。很高興中國的設計師們開始注意到這些細節了!


推薦閱讀:

如何寫一份好的 App 體驗報告?
什麼水平的開發者應該參加 iOS 7 Tech Talk,會有哪方面的幫助,與會的體驗如何,有什麼感想?
iOS 7 中的 Safari 圖標是不是非常丑?

TAG:圖標設計 | 圓角 | iOS 7 | 羊角螺線 (Euler spiral) | iOS Design |