交互設(shè)計(jì)起源于網(wǎng)站設(shè)計(jì)和圖形設(shè)計(jì)夸溶，但現(xiàn)在已經(jīng)成長(zhǎng)為一個(gè)獨(dú)立的領(lǐng)域。現(xiàn)在的交互設(shè)計(jì)師遠(yuǎn)非僅僅負(fù)責(zé)文字和圖片凶硅，而是負(fù)責(zé)創(chuàng)建在屏幕上的所有元素缝裁，所有用戶可能會(huì)觸摸，點(diǎn)按或者輸入的東西：簡(jiǎn)而言之足绅，產(chǎn)品體驗(yàn)中的所有交互捷绑。

這篇文章對(duì)有興趣學(xué)習(xí)更多關(guān)于交互設(shè)計(jì)的知識(shí)的人來說是一個(gè)很好的起點(diǎn)。我們將會(huì)簡(jiǎn)要討論交互設(shè)計(jì)的歷史氢妈，相關(guān)的指導(dǎo)原則粹污，值得關(guān)注的貢獻(xiàn)者，以及有關(guān)這個(gè)迷人學(xué)科的工具首量。

一壮吩、什么是交互設(shè)計(jì)？

交互設(shè)計(jì)（IxD）定義了交互系統(tǒng)的結(jié)構(gòu)和行為加缘。交互設(shè)計(jì)師努力在用戶和用戶使用的產(chǎn)品或者服務(wù)間創(chuàng)建有意義的關(guān)聯(lián)鸭叙，不管是從電腦到移動(dòng)設(shè)備，家用電器或者其他拣宏。我們的實(shí)踐會(huì)與世界一同不斷發(fā)展沈贝。”——交互設(shè)計(jì)協(xié)會(huì)（IxDA）

從第一臺(tái)用來容納靜態(tài)副本以外的信息的屏幕被設(shè)計(jì)出來的那天開始勋乾，交互設(shè)計(jì)就開始了宋下。從按鈕，鏈接到表單的一切都是交互設(shè)計(jì)的一部分市俊。在過去的幾十年里杨凑，有許多相關(guān)的書已經(jīng)出版了滤奈，這些書解釋了交互設(shè)計(jì)的方方面面摆昧，并探索了交互設(shè)計(jì)與體驗(yàn)設(shè)計(jì)間交叉和重疊的多種方式．

交互設(shè)計(jì)的發(fā)展幫助和促進(jìn)了人和他們所在的環(huán)境之間的相互作用。不像用戶體驗(yàn)設(shè)計(jì)那樣占據(jù)所有面向用戶的系統(tǒng)蜒程，交互設(shè)計(jì)師只關(guān)心用戶和屏幕之間的特定相互作用绅你。當(dāng)然，在實(shí)際中從來不會(huì)如此清楚地劃分開來昭躺。

二忌锯、常見的交互設(shè)計(jì)方法

盡管交互設(shè)計(jì)跨越了無數(shù)類型的Web和移動(dòng)應(yīng)用程序和網(wǎng)站，有一些固定的方法是所有設(shè)計(jì)師都可以依賴的领炫。我們將探討一些比較常見的方法：目標(biāo)驅(qū)動(dòng)設(shè)計(jì)偶垮，可用性，五個(gè)維度理論，認(rèn)知心理學(xué)和人機(jī)界面指南似舵。

1. 目標(biāo)驅(qū)動(dòng)的設(shè)計(jì)

目標(biāo)驅(qū)動(dòng)的設(shè)計(jì)是由艾倫·庫(kù)珀在他的著作《囚犯正在逃出庇護(hù)：為什么高科技產(chǎn)品讓我們瘋狂脚猾，如何恢復(fù)理智》（出版于1999年）中推廣的。艾倫定義了目標(biāo)驅(qū)動(dòng)的設(shè)計(jì)是指把解決問題作為最高優(yōu)先級(jí)的設(shè)計(jì)過程砚哗。換句話說龙助，目標(biāo)驅(qū)動(dòng)設(shè)計(jì)首先關(guān)注滿足終端用戶的具體需求和欲望，而不同于舊的設(shè)計(jì)方法只是專注于技術(shù)側(cè)上的能力蛛芥。

