設計指南第一章:為什麼要設計?為什麼是現在?

The Guide to Design 中文版第一章 — Why Design? Why Now?

Jasmine Lin
21 min readAug 4, 2020

👉 原文連結:The Guide to Design — Why Design? Why Now?

設計無所不在 — 它是我們家中的椅子、我們閱讀報紙的方式、我們的手機畫面的呈現。然而,設計對於你而言是什麼呢?

身為一名設計師,我們相信每件事都有更好的做法。人們經常認為設計只是事物看起來如何 — 美感的確是設計重要的一部分,但並非唯一。

其實,設計是讓事物變得比之前更好,發現運作不良的事物、深入問題、探索多個潛在解決方案,然後決定哪個方案最符合專案目標。

業界專家習慣在談到設計時使用大量專業名詞 — 有時候是為了保護他們自己專業的尊嚴 — 希望在成長為設計師的職涯路途上,你不會承襲他們的習慣。

接著,我們來談談 UX,又或者是使用者體驗、使用者中心設計,這些本質上跟設計是一模一樣的,只是因為你在解決人(使用者)的問題,你需要跟那個人確認他們的問題為何,並去驗證你的解決方案是否真的解決了他們的問題。當提到「他們」的時候,我們說的不只是那些使用你的產品的個人,還有他們的社群以及整個世界。基本上,UX 大部分專注於數位介面,像是網頁和應用程式,但現在已經迅速擴展到其他平台(例如:電視、傳訊軟體)、形式(例如:聲控)以及地點(例如:無所不在的互動體驗)。

設計是動機的表現(Design is the rendering of intent.) — Jared Spool

你可能剛開始踏上設計這條路 — 因為你相信自己是個天生的創作者,抑或是你受不了現狀、難以按耐心中想推動改變的想法,又或許是因為你對於現在的工作很厭煩、想要更高的薪水、覺得設計很帥氣 — 了解你的動機很重要,你需要花點時間去找到它。

成為設計師的旅程可以很有壓力,你需要學習各種方法、工具、流程,建立好的品味以及視覺敏感度,不斷進行設計迭代直到正確,而這些全都要花時間。這就是為什麼你需要清楚了解你的動機:懷著遠大的目標可以讓你在中途需要額外動力時派上用場。

在這篇指南中,你將更理解設計師創造數位產品的步驟,你會學到一些重要觀念,像是易用性、使用者研究、道德、可及性(accessibility)、視覺設計等,我們建議你先讀完每一章的閱讀清單,再從觀看清單選幾個影片以從業界名人身上獲得靈感。在每章的最後,我們會提供一系列的問題幫助你反思,想一想如何在職涯上應用這些剛學到的觀念。

別急著進到下一門課,給你自己一點時間去消化、並且完全理解我們在此章節所介紹的觀念。

這將會是個充滿未知的旅程,但這同時也是個幫助你認識自己的旅程,自我覺察是設計師所能擁有最強大的工具之一,而第一步就是要能夠改變自身與週遭的事物。

我們希望你好好享受這趟旅程。

閱讀清單

一、設計的心理學:人性化的產品設計如何改變世界

買書連結(圖片來源:博客來)

二、UX 的過去、現在、未來

原文連結:A 100-Year View of User Experience

從 1950 年開始,UX 在世界各地大躍進,一直到 2050 年都會持續高速發展,Jakob Nielsen 預測 2050 年時全世界將有上億名 UX 從業人士,相當於 1% 的全球人口

UX 的歷史
從 1993 年 Don Norman 在 Apple 成為 UX 架構師後,UX 從業人士從寥寥數人,到今日 Linkedin 上已經有一百五十萬人自稱為 UX 專業人士。

1950–2050 年全世界的 UX 專業人士(圖片來源:NN/g)

UX 高速成長的原因
1980 年代,個人電腦革新,使用者同時也是消費者,於是 UX 直接影響購買決策,媒體評測時也經常提到易用性。

1990 到 2000 年代,網路革新,傳統 PC 軟體的模式是先購買、後 UX ,也就是先買了產品之後才能體驗;網頁出現之後,變成先 UX、後購買,使用者會先在網頁上找到相關資訊(此網頁就需要良好的 UX),才會購買產品。

