3 月 30 日晚，小米春季發布會雷軍發布了小米全新的品牌 LOGO，由原研哉團隊設計，號稱歷時 3 年，投入 200w 為小米品牌視覺融入神秘的東方哲學。

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

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

舒適的視覺比例

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

連續曲率之美

細心一點的設計師會發現，圓角采用的是連續曲率，這種圓角可不是在 AI 中可以隨便拉出來的，這里簡單做下曲率的科普，兩條線的連接方式有很多種，這些連接方式對于傳統工業設計是非常重要的，分為 G0-G4，四個等級，為了易懂可以簡單理解：

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

因為人類總是喜歡連續、流暢的事物，這也符合形式美法則。而在平面視覺的應用印象里是由蘋果 iOS7 最先引領的，下圖中可以看到傳統軟件中的圓角，從連續上來說只是 G1，蘋果目測 G3 起步吧，其實 G1-G2 之間就能看出明顯的差別的，SKETCH 中現在也已經支持了「平滑圓角」這個功能，如果對著高連續的圖形看一段時間后，你會發現普通圓角簡直是太難受了，這種現象在一些小角度圖形身上更加明顯，其實是一種反向視覺補償。

目前除了蘋果 iOS 之外，一些第三方 APP，安卓定制 UI，都跟進了這種連續圓角的設計，下圖為 MIUI12 系統和蝸牛讀書 APP 中連續曲率圓角的應用。

平面軟件如何繪制更連續的曲線

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

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

但是，平面設計和工業設計不同的是，平面僅需要達到視覺上的舒適即可，并不需要嚴格的檢測，達到偽連續即可。所以完全可以通過犀?；蛘咂渌?NURBS 軟件繪制后再導入，或者下載 iOS 提供的圖形模板，雖然在數據轉換的過程中連續性已經被破壞了，但是在有限的像素下幾乎可以達到以假亂真。

那么先來看下如何手動繪制一個連續的圓角矩形，首選建立一個圓形，然后將四個節點分別向內部移動相同的距離，移動的距離即可決定圓角的曲率大小，但曲柄不能碰觸，否則四邊會內凹。

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

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

通過臨摹可以看出這枚 Logo 對于比例和曲率的打磨確實比較考究嚴謹，仿佛看到了哲學圖片。

最后從實用角度再補充幾點貝塞爾曲線繪制技巧，這些技巧可能不會真正繪制出嚴格的連續曲率，但是會在視覺上提升圖形的流暢性：

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

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