設計的進化

WWDC 15: The epicenter of change.

又到了六月。

兩年前的這個時候。June 10th, 2013. Moscone Center, California. Apple 於 WWDC 發佈了 Apple 移動作業系統歷史上最重要的一個主要版本 iOS 7。

iOS 7 被公認為 iOS 歷史上最重要的里程碑,是由於它在用戶界面上採用了與以往完全不同的設計風格。而兩年後的今天,iOS 設計風格發生重要改變後的第三個主要版本 iOS 9 即將面世。

在大多數人的認知中,iOS 7 帶來的新設計風格還僅僅是視覺上的變化,在主流媒體的錯誤引導下,他們喜歡將這種變化稱之為「由擬物風格到扁平風格的變化」。但實際上這種新的設計風格並沒有拋棄「擬物」,「扁平」也只是新的設計風格附帶給人們的視覺上的直觀感受。在 iOS 發展的歷史上,這種設計風格轉變帶來的影響就如同於文藝復興和幾次工業革命對人類文明發展的影響,而這種影響的深遠程度絕不只是視覺上的觀感所能概括的。

Design

In most people's vocabularies, design means veneer. It's interior decorating. It's the fabric of the curtains and the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.1

— Steve Jobs

什麼是設計?

思考「設計」的意義時,不妨先想一想有什麼東西是「無設計」的。

人類真正把設計當作一個專業的學科是在十九世紀的工業革命時,這個時間也被認為是現代設計的起點。隨著技術的發展,歐洲人口爆發等因素促進了機械化工業生產的流行,當手工品大量地被粗糙的機械製造品代替時,許多人對此產生了反感。以 John Ruskin 為代表的一些思想家對傳統美被踐踏的現實提出了異議,現代設計的萌芽由此誕生。而後由 Bauhaus 引發的一系列新藝術運動推動了現代設計的發展。現代設計可以說是來源於人們對美的訴求。然而那些粗糙的機械製造品就是「無設計」的嗎?客觀地說,並不是,它們只是受限於機械製造的水平和成本「被設計得很糟糕」,而絕對不是「無設計」。

我們生活在一個由物質構成的世界中,每天都要接觸到各種各樣的設計,這些設計有好有壞,而它們的共性是「由人製造出的」。凡是人工創造之物,即是設計。與之相對的,是自然之物。當我們的祖先試圖將一塊來自自然的石頭打制成特定的形狀時,就已經誕生了。那些形狀粗糙的石器,便是我們最早的設計。設計,源於有意識的創造行為。

Stone Handaxes Early Stone Age Tools

Affordance

在百萬年來的演化中,人類不停地創造了各種各樣的工具。最開始,我們還只有粗糙的石器;而如今,iPhone 這樣精密的電子設備已經在伴隨著我們每一天的生活。而一件有著優秀設計的工具,不管它的結構和原理如何複雜,我們總是可以得心應手地使用。

iPhone 5c

不得不說人是一種具有高度智慧的生物。從很小的時候對世界剛有了初步的認知開始我就時常會好奇地想:人類是怎樣學會如何與周圍的世界互動的?我們每天接觸到的大量物件中,有自然形成的,也有人工製品,其中有我們見過的也有沒見過的。當我們接觸一件新的物件時,卻往往能很快地掌握它可能存在的或被人設計出的用途。這是怎麼做到的呢?

在我開始學習設計後,認識了一個叫做「affordance」的概念,它解答了我的曾經的困惑。

Klhip Clipper Klhip® Ultimate Clipper®

幾個月前我購買了這款被譽為「世界最好指甲鉗」的 Klhip Clipper。為了讓用戶在使用時更精準、省力,它採用了和其它所有指甲鉗完全不同的結構設計,但我拿到手馬上就學會了如何使用。鋒利的弧形刀刃指示了要修剪的指甲應放置的位置,而兩處帶有條紋的粗糙平面則告訴了我另一隻手應該捏在哪裏,配合觀察轉軸的位置,我很快就將它的使用方式熟練掌握了。

人類能將這種簡單機械的使用方式快速學習,很大程度上要歸功於此。

