審美、效用與感情——關於Icon和Logo設計的一些想法

發表於2012-09-13

來源:西喬的九卦

雖然Pages和Keynote擁有非常精緻的造型和擬真效果,但是就icon設計而言,Numbers要超過它們。 Numbers脫胎於現實中的物體但又不是完全模擬它們,形象更簡潔有力。

從表意性上,Numbers 對圖表工具的概念進行了成功的提取和抽象,相信任何人第一次見到這個icon的時候都能認出它是一種什麼工具,但墨水瓶(Pages)的象徵性太模糊,演講臺(Keynote)是一個人們不熟悉的且特徵不明顯的事物。人們在通過icon形象識別出工具用途時要更困難。

審美、效用與感情——關於Icon和Logo設計的一些想法

從辨識度上,透視和視角的選用形成了很強的立體感,配色也非常鮮明。這些都提高了你從dock條上把它辨識出來的機率。它的小尺寸表現也好於其它兩者。

Icon的成功更多取決於它是否能有效表意(功能、用途或者非常鮮明的個性特徵)並且具有很強區分度,容易認出並建立關聯。而不是在於它是否材質更漂亮或更擬真。

為什麼iOS UI上所有的icon都限制為圓角矩形?

審美、效用與感情——關於Icon和Logo設計的一些想法

有一些裝置的UI上的icon允許透明通道,也就是允許icon是各種形狀的。這顯然讓設計師有更大的發揮餘地,能夠創作出更漂亮的作品。

但是iPhone的桌面是一個訪問頻率非常高、空間有限、icon放置密度非常高的環境。icon之間的間距沒法很大,如果不統一上面幾十個icon的形狀,會導致一個非常雜亂的介面,icon之間也會彼此干擾。(雖然LaunchPad也是這種羅列icon的方式,但擁有較大的空間和間距,情況會好一點。)所以規整統一的形狀可以帶來良好的節奏和協調的感官,同時也可以和裝置的整體外形相呼應。

審美、效用與感情——關於Icon和Logo設計的一些想法

此外,設定這一“遊戲規則”也平均了icon們的風格和水準。目前app stone上已經上架了10W個應用,也就有10W個icon,設計水平參差不齊。但統一的形狀和iOS官方icon設計所引導的風格,讓最差的設計師也不會做出爛得超過底線,影響整個裝置UI的icon來。即使你啥都不會,選一個背景色,在上面放一個字母,也能成為你的icon,而且效果也不太壞。所以在iOS裝置上你不會看到那種一堆icon裡突然冒出一個特別土帶著粗大的鋸齒邊和蹩腳陰影的刺眼玩意。

從iOS的開發定位來看,Apple一直都選用的是一個平均化但是最能保證整體效果的方案。讓一個工程師,僅僅利用預設控制元件,也能做出可用可看的App。

設計和藝術的區別之一正是“設計是帶著鐐銬跳舞”。

遊戲規則的設定,就是為了保障整個遊戲的可玩性和所有玩家的利益,我想對所有icon外形的限制(包括HIG中對許多控制元件及互動方式的限制)就是整個平臺設計策略的一環。

 

為什麼Adobe套裝裡的icon都做成那個樣子?

審美、效用與感情——關於Icon和Logo設計的一些想法

CS2在04年釋出,CS3在07年釋出。這3年間Adobe做了很多重要的戰略調整,事件之一是收購了Marcomedia,並且更強調工具之間的相容性,並提供一些平臺化工具。Adobe需要推出更多套裝,並在裡面包含更多應用。從提供工具變成了提供工具箱。

CS3剛出來的時候,對icon設計進行了重大的改變,當然獲得了大量惡評,理由都是一個醜。就單個icon來看,CS3的PS圖示比CS2差幾個級別,Adobe不是找不到好設計師,為什麼要這麼做。

審美、效用與感情——關於Icon和Logo設計的一些想法

看完這張圖就明白了。Adobe的設計工具都比較難以根據功能來提取出一個具象概念,只好用羽毛,花朵,樹葉這種很“精神層面”的的物體來表示。當套裝變得更大,設計師桌面上需要放下更多Adobe應用的icon時會出現什麼狀況,他的滑鼠會在幾個icon之間遊移。當然假以時日,反射弧會被建立,也會通過擺放位置來進行記憶,但對於新使用者而言,這無疑是一個悲劇。

審美、效用與感情——關於Icon和Logo設計的一些想法

展示這張圖不是為了說明Adobe的新icon們在色相環上的分佈,而是為了說明有它們工具數量的龐大。

CS3系列後的新icon雖然不好看,但無疑極為直觀,無需建立物件及其象徵物之間的關聯,這不是表意而是直接對著你喊出來,“我是PS”。文字帶來最快速的反應。

風格強烈,你可以輕易識別出它們是屬於一個Adobe的。

此外它最大化利用了系統中icon的尺寸限制,一整個大色塊。所以你會發現它們無論是在dock條還是windows桌面上,都是搶眼的。

設計過程中如何做決策,美的標準是什麼,我借用一下《data visualization》一書中的觀點:novel (創新), informative (這裡可以理解為否實現設計的功能,傳達出需要傳達的資訊), efficient (能否有效地達成設計訴求), aesthetic (是否有視覺魅力)。受眾、目標和情境是設計開始之前必須回答的問題,一個不能保障可用性(有效達成目標,滿足需求,適配於使用情境)的設計,再好看再創新也是失敗的。Adobe的選擇也正是基於這一點。

 

OS X官方App中最打動你的icon是哪個?