今天來看提鸟，艾倫提出的一些觀點(diǎn)是顯而易見的，因?yàn)樵O(shè)計(jì)師很少會(huì)選擇設(shè)計(jì)完全受制于技術(shù)發(fā)展約束的交互仅淑。然而称勋，其核心的方法是滿足最終用戶的需要并想要的，也就是說就這一點(diǎn)對(duì)現(xiàn)在和曾經(jīng)都是一樣必要的涯竟。

根據(jù)艾倫所說的铣缠，目標(biāo)驅(qū)動(dòng)的設(shè)計(jì)過程，需要作為交互設(shè)計(jì)師的我們進(jìn)行五個(gè)思維方式的轉(zhuǎn)變昆禽。

1）先設(shè)計(jì)蝗蛙，再編程。換句話說醉鳖，目標(biāo)驅(qū)動(dòng)的設(shè)計(jì)首先要考慮用戶如何與產(chǎn)品交互捡硅，而不是以技術(shù)因素開始。

2）獨(dú)立開設(shè)計(jì)和編程的負(fù)責(zé)盗棵。這其中的必要性是壮韭，這樣可以使交互設(shè)計(jì)師可以盡量擁護(hù)用戶，而不去擔(dān)心技術(shù)限制纹因。一個(gè)設(shè)計(jì)師應(yīng)該信任他或她的開發(fā)人員來處理技術(shù)方面的問題喷屋，事實(shí)上艾倫建議如此，否則會(huì)把設(shè)計(jì)師放在利益沖突的位置瞭恰。

3）設(shè)計(jì)師要對(duì)產(chǎn)品質(zhì)量和用戶滿意度負(fù)責(zé)屯曹。雖然利益相關(guān)者或客戶會(huì)有各自的目標(biāo)，交互設(shè)計(jì)師出也對(duì)任何在屏幕的另一邊的人有責(zé)任惊畏。

4）為你的產(chǎn)品定義某個(gè)特定的用戶恶耽。這個(gè)想法已經(jīng)發(fā)展成為現(xiàn)在用戶研究最通常的東西：角色模型。然而艾倫依舊不斷提醒我們要把角色模型關(guān)聯(lián)回產(chǎn)品颜启，不斷問自己：這個(gè)用戶會(huì)在哪里使用這個(gè)產(chǎn)品偷俭？他或她是誰？他或她想要完成什么目標(biāo)缰盏？

5）結(jié)對(duì)工作涌萤。最后一點(diǎn)是淹遵，交互設(shè)計(jì)師不應(yīng)該獨(dú)自完成工作，而應(yīng)該與他人協(xié)作负溪，艾倫稱其為關(guān)鍵的“設(shè)計(jì)溝通者”合呐。雖然作為設(shè)計(jì)溝通者的艾倫，在1999年時(shí)的設(shè)想不過是一個(gè)典型的旨在提供營(yíng)銷產(chǎn)品副本的廣告文字撰稿人笙以，但到今天已經(jīng)設(shè)計(jì)溝通者擴(kuò)展到了包括項(xiàng)目經(jīng)理淌实、內(nèi)容策略師、信息架構(gòu)師等在內(nèi)的許多其他人猖腕。

2. 可用性

可用性感覺起來可能是一個(gè)模糊的概念拆祈，但其核心只是設(shè)計(jì)師的一個(gè)簡(jiǎn)單問題——“是不是誰都可以輕松使用這個(gè)產(chǎn)品呢？“倘感。這個(gè)概念在無數(shù)的書籍和網(wǎng)絡(luò)文章上解釋過放坏，我們將回顧一些不同的定義來發(fā)現(xiàn)一些共同的主題和細(xì)微的差別：

在艾倫迪克斯，珍妮特芬利老玛，拉塞爾比爾淤年，格里高利阿柏德幾個(gè)全著的書《人機(jī)交互》中，可用性被劃分成三個(gè)原則：