「Affordance」並不是一個很古老的概念。人類第一次有意識的創造始與一百多萬年前,在兩世紀前的工業革命中工業設計這個當前最為人熟悉的設計領域剛剛出現,而設計中這個至關重要的概念卻直到幾十年前才首次在認知心理學的領域內被 James J. Gibson 提出2並在後來由 Don Norman 引入了設計領域3。Affordance 在中文裏一直沒有統一對應的詞語,我比較喜歡的一個譯法是「示能」。它的本意是指一件物品和環境或有機體(如人)之間的關係,這種關係承擔著發生某種動作的特性以預示其可能的用途。

James J. Gibson

Gibson 在介紹 affordance 時使用了一個環境學上的例子:如果一塊地形接近水平、接近平整並充分延伸開且堅硬,那麼它就為動物提供了支撐。上面的這些屬性如果以物理學的標準測量是絕對的物理屬性,而作為一個提供支撐的 affordance 它們則是相對於動物來測量的。所以它們並不能被稱為是抽象的物理屬性。Affordance 不能像我們在物理學中那樣測量。

Gibson 還描述了生態學家所使用的一個叫做 niche 的概念。Niche(龕位)在建築學中是放雕塑等物體的地方;而生態學中,niche(通常被譯為「生態龕位」)則是指一個物種所處的環境特徵及一個物種是如何利用這些環境特徵生存的。Gibson 認為 niche 是一系列 affordances。同樣的環境可以提供不同的 affordances,它們是共存的,可以被感知並利用,也可以不被利用。

關於環境的 affordances 有一個重要的事實是,它們不能以物理學的方式測量,卻在某種意義上是客觀真實的。我們可以說一個 affordance 既是客觀的又是主觀的,也可以說它兩者都不是。它同時指向環境和觀察者。4

Affordance 是 Gibson 在 ecological psychology 領域創造的核心概念,他在 The Ecological Approach to Visual Perception 中用一整章來講述這個概念。他的理論和傳統的認知心理學截然不同,開闢了一種全新的視角,因而也對其他領域產生了巨大的影響。

Don Norman

Affordance 的概念被引入設計領域要歸功於 Don Norman。他的 The Psychology of Everyday Things(後來改名為 The Design of Everyday Things)一書使得 affordance 的概念在 HCI 領域流行起來。這本書經過數次修訂和擴展,現在依然是設計領域的必讀經典書目之一。

Norman 的 affordance 和 Gibson 的並不完全相同,期間還因為用例的問題導致了大範圍的誤解,以至於後來他又創造了一個「signifier」的概念進行區分。例如上面提到的指甲鉗上帶有條紋的粗糙平面構成了可以握持的 affordance 時又作為 signifier 暗示手指握持的位置。

Gibson 和 Norman 的 affordance 不同之處主要在於是否是可感知的(perceptible)。Gibson 的 affordance 是相關於個體的行為能力的,與認知能力無關;Norman 的 affordance 則是個體感知到的 affordance,有可能是真實存在的 affordance,也可能是被錯誤感知的虛假的 affordance。

要我說,Norman 的 affordance 倒不如說是「perceived affordance」。(笑)

深澤直人

而說到 affordance 的理論在實際設計中的應用,不得不提我最欣賞的設計師之一深澤直人。

The Famous Milk Carton

上面這張圖來自於深澤直人的書5,他在自己的許多演講中也用到過它。

一個空的牛奶盒被放置在路旁的欄杆上,牛奶盒正方形的底部剛好符合欄杆柱上的平面。人們總是喜歡認為自己的所有行為都是由自己決定的,然而這張圖片則證明了環境也影響著人的行為:當這個人想要丟棄手中的空牛奶盒時,欄杆上這塊彷彿是為了放置牛奶盒而誕生的平台就如同有磁性一般將他吸引了過去。

同樣地,他在書中還舉了另外幾個例子:低頭使用移動電話的人會安全地走在盲道上;與垃圾筐形狀相似的自行車筐被丟了垃圾進去;車站旁低矮的橫欄杆被人當作臨時座位壓彎。

我們所處的環境為我們提供了無數的 affordances,而我們則不停地感知並利用它們。深澤直人觀察到了非常有意思的一點:我們實際上對這樣的行為是毫無知覺的。而考慮到這一點,就有了通過改變環境來改變人們行為方式的潛在可能。於是深澤直人開始了自己的嘗試。

Without Thought

"Without Thought" 是深澤直人在 Naoto Fukasawa 一書中首章的標題。

