動態的設計 - 創業

上次在這邊發文是去年九月的事情了...

由於我自己也在網路業，想和大家分享自己學到的一些關於產品設計的心得，

對於網路業這樣低進入門檻的特性，

我想這篇文章所討論的東西對產品設計會很有幫助~

原文:

http://st-threath.blogspot.tw/2012/06/dynamics-design.html

---------------------------------------------------------------

前幾天看到Mr. Jamie所寫的 設計：如何好「用」，不是如何好「看」，

裡面提到，一個設計者必須要對自己要做的設計有全盤的了解，

只有深入了解這個設計想要達到什麼目的，才能夠根據這個目的去做出好『用』的設計。


當時我和同事討論關於網站或是任何和使用者互動的設計，那時候他說，

他非常喜歡 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在這篇論文中，指的是遊戲傳達給使用者(遊戲者)的感覺，

是奇幻的呢還是寫實的？是競爭性的還是團隊合作的？

這部份其實牽扯到非常多的東西(詳細可以閱讀這個網站的介紹 http://goo.gl/trH8P)，

但是很多人(或是公司)都把Aesthetics(美感)這個概念簡化成所謂的美工---也就是遊戲

或是網站的Skin，並且會用美感=設計這個概念去做整個產品，

最後通常只要整個視覺傳達夠好看，我們就說這個東西是有設計感的。

因此一般來說，很多人會把這部份功能交託給我們所謂的"美術"，

要求他們畫出符合某個風格的畫面，並且以為這樣就完成了所謂的"設計"。


最後是Dynamics，它所代表的是一個遊戲(或網站、產品)的"系統"，

它將Mechanics中的基本功能做完整的串接，去設想使用者操作時可能會遇到的問題、

設計整個操作流程(Flow)，將不必要的功能刪去或藏到底層，

將最常用的功能提到第一層次讓使用者方便使用，或是在每一個動作中加上回饋機制

(想想iPhone帶給使用者的感覺)，讓使用者不會感到迷惑。

它讓每一個Mechanics(功能)經過Aesthetics(美感)的包裝後，對使用者產生意義。

在現代的術語中，UX(User Experience)應該是最接近這個概念的了，

但是兩者並不完全重疊。


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


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

http://goo.gl/zEg3f

(開發、設計者) 機制 <─> 動態 <─> 美感 (遊戲、使用者)


它認為遊戲者從美感的方向開始慢慢的體驗遊戲，而設計者從"功能機制"，

開始慢慢建構自己的產品。這或許是一個說法，但從產品開發或是網站設計的角度來看，

我會把設計的流程以動態(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!


--
St. Threath 文章集散地:

http://st-threath.blogspot.com/ 批兔 ˇThreath

--