給交互設計初學者的完全自學指南

 　　想自學交互設計 的同學，你們的福利來咯!今天@IrioLee 這篇譯文，從什麼是交互設計 /常見的交互設計方法/日常任務和交付成果/好用的設計工具/書籍等多個方面從頭開始做了一遍梳理，技多不壓身，視覺設計師也可以來給自己充個電!

　　交互設計起源於網站設計和圖形設計，但現在已經成長為一個獨立的領域。現在的交互設計師遠非僅僅負責文字和圖片，而是負責創建在屏幕上的所有元素，所有用戶可能會觸摸，點按或者輸入的東西：簡而言之，產品體驗中的所有交互。

　　這篇文章對有興趣學習更多關於交互設計的知識的人來說是一個很好的起點。我們將會簡要討論交互設計的歷史，相關的指導原則，值得關注的貢獻者，以及有關這個迷人學科的工具。

　　一、什麼是交互設計?

　　交互設計(IxD)定義了交互系統的結構和行為。交互設計師努力在用戶和用戶使用的產品或者服務間創建有意義的關聯，不管是從電腦到移動設備，家用電器或者其他。我們的實踐會與世界一同不斷發展。”——交互設計協會(IxDA)

　　從第一台用來容納靜態副本以外的信息的屏幕被設計出來的那天開始，交互設計就開始了。從按鈕，鏈接到表單的一切都是交互設計的一部分。在過去的幾十年裡，有許多相關的書已經出版了，這些書解釋了交互設計的方方面面，並探索了交互設計與體驗設計間交叉和重疊的多種方式.

　　交互設計的發展幫助和促進了人和他們所在的環境之間的相互作用。不像用戶體驗設計那樣占據所有面向用戶的系統，交互設計師只關心用戶和屏幕之間的特定相互作用。當然，在實際中從來不會如此清楚地劃分開來。

　　二、常見的交互設計方法

　　盡管交互設計跨越了無數類型的Web和移動應用程序和網站，有一些固定的方法是所有設計師都可以依賴的。我們將探討一些比較常見的方法：目標驅動設計，可用性，五個維度理論，認知心理學和人機界面指南。

　　1. 目標驅動的設計

　　目標驅動的設計是由艾倫·庫珀在他的著作《囚犯正在逃出庇護：為什麼高科技產品讓我們瘋狂，如何恢復理智》(出版於1999年)中推廣的。艾倫定義了目標驅動的設計是指把解決問題作為最高優先級的設計過程。換句話說，目標驅動設計首先關注滿足終端用戶的具體需求和欲望，而不同於舊的設計方法只是專注於技術側上的能力。

　　今天來看，艾倫提出的一些觀點是顯而易見的，因為設計師很少會選擇設計完全受制於技術發展約束的交互。然而，其核心的方法是滿足最終用戶的需要並想要的，也就是說就這一點對現在和曾經都是一樣必要的。

　　根據艾倫所說的，目標驅動的設計過程，需要作為交互設計師的我們進行五個思維方式的轉變。

　　1)先設計，再編程。換句話說，目標驅動的設計首先要考慮用戶如何與產品交互，而不是以技術因素開始。

　　2)獨立開設計和編程的負責。這其中的必要性是，這樣可以使交互設計師可以盡量擁護用戶，而不去擔心技術限制。一個設計師應該信任他或她的開發人員來處理技術方面的問題，事實上艾倫建議如此，否則會把設計師放在利益沖突的位置。

　　3)設計師要對產品質量和用戶滿意度負責。雖然利益相關者或客戶會有各自的目標，交互設計師出也對任何在屏幕的另一邊的人有責任。

　　4)為你的產品定義某個特定的用戶。這個想法已經發展成為現在用戶研究最通常的東西：角色模型。然而艾倫依舊不斷提醒我們要把角色模型關聯回產品，不斷問自己：這個用戶會在哪裡使用這個產品?他或她是誰?他或她想要完成什麼目標?

　　5)結對工作。最後一點是，交互設計師不應該獨自完成工作，而應該與他人協作，艾倫稱其為關鍵的“設計溝通者”。雖然作為設計溝通者的艾倫，在1999年時的設想不過是一個典型的旨在提供營銷產品副本的廣告文字撰稿人，但到今天已經設計溝通者擴展到了包括項目經理、內容策略師、信息架構師等在內的許多其他人。

　　2. 可用性

　　可用性感覺起來可能是一個模糊的概念，但其核心只是設計師的一個簡單問題——“是不是誰都可以輕松使用這個產品呢?“。這個概念在無數的書籍和網絡文章上解釋過，我們將回顧一些不同的定義來發現一些共同的主題和細微的差別：

　　在艾倫迪克斯，珍妮特芬利，拉塞爾比爾，格裡高利阿柏德幾個全著的書《人機交互》中，可用性被劃分成三個原則：

　　易學性：新用戶學會在系統中導航的容易程度如何?

　　靈活性：有多少種方法可以實現用戶和系統的交互?

　　魯棒性：我們對用戶面對他們的操作錯誤時的支持做得怎麼樣?

