跳到主要內容

動態的設計


前幾天看到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架構的圖解:


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

它認為遊戲者從美感的方向開始慢慢的體驗遊戲,而設計者從"功能機制"開始慢慢建構自己的產品。這或許是一個說法,但從產品開發或是網站設計的角度來看,我會把設計的流程以動態(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!

留言

這個網誌中的熱門文章

Price Tag

這禮拜,我們部門的一個姐姐離職、來了一個新的男生。(我又穩坐部門之花了XD") 那個離職的姊姊,晚我一個多禮拜才來,但卻未滿兩個月就離職了。 主管說,是因為工時不穩定、薪水又不夠高, 畢竟對方是倫敦大學的高級菸酒生 。 其實,雖然我們公司很多狗屁倒灶的事情,不過整體而言我是喜歡的, 或許因為這是我第一份工作,我覺得這份工作替我帶來的價值還有我所貢獻的價值,遠超過金錢可以衡量的,在我人生中所帶來的成長也是很可觀的,但同樣是新工作(她上份工作不超過半年),她卻用金錢跟時間去衡量。 這件事其實讓我想到之前在公車上遇見的一個菲傭。 她帶著一個很老很老的爺爺,撐著枴杖、走路很不方便的一位爺爺。那位菲傭在公車上一直用很大聲的音量講電話,也沒有顧著老爺爺。下車的時候,匆匆的掛掉手機就衝下了車,站在車門口等著步伐緩慢的爺爺自己一個人慢慢地走、慢慢地走,下樓梯的時候攙扶了一下,就又開始講起手機,走在爺爺的前面,頭也不回的走。 看到其實讓我很生氣,有點想衝上去罵人....但其實,是啊,她的工作只是帶爺爺出門,這是她對自己的工作所貼的標籤,我們又能怎麼樣?你在自己身上貼了怎麼樣的Price Tag、你怎麼定位自己、你怎麼定位你自己的人生?我一直在想、在觀察,但這種事情沒有結論也不會有標準答案的。 世界上的人千百種、人們對自己的訂價也千百種,其實最終不要遺憾就好了吧?雖然聽起來有點冷漠、但不管有恥無恥、有品沒品,自己選擇的人生跟加諸在自己身上的標籤,最終都是跟著自己一輩子的,當然只要對得起自己,就無所謂了吧。

PT Love Story

序章 其實是不知道大家想聽哪種口吻的描述, 但就盡可能原汁原味將我感受到的情感傳達出來吧。 那麼,這是個不只愛情,關於真愛的故事。 http://best-messages.blogspot.com/2010/11/best-love-sms-how-to-say-i-love-you.html

May You Rest In Peace

     2012年4月20日,星期五,我從南京出差回來,拖著疲憊的身軀步出機場,心裡埋怨著老天又下起那討人厭的雨。然後數日後我知道,在再平靜不過的那天,黎穎恩,我的朋友在車禍中離開了。 http://www.macaodaily.com/html/2012-04/20/content_691597.htm   大雨,電單車,友誼橋,發財車,在今時今日的澳門,我一點都不驚訝有致命車禍發生,只是不幸地這次的主角,是我曾經認識的妳。說來諷刺,多年不曾聯絡,若不是發生這樣的事,我根本不會想起妳;若不是發生這樣的事,也許我們的重遇只會像其他那些話不投機不如不見的朋友一樣,無法靠著那曾經的薄弱的交集維繫而繼續保持疏遠;若不是發生這樣的事,也許我們下半輩子都不會再見到對方,雖然,現在我們也再也無法見到對方了。   我已經忘記了我們是怎麼相識的,也忘記了我們是怎麼漸漸疏遠而失聯。只是此時此刻天人永隔,我突然想起妳那甜美的笑容,想起那趟新奇的火車,想起那年下雨的西安。那些僅有的我們共同的經歷,不知道妳是否還記得?聽著那比我有心得多的友人訴說著他對妳的遺憾,漸漸勾起了我對妳的情感,回憶起我們曾經相識過、交談過、觸碰過,然後還來不及重溫分享那些陳年舊事,妳,離開了。 人生無常從來唔係幾信   25歲,剛剛大學畢業,正值花樣年華,我真正感受到那老掉牙的,人生無常。兩、三年前踢球的時候,聽著朋友說誰誰誰結婚了,誰誰誰生孩子了,我一付老成的語氣說:「有什麼稀奇,再過兩年就有人死了。」我只是鬧著玩的,可是一語成籤。對不起,為我那成真的戲言;對不起,為我過去做過任何讓你難受的事。 「我們的生存,不過是在兩個永恆之間所佔據的無限短的一瞬。」                           -叔本華-   希望妳不介意我用這情書般的口吻訴說著,但我們能在那短暫的瞬間彼此交錯過,我由衷的感到榮幸,不怕老土的說,有來生的話,我還希望認識妳。希望妳在那個我所不認識的世界裡,幸福,快樂。 In the Memory of Suki Weng Ian Lai