易學(xué)性：新用戶學(xué)會(huì)在系統(tǒng)中導(dǎo)航的容易程度如何蜡豹？

靈活性：有多少種方法可以實(shí)現(xiàn)用戶和系統(tǒng)的交互麸粮？

魯棒性：我們對(duì)用戶面對(duì)他們的操作錯(cuò)誤時(shí)的支持做得怎么樣？

與此同時(shí)镜廉，由尼爾森和施耐德曼所解釋的可用性是由五項(xiàng)原則構(gòu)成的：

易學(xué)性：新用戶學(xué)會(huì)在系統(tǒng)中導(dǎo)航的容易程度如何弄诲？

有效性：用戶執(zhí)行任務(wù)的速度如何？

記憶性：如果一個(gè)用戶一段時(shí)間沒有訪問系統(tǒng)娇唯，他們對(duì)界面的記憶程度如何齐遵？

錯(cuò)誤度：用戶一共犯了多少錯(cuò)誤，從錯(cuò)誤中恢復(fù)的速度如何塔插？

滿意度：用戶是否喜歡他們所使用的界面梗摇，以及他們是否對(duì)結(jié)果滿意？

最后，國(guó)際標(biāo)準(zhǔn)（ISO 9241）也把可用性這個(gè)詞也分解成五項(xiàng)原則：

易學(xué)性：新用戶學(xué)會(huì)在系統(tǒng)中導(dǎo)航的容易程度如何？

可理解性：用戶對(duì)他們所看到的界面的理解程度如何？

可操作性：用戶對(duì)界面的控制程度如何？

吸引度：界面在視覺上的吸引程度如何伺绽？

易用性的依從性：界面是否遵循了標(biāo)準(zhǔn)？

顯然怔鳖，在這些解釋中竿刁，我們能看出構(gòu)成可用的界面是有一些共同的主題的，無論一個(gè)設(shè)計(jì)師依據(jù)的是哪條原則较雕，在設(shè)計(jì)任何界面的時(shí)候可用性都是一個(gè)重要的考慮方面碉哑。

3. 五維度理論

在比爾莫格里奇的訪談書籍《設(shè)計(jì)交互》中挚币，吉莉安史密斯，一位交互設(shè)計(jì)學(xué)者扣典，介紹了關(guān)于“交互設(shè)計(jì)語言“的四維空間的概念妆毕，。換句話說贮尖，這些維度能夠構(gòu)成交互本身笛粘，因此它們最后形成了用戶和屏幕之間的溝通。原來的四個(gè)維度是這樣的：話語湿硝，視覺表征薪前，物體或空間，以及時(shí)間关斜。最近示括，凱文西爾韋，一位IDEXX實(shí)驗(yàn)室的資深交互設(shè)計(jì)師痢畜，增加了第五個(gè)維度垛膝，行為。

一維：話語應(yīng)該盡量易于用戶理解丁稀，用這樣一種方式表達(dá)使信息能夠輕松傳達(dá)給最終用戶吼拥。

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

三維：物理對(duì)象或空間指的是物理硬件桶雀，無論是鼠標(biāo)和鍵盤矿酵，或者任何用戶能與之交互的移動(dòng)設(shè)備。

四維：時(shí)間是指用戶與前三個(gè)維度交互所花費(fèi)的時(shí)間長(zhǎng)度矗积。它也包括用戶可能的用來衡量進(jìn)展的方式全肮，包括聲音和動(dòng)畫。

五維：凱文西爾韋在他的文章《交互設(shè)計(jì)中的設(shè)計(jì)》中增加了行為這個(gè)維度棘捣。這是指用戶與系統(tǒng)交互時(shí)產(chǎn)生的情緒和反應(yīng)辜腺。

通過使用這五個(gè)維度，交互設(shè)計(jì)師可以非常專注于用戶與系統(tǒng)通信和連接時(shí)的體驗(yàn)乍恐。

4. 認(rèn)知心理學(xué)