2000 年代,媒體大幅報導 UX 的好處,讓企業開始考慮導入。

從何看出 UX 產業的成長
一、公司招募更多 UX 專業人員
二、更多公司在做 UX,成熟企業開始招募 UX 主管
三、更多國家在做 UX,從一開始只有歐美國家,到現在的國際化

三、CAMP 框架:一個通用的產品設計原則

原文連結:A unified theory for designing just about anything

「為什麽有些公司在特定領域能出類拔萃,卻在其他領域不夠出色?」這個筆者心中長期的疑惑,在遇到一套遊戲設計理論 — MDA 框架後獲得了啟發,而筆者也發現運用相似概念能夠發展出一套評估產品設計的框架。

什麼是 MDA 框架?
MDA 框架是當代遊戲設計的經典理論之一,它由三個元素組成:機制、動態,以及美學。

機制(Mechanics)是遊戲的基本概念及規則,可以是射擊物體、蒐集錢幣、越過障礙物、解開門鎖等。

動態(Dynamics)是透過不同與玩家互動的機制組合而成,例如橫版捲軸遊戲(Sidescroller)、關主對決等,這些概念可以透過不同的互動模式(機制)與玩家互動。

美學(Aesthetics)則是指玩家的在遊戲中的體驗。

CAMP 產品設計框架
筆者以 MDA 理論為基礎,提出了 CAMP 產品設計框架 —要素分別為脈絡、架構、機制、詩學。

脈絡(Context)
在做產品設計時,首先需要了解脈絡,並思考該設計會在哪裡出現。這個設計的使用者是誰?場域及情境是什麼?預算多少?時程多長? — 這一系列的問題涵蓋了前期研究(Generative Research)、需求蒐集以及設計目標的範圍與限制等層面。如果略過這個步驟,設計出的產品將有可能會聚焦在錯誤的使用者,耗費團隊資源成本甚至會帶來更多無法預料的後果。

架構(Architecture)
在做產品設計時擁有一個好的架構,可以更有系統性地運用設計原則。事實上,同樣的概念也能運用在生活中的大小事,像是電影會有故事情節、遊戲會有迴圈跟劇情起伏、建築有樓層指示圖、餐廳有菜單等。因此,在做產品設計時,有一個好的架構能幫助設計師簡化複雜的資訊。

機制(Mechanics)
機制是促進使用者理解跟掌控情緒的一種手段。設計師可以運用不同的機制來影響使用者對於產品的理解,甚至影響其行為及情緒。機制可大可小,可以是給予點數獎勵、或是一個排行榜。另外,機制是高度取決於脈絡的。舉例來說,遊戲設計師跟互動設計師運用的機制會重疊,但非完全相同;小說家與電影製作人運用的機制會重疊,但也非完全相同。媒介(Medium)呈現的形式顯示出所運用的機制類型。

詩意(Poetics)
詩意可以稱之為產品使用體驗。筆者在此將美學改稱為詩意,是因為多數人對於「美學」有種視覺上需要美觀的印象。然而將產品設計得漂亮美觀,其實是一種帶給使用者愉悅感受的手段,故也可以稱作一種機制。另外,詩意還有一個重要原則是它在使用者實際與產品互動後才會出現。也就是說人們要實際與產品互動後,體驗才會誕生。舉例來說,在 App 商店可以看到各種功能及目的相似的 App,但它們各自傳達出的詩意大不相同。整體來說,詩意體現了心理學上的細節,反映出設計師在產品設計上的決策。

筆者希望藉由 CAMP 框架幫助設計師診斷產品的癥結點,也可以幫助設計師自己在設計產品時,擁有一個架構去梳理問題以及釐清問題所在。

四、什麼是設計?

原文連結:What is design?

設計包羅萬象,筆者想要找到設計的明確定義。通常,「設計」這個詞指的是:

  • 設計行動本身
  • 設計流程 — 這個行動是如何被架構
  • 行動與流程的結果 — 設計成品

筆者發現維基百科的定義非常符合他的個人經驗:(設計是)為一個物件、系統或是一連串執行的過程去構築、設想出一個計畫或規範。

