互動設計需要多久才能學會（寫給零基礎新人的互動設計入門完全指南）

2023-07-29 03:53:39 2

互動設計起源於網頁和平面設計，但目前已然成為了一個獨立的領域。遠遠不止文字和圖片，互動設計師要對在屏幕上創造的每一個元素負責，比如用戶會滑動、點擊、輕觸和輸入，簡言之，他們對一切體驗的交流互動負責。

什麼是互動設計？

常見方法

日常工作和交付物

可以關注的大神

常用工具

知名協會

書籍

什麼是互動設計？

「互動設計（IxD）定義了交互系統的結構和行為。隨著時代的發展，從計算機到行動裝置，再到電器以及其他種種，互動設計師努力地在人、產品以及他們使用的服務之間創造有意義的關係。」

——The Interaction Design Association（IxDA）

從互動設計誕生之日起，界面就不僅用來呈現靜態內容。從按鈕到連結再到表單域，所有相關事情都是互動設計的一部分。在過去的幾十年中，許多書籍已經解釋了互動設計的方方面面，並且探索了大量的、與體驗設計交叉或重疊的領域。

△ 目標驅動的設計

1. 設計第一，開發第二

目標驅動的設計首先考慮的是用戶如何交互（和東西看起來怎麼樣！），而不是首先考慮技術問題。

2. 劃分設計和開發的職責

這指的是我們需要互動設計師站在終端用戶的這一邊，不需要擔心技術限制。一個設計者應該信任他的開發者可以處理技術層面的問題；事實上，Alan Cooper表示，如果不這麼做就會將設計師置於利害衝突之中。

3. 設計師要為產品質量和用戶滿意度負責

雖然利益相關者或者客戶有他們自己的目標，但是互動設計師要為屏幕另一邊的人（用戶）負責。

4. 定義一個明確的用戶

這個概念已經被發展為用戶研究中的：用戶角色（Personas）。Alan的這個觀點還在不斷地提醒我們要把用戶角色和產品聯繫起來，並且不斷追問：用戶角色會在什麼情境下使用這個產品？他或者她是誰？他或者她想完成什麼？

5. 在多個團隊中工作

最後一點，互動設計師永遠不能單打獨鬥。Alan Cooper 稱互動設計師為「設計交流者「，與他人合作是非常關鍵的。儘管在1999年Alan想像中的「設計交流者」就是一名為產品提供市場運營情況的分析員，但在今天，這個概念已經擴展為包含項目經理，內容運營，信息架構師在內的諸多角色。

回到具體合作，可以參考這幾篇國內的經驗合集：

《頂尖高手的分享！互動設計師如何與他人合作？》

《職場實用經驗！聊聊互動設計師與開發溝通的技巧》

可用性

可用性聽起來是一個含糊不清的詞，但是它的核心正如設計師們常常掛在嘴邊的：「用戶可以簡單地使用它嗎？」這個在無數的書籍以及網絡上都被解釋過了。接下來，我們通過回顧一些不同的定義，發現它們的共通之處以及細微差別：

在《人機互動》（《Human Computer Interaction》）（作者 Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale）一書中，可用性可以被分解為三個要素：

可學習性（Learnability）：對於一個新用戶來說，學習如何在界面中操作有多簡單？

靈活性（Flexibility）：有多少種方式可以供用戶與系統交互？

健壯性（Robustness）：當用戶遇到錯誤時，我們怎麼樣更好地支持用戶？

與此同時，Nielsen 和 Schneiderman 提出可用性由五個要素組成：

可學習性（Learnability）：同上，對於一個新用戶來說，學習如何在界面中操作有多簡單？

效率（Efficiency）：用戶完成一個任務有多快？

可記憶性（Memorability）：如果一個用戶離開這個系統一段時間，他們是否能很好的回憶起界面？

錯誤（Errors）：用戶會造成多少錯誤？他們從錯誤中走出來有多快？

滿意度（Satisfaction）：用戶享受使用這個界面的過程嗎，以及他們對結果滿意嗎？

最後，國際標準（ISO 9241）也將可用性分解為五個要素，如下：

可學習性（Learnability）：同上，對於一個新用戶來說，學習如何在界面中操作有多簡單？