認(rèn)知心理學(xué)是關(guān)于大腦如何工作评疗，以其發(fā)生的心理過程的研究。根據(jù)美國(guó)心理協(xié)會(huì)的定義茵烈，這些過程包括了“注意力百匆、語言的使用、記憶呜投、感知加匈、解決問題存璃，創(chuàng)造力和思考”。

雖然心理學(xué)是一個(gè)非常廣泛的領(lǐng)域雕拼，認(rèn)知心理學(xué)尤為重視其中的某些關(guān)鍵的元素纵东，實(shí)際上，這可能幫助了交互設(shè)計(jì)領(lǐng)域的形成啥寇。唐諾曼在他的書《日常生活的設(shè)計(jì)》中提到了其中的很多概念偎球。以下只是那些概念中的一部分：

1）心理模型是指的在用戶心中的一幅景像，使他們產(chǎn)生了對(duì)特定的交互或系統(tǒng)的期望辑甜。通過學(xué)習(xí)用戶的心智模型衰絮，交互設(shè)計(jì)師可以創(chuàng)建出使用戶有直觀感覺的系統(tǒng)。

2）界面隱喻是指利用已知的行為來引導(dǎo)用戶產(chǎn)生新的行動(dòng)栈戳。例如岂傲，大多數(shù)計(jì)算機(jī)上的垃圾桶圖標(biāo)都類似于現(xiàn)實(shí)中的垃圾桶，這是為了提醒用戶做出預(yù)期的行動(dòng)子檀。

3）功能可見性是指界面元素不僅是為了達(dá)到功能而設(shè)計(jì)出來的镊掖，而且也是為了讓它們看起來像是可以達(dá)成功能而設(shè)計(jì)出來的。例如褂痰，按鈕看起來像一個(gè)可以按的物體亩进，這就是一個(gè)功能可見性的設(shè)計(jì)，使得不熟悉按鈕的人仍能理解如何與之交互缩歪。

5. 人機(jī)界面指南

這部分內(nèi)容其實(shí)有點(diǎn)不恰當(dāng)归薛，實(shí)際上是沒有一整套完整的人機(jī)界面指南的。然而匪蝙，創(chuàng)建人機(jī)界面指南背后的理念本身就是一種方法論主籍。準(zhǔn)則是由主要的技術(shù)設(shè)計(jì)企業(yè)，包括蘋果和安卓逛球、Java和微軟等構(gòu)建的千元。他們的目標(biāo)都是一樣的：用這些建議和推薦來提醒未來的設(shè)計(jì)師和開發(fā)者，這將幫助他們創(chuàng)建普遍意義上直觀的界面和程序颤绕。

三幸海、日常任務(wù)和可交付成果

在整個(gè)開發(fā)過程中交互設(shè)計(jì)師是一名關(guān)鍵的球員。他或她從事的一系列的活動(dòng)都是項(xiàng)目團(tuán)隊(duì)的關(guān)鍵奥务。這些活動(dòng)通常包括形成設(shè)計(jì)策略物独、將關(guān)鍵交互做成線框圖，以及將所有交互建立為產(chǎn)品原型氯葬。

1. 設(shè)計(jì)策略

雖然這個(gè)將會(huì)物的界限比較模糊挡篓，但有一點(diǎn)是肯定的：一個(gè)交互設(shè)計(jì)師需要知道自己在為誰設(shè)計(jì)，以及用戶的目標(biāo)是什么溢谤。通常情況下瞻凤，這些信息會(huì)用戶研究員提供憨攒。然后世杀，交互設(shè)計(jì)師在獨(dú)立或者受到團(tuán)隊(duì)中其他設(shè)計(jì)師的幫助的情況下阀参，將會(huì)評(píng)估目標(biāo)并形成設(shè)計(jì)策略。好的設(shè)計(jì)策略將幫助團(tuán)隊(duì)成員對(duì)在哪些需要的地方應(yīng)該發(fā)生什么樣的交互有一個(gè)共同的理解瞻坝，以方便用戶目標(biāo)蛛壳。