設計不是藝術,藝術是一種創作,主要是為了傳達情感,相較起設計更重視娛樂性質、具有裝飾性。

設計不是工程,工程是使特定技術或系統執行某件事,設計跟工程有重疊之處,例如有時設計規格中包含工程的部分。

設計不是產品管理,設計是在計畫產品本身的空間、表徵、行為,產品管理則是計畫如何推動這項產品以及促進產品團隊。

最後,筆者認為:設計是計畫,計畫帶來讓人們感到有助益的新事物。

五、什麼是數位產品設計師?

原文連結:What’s a digital product designer?

產品設計師(本文指的是數位產品)很搶手,但定義不一,每間公司的職責內容跟工作需求都稍有不同,作者認為其與使用者體驗設計師不同之處在其定位與範疇更廣,會參與到打造產品的所有過程。

產品設計師是一個跨領域的角色,但不代表要全部自己來,只是多少每件事都得涉略。作者假定的產品設計師技能包含商業思維、使用者體驗設計、互動設計、介面設計、文案寫作、動態設計(Motion Design)、音效設計、程式編寫、內容設計、營銷、使用者應用程式商店優化 /搜尋引擎優化、使用者測試與分析。

圖片來源:What’s a digital product designer?

產品設計師的角色像樂團指揮,是具有多個廣泛技能和一到兩個精深技能的 T 形人才。要與各團隊成員協作,才能打造出好產品。

策略思維應該是產品設計師的核心技能之一。設計不是藝術,最終還是得將產品賣出去。研究市場、競爭對手,目標用戶和專案可行性,才能在有限的預算中提出真正能落地的解決方案。

市場營銷很大程度上決定了產品壽命。產品設計師應該要思考如何在產品問世之前就把目標用戶對其的興趣激到最高。也因此應用商店優化(ASO)與搜索引擎優化(SEO)也在其必備技能包中。如果產品賣不出去,那在概念和/或執行上必定存在著根本性的錯誤

除了多數熟知的使用者經驗設計、介面設計、互動設計、使用者測試與分析,以及動態設計外,文案寫作、內容設計與音效設計等有助於制定產品調性(Tone)的能力也都在產品設計的範疇中舉凡按鈕內文字到網頁中該放哪些內容,產品設計師都會參與到。

產品設計師要會寫程式碼嗎?簡單來說,不用,但懂的話對評估專案可行性與如何與工程師溝通都會很有幫助。

六、設計的意義

原文連結:The meaning of design

為意義設計
設計不再只是做出漂亮的介面或好用的流程,而是影響消費者在每一個接觸點(touchpoints)的經驗。消費者需要的不只是一個可以用的商品,而是可以帶給他們意義的商品。人們想透過他們使用的產品和服務來形塑自己、賦予生活意義。

設計目的演變: 好用的(usable) 使人愉悅的(delightful)有意義的(meaningful)
Making Meaning 一書中提出 15 種人們所嚮往有意義的經驗,分別為成就(Accomplishment)、美麗(Beauty)、社群(Community)、創造(Creation)、職責(Duty)、啟蒙(Enlightenment)、自由(Freedom)、和諧(Harmony)、正義(Justice)、統一(Oneness)、救贖(Redemption)、安全(Security)、信任(Truth)、驗證(Validation)、奇妙(Wonder)。

「為意義設計」案例
案例一:遠端協作
在過去的遠端協作中,筆者團隊在乎員工如何工作、溝通、遠端合作。經研究發現,「渴望將工作做好」是驅動員工的中心概念。人們想要表現得有價值、想和他人有深厚的關係、想一起創造事務。因此深層意義即是成就、創造、社群。

案例二:遊戲、娛樂
筆者團隊想探究玩遊戲或享受娛樂中的人們所追求的意義。人們仰賴這類的娛樂來逃離現實,而這就是遊戲的任務:帶給消費者樂趣。而對消費者的深層意義來說即是,自由、奇妙、社群。

案例三:Google翻譯