Automator. 這是一個通過點選拖拽這些操作在不同應用間建立工作流(批處理)的工具。這用一個拿著管道(連線件)的高科技機器人來表示最非常恰當的。精密、冷酷、充滿魅力的質感,直接就是蘋果的氣質的體現。

它打動我是因為它是一個被人格化的icon,也是OS X官方icon中唯一一個擬人化的設計。用一個令人愛不釋手的高科技機器人來表達一個程式設計工具。Automator代表了apple script的最高成就,這種東西對於程式語言的意義,相當於GUI對桌面系統。高科技機器人帶給我們的,正是利用高水平的技術和工業設計,提供了生產率,降低了使用門檻和成本。這個形象是不是也讓你作為一個普通人也有興趣去嘗試編寫程式。比Terminal的icon給你的心理壓力小多了吧。

審美、效用與感情——關於Icon和Logo設計的一些想法

這個設計在可用性和美觀的標準之上,體現對情感的傳遞。它建立的不僅僅是效用,而是喜愛。很多時候 ,感性認識比理性認識對於人們做出決定更為關鍵。

新版的icon更換了質感,簡化了材質上的細節, 加深對比度和整體顏色,強化了輪廓。我感覺是一個從 炫目、模擬真實質感->更簡潔和抽象、和環境能搭配 的變化過程。新版的在小尺寸下表現也更好。

審美、效用與感情——關於Icon和Logo設計的一些想法

NeXT的logo是不是很醜?

很多人都知道它是Jobs請Paul Rand花了10W刀設計的。

審美、效用與感情——關於Icon和Logo設計的一些想法

首先我覺得它並不好看。但是好看絕對不是一個LOGO設計是否成功的唯一標準。

首先試圖追溯Paul為什麼要這樣設計NeXT的logo

審美、效用與感情——關於Icon和Logo設計的一些想法

這就是NeXT cube, NeXT computer的機箱,它最大的特徵就是 方正(據說Jobs花了很大代價追究8個角的銳利,就像用尺規工具在紙上畫出來的那樣乾淨準確)、極簡(用色純粹,沒有多餘的線條和裝飾)。這個工設放到30年後來看都毫不遜色。

審美、效用與感情——關於Icon和Logo設計的一些想法

這是NeXTSTEP / OPENSTEP 1.0 (released in 1989)。該 GUI 的圖示很大,48×48畫素,包含更多顏色,從1.0開始支援彩色,已經可以看到現代 GUI 的影子。

比較一下同年代的其它GUI水準。

Windows 2.0x (released in 1987)

審美、效用與感情——關於Icon和Logo設計的一些想法

OS/2 1.20 (released in 1989)

審美、效用與感情——關於Icon和Logo設計的一些想法

Desktop Computer作業系統之GUI發展 http://blog.csdn.net/greenhand_/article/details/7787861

N e X T 這4個字母的顏色,搞設計的同學應能容易聯想到CMYK,現在找不到原設計圖了,沒法取到精確色值,但我推測都是滿值的。大紅 M100%Y100%, 綠色 C100%Y100%, 黃色Y100%, 品紅M100%。
我的一個在蘋果工作過的朋友,在那個年代見過NeXT的LOGO,他的印象是顏色非常豔麗飽滿,這也正是Paul想傳達給消費者的關於這個產品的特徵。在當時的印刷平均條件下,Paul的這個用色選擇是大膽,同時也是成功的。

Paul 從NeXT的經典產品中抽離除了最本質的幾個特徵。立方體,極簡,純黑的底色,還有顏色豐富、富有魅力的GUI。

抽象的過程就是一個簡化的過程,也是一個靠近事物本質的過程。得到本質以後,其他一切都只是從屬,都可以根據恰當的條件進行省略。

Jobs看到方案問Paul, 還有其它可選方案嗎?Paul 說:“沒有,我已經解決了你的問題。付錢吧。想要可選方案?找別人去吧。”

我的理解是,設計是為了解決問題達成訴求,所以最合適的方案當然只有一個。Paul自信他提出的這個設計就是這個最合適的方案,因為它已經解決了“品牌傳達”這個最核心的問題。

Paul 是包豪斯設計思想的繼承者,同時為商業服務的使用美術大師,他喜歡拼貼風格,拼貼可以突破空間的限制,用色強烈,造型簡單,追求準確的傳達而不是盲目的創新。Jobs的評價也是這樣,認為Paul 是藝術家和商業問題解決者的結合,認為 Paul 的設計很 emotional(感性),同時又很 intellectual(理智)。

所以關於這個問題我想說的是,美的標準是變化的,建立在時代和文化背景上的,在觀看一件歷史上的設計或者藝術作品時,只有理解了它的背景、出發點和訴求之後,才能觸控到它的本質,學習到它的成功之處。同時對於一件為商業服務的設計而言,“有效”是最核心的,而不是“好看”或者什麼別的。當然達到有效的手段有很多種,比如創新、情感化,視覺表現手法當然也在其中。

 

為什麼世界五百強中大部分的Logo都很“難看”?

回答完了上一個問題之後,我覺得這個問題也不用回答了。

我給難看加上了引號是因為審美永遠是一個相對標準,隨個人偏好、時代定位和文化背景所變化。

世界500強公司能做大往往也有著悠久的歷史。他們的LOGO穿過了幾個文明快速發展、觀念快速變化的時代,其傳播載體和條件也在不斷更新。無論它們是否還符合現在的審美,它們在當時的背景下都已經完成了品牌傳達的目標,建立了鮮明識別度,並且成為企業文化的一部分。

 

相關文章