2. 關(guān)鍵交互的線框圖

交互設(shè)計(jì)師在用于激勵(lì)其設(shè)計(jì)的設(shè)計(jì)策略上有了好主意之后，就可以開始畫草圖所刀，畫出那些可以促進(jìn)必要交互的界面衙荐。交互的妙門藏在細(xì)節(jié)中：在這個(gè)過程中，有一些專家會(huì)直接在紙板上素描浮创，而有些則使用在線應(yīng)用程序來幫助他們忧吟，而有的則會(huì)使用兩者的組合。有一些專家會(huì)協(xié)同工作來創(chuàng)建這些界面斩披，而有的則獨(dú)自創(chuàng)建溜族。這一切都取決于交互設(shè)計(jì)師自己的特定工作流。

3. 原型

根據(jù)項(xiàng)目的需要垦沉，交互設(shè)計(jì)師的下一個(gè)合乎邏輯的步驟可能涉及到創(chuàng)建原型煌抒。團(tuán)隊(duì)制作交互原型有許多不同的方法，比如html/css原型厕倍，或紙上原型寡壮，在這里，我們不會(huì)覆蓋廣泛的細(xì)節(jié)讹弯。

4. 保持流行性

對(duì)一個(gè)現(xiàn)實(shí)中的交互設(shè)計(jì)師來說况既，最難的部分是適應(yīng)工業(yè)發(fā)展變化的速度。每一天组民，新的設(shè)計(jì)師都可能要在不同的方向上看待媒介棒仍。結(jié)果便是，用戶也會(huì)預(yù)期這些新類型的交互會(huì)出現(xiàn)在你的網(wǎng)站上邪乍。謹(jǐn)慎的交互設(shè)計(jì)師會(huì)響應(yīng)這種演變降狠，不斷探索在線交互以及利用新技術(shù)，但是我們總是要記住正確的交互或技術(shù)是最好地滿足角色用戶的需要的那些庇楞，而不只是最新穎或最令人興奮的那些榜配。交互設(shè)計(jì)師還通過在推特上跟隨交互設(shè)計(jì)的思想領(lǐng)袖（比如下列的著名設(shè)計(jì)師）并主動(dòng)推動(dòng)媒介本身的發(fā)展，以保持流行性吕晌。

四蛋褥、著名的設(shè)計(jì)師

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

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

譯者注：此處篇幅過長(zhǎng)，因而對(duì)設(shè)計(jì)師作了聚合碍论，可在原文中查看詳細(xì)個(gè)人說明谅猾。

五、工具

交互設(shè)計(jì)師使用許多不同的工具來完成他們的工作鳍悠。無論是在一張餐巾紙上畫交互草圖税娜，還是向客戶展示原型，他們的目標(biāo)都是一樣的：通過對(duì)話來溝通贼涩。交互設(shè)計(jì)師最需要的就是溝通巧涧。下面的列表里是一系列用于促進(jìn)對(duì)話的工具。記住遥倦，最終創(chuàng)建的Web界面谤绳，通常與面向用戶的（前端）技術(shù)完成的，比如CSS / HTML袒哥。

1. Balsamiq Mockups

11jh20160219

Balsamiq的界面簡(jiǎn)單,使用手繪風(fēng)格元素和comic sans字體缩筛，使得制作交互線框圖的過程變得簡(jiǎn)單，可以認(rèn)為它是一個(gè)在線版的紙上原型堡称！

2. Invision

12jh20160219

InVision是一個(gè)免費(fèi)的網(wǎng)站和移動(dòng)App的原型工具瞎抛。InVision旨在通過結(jié)合Photoshop，Sketch等其他應(yīng)用促進(jìn)溝通却紧。設(shè)計(jì)師可以上傳線框圖桐臊，并通過熱區(qū)來連接它們∠猓客戶断凶、利益相關(guān)者和他的同事設(shè)計(jì)可以直接添加評(píng)論，并有實(shí)時(shí)演示工具LiveShare巫俺。

3. Omnigroup

13jh20160219