可理解性（Understandability）：用戶能在多大程度上理解他所看到的？

可操作性（Operability）：用戶在這個界面中有多少控制力？

吸引力（Attractiveness）：這個界面有多吸引人？

規範性（Usability compliance）：界面依從規範、標準了嗎？

很顯然，對於「可用」的含義，他們給出了一些共通的答案。不論設計師遵循了哪些可用性要素，對於每一個界面的考慮都是重要的。

互動設計五維度

在Bill Moggridge的書籍討論會上（書名：Designing Interactions）, 一位互動設計的學術研究者Gillian Crampton Smith提出了「互動設計語言」的四個維度。這些維度組成了互動設計本身，也因此構建起了用戶與界面之間的交互。最初的四個維度是：語言、視覺展現、物理實體或空間和時間。就在最近, IDEXX實驗室的高級互動設計師Kevin Silver，提出了第五個維度，行為。

第一維度：語言，應該易於理解，而且應該以易於和用戶交流的方式陳述。

第二維度：視覺表達，指的是所有的圖形或圖像，幾乎就是除了文字的一切。這些都應該有節制地使用，避免溢出而讓用戶難以承受。

第三維度：物理實體或空間，指的是物理硬體，不論是滑鼠、鍵盤，或是用戶手中的行動裝置。

第四維度：時間，指的是用戶在與前三個維度交互時的時間長度。這包括用戶了解其所處進程的時間，也包括聲音和動畫時間。

第五維度：行為，這個維度是Kevin Silver在他的文章（What Puts the Design in Interaction Design）中提出的，指的是用戶和系統交互時的情感和反應。

從這五個維度去思考，互動設計師就可以觀察到用戶和交互系統產生交流和連接時的確切體驗。

認知心理學

認知心理學是一門研究思維如何運作、心智過程如何發生的學科。根據美國心理學協會（American Psychological Association）的定義，這些過程包括「注意力，語言使用，記憶，感覺，問題處理，創造以及思考。」

心理學是一個極其廣泛的領域，但是在認知心理學中有一些理論，對互動設計理論的建立頗為重要。Don Norman曾在他的書《設計心理學》（《The Design of Everyday Things》）中多次提到一些概念，下面是其中一些：

心智模型，指的是用戶頭腦中的圖景，這些賦予他們對特定交互或交互系統的預期。通過學習用戶的心智模型，互動設計師可以設計出自然的、符合直覺的系統。

界面隱喻，指的是採用用戶已知的行為去引導他們產生新的行為。舉個例子，計算機上的垃圾桶圖標，它就象徵著我們平時使用的垃圾桶，這樣可以提醒用戶進行一些可以預期的行為（如：清空垃圾桶）。

功能可見性，指的是我們不僅要設計一個東西並讓它能完成一些事情，而且要設計一個東西，使它看起來就像它能完成這個事情。舉個例子，一個按鈕，如果你把它設計得像一個可以按下去的物理實體，那麼這樣的設計就體現了功能可見性：當一個不熟悉界面按鈕的人也會理解如何去和它交互（知道它可以按下去！）。

人機界面準則

「人機界面準則」，這麼說可能不是很恰當。實際上，沒有一套固定的準則，創造人機界面準則這個想法本身就是一個方法論。世界上主要的技術、設計公司都創造了自己的準則，包括 Apple 和 Android ，Java 和 Windows。他們這麼做的目標都是相同的：給潛在的設計師和開發者提供建議和推薦，從而幫助他們創造自然的、符合直覺的界面和程序。

日常工作和交付物

互動設計師在整個設計、實現的過程中都扮演關鍵的角色，對於一個項目團隊來說，他或者她有一些關鍵的活動，這些通常包括：形成設計策略，製作關鍵交互界面的草圖，製作交互原型。

設計策略

雖然「設計策略」這個東西的邊界不是很明確，但有一點是確定的：互動設計師需要知道「我們為誰而設計？」「用戶的目標是什麼？」，通常，用戶研究員會提供這些信息，然後互動設計師根據這些信息得出設計策略，他可以獨立完成這些，也可以在其他設計師的幫助下完成。制定設計策略，這可以幫助團隊成員達成共同理解：我們需要怎樣的交互去幫助用戶完成目標。

