您當前的位置:首頁 > 詩詞

HomePod 的設計

作者:由 Hi-iD 發表于 詩詞時間:2018-02-21

HomePod 上市以來受到的評價與 Apple 的宣傳相一致,將居家的音樂收聽體驗提升到了一個全新層級。與 Amazon Echo 和 Google Home 定位不一樣,HomePod 首先強調的是音樂,在目前,它的智慧與其說體現在語音助手上——發展落後於競爭對手的 Siri,倒不如說透過裝置的工具效能表現而出,即對 HomePod 所處的聲學環境自動進行分析並制定播放方案,得益於其圓柱形設計及 7 個高音喇叭的環形排列。HomePod 的出色音質除來自獨特設計的低高音喇叭外,還依賴於 Apple 的 A8 晶片的實時處理。HomePod 小巧的體型及超出預感的重量,在使用者上手的一刻,為其帶來一份紮實和可信賴之感。觸控互動操作簡單、有限、易記,而繼承之 AirPods 的適配體驗,“快速又神奇”,已是一個標杆性的設計。

HomePod 的設計在 Apple 的網站上只有簡短的介紹,以“Beautiful design with a purpose”(有目的的漂亮設計)為小標題,如果說追求詞藻且意指曖昧的標題文字並無什麼內容含量,那麼在具體的介紹中總能傳遞出一些設計的主要特徵。在這個簡短介紹中提及了兩個設計特徵:一個是小於 7 英寸的高度,可以讓 HomePod 可以放置家中任何地方;另外一個就是無縫網布,既是為了審美——任何角度都非常漂亮,也是為了聲學——它對音樂來說是透明的無阻擋的。

HomePod 的設計

無縫是 HomePod 最為顯著的設計特徵,一下讓它與其他同類產品的設計區別而開,比如 Sony 的智慧音箱 LF-S50G,以及 Amazon Echo,Google Home 以及 Sonos One。如《Apple “無縫”設計之歷程》一文所言,無縫不僅僅是指字面意義上的,諸如裝配縫隙或者製造加工留下的痕跡,無縫更重要的意義在於從現象層面去探討,使用者看到 Amazon Echo,Google Home,Sonos 與 HomePod,並不會直接地注意到哪個有縫隙哪個無縫隙,而是一個整體形象,這個整體形象的塑造——是否具有一體性——需要無縫的支撐。

Amazon Echo 2 從純工具性和裝置化的第一代 Echo 設計上作出改進,減低了高度,去掉了頂部的一條接縫,並且增加了具有不同材質選擇的罩殼,諸如木紋和布紋,使其能夠更加融入家居環境也能削弱它的工具感,Amazon 採取的設計和處理手段仍是程式化,即普遍的手段,並沒有在工藝上作出突破,也沒有在整體形象的塑造上有更進一層的追求,加上一圈 LED

燈效的設計以及頂部物理按鍵及直接安置的麥克風,Amazon Echo 2 仍然是一個工具和裝置。Google Home 則直白地表達了對識別性的追求,所以設計了一個獨特的幾何形態,而斜面的設計一方面指示著喇叭的朝向,一方面也能方便手指互動操作(儘管對於一個智慧語音裝置來說並非主要),從這一點來說這個幾何形態的設計並非過於任意化。但是從 Google Home 的拆解圖中可以看出,尤其是上半部分的結構佈置,浪費了的空腔結構,它並不具備很強的內外一體性,作為形態導向的設計,Google 並沒有在構造的內外一體性上有更多的追求。而這樣的幾何形態設計就必然會帶來幾條接縫,在破壞產品的一體性,Google

透過對下部罩殼的材料和顏色的設計來弱化這一點,但灰色以外的罩殼設計總是很突兀,加上獨特的幾何形態,讓這個產品過於前臺化,與其產品“隱在”的內涵特徵相背。Sonos

One 則是從傳統的音箱設計上進化而來,剔除了 Sonos Play:1 頂部的物理按鍵設計,以及複雜的頂面內凹形態設計,替換為觸控式設計,但是觸控按鍵的符號仍是刻印在表面,加上一組環形麥克風排列,仍傾向於舊時代的工具化設計,儘管設計和工藝都很精緻。

HomePod 在設計上則給人一種符合時代之感,工具感消失,形態符號化,內外一體又不失識別性。視覺能及就只有兩個形態要素,一體化的網布和頂部的玻璃,網格為斜紋,不像

