跳到主要內容

動態的設計


前幾天看到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顆星) 如果你沒有特別喜歡插畫,但你正在實踐夢想的道路上, 本書的熱血程度:…

向大師致敬--我的童話插畫初體驗

九月中,感謝出版界友人的公關票,(非常想公開感謝她,但我要幫她保持低調)
所以得以參加Yvonne Gilbert & Danny Nanos的插畫工作坊。
只能說,太。爽。了!我何德何能可以參加到這個工作坊呢!!
可惜愚蠢如我忘記帶相機,沒有照片可以分享,嗚嗚嗚嗚~~

說這麼多,先來介紹大師Yvonne Gilbert & Danny Nanos
"尹芳吉伯 (Yvonne Gilbert) 出生於英國諾森伯蘭的尹芳先後在紐斯卡爾學院和利物浦學院攻讀美術,做了五年的美術設計之後,在1978年轉為自由插畫家,陸續和全球許多大出版社、雜誌和廣告公司合作。她為Frankie Goes to Hollywood’s “Relax” 設計的唱片封套,被“Q”雜誌評選為「唱片封套最佳經典100」之一,該設計也被BBC 電視台譽為「經典之作」。她的插畫也榮獲許多國際獎項,英美藝廊爭相收購她的原畫展出銷售。 尹芳為英國皇家郵局設計的五套郵票,紛獲「金郵票獎」Il Franco Bollo d’Or 以及「世界最美的郵票」獎Gran Premio del’Arte Filatelica的殊榮 。 丹尼納諾 (Danny Nanos) 加拿大籍的納諾(Danny Nanos)自1985年起,為知名設計公司和廣告經紀公司擔任「廣告設計總監」一職,廣告作品獲當地和國際競賽獎項和肯定。納諾的設計範圍廣泛,包括書封設計、商品包裝設計、企業形象、互動媒體、建築設計等等。" --引述自格林文化
當天他很親切的介紹他的原畫作品給我們看,親眼看到真跡真的很不敢相信, 完美到好像印刷出來的,沒有任何髒髒的鉛筆跡, 運用各種媒材去創造出不同的效果。
(使用色鉛筆與簽字筆繪製陰影與細節的白雪,格林文化)
除了他們親自上的插畫課之外,格林文化還很貼心的準備了筆和紙讓大家開始畫畫, 我決定用"白雪"書裡的其中一個章節來繪圖, 那頁主要是敘述白雪公主空閒時喜歡在森林裡採小花,當他走進森林,許多小動物都會靠近她,她也會停下來與他們玩耍。










圖畫尚未完工,我仍須努力! 愈發覺得色鉛筆真的很有趣, 上次看到有人得到了1024色水性色鉛筆讓我好生羨慕, 還有,我真的該換一台相機了... 拍個照還要張張修圖比畫圖還累!