值得你深入了解的交互設計五大支柱

 　　真正優秀的交互設計，是由人情紐帶所驅動的。那麼問題來了，人的情緒紐帶又是如何轉化成數字化的界面和接口的呢?答案的當然是存在的，但是並非是由非黑即白的是與否、對與錯所構成。根據我們的經驗，真正成功的交互設計立足於基本用戶體驗設計的完美執行。

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

　　1、結果驅動式設計

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

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

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

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

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

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

　　2、可用性設計

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

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

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

　　3、可供性設計和能指

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

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

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

　　能指(Signifiers)是個語言學概念：

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

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

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

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

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

　　4、可學習性

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

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

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

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

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

　　5、反饋和響應時間

　　反饋是交互的心髒。每一次交互都是用戶產品之間的對話，所以你的產品最好保持著友好、有趣且有用的特性。

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

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

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

　　提升交互設計的五步流程

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

　　著名的交互