以用戶為中心的設計

這是UCDChina提前預覽網頁留下的存檔,不包括作者可能更新過的內容。
推薦您進入文章源地址閱讀和發布評論:

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

作者:西喬  |   發布: (編輯)kent.zhu   |   時間:2012-09-16 10:27:54 文字大小:- +

你們覺得iWork 3個icon里哪個最好。 Pages, Keynote 還是 Numbers?

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

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

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

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

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

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

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


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

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

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

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

為什么Adobe套裝里的icon都做成那個樣子?

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

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

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

菲彩国际展示這張圖不是為了說明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更換了質感,簡化了材質上的細節, 加深對比度和整體顏色,強化了輪廓。我感覺是一個從 炫目、模擬真實質感->更簡潔和抽象、和環境能搭配 的變化過程。新版的在小尺寸下表現也更好。

NeXT的logo是不是很丑?

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

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

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

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

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

菲彩国际比較一下同年代的其它GUI水準。

Windows 2.0x (released in 1987)

OS/2 1.20 (released in 1989)

菲彩国际Desktop Computer操作系統之GUI發展 

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穿過了幾個文明快速發展、觀念快速變化的時代,其傳播載體和條件也在不斷更新。無論它們是否還符合現在的審美,它們在當時的背景下都已經完成了品牌傳達的目標,建立了鮮明識別度,并且成為企業文化的一部分。

更多
打印  |  類別:視覺設計  |  

UCDChina的書


UCDChina編著,定價35元
菲彩国际  

《UCD火花集》封面
UCDChina編著,定價25元
 

《應需而變——設計的力量》封面
UCDChina團隊成員譯,定價29元
 

《網頁設計解析》封面
UCDChina團隊成員著,定價62元
菲彩国际  

《贏在用戶》封面
UCDChina團隊成員Angela譯,定價29元
菲彩国际  

《用戶體驗的要素》封面
UCDChina團隊成員Angela譯,定價25元
菲彩国际  

菲彩国际_菲彩国际官网_Welcome 菲彩国际_菲彩国际官网_Welcome 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网