　　與此同時，由尼爾森和施耐德曼所解釋的可用性是由五項原則構成的：

　　易學性：新用戶學會在系統中導航的容易程度如何?

　　有效性：用戶執行任務的速度如何?

　　記憶性：如果一個用戶一段時間沒有訪問系統，他們對界面的記憶程度如何?

　　錯誤度：用戶一共犯了多少錯誤，從錯誤中恢復的速度如何?

　　滿意度：用戶是否喜歡他們所使用的界面，以及他們是否對結果滿意?

　　最後，國際標准(ISO 9241)也把可用性這個詞也分解成五項原則：

　　易學性：新用戶學會在系統中導航的容易程度如何?

　　可理解性：用戶對他們所看到的界面的理解程度如何?

　　可操作性：用戶對界面的控制程度如何?

　　吸引度：界面在視覺上的吸引程度如何?

　　易用性的依從性：界面是否遵循了標准?

　　顯然，在這些解釋中，我們能看出構成可用的界面是有一些共同的主題的，無論一個設計師依據的是哪條原則，在設計任何界面的時候可用性都是一個重要的考慮方面。

　　3. 五維度理論

　　在比爾莫格裡奇的訪談書籍《設計交互》中，吉莉安史密斯，一位交互設計學者，介紹了關於“交互設計語言“的四維空間的概念，。換句話說，這些維度能夠構成交互本身，因此它們最後形成了用戶和屏幕之間的溝通。原來的四個維度是這樣的：話語，視覺表征，物體或空間，以及時間。最近，凱文西爾韋，一位IDEXX實驗室的資深交互設計師，增加了第五個維度，行為。

　　一維：話語應該盡量易於用戶理解，用這樣一種方式表達使信息能夠輕松傳達給最終用戶。

　　二維：視覺表征一般都是圖形或圖像，基本上就是指一切非文本的東西。他們應該適量地被使用，而不是壓倒。

　　三維：物理對象或空間指的是物理硬件，無論是鼠標和鍵盤，或者任何用戶能與之交互的移動設備。

　　四維：時間是指用戶與前三個維度交互所花費的時間長度。它也包括用戶可能的用來衡量進展的方式，包括聲音和動畫。

　　五維：凱文西爾韋在他的文章《交互設計中的設計》中增加了行為這個維度。這是指用戶與系統交互時產生的情緒和反應。

　　通過使用這五個維度，交互設計師可以非常專注於用戶與系統通信和連接時的體驗。

　　4. 認知心理學

　　認知心理學是關於大腦如何工作，以其發生的心理過程的研究。根據美國心理協會的定義，這些過程包括了“注意力、語言的使用、記憶、感知、解決問題，創造力和思考”。

　　雖然心理學是一個非常廣泛的領域，認知心理學尤為重視其中的某些關鍵的元素，實際上，這可能幫助了交互設計領域的形成。唐諾曼在他的書《日常生活的設計》中提到了其中的很多概念。以下只是那些概念中的一部分：

　　1)心理模型是指的在用戶心中的一幅景像，使他們產生了對特定的交互或系統的期望。通過學習用戶的心智模型，交互設計師可以創建出使用戶有直觀感覺的系統。

　　2)界面隱喻是指利用已知的行為來引導用戶產生新的行動。例如，大多數計算機上的垃圾桶圖標都類似於現實中的垃圾桶，這是為了提醒用戶做出預期的行動。

　　3)功能可見性是指界面元素不僅是為了達到功能而設計出來的，而且也是為了讓它們看起來像是可以達成功能而設計出來的。例如，按鈕看起來像一個可以按的物體，這就是一個功能可見性的設計，使得不熟悉按鈕的人仍能理解如何與之交互。

　　5. 人機界面指南

　　這部分內容其實有點不恰當，實際上是沒有一整套完整的人機界面指南的。然而，創建人機界面指南背後的理念本身就是一種方法論。准則是由主要的技術設計企業，包括蘋果和安卓、Java和微軟等構建的。他們的目標都是一樣的：用這些建議和推薦來提醒未來的設計師和開發者，這將幫助他們創建普遍意義上直觀的界面和程序。

　　三、日常任務和可交付成果

　　在整個開發過程中交互設計師是一名關鍵的球員。他或她從事的一系列的活動都是項目團隊的關鍵。這些活動通常包括形成設計策略、將關鍵交互做成線框圖，以及將所有交互建立為產品原型。

　　1. 設計策略

　　雖然這個將會物的界限比較模糊，但有一點是肯定的：一個交互設計師需要知道自己在為誰設計，以及用戶的目標是什麼。通常情況下，這些信息會用戶研究員提供。然後，交互設計師在獨立或者受到團隊中其他設計師的幫助的情況下，將會評估目標並形成設計策略。好的設計策略將幫助團隊成員對在哪些需要的地方應該發生什麼樣的交互有一個共同的理解，以方便用戶目標。

　　2. 關鍵交互的線框圖

