準(zhǔn)備好涉足交互設(shè)計(jì)了嗎盲链？在這篇文章中蝇率，作者對(duì)交互設(shè)計(jì)的各個(gè)方面做了簡單介紹：包括歷史、原則刽沾、知名設(shè)計(jì)師本慕，以及他們的設(shè)計(jì)方法等等。即便你已經(jīng)是一個(gè)交互設(shè)計(jì)師侧漓，這篇文章也值得一讀锅尘。
相較于網(wǎng)頁設(shè)計(jì)波瀾不驚的開端，交互設(shè)計(jì)的成長之路漫長而曲折布蔗。最初藤违，“網(wǎng)絡(luò)設(shè)計(jì)師”（web designer）這個(gè)術(shù)語更像是描述一個(gè)平面設(shè)計(jì)師（graphic designer）：一個(gè)關(guān)注于文字和圖面編排的設(shè)計(jì)師。但是現(xiàn)在纵揍，大多數(shù)網(wǎng)站和在線應(yīng)用程序都是互動(dòng)的顿乒。因而，現(xiàn)代的網(wǎng)頁設(shè)計(jì)師不再像以前傳統(tǒng)的平面設(shè)計(jì)師一樣泽谨，而是需要做出完全不同的考慮璧榄。為了彌補(bǔ)這種差距，交互設(shè)計(jì)學(xué)科應(yīng)運(yùn)而生吧雹。
? 什么是交互設(shè)計(jì)骨杂？
? 哪些理念引領(lǐng)交互設(shè)計(jì)？
? 交互設(shè)計(jì)師做什么雄卷？
? 知名交互設(shè)計(jì)師
? 工具
? 書籍
本輯先說前三個(gè)搓蚪。
▼
什么是交互設(shè)計(jì)
僅在數(shù)十年前，第一個(gè)互動(dòng)系統(tǒng)首次亮相丁鹉，交互設(shè)計(jì)也就由此產(chǎn)生妒潭。新的界面帶來了新的挑戰(zhàn)悴能，涌現(xiàn)出一批新的設(shè)計(jì)師來接受這個(gè)挑戰(zhàn)。隨后杜耙，一系列書籍紛紛出版搜骡，以闡釋這個(gè)未知領(lǐng)域的方方面面拂盯。
交互設(shè)計(jì)協(xié)會(huì)（The Interaction Design Association (IxDA)）解釋如下：
交互設(shè)計(jì)師以創(chuàng)造有用且實(shí)用的產(chǎn)品及服務(wù)為宗旨佑女。以用戶為中心作為設(shè)計(jì)的基本原理，交互設(shè)計(jì)的實(shí)際操作必須建立在對(duì)實(shí)際用戶的了解之上：包括他們的目標(biāo)谈竿、任務(wù)团驱、體驗(yàn)、需求等等空凸。以用戶為中心的角度出發(fā)嚎花，同時(shí)努力平衡用戶需求、商業(yè)發(fā)展目標(biāo)和科技發(fā)展水平之間的關(guān)系呀洲，交互設(shè)計(jì)師為復(fù)雜的設(shè)計(jì)挑戰(zhàn)提供解決方法紊选，同時(shí)定義和發(fā)展新的交互產(chǎn)品和服務(wù)。
交互設(shè)計(jì)道逗，就像用戶體驗(yàn)設(shè)計(jì)（user experience design）兵罢，為促進(jìn)人和環(huán)境的互動(dòng)不斷發(fā)展。但不像用戶體驗(yàn)設(shè)計(jì)包含了所有面向用戶的軟件和系統(tǒng)滓窍，交互設(shè)計(jì)師僅考慮用戶和電腦之間的互動(dòng)卖词。這樣的定位被稱為人機(jī)交互。
因?yàn)樵谖铱磥砝艉唬羁焖俸妥盍钊伺d奮的工業(yè)增長是在網(wǎng)上發(fā)生的此蜈。本文將重點(diǎn)放在交互設(shè)計(jì)，因?yàn)樗婕暗骄W(wǎng)站和應(yīng)用程序噪生。
▼
哪些理念引領(lǐng)交互設(shè)計(jì)
有很多基本理念推動(dòng)著交互設(shè)計(jì)的實(shí)踐裆赵。這里對(duì)一些重要理念進(jìn)行簡單的概述：目標(biāo)驅(qū)動(dòng)設(shè)計(jì)、“神奇的界面”跺嗽、實(shí)用性顾瞪、啟示性以及學(xué)習(xí)性。
- 目標(biāo)驅(qū)動(dòng)設(shè)計(jì)
雖然交互設(shè)計(jì)師并不嚴(yán)格要求進(jìn)行用戶研究抛蚁，但全面的用戶研究結(jié)果是最佳導(dǎo)向設(shè)計(jì)必不可少的陈醒。在每一個(gè)設(shè)計(jì)學(xué)科領(lǐng)域，藝術(shù)家必須首先承認(rèn)他們的缺陷瞧甩，然后設(shè)計(jì)一個(gè)解決方案钉跷。在交互設(shè)計(jì)中，用戶本身往往制約著界面的發(fā)展肚逸。通常爷辙，用戶使用網(wǎng)絡(luò)的目的不同彬坏，他們可能是想在網(wǎng)上賺點(diǎn)零花錢。如果是這樣膝晾，你的應(yīng)用程序就要把這件事情做好栓始。將用戶研究增加到這個(gè)方程式中，設(shè)定清晰的用戶目標(biāo)血当，以使形式和功能完美結(jié)合幻赚。
- “神奇的界面”
為了方便起見，我將一系列交互設(shè)計(jì)的最佳實(shí)踐濃縮到這個(gè)從Alan Cooper（About Face 3: the Essentials of Interaction Design一書的作者）借鑒來的術(shù)語中臊旭。Alan指出落恼，理想狀態(tài)下界面不應(yīng)該在用戶的腦海中出現(xiàn)—他們應(yīng)該簡單地“看”到界面作為底層系統(tǒng)的擴(kuò)展。為此离熏，最佳交互設(shè)計(jì)并不存在：它們不會(huì)花很長時(shí)間來加載或回應(yīng)佳谦；它們不會(huì)讓用戶去思考；他們不會(huì)給用戶增加煩惱滋戳。就像Jason Fried钻蔑，37 Signal的CEO說的：“少就是少〖檠欤”只給用戶他們需要的咪笑，然后走下一步。
- 實(shí)用性
實(shí)用性是指人們用一個(gè)工具來完成一個(gè)特定目標(biāo)的難易程度府喳。交互設(shè)計(jì)師必須考慮他們?cè)O(shè)計(jì)的界面的實(shí)用性蒲肋。界面使底層系統(tǒng)易于被理解和使用。
- 啟示性
剪刀的設(shè)計(jì)讓不熟悉剪刀的人馬上就明白哪里是手持的钝满，哪里是剪切的兜粘。交互設(shè)計(jì)不是也應(yīng)該是這樣嗎？最佳的工業(yè)弯蚜、交互設(shè)計(jì)是不言自明的孔轴；就像那句老話講的，形式服從功能碎捺。換句話說路鹰，鏈接就應(yīng)該像是鏈接，按鈕就應(yīng)該像是按鈕收厨，搜索框就應(yīng)該……你懂得晋柱。
這里的基本原則就叫啟示性。啟示性代表了參與者和他們周圍環(huán)境之間的可能性行為诵叁。因?yàn)閱⑹拘猿浞直磉_(dá)了網(wǎng)站和服務(wù)的基本功能雁竞，所以對(duì)于設(shè)計(jì)師而言，在設(shè)計(jì)中自始至終貫徹這個(gè)概念是至關(guān)重要的。Bill Scott 和Theresa Neil列舉了一個(gè)類似概念（叫做“提供邀請(qǐng)”）碑诉，作為他們的六個(gè)交互設(shè)計(jì)原則之一彪腔。
- 可學(xué)習(xí)性
大量用來組織用戶界面的都是熟悉的組件。如果用戶習(xí)慣按按鈕提交表格进栽，在這種情況下德挣，他們就會(huì)去尋找按鈕。這就是界面使用習(xí)慣或者模式其中的一個(gè)例子快毛。當(dāng)面臨相似的設(shè)計(jì)挑戰(zhàn)時(shí)格嗅，優(yōu)秀的交互設(shè)計(jì)師不會(huì)每一次都去重新發(fā)明一些東西。相反祸泪，他們會(huì)利用已有的設(shè)計(jì)模式吗浩。網(wǎng)上很多交互設(shè)計(jì)模式都記錄在Yahoo!的設(shè)計(jì)庫中建芙。
總而言之没隘，如果手上的設(shè)計(jì)問題確實(shí)需要特殊處理，交互設(shè)計(jì)師應(yīng)該花大力氣讓這個(gè)界面易于掌握禁荸，或者易于學(xué)習(xí)右蒲。這一點(diǎn)需要對(duì)當(dāng)下的設(shè)計(jì)慣例、啟示性及網(wǎng)絡(luò)整體的實(shí)用性都非常熟悉赶熟。
▼
交互設(shè)計(jì)師做什么
交互設(shè)計(jì)師在整個(gè)開發(fā)過程中扮演著關(guān)鍵角色瑰妄。作為一個(gè)項(xiàng)目團(tuán)隊(duì)的一部分，他們通常會(huì)進(jìn)行以下活動(dòng)：
- 組織映砖、宣傳設(shè)計(jì)策略
盡管這里的界限是模糊的间坐，但有一點(diǎn)是肯定的：一個(gè)交互設(shè)計(jì)師需要知道她/他為誰設(shè)計(jì)，以及他們的目標(biāo)是什么邑退。通常竹宋，這些由信息架構(gòu)師和用戶研究人員提供。反過來地技，一個(gè)交互設(shè)計(jì)師將評(píng)估設(shè)計(jì)目標(biāo)蜈七，展開設(shè)計(jì)策略。他們或單獨(dú)工作莫矗，或與其他設(shè)計(jì)師合作飒硅。設(shè)計(jì)策略幫助團(tuán)隊(duì)成員在什么樣的交互能幫助用戶實(shí)現(xiàn)目標(biāo)方面達(dá)成共識(shí)。
- 確定和構(gòu)建交互框架
當(dāng)交互設(shè)計(jì)師有一個(gè)刺激他/她設(shè)計(jì)的好的想法時(shí)作谚，他/她可以開始構(gòu)思這個(gè)界面三娩，如何用它來輔助必要的交互活動(dòng)。在這里細(xì)節(jié)是魔鬼妹懒。有些專業(yè)人員會(huì)在便簽本或者是寫字板上繪制這些互動(dòng)設(shè)計(jì)雀监；而另一些則選擇用軟件應(yīng)用程序來幫助他們；有些人會(huì)選擇團(tuán)隊(duì)合作彬伦，有些人則獨(dú)立工作滔悉。這些都基于交互設(shè)計(jì)師本身以及他們的工作流程伊诵。
- 交互雛形
根據(jù)不同項(xiàng)目，交互設(shè)計(jì)師下一個(gè)步會(huì)開始創(chuàng)建雛形回官。一個(gè)團(tuán)隊(duì)創(chuàng)建交互雛形的方式有很多曹宴，在這里就不一一詳細(xì)描述。其中包括：xhtml/css雛形創(chuàng)建模式歉提，紙面雛形創(chuàng)建模式笛坦，甚至protocasting.
- 隨時(shí)關(guān)注
對(duì)于一個(gè)已入行的交互設(shè)計(jì)師而言，最大的挑戰(zhàn)之一是這個(gè)行業(yè)的發(fā)展速度苔巨。每天版扩，新的設(shè)計(jì)師給這個(gè)行業(yè)帶來新的活力。因此侄泽，用戶期待這些新的交互會(huì)出現(xiàn)在你的網(wǎng)站上礁芦。聰明的交互設(shè)計(jì)師會(huì)經(jīng)常性地在網(wǎng)絡(luò)上搜索尋找新的交互模式，利用新技術(shù)（比如CSS3或者HTML5）來適應(yīng)這種變化悼尾，然后推動(dòng)媒體不斷向前發(fā)展柿扣。
上輯說到前面三個(gè)題目，本輯來說后三個(gè)闺魏。
▼
知名交互設(shè)計(jì)師
Cennydd Bowles致力于使網(wǎng)絡(luò)變得更好未状，他在電子商務(wù)、政府和社區(qū)網(wǎng)絡(luò)設(shè)計(jì)方面有數(shù)年的經(jīng)驗(yàn)析桥。作為一個(gè)Clearleft用戶體驗(yàn)師司草，他非常努力地思考、記錄和實(shí)踐信息架構(gòu)泡仗、交互設(shè)計(jì)和注重實(shí)用性埋虹，好像沒有明天一樣。Cennydd在他的博客中寫了關(guān)于用戶體驗(yàn)和交互設(shè)計(jì)的相關(guān)內(nèi)容：http://www.cennydd.co.uk/沮焕。
Nathan Curtis是EightShapes的創(chuàng)始人和主要負(fù)責(zé)人吨岭，EightShapes是一個(gè)位于華盛頓的用戶體驗(yàn)咨詢公司。Nathan從1996年開始從事包括用戶體驗(yàn)在內(nèi)的不同工作峦树。他感興趣的領(lǐng)域包括信息架構(gòu)辣辫，交互設(shè)計(jì)，可用性研究和前端開發(fā)魁巩。他從2006年開始創(chuàng)建EightShapes急灭，自此他幫助改善了華盛頓及全美國的客戶的用戶體驗(yàn)。
Tim Van Damme是一個(gè)24歲的界面設(shè)計(jì)師谷遂，他在比利時(shí)長大和工作葬馋。當(dāng)他不再為他的公司Made by Elepant 工作時(shí)，他會(huì)四處旅行或出席會(huì)議。Tim的個(gè)人博客在MaxVoltar.com畴嘶。
Uday Gajendar是一個(gè)交互設(shè)計(jì)師蛋逾，在美國硅谷有近十年的工作經(jīng)驗(yàn)。他的作品包括企業(yè)軟件窗悯，消費(fèi)類網(wǎng)站区匣，和在Oracle，Adobe蒋院，Cisco亏钩，Netflix公司，以及像frog和Involution這樣的機(jī)構(gòu)的VOIP應(yīng)用程序欺旧。他取得了密歇根大學(xué)的工業(yè)設(shè)計(jì)學(xué)位以及卡內(nèi)基梅隆大學(xué)的交互設(shè)計(jì)學(xué)位姑丑。Uday在美學(xué)、領(lǐng)導(dǎo)力和策略方面不斷拓展他的專業(yè)領(lǐng)域辞友。他也在San Jose State University教授交互設(shè)計(jì)栅哀。Uday經(jīng)常在他的博客Ghost in the Pixel中揣摩交互設(shè)計(jì)特殊的一面。
Theresa Neil是一個(gè)在德克薩斯州奧斯汀市的用戶體驗(yàn)顧問踏枣。從2001年起昌屉，她領(lǐng)導(dǎo)設(shè)計(jì)了超過80個(gè)實(shí)時(shí)網(wǎng)絡(luò)钙蒙、桌面和移動(dòng)應(yīng)用程序茵瀑。她最近的客戶包括Zenoss, Innography, PayPal, Pervasive, 和OneSpot。
Bill Scott是在加州Los Gatos的Netflix公司的用戶界面設(shè)計(jì)主管躬厌。他把界面設(shè)計(jì)和設(shè)計(jì)手法結(jié)合在一起马昨。Scott之前是Yahoo! Ajax的傳播者以及Yahoo!圖庫的管理員。他對(duì)設(shè)計(jì)實(shí)用型產(chǎn)品技術(shù)上和創(chuàng)意上獨(dú)到的見解為IT界寫下了一段迷人的歷史扛施。歡迎關(guān)注BillScott的博客Looks Good Works Well鸿捧。
想來做被推薦的中國交互設(shè)計(jì)師嗎？請(qǐng)?jiān)赥ezign的微信平臺(tái)（Tezign）回復(fù) D 填寫表格疙渣。
▼
工具
交互設(shè)計(jì)師用一系列不同的工具來完成他們的工作匙奴。無論他們是在一張餐巾紙上畫一個(gè)交互草圖還是給客戶介紹一個(gè)模擬雛形，他們的目的是相同的：通過交談來溝通妄荔。最重要的是泼菌，交互設(shè)計(jì)師需要良好的溝通。以下列出一小部分用于幫助溝通的工具啦租。請(qǐng)記住當(dāng)網(wǎng)頁界面最終創(chuàng)建好時(shí)哗伯，需要用諸如CSS、HTML篷角、Flash等面向用戶的（前端）技術(shù)來完成焊刹。
BALSAMIQ MOCKUPS是一個(gè)非常棒的Adobe Air應(yīng)用程序，使構(gòu)建交互變得非常容易。Balsamiq團(tuán)隊(duì)做得非常出色虐块，為用戶提供了大量實(shí)用的應(yīng)用設(shè)計(jì)的交互設(shè)計(jì)模板俩滥。此外，用戶可以很快地跟客戶分享構(gòu)建框架贺奠，建立起框架與更多方面間的聯(lián)系举农。
Omnigraffle是一款適用于Mac OS X系統(tǒng)的出色的繪圖軟件。交互設(shè)計(jì)師可以利用像Omnigraffle這樣的繪圖軟件創(chuàng)造出溫和的美感敞嗡。Omnigraffle加載了一系列值得稱道的功能颁糟，包括：點(diǎn)擊即可顯示功能（例如，你可以展示一個(gè)模式如何運(yùn)作）喉悴，繪制bezier曲線等棱貌。
盡管最早InDesign是一個(gè)頁面布局的應(yīng)用程序，主要是平面設(shè)計(jì)師在使用它箕肃，但它在交互設(shè)計(jì)中的實(shí)用性不容忽視婚脱，特別是它引入了EightShapes Unifyframework（見下文）。它是Adobe creativeSuite中的一員勺像，InDesign可能是將工作流程簡單化的一個(gè)理想工具障贸，它使你的團(tuán)隊(duì)工作起來更加容易。
最后但也是相當(dāng)重要的吟宦，我們不要忘了永遠(yuǎn)忠誠的Moleskine筆記本篮洁。用鉛筆和紙來繪制給架構(gòu)過程增加了一點(diǎn)人文因素，這是其他軟件工具所不能比擬的殃姓。再者袁波，所有人都可以參與。即便是最差的設(shè)計(jì)師都能畫“方框和箭頭”蜗侈。記得花錢買一些這樣的筆記本篷牌，然后在跟客戶第一次見面的時(shí)候帶上他們，特別是當(dāng)白板不是那么方便的時(shí)候踏幻。
相關(guān)資源
用Balsamiq Mockups建立的Mockups To Go枷颊，是一個(gè)由用戶提供，可以馬上使用的交互設(shè)計(jì)組件和設(shè)計(jì)模式的合集该面。如果你發(fā)現(xiàn)自己在做一些現(xiàn)在已有的東西夭苗，你應(yīng)該立刻去查看這個(gè)設(shè)計(jì)庫；他們或許有和你的設(shè)計(jì)非常接近的模板吆倦。
OmniGraffle version 5.x****. Konigi公司免費(fèi)提供了一系列制作線框（低保真網(wǎng)頁設(shè)計(jì)圖）的圖形听诸。它包含了大多數(shù)你需要用來創(chuàng)建用戶界面的基本元素。
Unify使你的用戶體驗(yàn)設(shè)計(jì)更統(tǒng)一蚕泽。簡介如下：EightShapesUnify是一個(gè)模板晌梨、圖庫和其他組件的合集桥嗤，它使用戶體驗(yàn)設(shè)計(jì)師的設(shè)計(jì)更統(tǒng)一，有效和快速仔蝌。這個(gè)系統(tǒng)使用了AdobeCreative Suite泛领，最主要的一點(diǎn)，InDesign是其中至關(guān)重要的一個(gè)制作工具敛惊。
總之渊鞋，EightShapes嘗試規(guī)范交互（和用戶體驗(yàn)）設(shè)計(jì)師的工作流程。我還沒有嘗試使用這個(gè)系統(tǒng)瞧挤，但它的信息非常全面锡宋，同時(shí)有教學(xué)視頻叉钥，你可以馬上開始自學(xué)届吁。
把你的草圖都放在一起拍屑，讓所有人都參與進(jìn)來汉矿。
IxEdit允許在網(wǎng)頁里創(chuàng)建雛形。用這個(gè)加載在瀏覽器中的工具灌旧，可以將交互設(shè)計(jì)師創(chuàng)建的一些初級(jí)的xhtml/css/javascript的交互雛形可視化虫啥，從而加快設(shè)計(jì)的流程掺逼。IxEdit是一個(gè)被稱為“基于JavaScript的網(wǎng)頁交互設(shè)計(jì)工具显拜。通過IxEdit衡奥，設(shè)計(jì)師可以進(jìn)行DOM-scripting的實(shí)踐操作而無需寫代碼來改變、增加远荠、移動(dòng)或者變換他們網(wǎng)頁上的動(dòng)態(tài)元素”矮固。
▼
協(xié)會(huì)
用他們的話來講，IxDA提供了一個(gè)討論交互設(shè)計(jì)以及幫助其他熱衷于交互設(shè)計(jì)的人收集和增長學(xué)科知識(shí)的網(wǎng)絡(luò)平臺(tái)矮台。
盡管AIGA（AmericanInstitute of Graphic Arts）最初為平面設(shè)計(jì)師而成立乏屯，該組織自身意識(shí)到，平面設(shè)計(jì)師更頻繁地給新媒體設(shè)計(jì)組件瘦赫，在交互設(shè)計(jì)中起著重要的作用。在美國各地都有當(dāng)?shù)氐腁IGA組織蛤迎。在我熟悉的組織里他們主辦過很多活動(dòng)确虱，如Photoshop Layer Tennis,或藝術(shù)展覽等。AIGA很值得參加替裆。
▼
書籍
有關(guān)交互設(shè)計(jì)的書單可以排好幾個(gè)網(wǎng)頁校辩。在這里只列了其中最具代表性的5本。如果你真的急切的想要擴(kuò)大你的書庫辆童，在這里同時(shí)推薦一些關(guān)于用戶體驗(yàn)的書籍宜咒，可點(diǎn)擊 閱讀原文 查看。
1.Designing WebInterfaces:Principles and Patterns for Rich Interactions
2.The Principles of Beautiful Web Design
3.Designing the Obvious:A Common Sense Approach to Web Application Design
4.About Face 3: The Essentials of Interaction Design
5.Sketching User Experiences:Getting the Design Right and the Right Design (InteractiveTechnologies)