關鍵交互的草圖

在互動設計師有了不錯的設計策略之後，他開始畫草圖，逐漸形成最基礎的交互。巨大的區別在於細節中：有些設計師在白板上畫出交互草圖，有些則使用網頁應用幫助他們完成這個過程，還有些設計師同時使用不同的方式；有些以合作的方式完成這些界面，也有些設計師獨立完成。這些選擇取決於互動設計師本身以及他們特定的工作流程。

原型

取決於項目的不同，一般來講，互動設計師下一步的工作就是製作原型。原型有許多形式，比如HTML/CSS表達的原型，或者紙質原型，這裡就不多講了。

緊跟潮流

作為一名從業中的互動設計師，根據行業變化而及時作出調整是最難的。每一天，互動設計師都在從不同的角度、方向去討論交互相關的問題。也因此，用戶期待看到新的交互方式的出現。明智的互動設計師會回應這些變革，他們不斷地在網絡上探索新的交互，以及不斷地討論新技術的優勢，與此同時，他們也清楚地知道，好的交互或者技術應該是能最優滿足用戶需要的，而不一定是最新的或者最激動人心的。

可以關注的大神

如前所述，現在很難僅僅用「互動設計師」來定義從事此項工作的人。這個領域和其他多個領域存在重疊，如UX設計，UI設計，開發以及平面設計，已因此，下面列出的人也不都是互動設計師。我們列出這些人，因為他們對這個領域做出了卓越的影響，也因為他們提出的概念、想法是非常值得探索的。

Alan Cooper

Alan Cooper是Cooper公司的聯合創始人（1992年）。因為在軟體設計中的開創性工作而被大家所熟知（如人性化的技術）。他也是書籍《About Face 互動設計精髓》（1-4冊）（《About Face: The Essentials of Interaction Design》(editions 1-4)）和《The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity》的作者。被認為是「Visual Basic 之父」，也創造了「目標導向的設計」的方法，以及發明了用戶角色（Personas）來作為互動設計的工具，這些都為創造用戶喜愛的高科技產品作出了幫助。

Brad Frost

Brad Frost是「死於胡扯」的引領者。「死於胡扯」是一個口號：擺脫這個世界上的各種胡扯，我們需要尊重別人以及他們的時間。作為一個網頁設計師，她遵循著這個理念，同時作為作者、顧問和發聲者，她也支持這樣的理念。嚴格地說，她是一個前端開發人員，但是我們知道互動設計和開發之間的距離非常之近。她的工作對於互動設計領域有著巨大的影響，因為他創造了一些很棒工具和資源，包括This Is Responsive, Pattern Lab, Styleguides.io, WTF Mobile Web, 和 Mobile Web Best Practices.

Whitney Hess

Whitney Hess的人生目標是讓人性回歸商業。她是播客Designing Yourself的聯合主持人，Pleasure&Pain的博主，多次在世界各地的大型企業和會議上發表演講。她是卡內基梅隆大學專業寫作和互動設計學士，人機互動碩士，並且在2014年通過New Ventures West認證成為認證導師。

Kim Goodwin

Kim Goodwin是暢銷書《Designing for the Digital Age》的作者，她目前也是許多行業客戶的顧問，涉及航空業、消費類電子產品業和零售業，過去十年中的大多數時間她都作為Cooper公司的副總裁，設計總經理，主導了許多事務：整合了交互和視覺，引領了行業內的設計師，開發了備受稱讚的Cooper U設計課程。她豐富的經驗和熱情使她備受歡迎，常常在世界各地的公司和會議上演講。

Brenda Laurel

在計算機應用領域，Brenda Laurel參與過許多重大革新：虛擬實境，互動敘事以及和遊戲相關的一些新方法。她現在是Arts Graduate Program of Design的加利福尼亞學院的主任和教授。她曾為Atari公司工作，聯合創立了Purple Moon遊戲開發公司，並且擔任過許多公司的互動設計顧問，包括Sony Pictures，Apple，和Citibank。

Mat Marquis

