小米200萬的Logo是如何繪制的？先掌握「連續(xù)曲率」知識(shí)點(diǎn)！

3 月 30 日晚，小米春季發(fā)布會(huì)雷軍發(fā)布了小米全新的品牌 LOGO，由原研哉團(tuán)隊(duì)設(shè)計(jì)，號(hào)稱歷時(shí) 3 年，投入 200w 為小米品牌視覺融入神秘的東方哲學(xué)。

官方宣傳詞中還出現(xiàn)了「Alive」「生命感」「超橢圓」「數(shù)學(xué)之美」等，不但普通吃瓜群眾聽不懂，專業(yè)設(shè)計(jì)師群中也引起了強(qiáng)烈不適，不少設(shè)計(jì)師直呼我上我也行，甚至連前端同學(xué)都看不下去了，表示樣式中增加一個(gè) border 圓角命令不就行了嗎。

當(dāng)然小米的這波品牌升級(jí)，營銷意義占比更大，我們今天拋開 LOGO 背后的品牌營銷和理念，從純視覺角度，解析下這枚 LOGO 有什么不同之處。

舒適的視覺比例

直觀來看最大的變化是從方變圓，為了達(dá)到給科技賦予生命感的理念，原老爺子通過圖形數(shù)學(xué)運(yùn)算在方跟圓之間找到了最適合的圓角比例，以此作為基底，但這只是第一層。

連續(xù)曲率之美

細(xì)心一點(diǎn)的設(shè)計(jì)師會(huì)發(fā)現(xiàn)，圓角采用的是連續(xù)曲率，這種圓角可不是在 AI 中可以隨便拉出來的，這里簡(jiǎn)單做下曲率的科普，兩條線的連接方式有很多種，這些連接方式對(duì)于傳統(tǒng)工業(yè)設(shè)計(jì)是非常重要的，分為 G0-G4，四個(gè)等級(jí)，為了易懂可以簡(jiǎn)單理解：

• G0——點(diǎn)連續(xù)：只要兩個(gè)點(diǎn)碰到就可以；
• G1——相切連續(xù)：沒有棱角，所有點(diǎn)之間都是相切關(guān)系；
• G2——曲率連續(xù)：平滑過渡，曲率是連續(xù)變化的；
• G3——曲率變化率連續(xù)：更平滑，曲率的變化率也是連續(xù)的；
• G4——曲率變化率的變化率連續(xù)：極致絲滑。。（到這里就看不出了）

因?yàn)槿祟惪偸窍矚g連續(xù)、流暢的事物，這也符合形式美法則。而在平面視覺的應(yīng)用印象里是由蘋果 iOS7 最先引領(lǐng)的，下圖中可以看到傳統(tǒng)軟件中的圓角，從連續(xù)上來說只是 G1，蘋果目測(cè) G3 起步吧，其實(shí) G1-G2 之間就能看出明顯的差別的，SKETCH 中現(xiàn)在也已經(jīng)支持了「平滑圓角」這個(gè)功能，如果對(duì)著高連續(xù)的圖形看一段時(shí)間后，你會(huì)發(fā)現(xiàn)普通圓角簡(jiǎn)直是太難受了，這種現(xiàn)象在一些小角度圖形身上更加明顯，其實(shí)是一種反向視覺補(bǔ)償。

目前除了蘋果 iOS 之外，一些第三方 APP，安卓定制 UI，都跟進(jìn)了這種連續(xù)圓角的設(shè)計(jì)，下圖為 MIUI12 系統(tǒng)和蝸牛讀書 APP 中連續(xù)曲率圓角的應(yīng)用。

平面軟件如何繪制更連續(xù)的曲線

工業(yè)設(shè)計(jì)中需要將圖形達(dá)到 G2 以上的連續(xù)等級(jí)，才能讓曲線看起來較為流暢舒適，前文提到 SKETCH 附帶一個(gè)圓滑圓角的功能，但僅針對(duì)矩形。PS、AI、SKETCH、FIGMA 都是使用貝塞爾繪制，想要手動(dòng)自由繪制連續(xù)曲線，直接說結(jié)論：幾乎沒有可操作性。

這里有大神給出的用 5 次貝塞爾曲線構(gòu)造 G3 連續(xù)，但是根本沒有可用性：https://patents.google.com/patent/CN103646150B/zh

但是，平面設(shè)計(jì)和工業(yè)設(shè)計(jì)不同的是，平面僅需要達(dá)到視覺上的舒適即可，并不需要嚴(yán)格的檢測(cè)，達(dá)到偽連續(xù)即可。所以完全可以通過犀牛或者其他 NURBS 軟件繪制后再導(dǎo)入，或者下載 iOS 提供的圖形模板，雖然在數(shù)據(jù)轉(zhuǎn)換的過程中連續(xù)性已經(jīng)被破壞了，但是在有限的像素下幾乎可以達(dá)到以假亂真。

那么先來看下如何手動(dòng)繪制一個(gè)連續(xù)的圓角矩形，首選建立一個(gè)圓形，然后將四個(gè)節(jié)點(diǎn)分別向內(nèi)部移動(dòng)相同的距離，移動(dòng)的距離即可決定圓角的曲率大小，但曲柄不能碰觸，否則四邊會(huì)內(nèi)凹。

可以通過這種方法可以可以得到一個(gè)絕對(duì)平滑的圓角矩形，但是對(duì)于圓角大小的控制比較繁瑣，可以嘗試第二種方法，PS 中使用變形工具中的魚眼，通過調(diào)整數(shù)值，在不改變尺寸的情況下可以快速增大或減小圓角曲率。

通過這個(gè)方法，加上變形工具可以快速繪制出小米新品牌 Logo 中的所有曲線，需要注意的是原老爺子是把所有細(xì)節(jié)都打磨成了連續(xù)曲率，包括 M 上的曲線，以及文字中 xiaomi（由于目前沒得到這枚 Logo 的原生源文件，所以對(duì)于結(jié)構(gòu)的分析可能不完全準(zhǔn)確）。

通過臨摹可以看出這枚 Logo 對(duì)于比例和曲率的打磨確實(shí)比較考究嚴(yán)謹(jǐn)，仿佛看到了哲學(xué)圖片。

最后從實(shí)用角度再補(bǔ)充幾點(diǎn)貝塞爾曲線繪制技巧，這些技巧可能不會(huì)真正繪制出嚴(yán)格的連續(xù)曲率，但是會(huì)在視覺上提升圖形的流暢性：

• 刪除非必要的點(diǎn)。嘗試刪除和簡(jiǎn)化節(jié)點(diǎn)，往往會(huì)獲得更好的平滑性。
• 做完圓角后不要對(duì)圖形進(jìn)行拉伸。非參數(shù)化物體拉伸或改變圖形比例都會(huì)引起圓角失真。
• 需要保證節(jié)點(diǎn)兩側(cè)都有曲柄，并且曲柄是平行的，這樣即可以達(dá)到最基本的 G1 連續(xù)。
• 嘗試讓節(jié)點(diǎn)兩側(cè)曲柄長(zhǎng)度也相同，并且相近的節(jié)點(diǎn)曲柄長(zhǎng)度變化不大，這樣就可以達(dá)到視覺平滑的效果。
• 可以嘗試預(yù)留更大的圓角空間，將曲柄拉長(zhǎng)，可以改善默認(rèn)圓角的突變感。

如果你全部消化了本文，恭喜你，你也可以畫出 200w 的 LOGO 了~

歡迎關(guān)注作者的微信公眾號(hào)：「花廠設(shè)計(jì)招待所」