隨著單頁式設計和移動端的興起，網(wǎng)頁中的交互設計越來越重要了。為了打造流暢而可靠的用戶體驗，你需要對交互設計有更加深入的了解。

正如同我們在《交互設計***實踐（卷1）》中所述，要做好交互設計，需要對多個學科有著深入的了解和熟練的掌控，這也是非常符合邏輯的——你要試圖讓一系列事物所構成的系統(tǒng)令人感到友好，易于學習并且非常實用，這并不是一件簡單易行的事情。

所以，讓我們從最基礎的交互設計的概念開始，深入了解核心設計原則，并且借助五步設計流程，更好地完成交互設計。

真正優(yōu)秀的交互設計，是由人情紐帶所驅動的。那么問題來了，人的情緒紐帶又是如何轉化成數(shù)字化的界面和接口的呢？答案的當然是存在的，但是并非是由非黑即白的是與否、對與錯所構成。根據(jù)我們的經(jīng)驗，真正成功的交互設計立足于基本用戶體驗設計的***執(zhí)行。

看起來不像是一個答案？沒事，我們慢慢看下去。

1、結果驅動式設計

即使不親自參與用戶研究，但是你還是得知道如何對設計構建成熟的認知。

我們在《用戶體驗設計師必備的4種UX文檔》這篇文章中對于交互設計師必須知道的四種UX文檔有了深入的介紹，這些文檔——或者說過程，可以幫你構建起有血有肉的“用戶”，對具體的產(chǎn)品流程有更真實的還原：

1、用戶角色（Persona）：Persona文檔（控制在2~5個）通常需要包含你的目標用戶。作為Persona中的虛構的角色，它的屬性和特征是基于產(chǎn)品研究和用戶定位來設定的，用作后續(xù)設計過程中所面對的“理想用戶”，本質上，它就是一個占位符。作為人物設定，其中會包含個人信息，遠不止于年齡和收入信息這么簡單。Persona 文檔的目標是利用角色來驗證你的目標用戶是如何感受如何看待你的設計的。

2、移情地圖（Empathy Map）：它像是一個輕量級的Persona文檔，在資源短缺時間緊的狀況下，可以使用這個文檔。Empathy Map 將 Persona 中的角色的個性和性格部分移除了，更加專注于用戶在特定情況下的感受。

3、用戶劇本（User Scenario）：如果Persona 是幫你設計了一個故事中的角色，那么User Scenario 就是故事的劇本。用戶劇本通常是圍繞著一個特定目標來設計的。比如說，第二天是母親節(jié)，要為母親預訂一份禮物。目標很明確，要達成目標，用戶需要點擊幾次按鈕，走哪些流程，需要多長時間，如何在過程中融入情感，貫穿始終。對整個用戶流程有了預判之后，設計師對于UI和UX的設計就有了把握。

4、用戶地圖（Customer Journey Map）：這份文檔同上門的用戶劇本很像，但是它比起前者跨度更大，貫穿體驗設計始終。設計人員可以對產(chǎn)品的背景有更深入的了解才能更好地設計，而產(chǎn)品投入使用之后也不是最終結束，這也是跨度如此之大的原因所在。用戶旅圖將會涵蓋角色信息、用戶劇本和移情地圖的全部信息。這么設定并不是要讓用戶旅圖成為一個大雜燴，而是要將用戶性格和用戶流程、交互過程結合到一起來看待問題，每個階段不同環(huán)節(jié)，都牽涉到不同的情緒和情感。

2、可用性設計

確保可用性是***限度的設計。如果你的用戶都無法正常使用產(chǎn)品，就更談不上吸引他們了。看看下面的 EventBrite 的座位設計吧。

這個在線的APP允許活動的組織者從活動創(chuàng)建之初就可以保留特定的座位，整個流程保留了大量的細節(jié)（特定的行、列，是否靠近舞池等），設計者將多個步驟、多個流程整合到一個流程當中。

