原文來(lái)自theNextWeb，作者Jerry Cao援奢，一位就職于UXPin的內(nèi)容策略專(zhuān)家挚躯，轉(zhuǎn)載請(qǐng)先詢問(wèn)筆者意見(jiàn)并注明出處乳规。

就像在《交互設(shè)計(jì)最佳實(shí)踐：卷１》中描述的那樣形葬，交互設(shè)計(jì)需要掌握用戶體驗(yàn)的多個(gè)學(xué)科——這是有意義的，因?yàn)槭挂粋€(gè)由對(duì)象組成的系統(tǒng)用起來(lái)令人感覺(jué)友好暮的，可學(xué)習(xí)并且有用笙以，這是很不容易。

讓我們首先來(lái)定義交互設(shè)計(jì)冻辩，分解核心原則猖腕，然后解釋如何通過(guò)五個(gè)步驟來(lái)更好地進(jìn)行交互設(shè)計(jì)。

良好的交互設(shè)計(jì)是由人類(lèi)的連接驅(qū)動(dòng)的恨闪。但是到底是什么驅(qū)使著人類(lèi)連接倘感，并且它又如何能轉(zhuǎn)化為電腦界面呢？這些問(wèn)題的答案不是那么直白的咙咽。在我們的經(jīng)驗(yàn)中老玛，我們發(fā)現(xiàn)交互設(shè)計(jì)的成功依賴于基礎(chǔ)用戶體驗(yàn)的完美執(zhí)行。

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

即使你不親自進(jìn)行用戶研究蜡豹，你還是需要知道如何把觀察成果融入你的設(shè)計(jì)中麸粮。

我們找到了以下的用戶體驗(yàn)設(shè)計(jì)過(guò)程，可以幫助你與那些有血有肉的用戶保持同理心：

１）創(chuàng)建角色镜廉，角色是根據(jù)你的目標(biāo)用戶的行為和心理虛構(gòu)出來(lái)的人物弄诲。當(dāng)你在做至關(guān)重要的設(shè)計(jì)決策時(shí)，角色往往能作為參考派上用場(chǎng)娇唯，例如齐遵，“作為季節(jié)性購(gòu)物者，莎莉會(huì)喜歡什么樣的結(jié)帳過(guò)程视乐？”

２）用戶場(chǎng)景——與我們創(chuàng)建的角色相呼應(yīng)洛搀，用戶場(chǎng)景解釋了角色在使用網(wǎng)站時(shí)將如何采取行動(dòng)。例如佑淀，“黑色星期五留美，季節(jié)性購(gòu)物者莎莉在工作之前就準(zhǔn)備好了一長(zhǎng)串要的網(wǎng)購(gòu)禮物清單∩烊校“用戶場(chǎng)景迫使你探索角色與你的產(chǎn)品交互的上下文谎砾。

３）體驗(yàn)地圖——從用戶場(chǎng)景更進(jìn)一步，體驗(yàn)地圖記錄圍繞單個(gè)交互的所有條件捧颅，包括情感和外部環(huán)境景图。“令莎莉生氣的滑雪旅行以她的腿部骨折為結(jié)束碉哑，作為季節(jié)性購(gòu)物者挚币，莎莉必須盡快進(jìn)行她的圣誕購(gòu)物了】鄣洌”

這三個(gè)技巧幫助我們構(gòu)建出了一幅完整的體驗(yàn)畫(huà)面：用戶妆毕、場(chǎng)景，整個(gè)情感旅程贮尖。

二笛粘、可用性

可用性是設(shè)計(jì)的最低限度。如果你的聽(tīng)眾不能使用產(chǎn)品湿硝，他們肯定不會(huì)想要這個(gè)產(chǎn)品薪前。讓我們來(lái)看看EventBrite的座位設(shè)計(jì)。

這個(gè)在線應(yīng)用程序允許活動(dòng)組織者創(chuàng)建可以預(yù)留座位的活動(dòng)关斜，包括從開(kāi)始到結(jié)束的流程甚至還有高水平的細(xì)節(jié)（如確定座位行數(shù)示括、桌子數(shù)量和如果有需要的話還可以提供一個(gè)舞池）。它把一個(gè)多步驟痢畜，多任務(wù)的過(guò)程固化為一條簡(jiǎn)單線性的操作路徑例诀。

就像EventBrite這樣随抠，系統(tǒng)的可用性必須使用戶覺(jué)得毫不費(fèi)力。讓用戶越少地花精力弄明白系統(tǒng)本身繁涂，他們可以越多地完成手頭的任務(wù)拱她。

三、功能可見(jiàn)性和表意符號(hào)

功能可見(jiàn)性的概念是指扔罪，一個(gè)功能必須為自己說(shuō)話秉沼，并表明自己的用途（比如道路用來(lái)提供給用戶行走）。而示意物則象征或者暗示了功能可見(jiàn)性（比如道路的平坦表面暗示你應(yīng)該用腳走路）矿酵。

