跳到主要內容

動態的設計


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

留言

這個網誌中的熱門文章

我的通勤生活觀察日記--火車篇

今年九月,除了成為社會新鮮人之外,我還附加另一個身分就是火車通勤族,
嚴格來說雖然說不上什麼特別,但是在我的生活圈中我這樣的人還是非常少見的,
我每天早上和晚上坐火車通勤往返中壢與台北,特此報告一下這一個月通勤以來的所見所聞。
1.區間車、莒光號、自強號、太魯閣自強號之內行人才看得出來的差別。
等級:太魯閣自強號>自強號>莒光號>區間車 速度:(同上,因為等級就是用速度去排的XD) 長度:自強號(12車)>區間車(8車)=莒光號(8車)=太魯閣自強號(8車) 停車位置: 太魯閣自強號(2-10車) 自強號:(1-12車) 莒光號:(1-8車) 區間車:(6-14車)
雖然說是坐火車,但是每站廣播內容還是不盡相同喔!
中壢站廣播如下: "各位旅客您好,北上,六點三十九分,經由北迴線,開往花蓮自強號列車,即將進站, 請各位旅客在第一月台位置,上車"
台北站呢? "各位旅客您好,南下,十七點三十分,經由山線,開往屏東自強號列車,即將進站, 請各位旅客不要靠近月台邊,以免發生危險" 或者是 "各位旅客您好,南下,十七點三十分,經由山線,開往屏東自強號列車,即將進站, 請各位旅客在第一至十二車的位置候車"
發現有什麼不一樣了嗎?台北車站會特別廣播不要靠近月台邊,還有候車位置, 我想大概是因為台北站的人比較多吧!
2.很多人不知道板橋跟樹林中間開了新的火車站--浮州,所以每次如果搭區間車停浮州站,就會聽到乘客此起彼落的聲音:哪時候有這一站?
3.太魯閣自強號太高級了不發售無座票,所以拿悠遊卡、定期票的人與狗不能上車。
4.區間車最多人搶也最好睡的位子在邊邊,因為你可以靠著它睡覺, 如果是自強號的話都很好睡,但是靠窗最好,因為靠走道很容易被經過的人的包包給打醒。
5.自備板凳無敵。板凳族都搭自強號,火車一停就衝向十二車放自行車的地方, 找個靠牆的地方,板凳打開,坐下來開始睡!
6.通勤小孩的悲哀:我每天在中壢等火車的時候是早上六點多,就會看到一個媽媽拉著兩個小一小二的小孩等火車,然後跟我一樣都在台北站下車。一開始吸引我注意是因為媽媽太強大,每次拉著小孩就瘋狂擠上車,一擠上車就幫小孩佔位子,然後把椅背調低還拉出兩條浴巾蓋著小孩讓他們睡覺。後來才仔細去想,天啊才這麼小就要這樣通勤,不曉得是為了什麼…

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

最近看了一本書『去倫敦上插畫課』


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


這是sunni的作品:




看完這本書,我的感想是:作為一個插畫家,一定要有無比的自信。 而對沒什麼自信卻非常喜歡插畫的我來說, 這將會是我需要克服的一個最大的難題。
總結:
如果你喜歡插畫,本書的好看程度:★★★★★(滿分!) 如果你有打算去國外念插畫或設計,本書實用程度:★★★★(4顆星) 如果你沒有特別喜歡插畫,但你正在實踐夢想的道路上, 本書的熱血程度:…

Goldilocks Economy

華爾街常用到一個名詞:「Goldilocks Economy(金髮女孩經濟)」, 意思是指經濟可以在一個不太冷也不太熱的理想經濟環境中,繼續安穩下去。 有趣的是, 這個名稱是來自經典童話「Goldilocks and the Three Bears(歌蒂拉與三隻熊)」
最早出現在1837年英國作家Robert Southey的作品集,
Goldilocks指的是金髮,
所以也有人把這個故事稱為「小金髮(金髮女孩)與三隻熊」。
這個故事在說一個天真無知(白目)的金髮小女孩,不小心在森林裡走失了,
又累又餓又渴的她,聞到了一股麥片粥的香味,
順著香味走,竟發現了一棟小房子,也就是三隻熊的家。