Sonos One 那樣的罩殼網格設計很容易在傳播的圖片上出現摩爾紋(如上圖所示)。網布要做到無縫並不難,因為現今有各種 3D 針織以及其他技術的支援,但是要將網布應用到產品上,並且讓產品從現象感知上達到無縫就並非易事。通常印象中,以及絕大多數產品上,網布就像是給產品穿一層外衣一樣,很難和產品有合二為一,由於軟性的材質又較難處理,很多設計是將網布貼上在一個塑膠的罩殼上再套到產品之上,網布在這些設計中更像是發揮它的裝飾性,這勢必導致無法實現現象認知上的無縫,即沒有一體感。HomePod 試圖讓網布形成的形態成為產品的形式代言,而不是裡面的塑膠體或者喇叭,對使用者來說,這個物品就是感知到的符號形象,以及這個形象指向的含義,而在工程結構中喇叭在哪或者麥克風在哪對使用者沒有意義,設計要塑造的符號形象往往要封閉起物品的工程特徵。

HomePod 的設計

HomePod 不像 Google Home 那樣內部有很多冗餘的空間,如果說 Google 是先有設計師的形態然後工程師來佈置結構,是否 HomePod 是先有工程的內部結構然後設計師來包裹一個外殼?不管先後順序,在最終的產品上我們看到的是 HomePod 在結構和形態上有著內外一體性,也能夠發現設計師在形態上的自我追求,以及相互牽制形成的平衡狀態,比如側面輪廓線的形態不只是來自於內部結構件,或者設計師的偏好,它與整體的幾何形態,與網布紋理和大小所形成的視覺效果,及相應的工藝,都有相互的制衡,當然,這種結果是靠不斷的嘗試得到的。

HomePod 的設計

HomePod 的設計

儘管使用者看到的 HomePod 總是關於網布和頂部的球面觸控玻璃蓋板,但對於設計的整體性來說,它的底部也至關重要,不能因為隱蔽而在這洩了氣。即使翻過 HomePod 來仔細檢視的人數佔比小到可以忽略不計,它仍關係到每個人的使用體驗,比如搬動和放置等活動。HomePod 的底部使用了一個完整的碗形矽膠緩衝底座,弧面的設計具有一定的厚度,結合封閉的碗底形態,帶來了很好的整體感。標籤看上去應是透過鐳射雕刻在弧面上(並不簡單),而底部的 Logo 像是《Apple 的 Logo 設計》中介紹的 iPhone 矽膠保護殼的 Logo 製作工藝。這個矽膠碗底與機身相連並不只靠膠水,除了膠水的封閉外,還有一圈 7 個塑膠卡扣,那麼這個矽膠碗底就是將矽膠和塑膠透過 Co-Molding(Overmolding) 工藝裝在一起的,也同 iPhone 矽膠保護殼一樣。(上圖來自於 iFixit 及其拆解影片)

HomePod 的設計

HomePod 的電源線按一些評測影片所說,它外層材質與機身的網布材質一樣,維持了整體性,其他同類產品通常為黑色塑膠,它們通常並不在意這些細節設計,而這些細節是至關重要的。HomePod 的電源線透過一個塑膠環片與機身相連,這個環片有和機身一樣的弧度,而兩條邊的圓角也塑造處一定的厚度感,似乎與矽膠碗底有相承關係。實際上電源線和塑膠環片是裝配在一起的,整條電源線用大力是可以拔出的(但不建議拔出),可以看 9to5mac。com 的影片。HomePod 的電源線設計的考究之處並不只是這個細節,它位置的安排同樣是有意思之處。本文提到的幾個音箱,除了 Amazon Echo 2 之外,其他如 Google Home,Sonos One 和 Sony LF-S50G 的電源線都是插在機身的底部,在機身側面與底面的交接邊緣上挖出一個孔位,而相應的電源線的插頭上作一些設計,在電源線插上機身後,可以讓兩個形態有一定的融合,比如弧面的一致。但是這種看似周全的設計其實是南轅北轍,而且處理地非常粗暴,破壞了產品的整體感,以一種躲藏的方式設法隱匿不加深思的設計。Google Home 的電源線是扁平的,設計師的想法應該和 Google 給出的官方圖一樣,可以完美地貼著桌面,讓電源線不再幹擾使用者的環境,但如果去搜索使用者發的照片,就會發現完全是兩回事。如果去翻看使用者貼出的 HomePod 的照片,電源線在裡面並不完美,通常也是歪歪扭扭,隱藏不了,但比起其他幾個音箱的電源線設計來說,HomePod 的設計更加順暢,尤其電源線透過桌子或臺子的邊緣伸上來,而且不容易被牽絆。而最重要的是,它維持住了產品的整體性,以直白和看似粗暴的方式,透過細緻的處理,優雅地解決了問題。

HomePod 的設計