Mat Marquis也是一名互動設計師，他弱化了設計和開發的邊界。他是A List Apart的技術類編輯，通過組織、編輯設計師和開發人員的文章助力整個設計社區的教育工作。他也多次在An Event Apart會議上發表演講。他還主導著Responsive Images Community Group，一個為響應式設計中的圖像尋找解決方案的小組。他也是開源社區的活躍成員，並幫助其他設計師互相扶持，不斷向前。

Karen McGrane

十五多年以來，Karen通過使用用戶體驗設計和內容策略的概念、方法，協助開發了許多更具可用性的數字產品。目前，她管理著一家由她本人在2006年創立的用戶體驗諮詢公司Bond Art Science。在這期間，她主導了The Atlantic，Fast Company，Franklin Templeton，和Fidelity的內容策略和信息架構。同時，她也是紐約的視覺藝術學校互動設計項目的教學人員，她教授「設計管理」這門課程，旨在幫助學生運營項目、管理團隊和實現商業計劃。她也是風險投資公司Ignite Venture Partners管理團隊的成員之一，擔任數字數碼相關業務的副總裁。另外，Karen是書籍《Content Strategy for Mobile》的作者。

Mike Monteiro

Mike Monteiro是Mule的聯合創始人。Mule是一個因探索未知領域而聲名遠播的設計機構，他們探索內容策略，網絡身份，以及一些和經典、永久設計相關的尖端網絡技術。Mike寫過兩本書：《Design Is a Job》和《You’re My Favorite Client》，在這些書中，他向這個世界吶喊出他對努力工作的熱愛，對自我意識的思考，以及工匠精神的重要性。全世界的設計師也以他們的熱情響應著他的吶喊。

Theresa Neil

Theresa Neil是一名用戶體驗顧問，現居於德克薩斯州的奧斯汀。自2001年以來，她已經主導了超過100個網站，桌面和移動應用的設計。客戶包括了眾多的財富500強公司，非盈利組織，以及奧斯汀當地的初創公司。他和設計師、開發人員Bill Scott是《Designing Web Interfaces》一書的聯合作者。他的UX行業從業經歷可以在theresaneil.wordpress.com上找到，他的工作內容也可以在www.theresaneil.com上看到。

Don Norman

Don Norman研究現實中的人們怎樣進行交互行為，探索設計師的意圖與真實使用者之間的障礙和鴻溝。在他的工作下誕生了一些經典的書籍，包括《設計心理學》（《The Design of Everyday Things》），這本書被視為用戶體驗的經典之作。

Dan Saffer

Dan Saffer是一位頗具創造力的領導者，他在Jawbone公司設計新的產品，如下一代產品、可穿戴服務和消費類電子產品等。他也是許多設計類書籍的作者，包括《Designing Devices》和《Designing for Interaction》，他近期的書《Microinteractions》於2013年出版。

Brenda Sanderson

Brenda Sanderson是IxDA的執行董事，IxDA是一個全球性組織，擁有50000 會員，致力於互動設計的專業研究。在超過15年的設計從業生涯中，她參與過許多領域的工作，也涉足過許多行業，如設計工作室，列印商店，每日新聞，出版公司和廣告業。

Bill Scott

Bill Scott協助創辦了Yahoo！並且在2006創立了Design Pattern Library。在那之後，他在範例庫的工作影響了全世界眾多的設計師。Bill是一名設計師，同時也是一名開發人員，他的工作包括3D圖形庫的建立，NATO的戰爭博弈界面設計，還有許多開源項目。他和Theresa Neil聯合編寫了《Designing Web Interfaces》一書。另外，他也是參加了許多大會並發表演講。

國內的互動設計大神有很多，比如：

前阿里設計專家：《優設訪談！阿里互動設計專家劉津的設計管理之路》

阿里的互動設計新人：《設計不畢業！互動設計新手入職之前應該幹點啥？》

常用工具

互動設計師使用多種工具去完成他們的工作。不論他是在紙上畫草圖還是在給客戶展示原型，他們的目標都是一樣的：對話、溝通。互動設計師需要很好的溝通能力。下面列出的工具可以有效促進你的溝通。我們也通常使用一些面向用戶的技術（前端技術比如CSS/HTML）去製作原型以方便溝通。

Balsamiq Mockups

