準(zhǔn)備好涉足交互設(shè)計(jì)了嗎坦报？

相較于網(wǎng)頁設(shè)計(jì)波瀾不驚的開端当犯，交互設(shè)計(jì)的成長之路漫長而曲折公你。最初，網(wǎng)絡(luò)設(shè)計(jì)師（web designer）這個術(shù)語更像是描述一個”平面設(shè)計(jì)師“（graphic designer）：一個關(guān)注于文字和圖面編排的設(shè)計(jì)師驯嘱。但是現(xiàn)在镶苞，大多數(shù)網(wǎng)站和在線應(yīng)用程序都是互動的。因而鞠评，現(xiàn)在的網(wǎng)頁設(shè)計(jì)師不再像以前傳統(tǒng)的平面設(shè)計(jì)師一樣茂蚓，而是需要做出哇暖不同的考慮。未來彌補(bǔ)這種差距剃幌，交互設(shè)計(jì)學(xué)科應(yīng)運(yùn)而生聋涨。

一、學(xué)習(xí)計(jì)劃

階段一：什么是交互

（一）交互設(shè)計(jì)概念

僅在數(shù)十年前负乡，第一個互動系統(tǒng)首次亮相牍白，交互設(shè)計(jì)也就由此產(chǎn)生。新的界面帶來了新的挑戰(zhàn)抖棘，涌現(xiàn)出一批新的設(shè)計(jì)師來接受這個挑戰(zhàn)茂腥。

交互設(shè)計(jì)，就像用戶體驗(yàn)設(shè)計(jì)（user experience designer）切省，為促進(jìn)人和環(huán)境的互動不斷發(fā)展最岗。但不像用戶體驗(yàn)設(shè)計(jì)包含了所有用戶的軟件和系統(tǒng)，交互設(shè)計(jì)師僅考慮用戶和電腦之間的互動朝捆。這樣的定位被稱為”人機(jī)交互“般渡。

（二）哪些理念引領(lǐng)交互設(shè)計(jì)

2.1目標(biāo)驅(qū)動設(shè)計(jì)

雖然交互設(shè)計(jì)師并不嚴(yán)格要求進(jìn)行用戶研究，但全面的用戶研究結(jié)果是最佳導(dǎo)向設(shè)計(jì)必不可少的芙盘。在每一個設(shè)計(jì)學(xué)科領(lǐng)域驯用，藝術(shù)家首先必須承他們的缺陷，然后設(shè)計(jì)一個解決方案儒老。設(shè)定清晰的用戶目標(biāo)蝴乔，以使得形式和功能完美結(jié)合。

2.2神奇的界面

理想狀態(tài)下界面不應(yīng)該在用戶的腦海中出現(xiàn)——他們應(yīng)該簡單地看到界面作為底層系統(tǒng)的擴(kuò)展贷盲。為此淘这，最佳交互設(shè)計(jì)并不存在：他們不會花很長時(shí)間去加載或回應(yīng)剥扣；他們不會讓用戶去思考巩剖；他們不會給用戶增加煩惱铝穷。只給用戶需要的，然后走下一步佳魔。

2.3實(shí)用性

交互設(shè)計(jì)師必須考慮他們設(shè)計(jì)的界面的實(shí)用性曙聂。界面使底層系統(tǒng)易于被理解和使用。

2.4啟示性

剪刀的設(shè)計(jì)讓不熟悉剪刀的人一下子就明白哪里是手持鞠鲜，哪里是剪切宁脊。交互設(shè)計(jì)也一樣。形式服從于功能贤姆。鏈接就應(yīng)該像鏈接榆苞，按鈕就應(yīng)該像按鈕，搜索框就應(yīng)該像搜索框霞捡。啟示性代表了參與者與他們周圍環(huán)境之間的可能性行為坐漏。

2.5可學(xué)習(xí)性

大量用來組織用戶界面的都是熟悉的組件，這與用戶習(xí)慣和界面使用習(xí)慣有關(guān)系碧信。當(dāng)面臨相似的設(shè)計(jì)挑戰(zhàn)時(shí)赊琳，優(yōu)秀的設(shè)計(jì)師不會花時(shí)間去重新設(shè)計(jì)一個組件，相反他們會尋找網(wǎng)上優(yōu)秀的交互設(shè)計(jì)砰碴。交互設(shè)計(jì)師應(yīng)該花大力氣讓這個界面易于掌握和學(xué)習(xí)躏筏。這一點(diǎn)需要對當(dāng)下的設(shè)計(jì)慣例、啟示性及網(wǎng)絡(luò)整體的實(shí)用性都非常的熟悉呈枉。

（三）交互設(shè)計(jì)師做什么

3.1組織宣傳設(shè)計(jì)策略

一個交互設(shè)計(jì)師需要知道他/她為誰設(shè)計(jì)趁尼，以及他們的目標(biāo)是是什么。而這些信息則有信息架構(gòu)師和用戶研究人員來提供猖辫。接下來酥泞，交互設(shè)計(jì)師將評估設(shè)計(jì)目標(biāo)，展開設(shè)計(jì)策略住册。設(shè)計(jì)策略則幫助團(tuán)隊(duì)成員之間在什么樣的交互能夠幫助用戶實(shí)現(xiàn)目標(biāo)方面婶博，達(dá)成共識。

3.2確定和構(gòu)建交互框架

當(dāng)交互設(shè)計(jì)師有一個刺激他/她設(shè)計(jì)的好想法時(shí)荧飞，他/她會開始構(gòu)思這個界面凡人，用它來輔助必要的交互活動√纠可能會通過便簽本挠轴，寫字板來繪制互動設(shè)計(jì)；或者專業(yè)軟件工具耳幢；團(tuán)隊(duì)合作岸晦；獨(dú)立工作欧啤，等等。