一個不會英文的敘利亞家庭搬移到加拿大,遇到語言上的困難。此影片並非只傳達Google翻譯的好用功能、或良好的使用者經驗,他們反而著重在傳達這個工具帶給使用者的意義,即不再因語言而沒自信,讓漂泊的難民也能獲得社群、安全、成就。(此段為轉譯者觀影後感想,本文作者僅形容此影片扣人心弦,實際感受歡迎大家看此影片,體驗影片想傳達的意義。)

意義對企業也很重要
為意義設計並非只對使用者有好處,也是企業(business)成功的關鍵。傳遞有意義的經驗給消費者,可以獲得更多他們的認同以及和品牌的連結,品牌忠誠度隨之上升。這樣的互動方式會更有深度、持久。

所有和消費者的接觸點,都是我們傳遞意義給使用者的機會。不管你是設計師、產品經理、行銷、或開發者,都可以讓你的作品或決策,向著「傳遞意義給他人」的目標前進。

七、你真的想成為 UX 設計師嗎?那些學校沒有教你的事

原文連結:Do you really want to be a UX designer?

近年來 UX 成長快速,讓越來越多人想投入這個領域;為了成為 UX 設計師、取得第一份工作,許多人會去攻讀學位、準備作品集。UX 是個很好的職涯選擇,但它獨特的挑戰是人們一開始不知道的。因此,以下是筆者歸納的幾件事:

被拒絕是設計師的日常
UX 設計師是在第一線將產品概念化(Conceptualization)的角色,所以你會不斷地被別人否決你的設計。但是,你的判斷能力會隨著時間經驗提升,也更能察覺可避免的錯誤。

萬事起頭難
想出新點子不容易,而當你成天被產品經理或利害關係人(Stakeholder)追著跑,你更難花心思構想。但你會在練習的過程中更了解如何運用自身能力與同事合作。

也許你沒有你想像中的厲害
剛進入職場時,你或許會覺得你的設計很棒,但在數年後回頭檢視時有截然不同的想法。你需要學習的是如何與自我懷疑(Self-doubt)共處,進而激勵自己提出更好的方案。

永遠都不會有完美的一天
你永遠都不會有精通 UX 的一天。你會在過程中成長變成更好的設計師,但同時 UX 也不斷地在成長。如果你能夠在探索過程中習慣面對未知,你會發現更多樂趣。

理解比辯解更重要
即便UX的發展已比過去更加蓬勃,你還是會遇到不重視 UX 的人。你在工作中會不斷地提倡UX的價值、不斷地解釋好的設計如何能夠改變產品的體驗、甚至在團隊裡提倡設計思考(Design Thinking)。在這個過程中,你會發現比起讓別人理解自己,讓自己理解他人更重要。

在團隊裡凝聚設計共識
也許,你需要花費數年的時間理解 UX 的本質 —解決問題以及化繁為簡,而非討論美醜。即使聽起來很老派,但你在探索時終究會體認到這一點,而你也會逐漸養成自己的願景(Vision)及價值觀。

找尋設計的意義
當你每天下班時,自問從加入團隊後,產品因為你有了什麼樣的改變。如果你對於這問題沒有合適答案,那也許你已沒有繼續待著的意義。

結語
「你真的想成為一個 UX 設計師嗎?」
「你已經準備好面對眼前的挑戰了嗎?」
「在面對各種失敗後,你可以再接再厲並持續精進嗎?」

如果你對以上問題給予肯定的回答,那就繼續追尋目標吧;如果沒有確定的答案,那請謹慎思考,因為以上這些情況在設計師的世界裡會持續存在。若你是帶著成為 UX 設計師的想法閱讀本文章,希望這些內容能帶來一些啟發。

八、身為一位有創意的設計師是什麼意思呢?

原文連結:What it means to be a designer who’s creative

「設計師和藝術家就不能夠相輔相成嗎?」
很多時候,設計師也會身兼藝術家的角色,但作為設計師不應該為了美感犧牲原本該有的功能性和價值。

在 dribbble 及 Behance 等設計平台上受矚目的作品大多是擁有絢麗的視覺表現,但這些作品很多都是偏藝術創作而非真正實現設計價值的作品。真正被執行恰到好處的設計,是會考慮解決使用者的問題來創造出愉悅及優美的體驗。