就像EventBrite 這樣，復雜的系統(tǒng)尤其要保證它的易用性，整個流程要流暢，讓用戶感到不費吹灰之力就能搞定。在探索系統(tǒng)上耗費的時間越短，用戶就越能做好手頭真正重要的事情。

3、可供性設計和能指

可供性設計，在我們之前的文章中曾經(jīng)解釋過：

Affordance 是 James J. Gibson 造出來的一個詞，Gibson 是20世紀最重要的認知心理學家之一，他的生態(tài)學式視知覺論和直接知覺為認知心理學開辟了新的領地。affordance 是 afford (提供、給予、承擔)的名詞形式，環(huán)境的 affordance 是指這個環(huán)境可提供給動物的屬性，無論是好的還是壞的，所以我認為“可供性”是一個合適的翻譯。Gibson 用來解釋 affordance 的例子是這樣的：如果一塊地表面接近水平（而不是傾斜的），接近平整的（而不是凸起或凹陷的），以及充分延伸的（與動物的尺寸相關），如果地表面的物質是堅硬的（與動物的重量相關），我們可稱它為基底、場地或地面，它是可以站上去的（stan-on-able），可讓四足或兩足動物保持豎直姿勢，它是可以行走（walk-on-able）和跑動（run-over-able）的，它不像水表面或沼澤表面之于一定重量的動物那樣是可陷入的（sink-into-able）。列出的四項屬性——水平、平整、延伸和堅硬——它們是這個表面的物理屬性，如果以物理中使用的度量衡去衡量它們的話，但是對于特定動物的支撐可供性，它們必須與動物關聯(lián)上才可以被衡量，它們不是抽象的物理屬性，它們是為所指動物特定的，與動物的姿勢和行為相關，所以 affordance 不能像我們在物理中那樣來衡量。

我們在探討交互設計的可供性之時，認為一個功能應該能為自己發(fā)聲，通過合理的方式聲明它本身的用處（道路可供人步行）。

能指（Signifiers）是個語言學概念：

能指和所指是語言學上的一對概念，能指意為語言文字的聲音，形象；所指則是語言的意義本身。按照語言學家或者哲學家們的劃分，人們試圖通過語言表達出來的東西叫”所指”，而語言實際傳達出來的東西叫”能指”。

簡單說來，可供性設計所傳達出來的東西，就是它的能指。（地面是平的表明人可以用腳在上面走路）

沒有能指，用戶也就無法真正察覺到其中的可供性設計。

在上面的案例中，你能看到按鈕設計的進化和發(fā)展。***個按鈕僅僅只是單詞，沒有能指，而第三個按鈕加上了圓角邊框和陰影層次，反映出它作為“按鈕”的特征。

[[146649]]

能指同樣可以以比喻或者暗喻的形式存在，因為人們需要明白他們?yōu)槭裁匆@個對象進行互動，而不止是知道他們可以。正如同上門iPhone 屏幕底部的托盤，你能看到圓角邊框的按鈕，從而了解我們可以按它，其中的電話、郵件和音符等符號，則以特定的形象暗示用戶，點擊按鈕可以達到什么樣的目的，做什么樣的事情。

4、可學習性

在理想情況下，用戶對任何功能操作過一次之后，都會記住如何使用，然而現(xiàn)實情況并非如此。直覺化的操作和便于熟悉的設計必須貫徹到每個界面當中。

成功的交互設計，應該充分借助一致性與可預測性的設計，來降低整體的復雜度。舉個例子，有的頁面值得保留，鏈接盡量在新頁面中打開；而有的頁面涉及到特定的操作和流程，不能在新頁面中打開，防止用戶重新定位。

一致的設計確保了設計的可預測性，也提高了整體的可學習性。

UI模式是提升交互可學習性的常見戰(zhàn)術。許多網(wǎng)站和APP都已經(jīng)開始使用UI模式了，模式化的設計確保了一致性，也便于用戶熟悉，同時也可以在此基礎上添加更多大量的創(chuàng)意設計。