3.3交互雛形

創(chuàng)建雛形的方式：xhtml/css雛形創(chuàng)建模式启上，紙面雛形創(chuàng)建模式邢隧，protocasting。

3.4隨時(shí)關(guān)注

經(jīng)常性的在網(wǎng)絡(luò)上搜索新的交互模式利用新技術(shù)（比如：CSS3/H5）來適應(yīng)這種變化冈在，然后推動媒體不斷向前發(fā)展倒慧。

（四）知名交互設(shè)計(jì)師

Cennydd Bowles

致力于使網(wǎng)絡(luò)變得更好，他在電子商務(wù)包券、政府和社區(qū)網(wǎng)絡(luò)設(shè)計(jì)方面有數(shù)年的經(jīng)驗(yàn)纫谅。作為一個Clearleft用戶體驗(yàn)師，他非常努力地思考溅固、記錄和實(shí)踐信息架構(gòu)付秕、交互設(shè)計(jì)和注重實(shí)用性，好像沒有明天一樣侍郭。Cennydd在他的博客中寫了關(guān)于用戶體驗(yàn)和交互設(shè)計(jì)的相關(guān)內(nèi)容询吴。

Nathan Curtis

是EightShapes的創(chuàng)始人和主要負(fù)責(zé)人，EightShapes是一個位于華盛頓的用戶體驗(yàn)咨詢公司励幼。Nathan從1996年開始從事包括用戶體驗(yàn)在內(nèi)的不同工作汰寓。他感興趣的領(lǐng)域包括信息架構(gòu)，交互設(shè)計(jì)苹粟，可用性研究和前端開發(fā)有滑。他從2006年開始創(chuàng)建EightShapes，自此他幫助改善了華盛頓及全美國的客戶的用戶體驗(yàn)嵌削。

Tim Van Damme

是一個24歲的界面設(shè)計(jì)師毛好，他在比利時(shí)長大和工作。當(dāng)他不再為他的公司Made by Elepant工作時(shí)苛秕，他會四處旅行或出席會議肌访。Tim的個人博客在。

Theresa Neil

是一個在德克薩斯州奧斯汀市的用戶體驗(yàn)顧問艇劫。從2001年起吼驶，她領(lǐng)導(dǎo)設(shè)計(jì)了超過80個實(shí)時(shí)網(wǎng)絡(luò)、桌面和移動應(yīng)用程序店煞。她最近的客戶包括Zenoss, Innography, PayPal, Pervasive,和OneSpot蟹演。

Bill Scott

是在加州Los Gatos的Netflix公司的用戶界面設(shè)計(jì)主管。他把界面設(shè)計(jì)和設(shè)計(jì)手法結(jié)合在一起顷蟀。Scott之前是Yahoo! Ajax的傳播者以及Yahoo!圖庫的管理員酒请。他對設(shè)計(jì)實(shí)用型產(chǎn)品技術(shù)上和創(chuàng)意上獨(dú)到的見解為IT界寫下了一段迷人的歷史。歡迎關(guān)注BillScott的博客Looks Good Works Well鸣个。

（五）交互設(shè)計(jì)工具

請記住當(dāng)網(wǎng)頁界面最終創(chuàng)建好時(shí)羞反，需要用諸如CSS布朦、HTML、Flash等面向用戶的（前端）技術(shù)來完成昼窗。

BALSAMIQ MOCKUPS是一個非常棒的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)擊即可顯示功能（例如图筹，你可以展示一個模式如何運(yùn)作）帅刀，繪制bezier曲線等。

盡管最早InDesign是一個頁面布局的應(yīng)用程序远剩，主要是平面設(shè)計(jì)師在使用它扣溺，但它在交互設(shè)計(jì)中的實(shí)用性不容忽視，特別是它引入了EightShapes Unifyframework（見下文）瓜晤。它是Adobe creativeSuite中的一員锥余，InDesign可能是將工作流程簡單化的一個理想工具，它使你的團(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，是一個由用戶提供攻冷，可以馬上使用的交互設(shè)計(jì)組件和設(shè)計(jì)模式的合集娃胆。如果你發(fā)現(xiàn)自己在做一些現(xiàn)在已有的東西，你應(yīng)該立刻去查看這個設(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是一個模板废封、圖庫和其他組件的合集，它使用戶體驗(yàn)設(shè)計(jì)師的設(shè)計(jì)更統(tǒng)一丧蘸，有效和快速蒸走。這個系統(tǒng)使用了AdobeCreative Suite遭赂，最主要的一點(diǎn)，InDesign是其中至關(guān)重要的一個制作工具。

總之氯庆，EightShapes嘗試規(guī)范交互（和用戶體驗(yàn)）設(shè)計(jì)師的工作流程庙楚。它的信息非常全面膝擂，同時(shí)有教學(xué)視頻亚斋，你可以馬上開始自學(xué)。

（七）有關(guān)交互設(shè)計(jì)師的書單

《Designing WebInterfaces:Principles and Patterns for Rich Interactions》

《The Principles of Beautiful Web Design》

《Designing the Obvious:A Common Sense Approach to Web Application Design》

《About Face 3: The Essentials of Interaction Design》

《Sketching User Experiences:Getting the Design Right and the Right Design (InteractiveTechnologies)》

階段二：交互原型設(shè)計(jì)

原型設(shè)計(jì)

階段三：用戶體驗(yàn)設(shè)計(jì)

用戶體驗(yàn)

階段四：產(chǎn)品設(shè)計(jì)

產(chǎn)品設(shè)計(jì)

階段五：信息架構(gòu)設(shè)計(jì)

高級交互設(shè)計(jì)師

二拂募、學(xué)習(xí)渠道

1庭猩、網(wǎng)站

2、官方Q群

3陈症、官方微信“