藝術家注重在情感的表達及技巧的展現,而設計師則注重在解決使用者的問題並創造產品的價值。

拿捏「創意」,形隨機能(Form follows function. by. Louis Sullivan)
設計本身就是一個實現創意的行動,如果讓你的設計變成了一副藝術作品,就可能會犧牲原本該達到的設計目標。

不要為了創新而創新。人們對於學習額外的操作方式逐漸感到疲累和厭煩,反而是看似缺乏創意卻遵循原則的產品對使用者來說才是被設計完善的最佳示範,這也可以解釋為何市面上的智慧型手機都越長越像。

當設計兼具「獨特性」和「實用性」時,創意才是有價值的。

如何創造「獨特性」
獨特的設計需要先有一套制式的規範,且需要和其他事物進行比較才會感受到。現今的數位產品也是建立在一套規範下 — 硬體尺寸、運算速度、操作系統及平台規範等。

有創意的設計師在設計過程中不會去忽略這些已經建立好的準則,不然那就稱不上是獨特,只是在發揮想像力。

如何創造「價值」
當一件作品產生價值,代表有達成原先設定的目標在開始設計之前,必須先擁有一個輪廓清楚的目標。

為設計結合獨特和價值
當你了解創意的兩大要素「獨特」和「價值」後,你可以更輕鬆地將它在設計中,在提供價值及獨特之間會去斟酌和做取捨以達到平衡。

觀看清單

一、設計師怎麼產出新點子

講者 Milton Glaser 從平面設計師的角度來解構如何產出所謂「新」的點子。

創作面
分辨一系列創作的主題(Theme)和其變形(Variations),當自己能像是看待大自然般地看待他人的創作主題時,一個設計師才開始能夠開創自己的變化。就像 Glaser 為了慶祝畫家 Piero della Francesca 的一系列創作,是在他發現其中一幅畫作可改變的空間後才開始的。

不斷質疑設計的限制,通常新的點子就從這些質疑冒出。例如,為什麼海報不能有說明文字?為什麼海報只能是方形?為什麼海報是平面的?

溝通面
接受別人批評自己的點子,而不是全然相信那些點子,這些舊的點子才有機會變成新的點子。但同時也要對自己的設計有信心,別人才會願意給意見,才會相信你的設計。

每次設計都準備兩個產出,當客戶不喜歡一個點子時,就拿出另一個吧!

心態面
欣然接受「沒辦法回答的問題」。設計時會遇到些問題,而那些問題是自己沒有答案的,例如 Glaser 曾需定義什麼是藝術,絞盡腦汁都沒有一個最適合的答案,就在他放棄回答這個問題後,轉念認為藝術就是任何事後(Art is whatever),他便發現更加有趣的設計元素和深層涵義。

