交互設計完整入門指南
交互設計起源于web圖形界面設計,但到今天已經發展成一個獨立領域。不僅僅是處理文本和圖片,交互設計師要負責創造屏幕上任何一個和用戶體驗相關的元素:點擊、滑動、鍵入等。對于有興趣更多了解交互設計的人來說,本文是一個很好的起點。為此,我們將從相關歷史、指導原則、杰出貢獻者和工具等方面簡要介紹這個引人入勝的學科。
- 一、什么是交互設計?
- 二、常用設計方法
- 三、日常工作任務和交付成果
- 四、行業杰出貢獻者
- 五、推薦工具
- 六、行業內知名協會
- 七、推薦書籍
一、什么是交互設計?
交互設計協會(IxDA)的定義如下:
“交互設計定義了交互系統的結構和行為,交互設計師致力于在人們和他們使用的產品和服務之間建立有意義的關系,從計算機到移動設備再到應用等。交互設計的實踐范圍與世界的發展同步?!?/p>
從第一個屏幕被設計的那天起,交互設計就誕生了, 從按鈕、鏈接到表單字段都是交互設計的一部分。 在過去的幾十年中,出版了許多書籍從各方面來解釋交互設計,并探索它與體驗設計交織重疊的方式。
交互設計已經發展成為促進人與環境之間關系的交互,與考慮系統內所有與用戶有關的因素的體驗設計不同,交互設計師只需關注用戶與屏幕之間的特定交互。當然,在實踐中并沒有這么清晰的界限。
二、常用設計方法
雖然交互設計涵蓋了Web站點、移動應用程序等類型,但依然存在一些可供所有設計人員借鑒的方法。這里我們將探討一些常見的方法:目標驅動設計、可用性、五個維度、認知心理學和人機界面指南。
1. 目標驅動設計
Alan Cooper最早在他的著作《The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity》(1999年出版)中提出了目標驅動的設計方法。
Alan將目標驅動設計定義為一種“把解決問題作為最高優先級”設計。換句話說,目標驅動設計首先關注的是滿足最終用戶的特定需求和愿望,而不是舊設計方法,后者側重于技術方面的可行性。
在今天開來,Alan提出的一些觀點似乎很顯而易見,因為設計師很少僅根據開發限制來選擇交互。 然而,從本質上講,以“滿足最終用戶的需求和愿望”為設計目的在今天同樣有必要。
Alan認為在目標驅動設計的過程中,需要作為交互設計師的我們進行五次轉變。
(1)Design first,program second
設計第一,程序第二。
換句話說,目標驅動設計首先應考慮用戶如何交互以及界面如何展現,而不是從技術考慮開始。
(2)Separate responsibility for design from responsibility for programming
將設計責任與編程責任分開,指的是對最終用戶負責的交互設計師的必要性,而不必擔心技術限制,設計師應該信任他開發人員能夠處理技術方面的問題。事實上,Alan Cooper認為如果不這樣做,設計師就會陷入利益沖突。
(3)Hold designers responsible for product quality and user satisfaction
讓設計師對產品質量和用戶滿意度負責,雖然利益相關者或客戶會有自己的考量,但交互設計師對屏幕另一側的用戶負有責任。
(4)Define one specific user for your product
為您的產品定義一個特定用戶,這個特殊的想法現在已經發展成為與用戶研究相關的東西:人物角色。
然而,Alan提醒我們將人物角色連接回產品,并不斷問:這個人會在哪里使用它? 他們是誰? 他們想要完成什么?
(5)Work in teams of two
以兩人一組的方式工作。最后,交互設計師不應該在孤島中工作,與Alan Cooper稱之為“設計溝通者”的其他人的合作是關鍵。 雖然Alan在1999年設想的設計傳播者,通常是為產品提供營銷文案的廣告撰稿人,但今天已經擴展到包括項目經理、內容策略師、信息架構師在內的許多人。
2. 可用性
可用性可能讓人覺得是一個模糊的術語,但從本質上講,設計師們只是在問:“有人能輕易地使用它嗎?”
書上和網絡上有很多解釋,我們一起回顧這些不同的解釋來看看其中的共同主題和細微差別。
在Alan Dix、Janet E. Finlay、Gregory D. Abowd、Russell Beale等人合著的《 Human Computer Interaction 》一書中,可用性有三個原則:
- 易學性:新用戶是否可以輕松學習如何瀏覽界面?
- 靈活性:用戶可以通過多少種方式與系統交互?
- 健壯性:當用戶面臨錯誤時,我們如何支持他們?
同時,Nielsen和Schneiderman解釋說可用性是由五個原則組成的:
- 易學性:新用戶能多容易學會瀏覽界面?
- 效率:用戶執行任務的速度有多快?
- 可記憶性:如果用戶有一段時間沒有訪問過系統,他們對系統界面的記憶程度如何?
- 錯誤:用戶會犯多少錯誤,他們能多快從錯誤中恢復?
- 滿意:用戶喜歡使用這個界面嗎?他們對結果滿意嗎?
國際標準(ISO 9241)也將可用性分解為五個原則:
- 易學性:新用戶能多容易學會瀏覽界面?
- 可理解性:用戶如何理解他們所看到的?
- 可操作性:用戶在界面中有多少控制權?
- 吸引力:界面的視覺吸引力如何?
- 可用性合規性:界面是否遵循標準?
顯然,有一些共同的主題構成了界面“可用”的含義。無論設計師遵循什么樣的可用性原則,對任何界面來說,它都是一個重要的考慮因素。
3. 五個維度
在Bill Moggridge的《Designing Interactions》一書中,交互設計領域的學者Gillian Crampton Smith介紹了“交互設計語言”的四個維度的概念。換句話說,這些維度構成了交互本身,因此它們構成了用戶和屏幕之間的溝通。
最初的四個維度是:文字、視覺表現、物理對象或空間、以及時間。最近,IDEXX實驗室的高級交互設計師Kevin Silver又增加了第五維度:行為。
- 文字:應該是簡單易懂的,并且以一種易于與最終用戶交流信息的方式書寫。
- 視覺表現:圖形或圖像,所有非文本的東西。它們應該適度使用,以免被過猶不及。
- 物理對象或空間:指的是物理硬件,無論是鼠標和鍵盤,還是用戶與之交互的移動設備。
- 時間:用戶與前三個維度交互所花費的時間,包括用戶查看進度進度的方式,以及聲音和動畫。
- 行為:是Kevin Silver在他的文章《What Puts the Design in Interaction Design》中加入的,是用戶與系統交互時的情緒和反應。
使用這五個維度,交互設計師可以更關注用戶在與系統溝通和連接時的體驗。
4. 認知心理學
認知心理學研究的是大腦如何工作,以及在那里發生了什么心理過程。根據美國心理學協會的說法,這些過程包括:“注意力、語言使用、記憶、感知、解決問題、創造力和思考”。
雖然心理學是一個非常廣泛的領域,但有幾個關鍵元素是特別值得重視的,事實上一定程度上助推了于交互設計領域的形成。Don Norman在他的書《The Design of Everyday Things》中提到了許多。
下文是其中一部分:
- 心理模型:心理模型是用戶腦海中對某種交互或系統的期望。通過研究用戶的心理模型,交互設計師可以創建更直觀的系統。
- 界面隱喻:利用已知的操作方式引導用戶進行新的操作,例如:大多數計算機上的垃圾圖標類似一個物理垃圾桶,以便提醒用戶進行預期的操作。
- 可視性:可視性不僅是設計某事物的功能,而且是把它們設計成能完成某功能的樣子。例如:一個看起來可以按下的像物理按鈕的按鈕,是一個可視性設計,以便不熟悉該按鈕的人仍然能夠理解如何與它交互。
5. 人機界面指南
這個描述可能有點不恰當,實際上并沒有一套確定的人機界面指南。然而,創建人機界面指南背后本身就是一種方法論。 大多數主要技術研發企業都制定了指南,包括Apple和Android,Java和Windows。
它們的目標都是一樣的:向潛在的設計人員和開發人員提供建議和指導,以幫助他們創建通用的直觀界面和程序。
三、日常工作任務和交付成果
交互設計師是整個開發過程中的關鍵參與者,他們有一系列對項目團隊至關重要的工作要完成,包括制定設計策略、確定線框圖關鍵交互和原型交互等。
1. 設計策略
雖然界限比較模糊,但可以肯定的是:交互設計師需要知道他們為誰設計,以及用戶目標是什么。
通常,這是由用戶研究員提供的。反過來,交互設計師要評估目標并制定設計策略,要么獨立完成,要么是在團隊其他設計師的幫助下完成。設計策略將幫助團隊成員理解,需要通過哪些交互來促進用戶目標。
2. 線框圖及關鍵交互
在交互設計師很好地了解設計策略之后,他們可以開始繪制界面以及必要的交互。
這里的關鍵在于細節:一些專業人士會在記事本/白板上記錄這些交互,而另一些人會使用桌面應用程序來幫助他們完成這個過程,還有一些人會使用兩者的組合?;騾f作完成或獨立完成,這完全取決于交互設計師及其特定的工作流程。
3. 原型
根據項目流程,交互設計師的下一步要做的是創建原型。團隊可以運用多種方式對交互進行原型設計,這里不再詳細介紹,例如:html/css原型或紙質原型。
4. 保持進步
成為一名交互設計師最難的部分之一就是應對行業變革的速度,每天,新的設計師都會將媒介推向不同的方向,而用戶希望這些新的互動方式能夠出現你的的網站上。謹慎的互動設計師會通過不斷探索進行新的互動,并利用新技術來應對這種演變。
但同時需要明確正確的互動或技術才是最能滿足角色需求的,而不一定是哪些最新的或最令人興奮的,交互設計師也可以通過關注社交媒體上的思想領袖以推動自己學習和進步。
四、行業杰出貢獻者
1. Alan Cooper
Alan Cooper 于1992年聯合創立了Cooper公司,他以在軟件設計領域中人性化技術方面開創性的工作而聞名。 他還著有《About Face: The Essentials of Interaction Design》(1-4版)和《The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity》等書,被認為是“Visual Basic之父”。
他還創造了目標導向的設計方法,并發明了“personas”(角色)這種實用的交互設計工具,以創造出令用戶滿意的高科技產品。
2. Brad Frost
Brad Frost正在領導一次變革“Death to Bullshit”(死于廢話)。“Death to Bullshit”的目標是“讓世界擺脫胡說八道的吶喊,以及尊重用戶和他們的時間的需求體驗?!?/p>
Brad Frost以網頁設計師的經驗鼓勵同行作為作家、顧問和演講者參與到這次變革中。雖然Brad在技術上是一名前端開發人員,但開發人員和交互設計師之間的界限本就不明顯,他的工作對交互設計社區產生了巨大影響,當前部分原因在于他創建的工具和資源。
這些資源包括:This Is Responsive、Pattern Lab、Styleguides.io、WTF Mobile Web和Mobile Web Best Practices。Brad還提出了Atomic Design(原子設計)的概念,并寫了一本書。
3. Whitney Hess
Whitney Hess給自己的人生使命是“讓人性重回商業”,Whitney致力于推動“Designing Yourself”, 除了寫在自己的博客Pleasure & Pain中, 還在全球的會議和協會發表演講。她在卡內基梅隆大學(Carnegie Mellon University)獲得人機交互碩士學位、專業寫作和HCI學士學位,并于2014年成為New Ventures West的認證教練。
4. Kim Goodwin
Kim Goodwin是暢銷書《Designing for the Digital Age》的作者,Kim目前為航空、消費電子和零售等不同行業的客戶提供咨詢服務。
在過去十年的大部分時間里,她在Cooper公司擔任副總裁、設計和總經理,負責交互、視覺和工業設計師的綜合實踐,以及著名的“Cooper U”設計課程的開發。她豐富的經驗和對教學的熱情,使她成為世界各地會議和協會的作家和演說家。
5. Brenda Laurel
Brenda Laurel參與了人類使用計算機的幾個主要變革:虛擬現實,互動敘事以及一些新的游戲和人工智能方法。
她曾擔任加州藝術學院設計研究生課程的創始主席和教授,她曾在Atari工作,和別人共同創辦了游戲開發公司Purple Moon,并擔任多家公司的互動設計顧問,包括:Sony Pictures、Apple和Citibank。
6. Mat Marquis
Mat Marquis是另一位互動設計師,他模糊了設計師和開發人員之間的界限。他是A List Apart的技術編輯,負責設計師和開發人員的文章,以幫助設計界的教育,他還參加過幾次An Event Apart的會議。
他是Responsive Images Community Group的主席,這是一個在響應式設計中尋求圖像解決方案的組織。他還是開源社區的積極成員,幫助其他設計師通過相互合作來推動他們的工作。Mat最近在一家建立開源項目的網絡平臺咨詢公司Bocoup。
7. Karen McGrane
Karen花費了超過15年的時間通過可用性、用戶體驗設計和內容策略使網絡變得更加美好。2006年,她創立了Bond Art + Science,這是一家為The Atlantic,Fast Company,Franklin Templeton以及Fidelity等公司提供用戶體驗咨詢的公司。
Karen參與內容策略、用戶體驗和信息架構的工作,并在紐約視覺藝術學院的交互設計課程中教授設計管理。除此之外,Karen還擔任風險投資公司Ignite Venture Partners的數字副總裁,并通過A Book Apart平臺編寫Content Strategy for Mobile and Going Responsive的內容。
8. Mike Monteiro
Mike Monteiro是Mule的聯合創始人,Mule是一家以探索位置領域而聞名的設計機構,包括:內容策略、在線認證、以及通過經典永恒的設計把尖端網絡技術融合在一起。
Mike已經寫了兩本書,《Design Is a Job》和 《You’re My Favorite Client》。在這本書中,他向世界宣揚他對努力工作的熱愛,自我意識以及優秀裁縫的重要性。
Mike 繼續在世界各地的會議和聚會上進行前衛的真誠的演講,例如:“This is the Golden Age of Design (and we’re screwed)”類似的主題。
9. Theresa Neil
Theresa Neil是一位德克薩斯州奧斯汀市的用戶體驗顧問,自2001年以來,她主導了100多個網絡,桌面和移動應用程序的設計。客戶包括財富500強企業,非營利組織和奧斯汀市本地的初創企業。
她與Bill Scott(設計師和開發人員)共同撰寫了《Designing Web Interfaces》一書,并撰寫了《Mobile Design Pattern Gallery》以幫助設計人員進行移動應用和智能手機設計。 她的作品可以在www.theresaneil.com上看到。
10. Don Norman
Don Norman研究真實的人如何與設計互動,探索設計師的意圖與普通人的實際需求之間的鴻溝,他的作品已經成為了經典書籍,包括《The Design of Everyday Things》在內,這本書被認為是用戶體驗設計經典的入門書籍。
11. Dan Saffer
Dan Saffer在Twitter工作,負責戰略設計項目。他以前是Jawbone的新產品創意總監,在那里他為可穿戴設備和消費電子產品設計了下一代產品和服務。
Dan撰寫了許多關于設計的書籍,包括《Designing Devices》、《Designing for Interaction》、《Designing Gestural Interfaces》。他的新作《Microinteractions》也于2013年出版了。
12. Brenda Sanderson
Brenda Sanderson是擁有50,000多名成員的IxDA協會的執行董事,IxDA是致力于全球網絡的交互設計專業實踐。超過15年的設計經驗為Brenda帶來了設計工作室、印刷店、報紙出版公司和廣告公司。 她因其優秀的設計工作、研究技術對創意領域的影響,而在全國范圍內獲得知名度。
13. Bill Scott
Bill Scott于2006年幫助雅虎創建了設計模式庫,自那時起,他對模式庫的研究已經影響了全世界的設計師。 Bill是一名設計師和開發人員,他的工作包括創建3D圖形庫,為NATO做界面設計以及負責許多開源項目。 他與Theresa Neil共同撰寫了《Designing Web Interfaces》,并經常作為會議發言人出席活動。
五、推薦工具
交互設計師使用許多不同的工具來完成他們的工作,無論是在餐巾紙上繪制還是向客戶展示原型,他們的目標都是相同的:通過對話進行溝通。
1. Balsamiq Mockups
Balsamiq Mockups是一款Adobe Air應用程序,可輕松實現線框圖交互。 Balsamiq團隊的工作非常出色,為用戶提供了許多與當代應用程序設計完美契合的交互設計模式。
更重要的是,Balsamiq始終保持界面簡單,使用手繪風格的元素和手寫字體。 通過消除無關的設計元素,設計師和利益相關者可以將他們的工作(以及他們客戶的反饋)集中在交互上,可以把它想象成紙質原型的在線版本!
2. InVision
InVision 是一款適用于Mac和Windows的免費網絡和移動原型制作工具,InVision旨在促進溝通,并可以和Photoshop、Sketch、Slack、Jira等其他應用程序集成。
設計人員可以通過網絡上傳線框并將它們串聯在一起,形成2D導航體驗??蛻?、利益相關者和同事,都可以直接在設計上添加評論,通過InVision的實時演示工具LiveShare,該應用程序可實現實時白板。
3. LucidChart
LucidChart是一款靈活的圖表軟件,適用于從Android和iOS體驗設計到流程圖、站點地圖、線框和網站模型的所有內容。
LucidChart提供了許多有用的集成,包括Google Suite、InVision、Atlassian、Slack等。該工具配置非常復雜,但同時又直觀且靈活,它深受設計和用戶體驗團隊以及IT支持團隊和工程師的喜愛。
4. Patternry
沒有人愿意浪費時間重新發明輪子,優秀的交互庫可以節省時間和精力進行設計或編碼通用交互,并確保設計的一致性。Patternry允許交互設計團隊,在一個中心位置(即庫)共享和存儲他們的設計和代碼資產。 Patternry的優點在于它不僅僅是一個存儲庫,它還提供了一個起點,有許多常見的交互模塊。
5. Sketch
Sketch是一種設計工具(僅限Mac),最適用于圖標或中高保真模型。作為Adobe Photoshop的輕量級替代品,Sketch提供圖層,網格和畫板等功能。
簡而言之,交互設計師可使用其中的視覺元素快速創建線框和模型。Sketch還有許多插件,如:Zeplin等。
6. Axure
Axure RP可以說是市場上最好的交互設計工具,擁有比Balsamiq更強大的功能,如:協作和共享,以及輕松將線框轉換為原型的能力,Axure似乎提供了一切。一個缺點是它提供太多功能,這意味著它的學習曲線很慢。
7. Principle
Principle是一個開源平臺,專注于功能和轉換。它基于Sketch畫板進行布局,并提供各種各樣的動作。這是一個免費,易于學習的界面,提供一整套YouTube教程和幫助文章。
最酷的部分是,當你將畫板構建成一個動人的,有凝聚力的東西時,Principle會為你提供一個可以在單獨窗口播放的工作原型,它也有一個內置的屏幕錄像機。
六、行業內知名協會
尋找其他設計師是與該交互設計領域的其他人,建立聯系和學習的一種很好的方式。以下這些協會都可在美國查詢到,有些也存在于國際上。
1. IXDA
用他們自己的話說:IxDA提供了一個在線論壇用于討論交互設計問題,和其他平臺一樣供那些熱衷于交互設計的人收集信息和推進該學科的發展。IxDA還為設計師提供年度會議,名為“互動周”,該會議遍布全球,為行業持續行業專家的一流內容和見解。
http://www.ixda.org/
2. AIGA
雖然AIGA(American Institute of Graphic Arts美國圖形藝術學院)最初是為平面設計師創立的,但該組織意識到平面設計師更頻繁地為新媒體設計作品,其中交互設計起著重要作用。會員遍布美國各地,并舉辦各種活動,從Photoshop Layer Tennis到藝術展覽等。
http://www.aiga.org/
3. An Event Apart
在過去的13年里,An Event Apart在美國各地舉辦,匯集了最新的網絡和互動設計的聲音。 這個會議以密集的三天單軌形式提供,最多有18個演講嘉賓。主題清晰易懂,涵蓋開發人員、設計人員、用戶體驗和用戶界面專家、客戶經理、項目經理等相關內容。An Event Apart一直擁有一些業界領先的思想家和實干家。
https://aneventapart.com/
3. Meetup
坦白說沒有一個Meetup小組,這就是它的美妙之處:在Meetup界面上搜索“交互設計”或訪問http://ia.meetup.com/,您將找到大量的網絡組、教育組和社交組。
如果您碰巧生活在尚未存在交互設計(或用戶體驗設計)聚會的區域,那么現在是時候開始了! 碰巧,Meetup的界面也可以輕松啟動新組。
http://www.meetup.com/
七、推薦書籍
與交互設計相關的書籍清單特別多, 在這里,我們將列表縮小為幾本經典書籍。但是,如果您真的想要擴展您的庫,請查看我們為您推薦的用戶體驗書籍。
《Designing for Interaction: Creating Innovative Applications and Devices (2nd Edition)》
by Dan Saffer
Dan Saffer介紹了我們周圍的世界,以及我們每天所經歷的互動,他的書打開了設計世界,并以一種易于理解的方式展現出來。它同時是一本示例書,以及創建可用產品和設計策略的方法。
《Designing for the Digital Age: How to Create Human-Centered Products and Services》
by Kim Goodwin
在為數字時代設計時,Kim Goodwin認為:我們需要接受所有的產品和服務因其技術限制和機遇而變得更加復雜的事實。無論有多么令人難以置信的功能,我們都不能忽視數字領域給用戶帶來的混亂。Goodwin探索了設計師面臨的利益和挑戰,并提供流程和活動,以減少混亂并提供更好的體驗。
《Designing Interfaces》
by Jenifer Tidwell
多年來,《Designing Interfaces》已經變得無處不在,它的綽號“帶有鳥的書”已經為人所知。它如此受歡迎是因為:Jenifer Tidwell解釋了最佳實踐,提供豐富的例子,為讀者留下足夠的方法和指導來激發未來的設計。
《Interaction Design: Beyond Human-Computer Interaction》
by Yvonne Rogers
在第三版中,Rogers的書提供了我們在技術和道德方面的設計方式。每一章都有助于為“如何設計增強和擴展人們交流,互動和工作方式的互動產品”提供基礎。本書包括案例研究、示例、問題以及對未來趨勢的洞察力。
《The Design of Everyday Things》
by Don Norman
《The Design of Everyday Things》是經典之作,正是這本書將設計從“最好有”變成了必需品。在其中,Don Norman探索了在日常生活中可用且直觀的設計的價值,他總結了了一系列要遵循的規則,以便創建簡單,實用的產品和輕松的體驗。
《Don’t Make Me Think》
by Steve Krug
一本簡短但有力的書,《Don’t Make Me Think》兼具趣味和信息。在其中,Steve Krug介紹了已被證明的交互的基礎知識。Krug作為可用性顧問的經驗為他提供了大量現實世界的例子,并為每個交互設計師要面對的問題提供了具體的解決方案。
翻譯:Complete Beginner’s Guide to Interaction Design
原文地址:http://www.uxbooth.com/articles/complete-beginners-guide-to-interaction-design/
本文由 @張鵬濤TAO 翻譯發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
有沒有中文書推薦一下呢……樓主
給自己刷個評論
可以加作者個wx人生就完美了!
這個可以
謝謝,很棒,只是英文都不知道啥意思,看不懂的情況還的找翻譯
好
好
666
6
好