在 HomePod 釋出時,Apple 在其網站上介紹頂部可觸控操作時,說到“在 Siri 聽你說話時,頂部會為你說的每個詞展示 LED 波形”,雖然已經說了是 LED 波形,但是很多人仍認為它是一塊螢幕來顯示,比如是透過 OLED 螢幕,那麼白色面板的效果是如何實現呢?帶來這種錯覺有幾方面的因素:一個就是音量的增減符號“+”和“−”是隨著不同場景出現或消失,而且它與中間的動態圖案不是同時出現(也可以同時出現);最重要的一個原因是波形的顯示色彩豐富,動畫的效果與 iOS 中的 Siri 很相似,而通常人們印象中的 LED 動態效果就像 Google Home 頂部的 LED 環形陣列形成的跑馬燈一樣。

HomePod 的設計

HomePod 的觸控操作板上並沒有使用螢幕,而是使用了 LED,“+”和“−”各自有單獨一片,而波形圖則是透過如上圖所示 19 粒 RGB LED 燈片,透過德州儀器的 TLC 5971 來驅動(見 iFixit 介紹),可控制 RGB 每一粒小燈珠來形成波紋,並且透過擴散膜(LED Diffuser)來形成霧化擴散的動態效果,而且相對應的玻璃蓋板上也有一層擴散膜。形成的波紋圖案和 iOS 上的 Siri 的視覺元素很相似,會讓人誤以為是透過螢幕來實現圖案的顯示的,所以 HomePod 透過軟體和設計,用了簡單有效的硬體來實現了所需的最終效果。(上圖來自於 iFixit 及其拆解影片)

HomePod 的設計

無縫網布包裹下的 HomePod 機身有一個一體式的塑膠殼體機身,從 iFixit 的拆解中可以看到這個塑膠殼體頂部是透過超聲波焊接到柱身上的(底部和柱身應是一起注塑而出),和此前使用了超聲焊接工藝的 EarPods 和 AirPods 一樣,裝好配件然後來焊住塑膠殼體,對於聲學相關的產品來說,封閉的腔體以及一體化的結構是非常重要的。

HomePod 的塑膠殼體,或者說內膽,它的一體性是關於功能的,殼體上很粗的合模線就是很好的說明,那麼對於消費者來說,HomePod 就是關於無縫網布形成的形態,而 Apple 要做到的就是怎樣讓這個無縫網布形成的形態去代表這這個產品,而不是將網布認為是袖套般的罩殼。

HomePod 的設計

首先須在結構上將網布鎖定機身上,如果在物理上都無法讓網布來緊緊裹住機身,現象感知上的整體性就無從談起。如 iFixit 的拆解中可以看到,網布牢牢地固定在機身上之後,再用上端的觸控顯示元件,以及下端的封口和緩衝構件封住了網布兩端的開口,而且兩端的開口埋很深,比如上端並非是用玻璃蓋板的封住,而是用玻璃蓋板下的 LED 顯示元件,所以無論如何,這個網布的開啟口只是留給製造的,對使用者來說它可以說是不存在的。網布下端透過膠水粘死在機身上,而上部則由收口的拉繩經纏繞由螺釘固定在機身上,此處結構的巧妙是留給裝配和生產的,而不是使用者。

HomePod 的設計

HomePod 的網布有兩層,其中內層為襯底,除了阻擋使用者看到塑膠客體外,應該也有助於包裹和摩擦。而最重要的 3D 紡織的網布其實有三層,在 iFixit 的拆解中有詳細的介紹及大圖展示,上下為兩層為網狀,中間有一層線圈織成的夾心層,iFixit 說這樣的機構讓聲波透明無發射,而又能阻擋灰塵。從材料來看,中間的線圈層應亦能夠起到增加網布的剛性效能,如果有很高的彈性,那麼這層網布就是一層封套了,而不是上面說的它可以塑造整個產品的認知形象,由於這三層需要合為一體,所以編制就變得複雜了。有厚度有層次的網布在視覺效果上表現的更明顯,比如與 Amazon Echo 2 相比較,HomePod 的網布形態在不同的距離不同的光影下都有很豐富的效果。

HomePod 的設計

那麼這層網布的網格是怎樣的設計,或者說它是怎樣繪製而成的?

網格的成型,尤其這些形態上有漸變的幾何形態,通常會想到使用演算法,比如透過 Grasshopper 等軟體來繪製,但是無論使用怎樣的方式,首先需要去發掘生成的機制,如果確定了生成機制,在 Grasshopper 或者其它基於演算法的成型軟體上,只要控制不同的引數輸入即可。而 HomePod 的網布網格無需使用到演算法成型,因為它是透過簡單的圓周陣列而來,只需要知道其中一條線是如何成型幾何。

HomePod 的設計

是否可以投影?但任何時候,在圓柱體或類似形態上透過投影來得到一個曲線或形態需要慎重,通常是不可取的。即使是先將圓柱面展開成矩形平面(Rhino 中的 UnrollSrf),再在矩形平面上作線條和圖案,再包裹到原先的圓柱面上(Rhino 中的 FlowAlongSrf),也因為演算法問題,會出現線和麵質量的瑕疵,而且這個方法通常只適用於圓柱面等可展開面上,而如 HomePod 上下兩端的曲面就無法使用。

