跳到主要內容

動態的設計


前幾天看到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!

留言

這個網誌中的熱門文章

我的同學

(這是一篇自我勉勵的文章,所以圖片也要先來自我勉勵一下!) (btw我做的,歡迎點字!) 我現在假日的時候都在上課 班上有兩個很厲害的同學 之前在聽他們自我介紹的時候 就大概知道說他們有在接案  然後有開工作室還是怎樣  都是相關科系的 他們也真的很厲害 假日班上課的同學其實不會有什麼交集 但我太想認識他們了 今天下課以後我默默的走過去搭訕他們  然後那兩個男生人很好的讓我加他好友 他介紹我看他的作品  他趕著走  說有空在網路上遇到再聊 不看則已 一看驚人 嚴爵 張棟樑 蕭亞軒 阿妹 五月天(演唱會)...的專輯都是他設計的!!! 還有惡女花魁...等等很多偶像劇視覺包裝! 差點沒快嚇死 (題外話:而且他也帥 是不娘的帥 但講話有一點娘) 回家的路上超悶的 一直覺得自己很沒用  到底在幹嘛 他建中畢業 輔大應用美術 現在在實踐的時尚與媒體研究所念書 今年畢業 我心想  哇唸到建中  那比我還聰明了 他真的是從念大學的時候就打定主意要做這行了吧 我甚至誇張的覺得我為什麼要念台大會計  這是我以前從來不曾有過的想法 就知道我打擊有多大了 走往台北火車站的路上我超級沮喪的  覺得自己好弱 看到台北火車站附近坐著的遊民  我在想我以後會不會也坐在那邊 我會不會餓死 我會不會根本賺不到錢  我爸媽會不會也被我餓死 在火車上看著車燈 路燈  一盞盞燈火用加速度閃過 用剛剛在一沮喪之下衝動買的筆(趁機衝動找藉口消費)畫畫 然後一個人吹冷冷的風走路回家 吃飽喝足後現在好多了 乎 我一度想拿起手機找人傾訴 想要有人告訴我  我很棒  我很好  我也有別人沒有的好  我只是太沒信心了 但我現在好多了 我覺得我有自我療癒的能力(笑) 其實每次都有人問我幹嘛要念台大會計 每次都有人問我會不會後悔念台大會計 這問題我想過  但我也是認真的覺得我從來不曾後悔過 因為這就是人生啊  如果沒有經過這些那些  有...

Price Tag

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

去倫敦上插畫課-讓人更想去英國念插畫系的書!

最近看了一本書『去倫敦上插畫課』 作者是韓國人,munge & sunni, 兩個人都是在30歲的時候去英國的金斯頓大學念書, munge在去之前是職業的"無業游民",也可以說是自由接案者吧(我想) 毅然決然的決定換水,於是拋下一切跑去英國金斯頓大學念插畫與動畫系的研究所。 (她念動畫) sunni呢,在韓國的某出版業做到藝術總監,大家都覺得她正在一個如日中天的時候, 居然打算拋下一切去英國念插畫的學士學位真是瘋了, 但是她的心裡一直一直都有一個心願,想畫插畫,因此就算大家都覺得她瘋了, 她還是要去。 這本書主要就在講她們在英國的故事, 鉅細靡遺的把她們在上課的時候,老師要求他們做的每個練習project寫出來, 除此之外,他們還把他們的作業,思考的來龍去脈還有得到的成績都寫了出來, 感覺好像真的是看著她們去做作業,念碩士一樣,非常有趣! 也許對其他人而言,這是一本看人實踐心中夢想的休閒讀物, 對於喜歡插畫的我來說,這就像是一本工具書,裡面寫滿了project進行的方式, 我一邊看一邊想,好有趣的project,我也要來試試看! 最重要的,看完會非常想要去念插畫系!哈哈! 我猜想這本書的出版一定會讓申請金斯頓插畫系的人增加吧! munge是個個性很率直很有自信的女生, sunni相較之下從文筆讀起來倒是讓人覺得有股堅毅的溫柔, munge可以用多才多藝來形容他,他雖然是去念動畫的碩士(MA), 但是回國後接了插畫的case,好像不知不覺又成為了插畫家, 而目前他正在寫書,沉浸於成為一個作家的樂趣。 至於sunni,他以第一名的成績畢業於金斯頓插畫系(BA), 後來又前往布萊頓念插畫系的MA, 她曾經申請過英國皇家藝術學院的插畫研究所也申請上了(但沒去念), 她的插畫,得過波隆那差畫展的獎,英國D&AD...非常多的獎項。 讀他們的文章還有畫非常有趣, 這是munge的作品: 這是sunni的作品: 看完這本書,我的感想是:作為一個插畫家,一定要有無比的自信。 而對沒什麼自信卻非常喜歡插畫的我來說, 這將會是我需要克服的一個最大的難...