　　交互設計師在用於激勵其設計的設計策略上有了好主意之後，就可以開始畫草圖，畫出那些可以促進必要交互的界面。交互的妙門藏在細節中：在這個過程中，有一些專家會直接在紙板上素描，而有些則使用在線應用程序來幫助他們，而有的則會使用兩者的組合。有一些專家會協同工作來創建這些界面，而有的則獨自創建。這一切都取決於交互設計師自己的特定工作流。

　　3. 原型

　　根據項目的需要，交互設計師的下一個合乎邏輯的步驟可能涉及到創建原型。團隊制作交互原型有許多不同的方法，比如html/css原型，或紙上原型，在這裡，我們不會覆蓋廣泛的細節。

　　4. 保持流行性

　　對一個現實中的交互設計師來說，最難的部分是適應工業發展變化的速度。每一天，新的設計師都可能要在不同的方向上看待媒介。結果便是，用戶也會預期這些新類型的交互會出現在你的網站上。謹慎的交互設計師會響應這種演變，不斷探索在線交互以及利用新技術，但是我們總是要記住正確的交互或技術是最好地滿足角色用戶的需要的那些，而不只是最新穎或最令人興奮的那些。交互設計師還通過在推特上跟隨交互設計的思想領袖(比如下列的著名設計師)並主動推動媒介本身的發展，以保持流行性。

　　四、著名的設計師

　　從左到右，從上到下分別是：

　　ALAN COOPER，BILL SCOTT，BRAD FROST，BRENDA LAUREL，BRENDA SANDERSON，

　　DAN SAFFER，DON NORMAN，KAREN MCGRANE，KIM GOODWIN，MAT MARQUIS，

　　MIKE MONTEIRO，THERESA NEIL，WHITNEY HESS

　　譯者注：此處篇幅過長，因而對設計師作了聚合，可在原文中查看詳細個人說明。

　　五、工具

　　交互設計師使用許多不同的工具來完成他們的工作。無論是在一張餐巾紙上畫交互草圖，還是向客戶展示原型，他們的目標都是一樣的：通過對話來溝通。交互設計師最需要的就是溝通。下面的列表裡是一系列用於促進對話的工具。記住，最終創建的Web界面，通常與面向用戶的(前端)技術完成的，比如CSS / HTML。

　　1. Balsamiq Mockups

　　Balsamiq的界面簡單,使用手繪風格元素和comic sans字體，使得制作交互線框圖的過程變得簡單，可以認為它是一個在線版的紙上原型!

　　2. Invision

　　InVision是一個免費的網站和移動App的原型工具。InVision旨在通過結合Photoshop，Sketch等其他應用促進溝通。設計師可以上傳線框圖，並通過熱區來連接它們。客戶、利益相關者和他的同事設計可以直接添加評論，並有實時演示工具LiveShare。

　　3. Omnigroup

　　Omnigraffle是OSX上的交互設計師可以利用的圖表軟件，用單調的審美創造的圖表軟件Omnigraffle更關注背後的交互設計而不是設計本身，同時其也具備許多優秀的模擬功能。

　　4. Patternry

　　沒有人願意浪費時間重新發明輪子。良好的交互設計或代碼聚合在一起更能節省時間和精力,並確保設計的一致性。Patternry是一種允許團隊交互設計師分享並將其設計和代碼資產存儲在一個中央位置的工具。

　　5. Sketch

　　Sketch是一種設計工具(Mac)，最好用於圖標的中高級保真度模型，是一個Adobe Photoshop的一個輕量級替代。

　　6. Axure

　　Axure RP可以說是市場上最好的交互設計工具。比Balsamiq擁有更強大的功能，內置的協作和共享功能，並且能夠輕松地實現線框原型。缺點是，它可能提供了太多，這意味著它有一個緩慢的學習曲線。

　　7. Uxpin

　　UXPin是一個協同設計平台,支持低保真的線框圖和高保真的動畫原型。設計師使用Photoshop或Sketch制作的分層原型可以直接導入，然後從利益相關者處得到反饋。該工具還包括可用性測試和現場演示功能。

　　六、協會和組織

　　不管交互設計師是否屬於任何特定的組織，其仍然是一個交互設計者。不過，找到其他設計師的網絡是向他人學習的好方法。這些協會在美國都有，有一些則是國際性組織。

　　1）IXDA－Interaction Design Association

　　交互設計協會，其提供了一個討論交互設計問題的在線論壇。

　　2）AGIA－American Institute of Graphic Arts

　　美國平面藝術學院，組織中的平面設計師更經常地為新媒體設計作品，交互設計在其中扮演了重要組成部分。

　　七、書籍

　　其實相關的交互設計書籍列表可以占掉好多頁。在這裡，我們縮小成幾本標志性的圖書的列表。如果你真的渴望擴大你的圖書收藏，可以看看我們網站搜索用戶體驗的推薦書集：http://hao.uisdc.com/book/

　　從左到右依次是

　　《交互設計：創建創新應用和設備(第二版)》

　　《設計數字時代：如何創建以人為本的產品和服務》

　　《設計界面》

　　《交互設計：超越人機交互》

　　《日常生活的設計》

　　此外還推薦《點石成金》。