Umbrella Stand

關於 "without thought" 的來源有個很有意思的小故事。這個短語其實出自他的朋友 Bill Moggridge(IDEO 的創始人)和 Bill Verplank(一位交互設計領域的先驅)。當 1998 年他在準備一個 design workshop 時用了這個例子向兩人徵詢意見:「一個人拿著雨傘走進室內卻發現沒有置傘架,便隨手把傘靠牆放置,將傘尖嵌入磁磚的縫隙中。用什麼詞可以形容這樣無意識(或者說下意識)的行為?」兩人異口同聲地說出了「without thought」。「那麼用『thoughtless』怎麼樣呢?」「不」,他們說,在英語中「thoughtless」暗示著考慮不周的負面意思。於是 design workshop 的主題被命名為「Without Thought」。

深澤直人由此設想了一個和傳統的圓柱形容器不同的、隱藏在環境中的置傘架:在靠近牆邊處設置一道凹槽。到訪的人便會自然而然地將傘立在牆邊。置傘架的實體消失在環境中,而設計的目的也達到了。

Awareness

正如此,很多時候優秀的設計所做的並不是根據人們的需要而創造出一個新的東西來滿足需求,而是觀察人們現有的行為從而優化人與物之間的關係。

±0 Trashcan ±0 Trashcan

這個垃圾桶的側面可以很好地貼合牆角,給人一種「剛剛好」的舒服的感覺。

±0 Umbrella

我們在乘坐公車或地下鐵時,如果提了比較重的東西又恰好帶著雨傘,就會習慣性地將袋子掛在立於地面的雨傘把手上。同樣來自 ±0 的雨傘在把手的位置設置了一個小小的凹槽,使得掛袋子時不會滑落。

這些就是觀察了我們在生活中無意識的行為——將垃圾桶置於牆角、將重物掛在雨傘把手上——而做出的設計。

The end-users know all the various different parameters that will determine the appropriate solution without ever realizing it. This is why vague notions of 'if only there were something like this' never result in a concrete image, and also why, whenever they do find a good design, they invariably remark, 'I've always wanted something like this'.6

— 深澤直人

而設計師所要做的,就是通過觀察,發掘那些用戶「潛意識中知道」但「自己沒有意識到」的需要,而賦予它們一個實體。我想,這就是深澤直人標誌性的「無意識設計」吧。

Intuition

這樣的設計過程本質上其實可以被看作是根據人們的需要創造合適的 affordances 並使其易於感知。而反過來從另一個方向講,人們感知並利用 affordances 依靠的則是直覺(intuition)。

直覺來源於我們對世界的認知。從堅硬的平地可以承載物體這樣最簡單的物理規律開始;到更深入一些的層面,例如尖銳的硬物可以切割,密實、凹陷的表面可以容納液體;直到我們人類自己發明的高級工具:鏡子可以反射光線,按鈕可以被按下。我們可以產生的直覺也是不斷進化的。

當新的技術產生時,我們總要面臨的一個問題就是如何為應用了複雜技術的產品賦予簡單的操作方式。而 HCI 的誕生史中剛好就有一個很棒的例子:1968 年,發明了滑鼠的 Douglas Engelbart 首次公開演示了這個改變歷史的創造,而五年後 Xerox PARC 研發出了第一台帶有「桌面(desktop)」概念的、使用圖形用戶界面(graphical user interface)的計算機。計算機屏幕上的桌面是對現實中桌面的一種隱喻(metaphor),我們可以在其中操控文件(file),將文件移入或移出文件夾(folder),就好像在操控現實中的物體一樣。我們可以像這樣用隱喻使用戶通過熟悉的概念理解陌生系統上的邏輯。同時通過滑鼠操控 cursor 也是一個使用映射(mapping)的例子。

Xerox Alto Xerox Alto

From Another Dimension

和傳統的工業設計不同,電子屏幕強大的顯示功能帶來的是可任意改變內容的特性,這給了設計師們極大的發揮空間。而到了 iPhone 的時代,這種對真實物體的模擬達到了空前的高度。

早在 iPhone 出現之前,Jony Ive 所帶領的 Apple 設計團隊就已經對觸摸式屏幕上的交互做了相當多的探索。其中最重要的一項就是 自然滾動,直接導致了 Steve Jobs 決定先著手去做 iPhone。而自然滾動的核心就是對現實世界中阻力和彈性的模擬(simulation)。