Balsamiq Mockups讓製作交互線框圖更加方便，這款軟體提供了很多設計樣板，並且界面簡潔易用。界面中其中使用了手繪風格，這使得設計師和相關人員可以聚焦在交互和用戶反饋之上。

InVision

InVision是一款免費的網頁和移動端原型設計工具，Mac和Windows平臺都可以使用。InVision是一個開放的平臺，兼容Photoshop，Sketch，Slack，Jira，和其它應用。設計師可以上傳線框圖，然後通過熱區將他們聯繫起來。客戶，相關人員，同事都可以直接在設計下面添加評論。InVision的實時講演工具也可以使用共享白板。

OmniGraffle

OmniGraffle是MacOSX上極其重要的圖表軟體。互動設計師可以利用它讓團隊聚焦於設計中的交互而非整個設計。OmniGraffle提供了很多有趣的特性，包括「點擊顯示」功能，比如展示一個盒子的設計。

Patternry

Patternry讓互動設計團隊可以將他們的設計以及代碼存儲在本地中心，而且非常棒的是，它不僅有一個存儲中心。另外，它也提供了許多交互模塊和模板。

Sketch

Sketch是一款設計工具（目前僅支持Mac），對於圖標設計以及中-高保真原型設計來說，它是很好的選擇。它相當於輕量級的Adobe Photoshop，並且幾乎提供了互動設計師所需要的所有工具。Sketch還提供了許多插件，讓許多設計工作更加方便（如標註、切圖，幾乎一鍵完成），還包括一些促進團隊協作的插件。

Axure

Axure RP無可爭議的是市面上最好的互動設計工具。比起Balsamiq，它有更多強勁的功能，內置的協同和分享工具，還有將相框圖轉變為原型的優秀能力，它似乎提供了一切，但是從另一角度來講，也許正因為它提供的太多了，對於新手來說會有一個緩慢的學習曲線。

UXPin

UXPin是一個合作式設計平臺，支持從低保真到高保真的原型設計。設計師可以從Photoshop或者Sketch中導入他們的設計，然後快速得到反饋。UXPin也提供了許多內置交互模板和自定義的動畫編輯器。它也包括了可用性測試和實時演講的功能。

更多的互動設計神器：《上手親測！資深互動設計師推薦的6大必備神器（附教程）》

知名協會

互動設計師不論屬於哪個特定的組織，他仍然是互動設計師。找到其他設計師建立溝通網絡並互相學習是非常有益的。下面這些是在美國內或國際上知名的協會。

IXDA

用他們自己的話講：IxDA提供了一個網絡社區平臺，使得設計師可以討論互動設計的問題，也使得其他對互動設計有熱情的人聚集在一起並推動這個領域發展。

AIGA

雖然AIGA（美國平面設計協會）最初是為了平面設計師而成立，但他們逐漸意識到平面設計會經常從事一些新媒體的設計工作，其中很大一部分就是互動設計。美國本土的AIGA分支機構經常組織一些活動，如Photoshop Layer Tennis。

Meetup

準確地說，沒有一個叫做「Meetup」的組織，但事情的有趣之處在於：進入Meetup界面，在你所處城市搜索「互動設計」，你可以找到你所處城市的很多相關的組織、團體、交流會。如果你沒有找到的話，也可以自己成立一個。

書籍

下面是一些和互動設計相關的書籍，它們的篇幅都不短。我們在這裡僅僅列出了一些新的、有代表性的的書籍。如果你特別在意擴充自己的「書庫」，可以參看我們的推薦書籍：http://hao.uisdc.com/book/

Designing for Interaction

Dan Saffer帶領你審視周圍的世界，以及我們每天接觸到的交互情境。他的書為你打開設計的世界，並且深入淺出。這本書充滿了實際案例，講解了如何創造可用的產品以及設計的策略、方法。

Designing for the Digital Age

在這本書中，Kim Goodwin大膽提出：我們必須承認，由於技術帶來的限制和機遇，我們的產品和服務已經被設計的過於複雜了。無論我們可以實現多麼讓人激動的功能，我們都不能忽視「數字王國」帶個每個用戶的困惑。Goodwin探討了設計師面臨的機遇和挑戰，並且提出了不會製造困惑的、具有更好體驗的過程和活動。

Designing Interfaces