Omnigraffle是OSX上的交互設(shè)計(jì)師可以利用的圖表軟件认烁，用單調(diào)的審美創(chuàng)造的圖表軟件Omnigraffle更關(guān)注背后的交互設(shè)計(jì)而不是設(shè)計(jì)本身，同時(shí)其也具備許多優(yōu)秀的模擬功能。

4. Patternry

14jh20160219

沒有人愿意浪費(fèi)時(shí)間重新發(fā)明輪子却嗡。良好的交互設(shè)計(jì)或代碼聚合在一起更能節(jié)省時(shí)間和精力,并確保設(shè)計(jì)的一致性舶沛。Patternry是一種允許團(tuán)隊(duì)交互設(shè)計(jì)師分享并將其設(shè)計(jì)和代碼資產(chǎn)存儲(chǔ)在一個(gè)中央位置的工具。

5. Sketch

15jh20160219

Sketch是一種設(shè)計(jì)工具（Mac）窗价，最好用于圖標(biāo)的中高級(jí)保真度模型如庭，是一個(gè)Adobe Photoshop的一個(gè)輕量級(jí)替代。

6. Axure

16jh20160219

Axure RP可以說是市場(chǎng)上最好的交互設(shè)計(jì)工具舌镶。比Balsamiq擁有更強(qiáng)大的功能柱彻，內(nèi)置的協(xié)作和共享功能豪娜，并且能夠輕松地實(shí)現(xiàn)線框原型餐胀。缺點(diǎn)是，它可能提供了太多瘤载，這意味著它有一個(gè)緩慢的學(xué)習(xí)曲線否灾。

7. Uxpin

17jh20160219

UXPin是一個(gè)協(xié)同設(shè)計(jì)平臺(tái),支持低保真的線框圖和高保真的動(dòng)畫原型。設(shè)計(jì)師使用Photoshop或Sketch制作的分層原型可以直接導(dǎo)入鸣奔，然后從利益相關(guān)者處得到反饋墨技。該工具還包括可用性測(cè)試和現(xiàn)場(chǎng)演示功能。

六挎狸、協(xié)會(huì)和組織

不管交互設(shè)計(jì)師是否屬于任何特定的組織扣汪，其仍然是一個(gè)交互設(shè)計(jì)者。不過锨匆，找到其他設(shè)計(jì)師的網(wǎng)絡(luò)是向他人學(xué)習(xí)的好方法崭别。這些協(xié)會(huì)在美國(guó)都有，有一些則是國(guó)際性組織恐锣。

1）IXDA－Interaction Design Association

交互設(shè)計(jì)協(xié)會(huì)茅主，其提供了一個(gè)討論交互設(shè)計(jì)問題的在線論壇。

2）AGIA－American Institute of Graphic Arts

美國(guó)平面藝術(shù)學(xué)院土榴，組織中的平面設(shè)計(jì)師更經(jīng)常地為新媒體設(shè)計(jì)作品诀姚，交互設(shè)計(jì)在其中扮演了重要組成部分。

七玷禽、書籍

其實(shí)相關(guān)的交互設(shè)計(jì)書籍列表可以占掉好多頁(yè)赫段。在這里，我們縮小成幾本標(biāo)志性的圖書的列表矢赁。如果你真的渴望擴(kuò)大你的圖書收藏糯笙，可以看看我們網(wǎng)站搜索用戶體驗(yàn)的推薦書集：http://hao.uisdc.com/book/

18jh20160219

從左到右依次是

《交互設(shè)計(jì)：創(chuàng)建創(chuàng)新應(yīng)用和設(shè)備(第二版)》

《設(shè)計(jì)數(shù)字時(shí)代：如何創(chuàng)建以人為本的產(chǎn)品和服務(wù)》

《設(shè)計(jì)界面》

《交互設(shè)計(jì)：超越人機(jī)交互》

《日常生活的設(shè)計(jì)》

此外還推薦《點(diǎn)石成金》。

轉(zhuǎn)自優(yōu)設(shè)：http://www.uisdc.com/head-first-interaction-design