沒(méi)有表意符號(hào)唬复，用戶可能無(wú)法感知到功能的可見(jiàn)性。

在上面的示例中全肮，您可以看到按鈕設(shè)計(jì)的進(jìn)化敞咧。第一階段它沒(méi)有任何表意，看起來(lái)就像標(biāo)準(zhǔn)的文本辜腺，而第三階段則類(lèi)似于真實(shí)的按鈕休建，具有圓形邊緣和漸變。

表意符號(hào)也可以是隱喻评疗，因?yàn)槿藗冞€需要知道為什么他們與界面能交互测砂，而不僅僅是能不能交互。在上面的iPhone?Dock示例中百匆，隱喻的圖像（手機(jī)砌些、信封、音符）達(dá)成了溝通的目的加匈，你便知道了帶圓形邊緣的按鈕是可以與我們交互的存璃。

四、易學(xué)性

在理想世界里雕拼，每個(gè)用戶只要經(jīng)過(guò)一次使用后就能記得所有功能有巧。但現(xiàn)實(shí)是完全不同的。熟悉感和直覺(jué)性必須被設(shè)計(jì)到每一個(gè)界面中去悲没。

成功的交互設(shè)計(jì)是通過(guò)創(chuàng)建一致性和可預(yù)測(cè)性化解復(fù)雜性。例如男图，不要讓部分鏈接在新標(biāo)簽打開(kāi)示姿，同時(shí)又讓其他鏈接只在當(dāng)前頁(yè)重定向。同樣逊笆，不要讓一些圖片在模態(tài)窗打開(kāi)栈戳，同時(shí)其他的卻是在新標(biāo)簽頁(yè)打開(kāi)。

一致性構(gòu)成了可預(yù)測(cè)性难裆，進(jìn)而提高了易學(xué)性子檀。

提高可學(xué)習(xí)性的一個(gè)常見(jiàn)的策略是使用成熟的UI設(shè)計(jì)模式镊掖。許多網(wǎng)站和應(yīng)用程序都已經(jīng)在使用這些模式，所以用戶對(duì)它們很熟悉（其中模式是具有一致性的）褂痰，而你仍然有足夠的創(chuàng)作空間來(lái)定制你站點(diǎn)中的設(shè)計(jì)元素亩进。

例如，面包屑是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)模式缩歪，用來(lái)幫助用戶瀏覽網(wǎng)站归薛。不管你在什么網(wǎng)站，如果你看到面包屑匪蝙，你就理解它們是如何工作的主籍。這種熟悉感有助于提高產(chǎn)品的可學(xué)習(xí)性。當(dāng)產(chǎn)品是易學(xué)的逛球，就能鼓勵(lì)人們?nèi)ナ褂眠@些產(chǎn)品千元，自然就可以提高了可用性。

五颤绕、反饋和響應(yīng)時(shí)間

反饋是交互的核心幸海。因?yàn)槊看谓换ザ际怯脩艉彤a(chǎn)品之間的談話，你的產(chǎn)品最好能是友好的屋厘，有趣并且有幫助的涕烧。

不管是否精心設(shè)計(jì)了一個(gè)動(dòng)畫(huà)，一次美好的微交互汗洒，或者一聲簡(jiǎn)單的嗶议纯，你的產(chǎn)品都必須保持向用戶溝通任務(wù)是否完成（和下一步要做什么）。

在下面這個(gè)來(lái)自Hootsuite的例子溢谤，經(jīng)過(guò)一段較長(zhǎng)時(shí)間用戶沒(méi)有活動(dòng)的話瞻凤，這只貓頭鷹就會(huì)簡(jiǎn)單地去“睡覺(jué)”，而這是有意義的世杀，因?yàn)閼?yīng)用程序是從Twitter獲取數(shù)據(jù)的（并且也不想讓數(shù)據(jù)接口過(guò)載）阀参。這樣的反饋是聰明而有趣的，并且實(shí)際上把一個(gè)可能算是負(fù)面的體驗(yàn)（停止更新數(shù)據(jù)）轉(zhuǎn)變成了一個(gè)積極的體驗(yàn)瞻坝。

反饋的另一個(gè)關(guān)鍵因素是響應(yīng)時(shí)間蛛壳。最好的響應(yīng)時(shí)間是盡可能立即響應(yīng)。想象下如果這是你在彈吉他所刀，每個(gè)音調(diào)都在彈奏后好幾秒才出來(lái)會(huì)多么讓人懊惱衙荐。

改進(jìn)交互的5個(gè)步驟

現(xiàn)在你已經(jīng)知道了基礎(chǔ)元素，我們將介紹一系列我們發(fā)現(xiàn)的很有助于完善細(xì)節(jié)的設(shè)計(jì)步驟浮创。