First Generation iPhone Running iPhone OS 1

說回到視覺設計,iPhone OS(即改名前的 iOS)從一開始的核心設計原則就繼承早在 Apple 發布 Aqua UI 的時候 Steve Jobs 就說過的「one of the design goals was when you saw it you wanted to lick it」7,包括了「real-life objects simulation」的視覺基礎。最明顯的例子就是具有空間質感的按鈕,通過漸變和高光等方式,讓用戶一眼望去就知道「這是一個按鈕」,並且在按下後顯示出被按下的效果給予用戶期望的反饋(feedback),就彷彿用戶在按下一個真實的按鈕而不是觸摸玻璃一樣。

When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app.

— iOS Human Interface Guidelines (2012 version)

這樣的效果一直延續到了 iOS 6(iPhone 5 是最後一代預載了 iOS 6 的 iPhone)。

Existence?

在 iOS 6 上,UI 對現實世界的模擬達到了歷史上的頂峰。整體削弱了光澤感(gloss)使材質更貼近真實的同時,連金屬風格的元素都加入了重力感應的效果,使得金屬光澤會隨著 iPhone 的角度改變而改變方向。

Music App on iOS 6

然而到 iOS 7 上,這一切都消失了。

"The End of Skeuomorphism"

在 Steve Jobs 的時代,Scott Forstall 是 iOS 軟件團隊的負責人,他的 skeuomorphic 設計風格掌控了整個 iOS 在 7 之前所有版本的用戶界面。這種設計風格引發了很大的爭議並且一度將 Apple 的設計團隊分為了兩派。而一向把握著最終決策權的 Apple 前 CEO Steve Jobs 站在了 Scott 的一側,成為了其背後最強有力的支持者。

2011 年 Steve Jobs 去世,2012 年與 Ive 和 Mansfield 一直關係很差的 Scott Forstall 失去了保護者,因 iOS 6 中地圖應用程式的諸多問題被主張團隊和諧的 Tim Cook 趕出了公司。

在包括我在內的許多人看來,趕走 Scott Forstall 是個很愚蠢的決定。引用一位前 Apple 高級工程師的話:「He was the best approximation of Steve Jobs that Apple had left.」8而後接手了 Forstall 工作的 Jony Ive 沒有了人來制衡,其所做的設計在我看來雖符合了未來的發展趨勢,卻實在是矯枉過正。但是 what's done is done,不如來談談 iOS 7 所做的改變。

The Epicentre of Change

對比 iOS 7 推出前後的 HIG,即可看出 Apple 在不同時期截然不同的態度:

iOS provides great scope for metaphors because it supports rich graphical images and gestures. People physically interact with realistic onscreen objects, in many cases operating them as if they were real-world objects.

— iOS Human Interface Guidelines (2012 version)

iOS apps have great scope for metaphors because people physically interact with the screen.

— iOS Human Interface Guidelines (2014 version)

之前的 HIG 甚至還有一個標題叫做「Consider Adding Physicality and Realism」的章節鼓勵開發者增加對現實世界中物體的模擬。但 Jony Ive 在接手 iOS 後,徹底地去掉了整個作業系統圖形界面中所有 realistic 的元素,將設計重心轉移到了其它地方。

曾佔據主導地位的 skeuomorphic design 的優缺點都是顯而易見的:一方面,屏幕上的各種物件所具有的接近真實物體的質感為用戶提供了極易被感知的 affordance;而另一方面,帶來如此質感的紋理、漸變等視覺元素又作為視覺上的干擾(visual noise)增加了用戶所接受的非有效內容的信息量。

iOS 的 UI 設計是否應該使用 skeuomorphic design 以及使用它時對真實物體的擬真應該達到什麼程度的問題在 Apple 設計團隊中一直備受爭議。而顯然,在 Jony Ive 的眼裏,這些模仿現實世界物體的紋理、漸變等視覺元素不僅不適合出現,而且已經到了喧賓奪主、讓人無法忍受的程度。因此 iOS 7 最主要的一項改變就是「去材質化」。

Erasing the Materials