如果從另一角度來思考,問題就變得很簡單了,就是透過扭曲(Twist)來完成,繪製好一條基礎線條,然後沿著柱體軸線作扭曲,那麼問題關鍵在於怎麼確定這條基礎線條,以及確定曲線扭轉的角度。

我們可以透過 Apple 的官方圖片來獲取這些資料。

HomePod 的設計

透過官方圖片可以數出網格由 128 組即 256 根線條編制而成,一組兩條具有映象關係的線在頂部相交,一條順時針方向扭曲,另外一條逆時針方向扭曲,在頂部形成的角度約等於 50°。透過前檢視,如上圖右所示,可以計算出線條的扭曲角度,一條假設的線 a,扭曲後成為了 a’,從 a 到 a’ 可以數出經過了 28 個間隔,那麼扭曲的角度就是 (28 / 128) × 360° = 78。75°,我們就可以根據這些資料來繪製出網格圖形。

HomePod 的設計

如上圖所示,用 15° 夾角的藍色直線線在柱身上投射出一條交線,為什麼是 15°,因為經過嘗試後發現用此角度形成的曲線經扭曲後可以達到接近 25° 的夾角,即滿足上面說的 50° 夾角的要求。在這裡我們柱身先只用半邊形態,可以後續映象完成。

HomePod 的設計

對投影形成的藍色交線進行扭曲(Twist)操作,以 Rhino 為例,注意扭曲軸需要是柱身全長,如上圖左所示的紅線,Infinite 選項選 Yes,控制扭曲後的另外一端達到 78。75° 處,然後映象柱身下半部分,接著映象整條扭曲線,成為一組,接下來只需要將這組扭曲線陣列

128 個即可。

HomePod 的設計

陣列之後的效果。

這是我們逆向去繪製的結果,那麼在設計時,諸如 50°,128 組,78° 之類的數字是如何確定,最簡單方法就是不斷嘗試來比較,而 Apple 似乎也是這樣作的,因為:

HomePod 的設計

在 HomePod 官方頁面第一版(archive。org 存檔)中有一張技術引數的圖,即上圖,繪製的網格與其他圖形不一致,目前官方圖片以及上市銷售版的 HomePod 的網布的網格都是 128

組(即共 256 條線),而上圖是 100 組(200 條線),而且一組兩條線在頂端形成的夾角將近有 80°。

而且目前上市 HomePod 的外包裝使用的圖案都是上面這個與實際產品不符的圖片,猜測這個版本的網格是嘗試方案中一個,畢竟這個圖案如果由平面設計自己來繪製是很困難的,尤其是前檢視。

HomePod 的設計

而 Apple 提交給香港智慧財產權署的 HomePod 外觀專利,裡面的圖案網格數量更多,有 144 組(288 條線)。

HomePod 的設計

最終 Apple 選定的是 128 組版本的網布。如果僅是透過圖片上的比較,很難辨別多少數目的網格數更合適,不過網格的夾角,產品上的版本(約 50°)比如包裝上的版本(約 80°)更優秀,有漸變的層次,而且符合形態擴張和收縮的趨勢,更具動態。

像 HomePod 無縫網布這樣的設計也只有 Apple 想到做和能做到,這是 Apple 這麼多年在設計上積累和發展的結果。Apple 在產品的設計和製造上作出了突破和革新,當然是透過投入大量的資源和研發精力,大到引起產業變革的創新,小到使用者都無暇顧及的一處處細節工藝,這些突破和革新經過一兩年或者更短的時間,都能影響或者說惠及整個業界,在競爭激烈的領域尤其快速,比如手機,像消費品上的 CNC 加工或者是 Unibody 工藝等等,一波接著一波。Apple 作為一波接一波的浪潮發起者,蓄積了很多優勢,並且持續加固並作為屏障,透過資金和精力的持續投入,而在一些缺少競爭的產品上,似乎預見不到後來者身影的出現,像 Apple Watch,或者是 AirPods 這些產品,還包括像 HomePod 上一處又一處的細節設計。如果循著 Apple 的道路前進,那麼它就像一位極有天賦、極努力有極有錢的競爭對手,或許在一兩處能追上或戰勝,如想全面追趕則像是要炸開一道道保險庫鐵門一樣。但是幸運的是,世界異彩紛呈,並非只有一條路,好的產品和設計並非處處都要高精尖,就像

HomePod 用 LED 就實現了 Siri 的動態波形。

*原文發表於 [ i D 公 社 ] 的鮮榨專欄

標簽: HomePod  網布  設計  Apple  Google