著名的交互設(shè)計(jì)師斯蒂芬·安德森建議過(guò)忧吟，當(dāng)你作為用戶使用你的界面時(shí)，如果有個(gè)真人扮演你的界面與你交互斩披，將會(huì)令你大開(kāi)眼界溜族。你會(huì)聽(tīng)完所有界面反饋的大聲而尷尬的響應(yīng)讹俊，這將幫助你避免創(chuàng)建冰冷的機(jī)器人式交互。一旦你完成了這些角色扮演煌抒，你就可以開(kāi)始起稿你的故事仍劈，并重新組織你的交互。

過(guò)程是這樣的：

將交互變?yōu)榻巧缪?/b>——隨便抓兩個(gè)人摧玫，一個(gè)作為界面耳奕，另外一個(gè)做筆記。做一個(gè)瀏覽器窗口的牌子由扮演界面的人舉著诬像，再把界面用投影儀展示出來(lái)屋群。然后，開(kāi)始與你進(jìn)行對(duì)話坏挠，其中你作為用戶解釋你的目標(biāo)芍躏，而“界面”被限制了他們的反應(yīng)只能有標(biāo)簽，菜單以及UI中的其他元素降狠。好好地觀察視頻和文字記錄对竣，看結(jié)果會(huì)怎樣。

繪制出故事——把體驗(yàn)的每一步都記錄成文檔榜配，包括每一步的任務(wù)和用戶情感否纬。就像在《用戶體驗(yàn)設(shè)計(jì)文檔指南》中所討論過(guò)的，這可能簡(jiǎn)單到只是幾個(gè)用戶場(chǎng)景蛋褥，也可能復(fù)雜到是一個(gè)四層級(jí)體驗(yàn)地圖临燃。

簡(jiǎn)化步驟——用戶有時(shí)會(huì)有一些需要很多步驟的目標(biāo)（比如在網(wǎng)上買(mǎi)車(chē)，預(yù)訂機(jī)票）烙心。指南推薦的原型膜廊、用戶界面必須能夠把一個(gè)單獨(dú)而復(fù)雜的目標(biāo)分解為簡(jiǎn)單的步驟（像是簡(jiǎn)單地請(qǐng)求下目的地，再然后是出發(fā)／到達(dá)日期淫茵，等等）爪瓜。例如，美國(guó)維珍網(wǎng)站的臺(tái)階式表單設(shè)計(jì)把預(yù)訂過(guò)程變得比實(shí)際感覺(jué)容易得多匙瘪。

限制用戶的選擇——這可能是最困難的一步铆铆，但你確實(shí)必須最小化你提供給用戶的操作〉び鳎總是問(wèn)自己所有的選項(xiàng)在那一刻時(shí)間是不是都是關(guān)鍵的薄货。如果不是，就把它放到另一個(gè)會(huì)話里驻啤。

注意微時(shí)刻——微時(shí)刻是當(dāng)一個(gè)用戶與界面交互時(shí)可能猶豫，前進(jìn)荐吵，或者停止的時(shí)刻骑冗。如果你回顧角色扮演練習(xí)赊瞬，你會(huì)想過(guò)來(lái)一些能理解的時(shí)刻。為了讓談話變得清晰贼涩，可以利用縮微復(fù)制和UI模式巧涧，比如帶上下文的操作和選擇依賴式的輸入框（我們已經(jīng)在《2014年Web?UI模式》討論過(guò)）。

就像如果關(guān)掉細(xì)節(jié)遥倦，魔術(shù)師的技巧將會(huì)失敗那樣谤绳，一個(gè)糟糕的交互可以毀掉整個(gè)用戶體驗(yàn)。上面描述的過(guò)程中袒哥，我們將幫助你把交互作為一種談話而不是一種動(dòng)畫(huà)界面來(lái)設(shè)計(jì)缩筛。

如果你想要更多的靈感和優(yōu)秀的交互設(shè)計(jì)案例，這個(gè)Quora問(wèn)題里囊括了從電影到Core77和PatternTap這類(lèi)電影網(wǎng)站等在內(nèi)的很多優(yōu)秀來(lái)源堡称。

結(jié)尾辭

交互設(shè)計(jì)不是關(guān)于界面的行為瞎抛，它是關(guān)于如何適應(yīng)現(xiàn)有技術(shù)并且基于人的行為的。你必須知道你的目標(biāo)用戶功能和情感上的喜好和期望却紧。然后基于技術(shù)限制桐臊，去設(shè)計(jì)令人滿意的產(chǎn)品。

最好的交互設(shè)計(jì)幾乎就只是這樣：只需要你的產(chǎn)品能及時(shí)響應(yīng)晓殊，無(wú)需多余的思考断凶，并且工作起來(lái)立竿見(jiàn)影。

文中提到的《交互設(shè)計(jì)最佳實(shí)踐：卷１》\《用戶體驗(yàn)設(shè)計(jì)文檔指南》\《2014年Web UI模式》可在此處下載巫俺，建議先保存到網(wǎng)盤(pán)~