第一部分

      iOS 7 剛發(fā)布之時，視覺上的變動立馬嚇傻了不少人，也激怒了不少人，包括設(shè)計師，那時候經(jīng)?？梢钥吹揭环N說法，“我四歲的侄子都畫得比這好。”“就像是剛學(xué)會 Photoshop 的人畫得。”類似這些話語多指 iOS 7 的圖標(biāo)設(shè)計。實際上，這些評語并不少見，倫敦 2012 奧運會標(biāo)志出來的時候也是這樣說，通常用來評價那些脫離已有審美習(xí)慣的作品，這個審美習(xí)慣不只是樣貌上的喜好比如習(xí)慣了柔和就不喜歡硬朗，更重要的基礎(chǔ)是一種認(rèn)知模式，那么放到設(shè)計師身上，就關(guān)系到制作習(xí)慣。當(dāng)設(shè)計師將制作習(xí)慣當(dāng)作設(shè)計的基礎(chǔ)，比如能力，那么只要收集足夠多的制作模板就可以代表設(shè)計的能力，它同時影響到了認(rèn)知，所以一旦出現(xiàn)挑戰(zhàn)這些模板的時候，就站在模板的正義正確性的角度上對挑戰(zhàn)者加以否定。iOS 7 圖標(biāo)的簡單設(shè)計，以抽象替代可以表現(xiàn)已有制作技巧的質(zhì)感性圖形時，以模板收集為主的設(shè)計師就只能通過否定來維護自己了，否則就感覺自己的積蓄變成了廢紙了，設(shè)計師的維護當(dāng)然也要上前線。

      所以可以看到很多 iOS 7 的 Redesign，基本都是關(guān)于圖標(biāo)的，就想說我可以設(shè)計得比你好，結(jié)果當(dāng)然不出所料，他們一定以舊有的認(rèn)知和習(xí)慣對其進行修正，而且可以發(fā)現(xiàn)很多都在調(diào)整漸變、質(zhì)感和立體感之類，將一個系統(tǒng)打造成一個主題。

      如果以 iOS 7 的電話圖標(biāo)的再設(shè)計方案上去比較，可以發(fā)現(xiàn)兩個很有意思的方向，一個就是專注于表現(xiàn)那些收集的模板技巧，光影漸變層次等等，然后隨手也對電話圖標(biāo)的輪廓作了改變，似乎他對這個輪廓倒興趣不打，而更關(guān)注與輪廓邊緣的高光和陰影，但是這些結(jié)果看上去很可笑，尤其是那粗劣的輪廓和造型；另外一個就顯得聰明一點，就是完全繼承了 iOS 7 的那個電話圖標(biāo)的輪廓，也許他在設(shè)計過程中意識到了這個形狀不錯，然后就是一些修飾性的工程，通過那些收集的模板技巧。

      iOS 7 的電話圖標(biāo)。知乎上有過一個問題：iOS 7 里的改變，有哪些是 Jony Ive 的工業(yè)設(shè)計理念的衍生？ 提問者在問題補充中說類似 iOS 7 圖標(biāo)的圓角矩形，我不認(rèn)為這是與“理念相關(guān)”，但如果問題是 iOS 7 中有哪些是類似 iOS 7 圓角圖標(biāo)一樣受工業(yè)設(shè)計的影響，那么我會回答這一個，就是 iOS 7 的電話圖標(biāo)中的這個輪廓曲線。沒錯，就是簡單的幾條曲線圍合，就能看出工業(yè)設(shè)計的影響，或許，可以看成是一個 6 條曲線的圍合。

      這是 iOS 6 的電話圖標(biāo)，為了更細(xì)致的比較，將兩個圖標(biāo)作一下旋轉(zhuǎn)，如下：

      可以看出 iOS 6 的電話圖標(biāo)是不對稱的，而 iOS 7 的電話圖標(biāo)是完全對稱的。

      通過比較可以看出 iOS 7 比 iOS 6 更像電話，看上去更加有手感，而且比例和尺度感覺比 iOS 6 合適（見上圖與 Western Electric 的 G 系列手柄的重疊圖 ），也更現(xiàn)代，iOS 6 更像是老式電話的手柄，而且感覺不適合面部。所以這是通過形態(tài)的尺度上感覺 iOS 7 更考究，像是工業(yè)設(shè)計的輪廓，而不是符號設(shè)計的輪廓，因為更擬真了，而符號通常在尺度上會有改變，只求圖形和指向意義的直接關(guān)聯(lián)。

      而另外一個原因，讓 iOS 7 的電話圖標(biāo)感覺受工業(yè)設(shè)計的影響，就是曲線的繪制。

      這是我擬合繪制的圖形，并不是 100% 的重合，但已足夠接近。曲線就是指這一條大曲線，因為其他部分，比如話筒平面和聽筒平面的夾角等，可以歸類到上面的尺度部分，而這一條曲線需要單獨列出來，主要是因為頭部部分的過渡。上面我們曾將這一整條曲線看作是 6 條圍合線里面的一條，但實際上不應(yīng)該看錯是一條，如果是一條曲線，那么這條曲線將會非常復(fù)雜，只要考察一下曲線的曲率變化就可以，從手柄中部的大曲率半徑過渡到頭部很小的曲率半徑然后更擴大并結(jié)束，可以體會一下曲率變化率的曲線。無論在平面或三維軟件中，如果繪制成單一的曲線將非常困難，當(dāng)然可以擬合，但擬合需要事先的模板比如手繪，而從設(shè)計的角度來說，沒有一個控制點是可以任意的，也就是每一控制點設(shè)計是都是確定的，這是設(shè)計中非常重要的一點，那么如果一條曲線的控制點過多，無疑設(shè)計師會失去控制，比如中間的幾個控制點你就無法確定它一定得在這，那么也就是對曲線失去了控制，設(shè)計師不會陷入這種自造的陷阱之中。它是由幾段曲線連接成的，通過光滑的連續(xù)，而在平面設(shè)計和軟件中通常是一條曲線代表一段形態(tài)，它與下一條線段即使是光滑過渡，在形態(tài)上也發(fā)生了變化。這一點非常容易比較，只要去看一下其他圖標(biāo)設(shè)計中的手柄背部的曲線，有的盡管形態(tài)上彎曲性也很大，但是它的曲率變化是非常緩和均勻的，或者直接就形體的變化。也就是說 iOS 7 的電話圖標(biāo)這條曲線經(jīng)過工業(yè)設(shè)計式的精煉。

      現(xiàn)在我們?nèi)M合，無論是使用什么軟件都是簡單的，多作調(diào)整就能達(dá)到滿意的結(jié)果，或許也可以通過手繪再導(dǎo)入作擬合，但無論是哪種，都需要問最初是怎么生成的？而對于上面說那些 iOS 7 圖標(biāo)再設(shè)計者來說，是不會去思考這一點的，因為 iOS 7 的這個圖標(biāo)就是剛收集的模板。

      至于在圖標(biāo)設(shè)計中追求這些是否必要這個問題，并不能簡單給出問題，不可否定的是，這樣的設(shè)計在剔除一些多余的東西的同時也帶來了多余的東西，這些多余的東西包括尺度上擬真是否與 icon 的符號性和抽象性相抵觸，另外就是高級曲線必然就像它的數(shù)學(xué)描述一樣，必然包含更多的信息，那么在人對符號的認(rèn)知過程中這些信息是否要跳到前面來積極參與人的識別與認(rèn)知，這種平衡我們留在后面解答。

      我們先看看其他電話圖標(biāo)的繪制。

      三星在電話的立體感上作了一些努力，如果與 iOS 6 比較而且將影響只看作影響，我認(rèn)為并沒有達(dá)到侵犯的地步，即感覺三星是對著某一手柄在繪制，可以比較背部的曲線弧度，在與 iOS 6 比較同時，也可比較一下與 iOS 7 體會一下 iOS 7 精煉過的曲線。

      無疑，三星被官司嚇得不輕，這是三星目前最新系統(tǒng)中的圖標(biāo)設(shè)計，或許三星在選擇設(shè)計方案是靠律師的。

      HTC 沒被嚇也這樣，還好旋轉(zhuǎn)了電話圖標(biāo)默認(rèn)的角度，否則看不出是電話還是把手。

      Windows Phone 8 的，至少可以看出 icon 不需要寫實不需要在尺度和輪廓上擬合現(xiàn)實，當(dāng)然也需要和整個系統(tǒng)的匹配。這個圖標(biāo)的繪制就是規(guī)整的平面幾何繪制，它的特點和優(yōu)勢也得益于這種規(guī)整，因為人們能識別出這種規(guī)整，比如相互垂直，那么就完全不用去考慮與真實的手柄相比會怎樣的問題了。

      Android 的電話圖標(biāo)，從圖標(biāo)設(shè)計的角度來說，這是一個偷懶的設(shè)計，至于在系統(tǒng)上是否適合就得看整體，但 Android 在這些細(xì)部的視覺一致性上執(zhí)行很差。

      Android 也有圖標(biāo)性設(shè)計，它的地位當(dāng)然不能與應(yīng)用圖標(biāo)比較，所以在此處它需要更抽象化，而形態(tài)的設(shè)計有一點類似與 WP 8 的規(guī)整幾何性，并且向輪廓模擬方向上作一些細(xì)微的調(diào)整。

      Sony 的，落伍的設(shè)計，不過可以與 Android 的作對比，不清晰的光影表現(xiàn)非常影響識別，影響識別不是信息過多，而是形態(tài)組織雜亂讓人眼無法抓取輪廓。

      LG 的，你能認(rèn)為它是 LG 的嗎？它可以是任何其他人的，中庸的設(shè)計是很難有歸屬性，形成不了品牌的原真性及識別性。

      BlackBerry Z10，可以對比 iOS 7 的背部曲線，這個就顯得簡單了，但是這個設(shè)計的一個缺點在于聽筒或話筒的內(nèi)外弧線圓角和曲線過于相似，與 WP 8 做比較就顯得在形態(tài)上沒有考慮，簡單也需要深思熟慮反復(fù)比較后。

      Nokia N9 的，如果現(xiàn)在看來，那么聽筒和話筒處的立體表現(xiàn)是多余，影響識別。

      Nokia 700 的，沒有骨骼的設(shè)計，為什么，曲率變化太過緩和。

      看起來我們可以根據(jù)這個電話圖標(biāo)的設(shè)計來評判整個操作系統(tǒng)的設(shè)計了，它簡單，但要繪制出色又是非常困難。

  Nokia 101 的。

      Nokia 1200 的。試想如果將觸摸屏手機應(yīng)用圖標(biāo)中的電話輪廓應(yīng)用到這些位置上，會是怎樣？很少會有適合的，甚至可能就綠色和紅色的線條是最合適的。

       也就是說，現(xiàn)在的觸摸屏手機中的 icon 不是功能手機鍵盤上的符號，也不是指示牌的符號，不是視覺導(dǎo)引系統(tǒng)中的符號。

      Otl Aicher 設(shè)計的電話圖標(biāo)，來自：ERCO Aicher Pictograms。設(shè)計的時間在 1970 年代左右（具體時間未作考證，很多資料將其看成是他為慕尼黑奧運會設(shè)計的視覺系統(tǒng)內(nèi)，實際上是在這此前完成的）。

      試想在那個年代是否有人能畫出 iOS 7 的圖標(biāo)輪廓？那么 iOS 6 呢，如上其他的一些設(shè)計呢？

      這個電話圖標(biāo)可能見得更多了，因為這是 AIGA 提供的一套免費使用符號內(nèi)的一個（AIGA | Symbol Signs）1974 年發(fā)布，AIGA 同美國運輸部合作的結(jié)果。

      是德國 Bildschirmtext 公司的標(biāo)志（Bildschirmtext Wikipedia），一家 1983 年創(chuàng)立運營 Videotex 業(yè)務(wù)的通信公司，現(xiàn)在看起來是很酷的一種服務(wù)。

      icograda上有一篇文章：Iridescent :: Icograda and the development of pictogram standards: 1963-1986，介紹了 pictogram 標(biāo)準(zhǔn)的發(fā)展，里面不會少電話圖標(biāo)。上圖座機全貌的是 1964 年東京奧運會的電話圖標(biāo)，而下面是 1965 年首先用于荷蘭鐵路，而后 ISO 標(biāo)準(zhǔn)中的圖形（左右是大小尺寸時不同應(yīng)用）。 如果你看這個手柄圖像，會發(fā)現(xiàn)它留有不少實體物的信息。

      作為指示性系統(tǒng)的其中一個符號來說，它并不需要展示自身的識別性，它的自身識別性是屬于設(shè)計師內(nèi)部，比如為了體現(xiàn)自己的知識產(chǎn)權(quán)自己的獨特性自己作為設(shè)計師的追求，而符號是為指向所服務(wù)的，就像面對一套相似的無襯線字體一樣我們不會去比較兩個 P 字在設(shè)計上的異同，它們的獨特性更多在于整體的比較中，但這些獨特性對大眾來說更薄弱，更加依賴于整個系統(tǒng)，所以這一類符號更像文字。

      人們對指示系統(tǒng)中的符號的使用往往是一次性的，不會有反復(fù)，也就是說當(dāng)看到電話符號明白電話亭，這其中并沒有快樂，這個過程純粹為了效率，所以我們不會去回味剛才電話符號的形象和設(shè)計，更不會將剛才那個電話符號指向電話亭這組關(guān)系收集起來，并與普通的電話符號指向電話亭這組關(guān)系作并列，即這類符號沒有咀嚼價值。

      手機上的 icon 當(dāng)然有效率上的很高要求，因為 icon 指向的內(nèi)容更復(fù)雜，而且對識別性的要求也更高，因為被其他應(yīng)用圍繞。它需要有抽象性，因為它的作用在于指向應(yīng)用的內(nèi)容，它需要用形象來表達(dá)這種抽象性，在頭腦中形成的映射組合關(guān)系中需要有明確的感知形態(tài)，如同我們對物體的認(rèn)知，總是嘗試在尋找輪廓，那些輪廓容易概括的物體通常我們會說那是 iconic 的，而對于無形而不具形的東西，以及難以概括輪廓的物品，我們需要用更長的時間來形成那對映射組合關(guān)系。但是又不能抽象成指示系統(tǒng)中的符號一樣，因為如果將這些符號放在一起，比如一個屏幕上，那就沒有效率可言了，并且這種使用不是一次性，所以建立起的映射關(guān)系需要更具體可感的元素。等等。

      這其中的平衡，iOS 7 的圖標(biāo)設(shè)計是很好的示范。

