iOS 7 的圓角圖標是怎樣一個圖形? | 知乎問答精選

 

A-A+

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

2017年08月22日 知乎問答精選 暫無評論 閱讀 38 ℃ 次

【Hi-iD的回答(455票)】:

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

僅僅是對這個圖形的逆向解讀,與評價 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 裡的圓角四邊形?

【jordanfc(遲方)的回答(330票)】:

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

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

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

對稱複製一下對稱複製一下

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

效果圖效果圖

^____________^

【Ami的回答(128票)】:

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

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. 如果按視頻的邏輯來看,應該不存在數值關係,更多是視覺上的考慮。至於之前為什麼能測量出來,我覺得是巧合。

【鄭紫陽的回答(58票)】:

更新:把贊同票投給 @jordanfc(遲方)吧:

zhihu.com/question/2119

+=+=+=+=+=+=

Marc Edwards 「破解」了它,是「超橢圓(superellipse),也稱為拉梅曲線(Lame curve),是在苗笛卡坐標系下滿足以下方程式的點的集合」── 引用自維基百科

Marc Edwards 用 Mac OS X 自帶的 Grapher 繪製了出來:

如何在 Photoshop 或 Illustrator 裡面使用 Grapher 公式繪製出來的圖形可以參考這篇文章: Using algebra to create paths

────

必要補充:此公式繪製的超橢圓跟 iOS 7 的圓角圖標並不 100% 擬合,可以明顯看到前者的圓角更尖銳:

【MafiartHaywood的回答(15票)】:

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

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

這段曲線的參數方程為:

隨便一個計算軟件,比如mathematica,mapple,matlab,就可以畫出來。

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

【周婉君的回答(15票)】:

謝邀。

PS 裡面測量了一下

以 iOS 7 在 iPhone Retina 屏幕上的尺寸為例,

圖標大小120 X 120 px(注意,是 120px,已經不是 114px)

圓角接近 27px 的半徑,我分別繪製了 26px,27px,28px

發現 26px 和 28px 均太大或者太小,而 27px 在邊距轉彎處有 1px 的偏差,幾乎接近 27px.

右側紅色部分是 iOS 7 的圖標,藍色為 iOS 5 或者之前的。右側紅色部分是 iOS 7 的圖標,藍色為 iOS 5 或者之前的。

【金釗立的回答(11票)】:

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

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

  • 直線和曲線的接口處會有個小

    【稜角】,這個和矢量的刪格化也有一點點關係

  • 直線中間會有凹進去的感覺

現在都沒了,舒服很多

【lowfool的回答(8票)】:

目前iOS7視頻中的圖標倒角不太清晰,擬合的曲線有多種解法,但個人傾向於簡單的三次方程

(為方便計算,這裡常數取1)

先用 wolfram alpha 取

(0<x<1)的函數圖像:

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

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

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

真相出來了,三次方曲線的曲率是從0開始增加,然後回到0,正好和直線(曲率為0)平滑過渡;為了更好的直觀表示,我們可以將曲率直觀的在圖像上反映出來,即在曲線的法線方向顯示曲率。

我們可以利用法線方程

,和距離方程

,解出曲線上的點

對應的曲率點

,省略計算過程,方程圖像如下:

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

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

【膠子的回答(3票)】:

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

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

【巴別魚的回答(6票)】:

《設計幾何學》中提到兩個矩形,一種是有理分數比的固定矩形,一種是√2 √3 √5 以及黃金分割率 這類的無理分數的動態矩形。看看這個確實接近某些規則。讀了這本書大概沒啥有用的東西,但到現在有一個觀點:很多美背後隱含接近某種規律,但有時候利用這些規則也會創造枯燥。

還有個有趣的 Mac mini,我在 iOS 7 發佈前就預測這個過度角應該變小,像 Mac mini 這個,可惜沒能如願。

【姜弘霖的回答(3票)】:

我實際操作了一下,在rhino建模對比。

從ios7 ai圖 倒入rhino如下圖

40X40mm 從曲線曲率圖可以看出,每條邊直線部分為12mm