在我剛剛接觸視覺設計(visual design)的時候,學到了非常重要的一件事:好的視覺設計就像表演一樣,本身是不會被人注意到的:當你專注於劇情而忘記自己正在看的只是演員安排好的動作時,表演才是成功的。

在認知心理學領域有一個概念叫做「認知負荷」(cognitive load),這個概念在 1980 年代由教育心理學家 John Sweller 提出9,指進行一項任務時 working memory 中所用的腦力工作量。上面提到的 skeuomorphic design 最大的缺點本質上即是通過視覺干擾增加了 cognitive load;同時,擬真風格的各種物件也佔據了移動設備上更多寶貴的空間;而由於不同的應用程式採用了對不同物體的模擬,也破壞了整個平台的統一性(consistency)。

iOS 7 放棄了 skeuomorphic design 後,所有的這些問題也就迎刃而解了。我們可以看到,iOS 7 所體現的設計思維中第一條便是「deference」。去掉了不包含實際有效信息的視覺元素後,用戶所關注的內容得到了更多的空間以呈現。

iOS 6/7 Weather App Comparison

Shape and Colour

在有效內容獲得了更多空間的同時,affordance 可感知性的減弱也是不可避免的。缺少了輔助性的視覺元素,用戶面對者滿屏幕的信息時就會發出這樣的困惑:「哪些元素是可交互的?我應該怎樣操控它?」

Apple 的設計師們選擇了一個很巧妙的方式:通過形狀和色彩等特徵標記用戶可與之互動的元素。

To signal interactivity, the built-in apps use a variety of cues, including color, location, context, and meaningful icons and labels. Users rarely need additional decorations to show them that an onscreen element is interactive or to suggest what it does.

— iOS Human Interface Guidelines (2013 version)

iOS 7 Interactive Elements iOS 7 Interactive Elements

標記可交互元素的方式大體可以分為這樣幾類:

  • 使用主題色
  • 將其放在恰當的位置
  • 使用含義清晰的圖標
  • 在標題中加入動作
  • 必要時使用邊框等修飾元素

Developing New Intuitions

雖然 Apple 的設計師們為了改善脫離了 skeuomorphic design 的用戶界面的可用性以非常嚴謹、科學的方式創造了一套設計規範,但在新的規範下元素沒有了對現實世界中物體的隱喻而喪失了認知的繼承性,用戶不得不從零開始重新學習那些元素是可交互的以及怎樣與它們交互。還記得剛剛為媽媽將她的 iPad 升級到 iOS 7 時,她就常常向我抱怨說:「怎麼把原來的系統弄回來?這個太難用了,完全不知道怎麼弄!」

但是,也請千萬不要低估人類的自我學習能力。我們所熟悉的輪軸、槓桿甚至電子開關這樣複雜的人造工具在遙遠的古代也是不存在的,我們今天不是照樣可以得心應手地使用它們嗎?

隨著科技的不斷進化、信息量的爆炸性增加,我們的思維在不斷地隨著時代變化,設計也不會是一成不變的。而 iOS 7 的設計風格,可以肯定地說,會是整個 UI 設計史上一次非常重要的偉大嘗試。


  1. Steve Jobs (2000). "Apple's One-Dollar-a-Year Man". FORTUNE Magazine.

  2. James J. Gibson (1977). "The Theory of Affordances". Perceiving, Acting, and Knowing, edited by Robert Shaw and John Bransford. ISBN 0-470-99014-7.

  3. Don Norman (1988). The Psychology of Everyday Things. ISBN 978-0-465-06710-7.

  4. James J. Gibson (1979). "The Theory of Affordances". The Ecological Approach to Visual Perception. ISBN 978-1-8487-2578-2.

  5. Naoto Fukasawa (2007). "Without Thought". Naoto Fukasawa. ISBN 978-0-7148-6603-1.

  6. Naoto Fukasawa (2007). "Without Thought". Naoto Fukasawa. ISBN 978-0-7148-6603-1.

  7. Steve Jobs (2000). "Macworld San Francisco 2000" (6:50).

  8. Michael Lopp (2012). "Innovation is a Fight".

  9. John Sweller (1988). "Cognitive Load During Problem Solving: Effects on Learning". Cognitive Science.

Kotori Shiina

I create nice things with ❤︎

Tokyo, Japan

Subscribe to 萊茵石計畫

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!