引言#
最近被朋友喊去幫忙,為一些本科畢業和在讀學生進行技術培訓。課程內容是《Rhino3D 產品工業設計實戰》,而我自己是動畫專業出身的,好在底層技術上相通,就答應了。講課肯定要準備案例,在做 Apple Watch 案例的時候,反倒帶我進入了另一個熟悉又陌生的領域。具體的講義內容會在備用站更新,封面圖來自公開的 Apple watch 部分設計圖紙。
產品工業設計#
一上來不能直接給學生講技術,還是要知道些基礎理論的。自己查資料了解到,產品工業設計是一門綜合性的學科,旨在通過創新和優化產品的外觀、功能、用戶體驗等方面,來滿足用戶需求、提升產品競爭力。
大致的流程是這樣:
- 市場調研,調查市場需求,定位目標人群等。
- 概念設計,根據調研情況,制定產品概念和要傳遞的關鍵信息等。
- 詳細設計,繪製產品形態草圖,尺寸,評估方案等。
- 工業設計,製作產品三維模型以及實體原型。
- 驗證,測試設計方案,迭代和完善。
- 生產
- 量產和品控
這顆星球上,把產品工業設計做到極致、傳承多年,同時又人人熟知的企業,僅此 Apple 一家,沒有之一。拿它們的產品來做教學案例也是自然而然的,對我來說也算是個不小的挑戰。
從圓角到圓角#
體驗過 iPhone X 之後系列產品的朋友或許對圓角這個東西都不陌生。說在 iPhone X 之後是因為,iPhone 用戶體量規模更大,而這代 iPhone 把蘋果的設計劃分為 “圓潤” 與 “硬朗” 兩種理念。
而 “圓潤” 的基石便是圓角。
以 iPhone X 舉例,圓角以肉眼可見的形式體現在機身輪廓,按鍵,屏幕邊框和 App 圖標。不難感受到設計師在追求極致的 “渾然一體”,而這些大大小小的圓角,源自於一根看不見的曲線。
這便是 iPhone 在視覺上軟硬件給人感覺 “渾然一體” 的直接因素。因為它的屏幕邊缘,機身表面,都是統一由這樣的曲線來設計構造,這樣高度統一又簡約的美感,輕易就會讓人在認知層面忽略外觀背後的繁雜與瑣碎。
iPhone 開始使用這種圓角最早始於 iOS7(或許 iPhone 4 的邊框圓角也是,不過有待考證),上圖便是 iOS 7 中的天氣 App 圖標。在 iOS 7 之前,圖標都是用上文所說的圓角四邊形畫出的。
一般在平面設計軟件中拉出的圓角矩形,普遍是由一個普通的矩形對四個角執行 “倒角”(Bevel)命令得出的,也就是說,它實際是用四根直線和四個圓弧拼接,這樣的圓角會明顯感覺到拼縫的存在,直觀感受就是不夠連貫。但 Apple 的設計師畫的圓角矩形卻是一整根連續的曲線。
曲線也分級別#
在設計領域中,計算機主要會處理的曲線有三種,分別是貝塞爾曲線,B 樣條曲線和 Nurbs 曲線。
這是借鑒了數學概念得出的名字,對於設計師,只需要知道在可控性和精度上,貝塞爾曲線 < B 樣條曲線 < Nurbs 曲線。工業設計裡自然使用的是 Nurbs。
如果把直線也看作是一種曲線(實際上就是),那麼就可以說這是一條曲率為 0 的曲線。在工業設計中,為了方便,行業為曲線劃分了不同的級別,相應的,曲線也就有了質量的高低區分,單位叫做 “階”,同樣是數學中的概念,用來區分計算曲線的方程級別。
例如在 Autodesk CAD 或 Rhino 中,可以畫出 0-11 階不同級別的曲線,階數越高,曲線越順滑,同時修改和計算越複雜,一般常用的是 3 階和 5 階,具體的使用方法可自行搜索。
相對應的,曲線之間的相互連接也分級別。如上圖所示,曲線連續性分為 G0 / 1 / 2 / 3 / 4 ,共 5 個級別。級別越高,連續性越好,曲線越順滑。
在 Rhino 中可以通過曲率檢測工具,來檢查曲線的連續性。如上圖所示,左邊的是一整根連續曲線,右邊是普通的圓角四邊形,那些白色像梳子的線就代表這段曲線的曲率。可見連續的曲線,它的曲率也是連續的。圓角四邊形會在圓弧與直線的相接處,曲率由一個恆定的值瞬間變為 0。這就是曲線質量上的區別。
通過 Apple 開發者網站所提供的材料能夠知道,iOS 7 的 icon 所採用的曲線近似為 9 階 10 點,實際使用的曲線比這更為複雜,是通過 5 段 3 階曲線拼接而成,但 9 階曲線使用手動繪製已經能夠達到肉眼以假亂真的效果了,對於出品效果圖已經足夠。
而手機的外輪廓也不是 “簡單” 的去拼接幾個 3 階曲線實現的,只會更加複雜。由此可見 Apple 在設計上的嚴謹程度。(這裡我要額外吐槽一下,我願意為這樣的設計買單,但永遠抗議內存翻倍要加 1500 塊)
手錶相對手機來說定位更加個人化,產品屬性上在滿足功能之外同時,因為佩戴在手腕上長期暴露在外,更加具有首飾的屬性(iPhone 在上市初期也會給我這樣的感受,但 Apple Watch 更明顯一些)。手錶尺寸也更小,對於精度的要求更加苛刻。
實際上,第一代 Apple watch 早在 2014 年作為 “One more thing” 發布的,比 iPhone X 要早 3 年上市。我更相信,iPhone X 在外觀上借鑒了 Apple Watch 的外表處理方式,如果只關注外形,iPhone X 就是一塊放大拉長版的 Apple Watch。
上圖分別為筆者使用 Rhino 製作的 Apple Watch 模型和邊缘曲線,表盤的主體同樣使用兩根 9 階 10 點曲線,通過正面的輪廓曲線作為路徑,側面的曲線作為形狀來旋轉生成曲面得出整體的四分之一曲面,然後再通過鏡像得到主體的封閉模型。
對於曲面的檢測,行業也有一個工具叫做 “斑馬紋分析”。顧名思義,打開這個工具,模型表面就會生成斑馬樣式的紋路,通過旋轉觀察這些紋路是否順滑,來測試曲面的平滑程度,僅僅通過肉眼是無法看出瑕疵的。
正如前文提到的,不光是表盤主體,Apple Watch 的每個部件都是使用同級別的曲線繪製生成。
再進一步想,產品的整體設計雖然全部由 Apple 操刀,生產製作卻來自世界各地,且保持著驚人的精確和一致性。仿佛就像在電腦中一樣,這些部件是從主體上取下來的一部分,但拿在手上的實物卻很難說服自己,這些部件之間沒有任何物理上的關聯。從商業上你可以不喜歡他們的做法,但設計上依舊值得尊敬和學習。
小結#
以上僅僅是商業產品設計領域的冰山一角,只針對和我一樣踏入半只腳不敢說入門的人,歡迎職業選手來討論交流。
對於一個每天都會用到的物件,作為設計師,天生就會好奇它裡面是什麼樣,它如何運作和製造,它在向我傳達什麼信息。圓角和畫出圓角的曲線,這些僅僅是一個不起眼的小細節,和其他領域的設計一樣,如果不在意,就無須大費周章。一旦在意,在意一根線是否完美,哪怕只是看起來完美,追求便永無止境。