面包屑就是網(wǎng)頁設計中最常見的一種UI模式，它引導用戶更為有序地瀏覽網(wǎng)頁。不論你在網(wǎng)站哪個地方，面包屑會直觀告訴你瀏覽路徑。這種熟悉化的設計提升了網(wǎng)站的可學習性。具備可學習性的網(wǎng)站會鼓勵用戶使用它們，自然而然地提高了可用性。

5、反饋和響應時間

反饋是交互的心臟。每一次交互都是用戶產(chǎn)品之間的對話，所以你的產(chǎn)品***保持著友好、有趣且有用的特性。

無論是精心設計的動效，有趣而生動的微互動，還是一個簡單的嘟嘟聲，你的產(chǎn)品必須同用戶進行溝通，給予反饋，不論這個操作是否完成。

在下面的案例中，Hootsuite 通過貓頭鷹來展現(xiàn)用戶長時間不操作而“進入睡眠狀態(tài)”，這是符合邏輯且非常有趣的，這種反饋將停止更新的負面狀態(tài)設計得有趣而好玩。

另外一個給用戶反饋的重要因素是響應時間。通常給予用戶***的反饋就是盡快、盡早、立刻給予反饋。絕大多數(shù)時候，延時反饋會讓用戶感到非常煩躁的，除了極少數(shù)特殊的情況。

提升交互設計的五步流程

了解了交互設計的五大支柱之后，接下來我們來介紹提升交互設計的方法。

著名的交互設計師 Stephen P. Anderson 曾經(jīng)說過，如果有人假裝是你的界面，當你同他進行交互的時候，會大開眼界的。任何一個尷尬的反饋都會被放大，你會在這個過程中學會規(guī)避反人類的交互，當你完成整個過程，就可以開始編寫交互的腳本，調整結果了。

接下來，我們說說具體的流程：

1、角色扮演和互動：找兩個人來，一個扮演界面，另外一個記錄筆記。為扮演界面的人手持一個瀏覽器窗口紙板，并且同時通過投影儀投射出界面。你扮演用戶，同“界面”進行對話，你闡述并解釋用戶的目標，而“界面”則僅限于標簽、菜單和其他的UI元素來為你的操作進行“反饋”。

[[146650]]

2、勾勒出敘事線索：記錄者記錄每一個步驟的細節(jié)，包括任務和情緒。完成這個步驟，可以借助User Scenarios文檔來完成。

3、簡化步驟：有時候用戶要達成目標需要經(jīng)歷許多步驟（比如買票），然而在制作原型的時候，就應該將一個復雜的目標肢解成為一系列簡單的步驟（比如詢問目的地，然后設定行程）。舉個例子，維珍航空的階梯型設計，就是為了讓預訂過程更簡單易行。

4、控制用戶選擇：這可能是最艱難的一步，但是你必須盡量減少用戶的操作。時刻審問自己，這個步驟當中的每一個選項是不是非要不可的，如果不是，將它分離到其他的非關鍵位置。

5、注意微時刻：Micromoment，這是一個新的合成詞，指的是用戶在與界面進行交互的關鍵時刻，這時候用戶可能會猶豫、激進或者突然停止，我們姑且將其翻譯為微時刻。回想角色扮演的環(huán)節(jié)，你會記得那些猶豫、忐忑的時刻。為了讓交互更清晰，你應該充分運用每一個細節(jié)上的文案選取，結合可靠的UI模式，引導用戶在這些微時刻作出對的選擇。

如果不注意細節(jié)魔術師的魔術會失敗，同樣的道理，糟糕的交互會毀掉整個用戶體驗。上面的流程可以幫你讓交互設計成為界面和用戶溝通的橋梁，而非單純地讓界面“動起來”。

結語

交互設計并不只牽涉界面行為，它是一項基于用戶行為的適應性技術。用戶在功能和情感上喜歡什么，期待什么，這是關鍵。但是也正是基于這樣的限制，你所設計的產(chǎn)品應當是針對這些期望和需求而做的。所以，***的交互設計大概是這個樣子：對于用戶響應迅速，不會夾雜太多的思想，就如同一個***的魔術，流暢，值得期待，又符合邏輯。