背景
今年雷軍“被騙”的新聞轟動一時——傳聞小米花數(shù)百萬邀請國際設計師原研哉為品牌Logo升級闪萄，而升級后的Logo看起來卻跟原本的看起來沒什么區(qū)別，網(wǎng)友大呼“這錢白花了”簿寂、“不就改個圓角矩形樣式 border-radius: 19px; 就行嗎”......看到原研哉照片后甚至有人說是老羅染發(fā)出來騙錢了活玲，老羅本人還出面辟謠。
當然蝉衣，設計大師帶來的品牌升級值不值數(shù)百萬暫且不討論，那小米的新Logo真的跟圓角矩形是一樣的嗎巷蚪？曾經(jīng)我也認為是病毡，但在工作中了解曲線平滑后，我對此事有了新的看法屁柏。
曲線連續(xù)的等級
正如高數(shù)中提到的“函數(shù)連續(xù)不一定可導剪验，但可導一定連續(xù)”，函數(shù)可導稱得上是一種“更高等級”的連續(xù)前联。挪用過來，函數(shù)的導數(shù)即斜率連續(xù)意味著某種好的連續(xù)娶眷。推而廣之似嗤，函數(shù)的二階導數(shù)連續(xù)則代表曲率（曲線的彎曲程度）的連續(xù)，等級更高......
曲線的連續(xù)也有著多個逐步遞進的等級定義：
- G0 曲線不出現(xiàn)斷點即可届宠，包括折線等最寬泛的連續(xù)
- G1 曲線斜率連續(xù)烁落，曲線沒有突刺
- G2 曲線曲率連續(xù)每聪，看起來也流暢了很多
- G3 曲率的變化也連續(xù)，肉眼已經(jīng)難以區(qū)分，但確實有種說不出來的順眼感
- G4 縱享絲滑
簡而言之，我們?nèi)粘Ｉ钪袑Α斑B續(xù)”曲線的定義符合G0連續(xù)童本，對“平滑”的定義符合G1連續(xù)真屯；對“順暢”、“美觀”的平滑曲線則更多是知其然不知其所以然了穷娱。
在工業(yè)設計中绑蔫，對于曲線平滑的要求卻不僅僅是G1連續(xù)這么簡單。
圓角矩形和超橢圓曲線
圓角矩形是什么
圓角矩形在設計中很常用泵额，既避免了矩形的古板嚴肅配深，又避免了圓形空間利用率不足的問題，是一種折衷方案梯刚。而圓角矩形的實現(xiàn)也非常簡單：將矩形的四個直角用一定半徑的圓弧代替即可凉馆，通過調(diào)整半徑大小可以改變圓角矩形的形態(tài)，而圓形和矩形此時可以看作特定參數(shù)下的圓角矩形（圓角半徑很大的方形 and 半徑為0的圓角矩形）亡资。
此時再回看網(wǎng)友自制的小米新Logo和官方發(fā)布的新Logo澜共，會發(fā)現(xiàn)官方Logo明顯比自制Logo看起來更平滑更舒適，正是因為自制Logo僅為G1連續(xù)锥腻，并不夠“平滑”嗦董。
超橢圓是什么
超橢圓的函數(shù)定義：
超橢圓是G3連續(xù)的京革，即每個象限的曲線變化率是連續(xù)的，均為從0連續(xù)提升至某固定值幸斥，再從該固定值降低到0匹摇。在n不同的情況下，曲率變化率會有區(qū)別甲葬。
原研哉的團隊也嘗試了多種a=b=1且不同n的超橢圓廊勃，最終選定的是n=3的這一個，我相信設計師覺得這是美好而和諧的经窖。
PS：超橢圓還有一個特點坡垫，整個超橢圓是完全由曲線組成，不包含直線部分的画侣。
為了貼合修改過的超橢圓邊框冰悠，其實內(nèi)部的“M”字母的圓角也做了修改，將原本明顯的圓角矩形樣式改成了與外框類似的更平滑的曲線配乱。
同樣的，為了適應外框而修改內(nèi)部圓角曲線的不僅僅是小米的诵，我們再來看看以出色的工業(yè)設計而聞名的蘋果万栅。
蘋果圖標中的平滑曲線
從iOS 7開始，蘋果更新了自家產(chǎn)品標志性的圓角圖標輪廓西疤，將工業(yè)設計中常用的曲率連續(xù)變化的概念應用到視覺層面烦粒，發(fā)布了iOS圖標設計模板，通過模板設計的App圖標都能夠滿足G3連續(xù)代赁，使得整個iOS系統(tǒng)的設計感都得到了提升扰她，讓用戶看著更舒服。
站在更高的角度芭碍，甚至iPhone X從手機邊框到App圖標的逐層圓角都得到了統(tǒng)一徒役。
不過，根據(jù)參考資料窖壕，蘋果的圓角使用的G3連續(xù)曲線并非超橢圓忧勿，而是多條三階貝塞爾樣條曲線拼接實現(xiàn)的。參考資料中推測這可能是對其他更高階的樣條曲線擬合而來的瞻讽，或許是為了減少計算資源消耗鸳吸？
總之，參考資料中當年很多人對蘋果圖標圓角曲線進行逆向和擬合速勇，做了數(shù)種推測晌砾，儼然已經(jīng)成為類似尋找圣杯的游戲了。其中一種擬合比較接近的方式是使用羊角螺線（aka 回旋線 aka 歐拉螺線烦磁，見下文）拼接的G2連續(xù)曲線养匈，幾乎已經(jīng)像素級貼合。
ps：可以找參照物試試手機或電腦的圓角是不是標準圓弧都伪。
通過這個例子可以看出呕乎，高等級連續(xù)的平滑曲線不僅在視覺設計中應用，在常見的一些硬件設計中也非常常見陨晶。更進一步楣嘁，在日常生活中我們也有無時無刻不在接觸的重要場景——道路設計。
道路設計中的緩和曲線
在上述的平滑曲線特性中珍逸，從G2等級開始有一個關鍵點：曲率連續(xù)。
在我們的直觀感受中聋溜，曲率是一個模糊的概念谆膳，表明曲線的彎曲程度（或者說就是圓的半徑倒數(shù)），曲率連續(xù)的特點似乎并不重要撮躁。但在道路設計中漱病，這直接影響到車輛行駛安全。
道路的曲率與車輛的轉向角度正相關，也就與方向盤的控制角度直接關聯(lián)杨帽。設想一下漓穿，當車輛速度和方向盤旋轉角度固定時，車輛的行駛軌跡將是一個圓形注盈；方向盤角度越大晃危，軌跡圓的半徑越小。
有一些道路的拓撲設計很容易通過常識意識到：
- 道路得連續(xù)（G0連續(xù)老客，雖然是廢話）
- 道路不能是折線僚饭，需要盡量平滑，預留轉彎的圓弧道路胧砰，十字路口除外（G1連續(xù)）
- 限速越高的道路轉彎半徑應該越大鳍鸵，避免側翻
- ......
但不滿足G2連續(xù)的道路會為駕駛操作帶來困難：
- 如果轉彎處直接將直線與圓弧道路拼接，在連接處將會出現(xiàn)曲率跳變（
0 —> A）- 對應的尉间，駕駛員必須在直行到拼接點時快速轉向偿乖，必然偏離設想的軌跡，帶來安全隱患
- 如果S型道路是兩段圓弧直接拼接（如上文case）哲嘲，在連接處也會出現(xiàn)曲率跳變（
A —> -B符號變化）- 對應的贪薪，駕駛員必須在轉彎到拼接點時快速回正后反打方向吐绵，同樣影響安全駕駛
因此阱缓，絕大多數(shù)道路設計在條件滿足時會在直線和圓曲線之間增加一條曲率由0到圓曲率的緩和曲線，以及在圓弧與圓弧之間增加直線匀钧、緩和曲線侦啸，用于幫助駕駛員適應曲率的變化而轉向槽唾。緩和曲線一般選用羊角螺線（回旋線）。
羊角螺線
羊角螺線（Clothoid）的定義比較復雜光涂，其特性是長度與曲率成正比關系庞萍，即原點時曲率為0，曲線越長越彎曲忘闻，原始羊角螺線最終收斂在x=y=sqrt(PI)/2處钝计。由于其在縮放后具有幾何相似性，通常使用的是歸一化后的羊角螺線齐佳，收斂在x=y=0.5處私恬。
有了羊角螺線，根據(jù)圓曲線和直線的相對位置后炼吴，可以計算出歸一化羊角螺線需要的起終點本鸣，經(jīng)過縮放旋轉最終連接直線和圓曲線。
在增加緩和曲線后硅蹦，道路可以實現(xiàn)G2連續(xù)荣德。雖然曲率變化還不平滑（是折線）闷煤，但對駕駛員而言不用快速變向，駕駛安全性已經(jīng)大大提高涮瞻。
ps：不僅道路設計鲤拿，行駛軌跡規(guī)劃也非常需要考慮G2連續(xù)。也許對于老司機來說彎道漂移甚至排水溝過彎都信手拈來署咽，但現(xiàn)在情況不一樣了——我們迎來了自動駕駛系統(tǒng)近顷。自動駕駛系統(tǒng)無論是從行駛舒適角度或是從復雜路況處理的角度，都依賴一條高質量連續(xù)的目標行駛軌跡艇抠，避免頻繁的加減速和轉向幕庐。
補充
除了羊角螺線外還有其他可用作緩和曲線的曲線，如三次拋物線家淤、雙紐線等异剥。
要實現(xiàn)G1連續(xù)是相對容易的，但從G2連續(xù)開始實現(xiàn)難度陡增絮重，G3和G4連續(xù)就更不必說冤寿，投入高且收益越來越小（不對比很難通過肉眼分辨）青伤，因此一般的工業(yè)產(chǎn)品做到G2連續(xù)就差不多了督怜。
總結
隨著連續(xù)等級的提高，可以看到曲線確實越來越“平滑”了狠角。在吃驚于肉眼竟然在曲率不連續(xù)時會有不和諧感的同時号杠，也對“平滑”一詞有了更深入的理解。一些設計雖不起眼丰歌，但實實在在為舒適性姨蟋、美觀性做出了極大的改變。
最后立帖，今天你離設計師更近一步了眼溶！
參考資料
你們不要再吵了啦！小米 200 萬做的新 Logo 已經(jīng)很棒了啦晓勇！ | 愛范兒