於是,建立兩條12mm直線 放到原框位置做G2連續,並調整,盡量與原圖匹配 ,如下圖

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

可以發現如果使用G2連續並不能與原曲線進行匹配。

但是,猛然間發現,代表新建曲線曲率的白色線與黑色線很接近

故建立G3曲線進行匹配。

成了!成了!

通過調整G3曲線,可以與原圖基本契合。

實際操作的結果是,ios7 新圖標的倒角處曲線為G3連續曲線。

求大牛們批判!

【李創奇的回答(2票)】:

iOS7的圖標應該仍然遵循各種黃金分割的規則,圖標並非簡單的圓和方切割。

從官方的圖例上看總共會參考到到四個圓的弧度,初步使用兩個,僅提供一個思考和繪圖的方式,已經和官方的圖標無限接近了,有精力的同學可以嘗試使用四個圓弧繼續深入。

不需要限定尺寸,也不用手工拖動圓角,遵循規則

在另外一個帖子回復過,貌似這裡更熱鬧:

"如何用 Adobe Illustrator 等繪製 iOS 7 裡的圓角四邊形?"zhi.hu/TbPw

【謝然的回答(4票)】:

我知道一個這樣的東東

x^n+y^n=1

這個方程的圖像,當n等於2的時候它是個圓大家都知道,當n比較大的時候它就比較像一個圓角矩形

當n無窮大的時候它就是個正方形

可以自行walfame

【EllenZheng的回答(1票)】:

(大家猜這個的答案已經變成像尋找聖盃一樣的東西了哈哈,引用 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的超橢圓,右側是黃金比例法,背後的紫紅色是官方圖標,可見右側更接近官方:(轉載自上述博文)

【知乎用戶的回答(0票)】:

7的圖標肯定是羊角曲線

【譚宏濤的回答(0票)】:

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

【殷允嶠的回答(0票)】:

Microsoft is square, Nokia is Squircle, Apple is Roundrect, HP is Circle: Microsoft is square, Nokia is Squircle, Apple is Roundrect

Apple的rounded square和Squircle很像,鏈接裡的Wikipedia有圖形對比。 這類圖形統稱超橢圓:Superellipse

【知乎用戶的回答(2票)】:

不知道要是其他公司設計了這個圖標,大家會不會這麼感興趣。各種高深的理論,技法都被搬出來了,因為這是蘋果設計呀,背後肯定隱藏著很多神秘的東西。不知道是不是真的是這樣,我是沒見過身邊哪個設計師為了一造型,搬出各種幾何理論做支撐,他們唯一的標準是:視覺和諧。所以,個人認為蘋果設計師在設計這個圖標的時候,並沒有去考慮那麼多幾何理論,也沒有去在意這個R要做到哪一個數值,靠的就是一種設計直覺,滿足了視覺和諧就夠了。

回到圖標本身,個人認為這個圖標與之前其他很多圖標唯一的不同是:它將倒角的連續性從G1提高到了所謂的G2。(為什麼是所謂的?從純粹的數學定義講,直線跟曲線是不存在G2及以上的連續性的。)也沒有其他特別之處了。

最後,這倒角矩形的設計在我眼中很一般,因為直線做倒角永遠都感覺不和諧。

【柱子的回答(0票)】:

其實,用手動調整就行了,以前做過工業設計的人應該都知道怎麼調整:)

不過對於UI設計來說,因為120x120尺寸的圖形,圓角範圍只有27個像素點,再放小到手機中,曲率連接和相切連接其實肉眼看起來區別很微弱了,有噱頭,但是意義不大。

由於是工業設計出身,以前也嘗試過用曲率連接做ui的圓角,鏈接:晚來的MIUI,作品:《嬰兒白》

【Betty的回答(16票)】:

以下只討論關於「圓角」的問題。非科班出身,如果有說錯的地方,請指正。

首先借用一張圖(來源:曲線的連續-騰訊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 樣條曲線的,你能看出哪個是哪個嗎?

標籤:-圖標設計 -iOS7 -曲率連續 -羊角螺線(Eulerspiral) -圓角


相關資源:





給我留言