動態的設計 -- Design is how it works.

(from:  http://www.kaiak.tw/2012/06/vs.html#more )

前幾天看到Mr. Jamie所寫的 設計：如何好「用」，不是如何好「看」，裡面提到，一個設計者必須要對自己要做的設計有全盤的了解，只有深入了解這個設計想要達到什麼目的，才能夠根據這個目的去做出好『用』的設計，這個說法剛好和去年所寫的Why and what? 這篇文章討論到的網站設計概念有很大的吻合。

當時我和同事討論關於網站或是任何和使用者互動的設計，那時候他說，他非常喜歡Steve Jobs所說的一句話:

“Design is not just what it looks like and feels like. Design is how it works.”

當時我問同事，最後那句話是什麼意思？ 什麼叫做Design is how it works?

他用過去他在遊戲產業中所學到的概念來做解釋。在2004時，遊戲設計的論文中有人提出了一個叫做MDA的架構。M代表Mechanics(機制、功能)，D代表Dynamics(動態)，A則是Aesthetics(美學的)。


所謂的Mechanics代表一些基本的元件還有功能，在一般遊戲、網站或是軟體的開發過程中，通常是工程師所負責的部份。舉個實例，Mechanics就像是遙控器上面的按鈕，每個鈕按下去都有對應的功能，這樣的功能只要Spec夠清楚、不要不合理，工程師們都能去實作它，沒有什麼困難。

而Aesthetics在這篇論文中，指的是遊戲傳達給使用者(遊戲者)的感覺，是奇幻的呢還是寫實的？是競爭性的還是團隊合作的？這部份其實牽扯到非常多的東西(詳細可以閱讀這個網站的介紹)，但是很多人(或是公司)都把Aesthetics(美感)這個概念簡化成所謂的美工---也就是遊戲或是網站的Skin，並且會用美感=設計這個概念去做整個產品，最後通常只要整個視覺傳達夠好看，我們就說這個東西是有設計感的。因此一般來說，很多人會把這部份功能交託給我們所謂的"美術"，要求他們畫出符合某個風格的畫面，並且以為這樣就完成了所謂的"設計"。

最後是Dynamics，它所代表的是一個遊戲(或網站、產品)的"系統"，它將Mechanics中的基本功能做完整的串接，去設想使用者操作時可能會遇到的問題、設計整個操作流程(Flow)，將不必要的功能刪去或藏到底層，將最常用的功能提到第一層次讓使用者方便使用，或是在每一個動作中加上回饋機制(想想iPhone帶給使用者的感覺)，讓使用者不會感到迷惑。它讓每一個Mechanics(功能)經過Aesthetics(美感)的包裝後，對使用者產生意義。在現代的術語中，UX(User Experience)應該是最接近這個概念的了，但是兩者並不能說是完全重疊。


MDA這三者中，Dynamics可說是產品設計的靈魂---不具實體但卻是最重要的。

在MDA這個論文之中有一個它對於遊戲MDA架構的圖解:

(from: http://gangles.ca/2009/08/21/mda/)

用中文來看是這樣： 機制 <─> 動態 <─> 美感

它認為遊戲者從美感的方向開始慢慢的體驗遊戲，而設計者從"功能機制"開始慢慢建構自己的產品。這或許是一個說法，但從產品開發或是網站設計的角度來看，我會把設計的流程以動態(Dynamics)這個概念作為出發。

我的想法是這樣，當我們要做一個產品，一定是因為想要解決某些問題、滿足某些需求，這是我們為什麼要做這個產品的原因。Steve Jobs在上面提到的專訪中有說到:

『設計是一個滑稽的詞。有些人以為設計就是「美感」，但當然，如果你再挖深一點，設計其實是「好用」的程度。Mac 的設計並不在它的外觀，雖然外觀是設計的一部分。但更重要的，是它如何的好用。要設計出很棒的產品，你必須要先有深入的了解，你必須要真的知道它是用來幹嘛的。那要有很大的熱情與執著，才能讓你真正的了解某件事情。你必須要把它細嚼慢嚥，而不只是吞下去。大部份的人並沒有花時間去抽絲剝繭。』 

(引用自Mr. Jamie的文章)

根據這個目的，我們去設想使用者使用的動態(Dynamics)情境，設計整個高層次的系統架構，並去設計各個功能的重要性、層級高低，每一個功能要有多精緻、多強大、多簡單，這些設計全都和我們想要解決什麼問題息息相關。根據這樣的動態情境設計，產品設計者再分配工作給工程師實作功能(Mechanics)，請美術設計視覺風格和產品給使用者的使用感受(Aesthetics)。"Design is how it works." 只有解決問題是最重要的，其他兩個方向的人都必須配合這個宗旨來做事情。

所以真正厲害的Designer，應該是要對於要解決的問題有全盤的了解，並且對Dynamic的流程(Flow)有完整的想像，像個導演一樣，讓下面的人知道他想到達到什麼目的，因此工程師和美術在做事情時，不會一味的去迎合Specs，而是會多想一步:『我這樣做能夠解決這個問題嗎? 為了解決這個問題，我是不是能夠設計出更好的結構或功能? 這個UI是不是其實只是好看，但讓使用者失焦，無法輕鬆的使用？』

我想iPhone(其實還有Mac，但Mac比較少人用)應該可以算是很高層次的闡述了Dynamics代表的是什麼。在iPhone中的每個內建軟體，都有根據按鈕的常用性去做階層分配，裡面的配色和圖示也讓所有使用者不用思考就知道該按哪一個按鈕。

其他還有很多根據使用者需求所做出的設計。例如：在機身上做上實體的靜音切換鍵(因為會非常常用，一天可能用好幾次)。講電話時螢幕會自動轉暗，但在通話中若拿到眼前看螢幕則會轉亮。每個按鍵和動作都盡量精確的去模仿真實世界中的觸感和生活經驗，例如:開手機鎖時的移動感和聲音回饋與真實世界有所重合，MacBook休眠時燈光閃爍的頻率和人熟睡時呼吸的頻率一樣，讓使用者的大腦不用再另外花力氣學習，就能用真實生活中的經驗去操作、了解這些高科技產品。

而這些例子，都是由產品的目的性去思考使用者可能的使用流程，進而設計並且提昇這些流程的流暢度和使用者經驗(Dynamics, UX)，並且讓工程師和UI設計師一起為了這些Flow來做努力、突破，突破本來無法做到的技術，突破在小小的畫面中，設計出可以暗示使用者如何操作的Icon和動作回饋。

Anyway，我想例子還是不要舉太多，那不是這篇文章的重點。其實這篇文章的重點在於，希望可以更正確的讓大家理解產品設計這件事情。有些人(或公司)會認為，只要手上握有資源，有一個完整的團隊，左邊有工程師、右邊有美術設計師，就能做出"功能強大又兼具設計美感"的產品，但其實這個概念是錯的。假如產品執行者缺少對要解決問題的全盤了解，只是將能部分解決問題的功能拼湊在一起，並包裹與美術設計的糖衣，那最後只會產生出一個不能用的東西，就像是缺乏導演所拍出的電影、就像是沒有靈魂的軀體。。

因此在這個架構下，假如想要做出一個完整而好用的產品，一切應該還是要從"Why"這個字出發、從要解決的問題出發、從Dynamics的使用者流程系統做出發。如同Jobs所講的，抽絲剝繭的了解自己要解決的問題，這個過程是辛苦的、是需要很大的熱情和執著的，但一旦了解了這個問題，功能和外觀便能憑依在此之上，共同產生出一個卓越的產品，讓這一切的辛苦都值得。

嗯，我想這就是設計吧。That is how it works!