這兩張海報闡明了 Glaser 對藝術的想像。在左圖,Glaser 引用了畫家 Magritte 的 The Son of Man 表達他對超現實主義逐漸過時的看法。並以 Art is whatever 一句點出當代藝術的包容性、自由度(It ain’t what you do, it’s the way that you do it. The four hats shown in the poster suggests how art might be defined: as a thing itself, the worth of the thing, the shadow of the thing, and the shape of the thing. Whatever.” )。(資料來源 1 & 2

二、抽象:設計的藝術

影片連結:Abstract: The art of design

三、打造好設計的首要秘訣

影片連結:The first secret of great designVoiceTube 中文翻譯

四、三種方法產生讓你愉悅的好設計

人們過去說:「Don Norman 的出發點很好,但如果按照這種做法,只會做出好用但很醜的東西。」,Don Norman 在演講一開始用了斯塔克果汁機(Philippe Starck juicer)與日本生產的萬能小刀的比較,相比前者的好看卻因為鍍金而標示不能榨汁,萬能小刀的精緻和實用,顯示出產品設計其實能夠美麗與實用兼具。

Don Norman 額外舉了稀鬆平常的設計,當你在 Google上進行搜尋得到的十頁搜尋結果,Google 不直接用「有 73,000 個搜索結果,這是前 20 個」的呈現方式,而是巧妙地展開自己的標誌,運用很多個符號 O 代表有很多結果頁面,這就是簡單又很細膩的設計。

Google 搜尋結果頁面的設計

情緒常常影響著我們思考問題的方式,當你處於焦慮狀態時,大腦裡的神經傳導物質會加速運轉,讓你更容易集中精力,沉浸在當下思考的氛圍裡;當你感到快樂的時候,更多的多巴胺會輸送到大腦前額,讓你的思考轉換為以寬度為先(breath-first),並且能夠跳出框架 — 這就是腦力激盪的本質。在腦力激盪的過程中玩遊戲,不要批評點子,於是各種稀奇古怪的想法就都會出現了。

Don Norman 的三大情緒理論,分別是知覺層面、行為層面以及反思層面。

一、知覺層面(visceral level)
人的大腦是由生物漫長演化出來的,我們不喜歡苦味、不喜歡噪音、不喜歡皺眉的臉、喜歡對稱的臉孔,這些都是基於本能層面的情感。設計上可以通過不同方式表達這種情感,例如字體、顏色的選擇,或是1963年的獵豹汽車(Jaguar)。

二、行為層面(behavior level)
生活中大多數事情都是因為熟練而自動化的,行為設計就是讓使用者感到一切都在掌控之中,包含像是易用性、容易理解、質感與重量(feel and heft),諾曼更拿出以前在芝加哥四季酒店買的羅納福特斜體茶壺(Ronnefeldt tilting teapot)當做例子,看似跟一般茶壺沒有不同,但是要用的時候,需要將它躺放在桌面,將茶葉放進去並加上水,茶葉會放於茶壺劃分好的線的右手邊,一旦茶好了,可以把茶壺放回正,茶與水就會被分開來。除此而外,茶壺本身也在進行一種交流,它會向服務員發出訊息:「看,茶弄好了。你看我站起來了」,這時服務員會過來問: 「是不是需要多一點水?」。

三、反思層面(reflection level)
這裡指的是佛洛伊德所言的超我(superego),也就是意識之所在,假如你現在決定買一輛通用汽車公司的汽車,唯一的解釋是你關心環保而選擇買,哪怕最初幾輛會是天價,並且沒有完整的保修,但這就是反思性設計的體現。

反思時間

花點時間檢視以下的問題,然後在某處寫下你的答案(例如:Google Doc),將它視為你的日記,當作你紀錄截至目前所學所思的地方。

  1. 對你而言,設計是什麼?你為什麼想成為設計師(寫下三個原因)?你認為哪些產品或服務設計得好?為什麼?
  2. 在你現在的職涯,有哪些問題或不確定性(寫下三個)?
  3. 你希望你所設計的產品對週遭世界產生什麼樣的影響?對於使用者以及他的社群,甚至是整體社會,你希望你的產品可以幫助他們完成什麼樣的行為?

來實踐吧

練習一
挑選幾個心儀的企業,並查看他們是否有開設計職缺。

練習二
工作內容裡包含哪些技能是?他們如何描述這個職位的職責與挑戰?

練習三
尋找幾位有經驗的設計師,觀摩他們的成品、專案以及作品集,尤其是那些正在做你有興趣的事的前輩。觀察他們如何定義他們的工作?他們的職涯歷程看起來是什麼樣子?他們如何表達成品?他們之間有什麼相似點或相異點?

你可以從以下幾個地方開始:
Linkedin
Girls in Tech Taiwan
Taiwan UI/UX Designers
UX 四神湯
AAPD — As a Product Designer
Product design shots on Dribbble
Interaction gallery on Behance

這份指南得以中文的姿態出現在設計師社群中,都要歸功於自告奮勇的轉譯團團員:Steward Tsou(星際廢話線 Murmurline)Christy HuangIrene Chuang吳健群Mooon.CLily Pai、Andy Kao、Chi-Yu Tsai、Erin Huang,感謝你們!(此翻譯已經過原作者同意授權)

👉 原文連結:The Guide to Design — Why Design? Why Now?

--

--

Jasmine Lin

UX Designer / Information Architect from Taiwan, now living in Seattle.