久久婷婷热_亚洲毛片儿_免费黄小说_日韩精品一区二区三区免费_91成人海角社区_国产精品永久久久久

當前位置: 首頁 > 設計資訊 > 理論文摘 > 正文

從 iOS 7 的電話圖標設計到電木……

2019-10-26 2201 0

第一部分

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

      所以可以看到很多 iOS 7 的 Redesign,基本都是關于圖標的,就想說我可以設計得比你好,結果當然不出所料,他們一定以舊有的認知和習慣對其進行修正,而且可以發現很多都在調整漸變、質感和立體感之類,將一個系統打造成一個主題。

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

iOS 7 Phone icon

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

iOS 6 Phone icon

      這是 iOS 6 的電話圖標,為了更細致的比較,將兩個圖標作一下旋轉,如下:

iOS 6 & 7 Phone icon

      可以看出 iOS 6 的電話圖標是不對稱的,而 iOS 7 的電話圖標是完全對稱的。

iOS 7 Phone icon

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

      而另外一個原因,讓 iOS 7 的電話圖標感覺受工業設計的影響,就是曲線的繪制。

iOS 7 Phone icon

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

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

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

      我們先看看其他電話圖標的繪制。

SAMSUNG Phone icon

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

SAMSUNG Phone icon

      無疑,三星被官司嚇得不輕,這是三星目前最新系統中的圖標設計,或許三星在選擇設計方案是靠律師的。

HTC Phone icon

      HTC 沒被嚇也這樣,還好旋轉了電話圖標默認的角度,否則看不出是電話還是把手。

Windows Phone icon

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

Android Phone icon

      Android 的電話圖標,從圖標設計的角度來說,這是一個偷懶的設計,至于在系統上是否適合就得看整體,但 Android 在這些細部的視覺一致性上執行很差。

Android Phone icon

      Android 也有圖標性設計,它的地位當然不能與應用圖標比較,所以在此處它需要更抽象化,而形態的設計有一點類似與 WP 8 的規整幾何性,并且向輪廓模擬方向上作一些細微的調整。

Sony Phone icon

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

LG Phone icon

      LG 的,你能認為它是 LG 的嗎?它可以是任何其他人的,中庸的設計是很難有歸屬性,形成不了品牌的原真性及識別性。

BlackBerry Phone icon

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

Nokia N9 Phone icon

      Nokia N9 的,如果現在看來,那么聽筒和話筒處的立體表現是多余,影響識別。

Nokia 700 Phone icon

      Nokia 700 的,沒有骨骼的設計,為什么,曲率變化太過緩和。

      看起來我們可以根據這個電話圖標的設計來評判整個操作系統的設計了,它簡單,但要繪制出色又是非常困難。

Nokia 101 Phone icon

  Nokia 101 的。

Nokia 1200 Phone icon

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

       也就是說,現在的觸摸屏手機中的 icon 不是功能手機鍵盤上的符號,也不是指示牌的符號,不是視覺導引系統中的符號。

Otl Aicher Phone icon

      Otl Aicher 設計的電話圖標,來自:ERCO Aicher Pictograms。設計的時間在 1970 年代左右(具體時間未作考證,很多資料將其看成是他為慕尼黑奧運會設計的視覺系統內,實際上是在這此前完成的)。

      試想在那個年代是否有人能畫出 iOS 7 的圖標輪廓?那么 iOS 6 呢,如上其他的一些設計呢?

AIGA Phone icon

      這個電話圖標可能見得更多了,因為這是 AIGA 提供的一套免費使用符號內的一個(AIGA | Symbol Signs)1974 年發布,AIGA 同美國運輸部合作的結果。

Bildschirmtext Phone icon

      是德國 Bildschirmtext 公司的標志(Bildschirmtext Wikipedia),一家 1983 年創立運營 Videotex 業務的通信公司,現在看起來是很酷的一種服務。

pictogram Phone icon

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

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

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

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

      這其中的平衡,iOS 7 的圖標設計是很好的示范。

第二部分

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

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

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

bauhaus telephone

  Bauhaus 電話

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

bauhaus telephone

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

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

bauhaus telephone

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

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

bauhaus telephone

     Bauhaus 電話的手柄也有另外一個版本,在形態上可作比較。

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

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

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

      因為材料是 polyoxybenzylmethylenglycolanhydride。

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

      電木是熱固性塑料而不是我們現在最常見的塑料那樣是熱塑性的,熱固性塑料比熱塑性性塑料在壁厚不均上更容易控制。熱固塑料的分子間是交叉連接的網狀結構,所以它的強度也較熱塑的高,同時因為不易變形而很脆。

      可以比較一下后來轉變到(熱塑性)塑料時代的產品,見這,尤其比較一下塑料手柄的形狀,能發現是比較均勻的形狀了,而不像電木做的手柄,能有很大的形態變化。

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

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

Model 302 telephone

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

Model 302 telephone

      Model 302 是一個 icon 式的產品,它的形象就是電話的代表,當然現在一代一代會有變化,Model 302 的手柄之一就是 F1 手柄也是這個 icon 的形象一部分,兩個碗形設計以及碗和手柄結合處的肩部設計,而且話筒傾斜度大,這個形態也就在 iOS 6 的電話圖標中反映而出。

Henry Dreyfuss Western Electric Phone

      Henry Dreyfuss 為 Western Electric 設計的 G 系列手柄的最初設計進化圖,圖片來自這,最終就是這:Patent USD151614 一些一系列的 G 手柄。

      開始的視頻用兩部電話的比較來形成美國商業設計與 Bauhaus 的區別,是非常明確的,還有一個細節也能反應出商業設計的另外一面,那就是這個手柄與電話線連接部分的不考究。

bauhaus telephone

      我想 F1 手柄的把手與聽筒話筒連接部分的設計也應該受影響自 Ericsson model DBH 1001,這個結構形態與當時美國設計的代表性語言流線型結合正是如此。

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

Modern telephone

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

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

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

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


10
評論區(0)
正在加載評論...
相關推薦
主站蜘蛛池模板: 国产精品免费麻豆入口 | 成年人国产视频 | 一级黄色大片视频 | 业余 自由 性别 成熟偷窥 | 又粗又黑又大的吊av | 免费一级a毛片在线播放视 免费一级e一片在线播放 | 午夜内射中出视频 | 美女网站一区二区三区 | y111111少妇影院无码 | 中日精品无码一本二本三本 | 国产真实高潮太爽了 | 精品国产一区二区三区四区vr | 伊人久久大香线蕉av色婷婷色 | 天天搞天天干 | 人人爽人人澡人人高潮 | eeuss久久久精品影院 | 樱花草在线社区www韩国 | 国产一区二区三区露脸 | 中文字字幕码一二区 | 欧美日韩生活片 | 久久riav.com | 亚洲小说在线 | 人妻熟女一区二区三区app下载 | 无码成人一区二区三区 | 黑人粗长大战亚洲女 | 亚洲欧美另类综合 | 人人澡 人人澡 人人看 | 久久tv中文字幕首页 | 日韩免费视频在线观看 | 国产91刮伦脏话对白 | 精品亚洲成a人在线观看 | 黄色黑丝网站 | 岳丰满多毛的大隂户 | 亚洲日韩精品欧美一区二区 | 亚洲av成人无码精品电影在线 | 亚洲av永久无码精品一区二区 | 亚洲av日韩精品久久久久久久 | 97久久草草超级碰碰碰 | 男人添女人下部高潮全视频 | 劲爆激情欧美毛片 | 欧美色图亚洲 |