第二部分

      BBC 出的 《The Genius of Design》第二集，你可以直接跳到 50:00 出觀看，如果要更多一點的背景的話，從 44:00 開始。

      里面對比了 Henry Dreyfuss 1936 年為 Western Electric 設(shè)計的 Model 302 電話機與 Bauhaus 電話的對比，后者是 1928 年 Bauhaus 為 H. Fuld & Co. 設(shè)計的，一個是電話的理論上的形式，一個為傾向商業(yè)的形式。

      而視頻中對重量的比較并不能反應(yīng)真實情況，因為 Bauhaus 電話后來底座用了塑料，而 Model 302 此前也有用金屬作底座的外殼。另外 Model 302 受 Ericsson model DBH 1001 影響較大，也就是底座向上收縮的形式。

  Bauhaus 電話

      這是一個 Form Follow Function 的設(shè)計，在當(dāng)時“形式追隨功能”并不像我們現(xiàn)在用時那么折衷，當(dāng)時是非常徹底的，剔除一切不必要的元素，使用基本的幾何形態(tài)。比如視頻中說的聽筒和話筒部分使用了圓形，那么為什么從側(cè)面看不是圓柱，那是因為要從模具中脫落，為什么聽筒有一個斜面，以及話筒為什么要這么設(shè)計。

      上圖來自這，為了防止聽筒聲音干擾。

      那么 Bauhaus 電話的手柄為什么在話筒部分突出呢，而不像聽筒部分那樣進行融合呢？

      看了這幅圖，以及查看一些手柄的圖，就可以了解 Bauhaus 電話的那處設(shè)計了，為了抽芯，因為手柄中間需要是中空的，為了通線，那么如何來形成空腔呢，它可不像我們現(xiàn)在座機手柄的設(shè)計，通過上下殼塑料件扣在一起，那么自然不需要關(guān)心中間的空腔了。早期的手柄是一體式的，所以抽芯來形成空腔是必須的，所以 Bauhaus 電話的那處設(shè)計，是有一條直通聽筒的為了走線的通道。也有一些其他的處理方式，比如直接放入一根金屬管等。

      那么為什么上圖所示的是弧形的呢，弧形的型芯更復(fù)雜，它需要保證是半徑恒定的圓弧，否則抽不出芯（除了從電話接入口處外，還可以從話筒和聽筒處抽，Western Electric 的就是從此處抽芯，無論是 F1 型還是 G 型）。

     Bauhaus 電話的手柄也有另外一個版本，在形態(tài)上可作比較。

      所以，我們看到的很多手柄之所以為那樣的弧型設(shè)計，可能一個很重要的原因就是為了抽出中間的空腔。

      那么為什么手柄是兩頭小中間大的設(shè)計，中間大是為了人機為了手的握持，兩頭小或許減少材料，讓形態(tài)更輕巧靈動，但此前的古式電話的影響是肯定的，就像話筒和聽筒部分的設(shè)計。

      在一些大照片中可以看清 Bauhaus 電話手柄的分模線。那么，型芯的形態(tài)肯定要均一的，就是中空的截面處處一樣，而手柄卻是兩頭小，中間大，那么肯定造成了壁厚不均，如果以我們現(xiàn)在的注塑觀念來說，壁厚不均是要回避的，為了避免形體收縮不均對最終成品帶來了凹坑等問題，而且壁厚不能太厚，但是看上面的結(jié)構(gòu)示意圖，可發(fā)現(xiàn)壁厚很厚。

      因為材料是 polyoxybenzylmethylenglycolanhydride。

      polyoxybenzylmethylenglycolanhydride 是什么材料，就是 Bakelite，說出中文就很熟悉了，電木、膠木，那是最早被大量用作產(chǎn)品工業(yè)制造的產(chǎn)品，它與工業(yè)化以及工業(yè)設(shè)計的發(fā)展緊緊相隨，雖然不少人用它來作首飾，其實在日常生活中還經(jīng)常碰到，比如鍋的把手，用的時間長了，發(fā)現(xiàn)手柄破碎脫落，這種不會被高溫軟化的塑料就是電木，當(dāng)然材質(zhì)看上去也很粗曠。

      電木是熱固性塑料而不是我們現(xiàn)在最常見的塑料那樣是熱塑性的，熱固性塑料比熱塑性性塑料在壁厚不均上更容易控制。熱固塑料的分子間是交叉連接的網(wǎng)狀結(jié)構(gòu)，所以它的強度也較熱塑的高，同時因為不易變形而很脆。

      可以比較一下后來轉(zhuǎn)變到（熱塑性）塑料時代的產(chǎn)品，見這，尤其比較一下塑料手柄的形狀，能發(fā)現(xiàn)是比較均勻的形狀了，而不像電木做的手柄，能有很大的形態(tài)變化。

      而像 Model 302 以及其他很多很多的電話，底座部分早早使用了熱塑性塑料，而手柄卻一直用電木。網(wǎng)站 Sam Hallas Collection 上有材料使用不同時期的簡介。

      Bauhaus 電話的純粹幾何形設(shè)計來自于 Form Follow Function 的指引的另一個證據(jù)是在 1925 年德國已有光滑圓弧式的手柄設(shè)計了，見這。在這些手柄身上可以看到分模性很明顯，這也是電木的一個材料特性，分模線明顯而且不易表面處理（絕緣抗腐蝕等因素），所以通常手柄的分模線在手柄的下方，當(dāng)然也有左右分模的，那么中間那條棱線會很明顯。

      Model 302，這個款式底座是熱塑性塑料，而手柄是電木，可以看到分模線。

      Model 302 是一個 icon 式的產(chǎn)品，它的形象就是電話的代表，當(dāng)然現(xiàn)在一代一代會有變化，Model 302 的手柄之一就是 F1 手柄也是這個 icon 的形象一部分，兩個碗形設(shè)計以及碗和手柄結(jié)合處的肩部設(shè)計，而且話筒傾斜度大，這個形態(tài)也就在 iOS 6 的電話圖標(biāo)中反映而出。

      Henry Dreyfuss 為 Western Electric 設(shè)計的 G 系列手柄的最初設(shè)計進化圖，圖片來自這，最終就是這：Patent USD151614 一些一系列的 G 手柄。

      開始的視頻用兩部電話的比較來形成美國商業(yè)設(shè)計與 Bauhaus 的區(qū)別，是非常明確的，還有一個細(xì)節(jié)也能反應(yīng)出商業(yè)設(shè)計的另外一面，那就是這個手柄與電話線連接部分的不考究。

      我想 F1 手柄的把手與聽筒話筒連接部分的設(shè)計也應(yīng)該受影響自 Ericsson model DBH 1001，這個結(jié)構(gòu)形態(tài)與當(dāng)時美國設(shè)計的代表性語言流線型結(jié)合正是如此。

      然后（熱塑性）塑料時代的到來，以及技術(shù)的發(fā)展，電話機的形態(tài)從上面這些逐漸進化到我們現(xiàn)在這樣，同時，手柄也發(fā)生改變，從類似電木時代開始到了左右放置，塑料手柄采用上下殼配合的方式，也就將元件全內(nèi)置與手柄之中，也就沒有了額外的聽筒和話筒處旋蓋式的設(shè)計，然后話筒不斷變小變成了幾個麥克風(fēng)通孔。

      從現(xiàn)在 Amazon 的熱賣清單中選了一張圖片。 手柄愈來愈簡單扁平的設(shè)計，使其形象的符號性喪失，加上產(chǎn)品變遷，它也終將無法取代前代產(chǎn)品的符號功能。

      從這些幾個有代表性的例子去考察形狀的形成，會發(fā)現(xiàn)形狀是來自于很多的制約，比如制作方式，抽芯決定的手柄弧度和碗形的彎曲度，與材料的配合，以及技術(shù)帶來元件的變化導(dǎo)致形態(tài)的改變，即形狀并非是想當(dāng)然的，它的生成是富含邏輯的。

      回過頭去看 Otl Aicher 時代，如果說那時告訴它取消話筒聽筒處的設(shè)計，肯定是不符號那時代的認(rèn)識了，因為那時電話還是上下兩個圓碗。

      在 iOS 7 的電話圖標(biāo)中很難明確指出是那個時代的手柄形象，如果說 iOS 6 還算是老式電話機的話，因為可以分辨出聽筒和話筒上的兩個旋蓋，以及手柄的弧度，而 iOS 7 的曲線形態(tài)明顯是當(dāng)下的，但它的輪廓卻不是現(xiàn)今的手柄，它還在強調(diào)聽筒和話筒，只不過沒有明顯刻畫成老式電話機的形態(tài)，并且沒有作立體陰影表現(xiàn)，留下一定的曖昧性。顯然，iOS 7 的電話圖標(biāo)改進不是以實物進化為參照了，消除了 iOS 6 對實物形象的依賴，而是純粹在形態(tài)和符號形象自身的發(fā)展中去追求，一代一代人對這個功能需求的符號代表在發(fā)生變化，從 Otl Aicher 時代再到下一代，下一代肯定對 Model 302 等的認(rèn)識越來越少，即使在影視中常出現(xiàn)，也就是說，符號的繼承需要依賴符號自身。如何讓自己的符號設(shè)計既符合時代，又能同符號自身歷史發(fā)展有連續(xù)性，而不是時代錯亂到處穿越，iOS 7 的電話圖標(biāo)是個好例子，尤其對比其他電話圖標(biāo)的設(shè)計。