作者：Terry Cao ? 2015-5-7 10:05am ? ?發表于DESIGN & DEV ? ? ?譯者：小媛
Terry Cao是UXPin（一款線框圖與原型制作APP）的內容策略專家。要了解如何掌握現在交互設計的藝術，可以參考免費的電子書籍Interaction Design Best Practices。這本書中含AirBnB, Google, Apple, Etsy 以及其他諸多公司的30多余交互案例。
作為一種無形的設計，交互設計一直以來都是UX中最難的。以往，用戶會被簡單的交互吸引，如一個意料不到的動畫。但現在的動畫效果已經隨處可見，包括那些以往覺得很難實現的微交互。
為了支持新技術，新的交互形態日益興起。但是，交互的基本原則是基本不變的。本文將探索交互設計在最近幾年的進展，以及未來的發展趨勢。
一、交互的本質仍未改變
交互設計不單單是指那些有趣的優秀案例。美國賓夕法尼亞州立大學的研究專家稱，用戶更容易被網站中帶有交互特色的信息說服。
“Modality Interactivity對用戶來說更有說服力。因為這使用戶在瀏覽網站的時候更有趣，更吸引他們，并且幫助用戶對網站信息產生更積極的態度。” 一位來自羅伯特·莫里斯大學的通訊系助理教授Jeeyun Oh如是說，“交互（Interactivity）通過讓用戶更深層次地理解網站信息而更具說服力。”
交互的本質就是參與（engagement）。無論你是哪個時代的設計師，這一點是不會變的；唯一不同的是用戶參與時采取的方法。交互設計樣式隨著HTML5、CSS、Javascript、jQuery等技術的支持而逐漸演變。過去的網站常常被大量內部鏈接或圖片集限定——雖然如今依舊流行，但今天的我們需要用更聰明、更具創造力的方式去處理網站的交互設計。
無論采用什么樣的技術，以下5個核心的交互設計原則需牢記。受人類交際和情感的影響，這些原則可以通過技術來輔助，但不要輕易改變它們：
1. 目標驅動設計（Goal-driven Design)。注重用戶角色、用戶場景劇本及用戶體驗地圖，以保證每一處交互細節都能讓用戶離欲完成的目標更近。
2. 可用性（Usability）。網站功能在達到趣味性之前，應先符合用戶直覺、易信賴。只為用戶提供真正需要的內容，并努力減少所有的細節沖突及認知負擔。
3. 功能可見性和符號（Affordances & Signifiers）。由于視覺是最主要的感官，形式必須反射功能。
4. 易學性（Learnability）。與網站已有設計及內部資源相一致的界面會更有預見性，這意味用戶的學習成本很低。易學易懂的界面自然更具可用性，因為這樣的界面認知成本就少了很多。
5. 反饋與響應時間（Feedback & Response Time）。界面必須以人性的角度迅速做出響應，如此才會有像真實的對話一樣逼真的體驗。交互設計就應該像人與人之間的對話，而不是機器對用戶所言所行的簡單反應。
無論是過去、現在、還是將來，這5個原則始終決定著交互設計的演變趨勢以及未來的發展方向。
二、現代交互設計技巧
新的功能性意味著新的交互方式，也算是娛樂用戶的新方法。現在的用戶已經習慣了通過響應式和自適應系統所實現的美好設計——響應式和自適應系統創造的永動循環讓更多的設計師不斷地運用這樣的設計來滿足用戶，讓用戶更加習慣。
舉例說明，以下幾個設計技巧并非獨立的設計趨勢，它們都是響應式和自適應設計潮流下推動交互發展的因素之一。
· 視差滾動及效果
· 卡片式布局
· Interaction Design Best Practices一書中所描述的視頻與動畫
· 需要某些身體動作（如滑動、點擊等）的設計元素
· 微交互，一種在使用web網站或app過程中出現的獨特樣式（試想一下鬧鐘響起，或刪除郵件的微交互場景）
· 來自網站和app的推送通知及提醒
· 個性化及本地工具，讓用戶感覺到每一款app或網站產品都是為他們定制的、創造讓用戶難忘的使用場景（例如，社交地圖軟件Waze會根據用戶的使用習慣自動詢問用戶是否于下午六點開車回家）
· 通過點擊或滑動快速展開/隱藏內容
· 通過懸停效果或動作呈現次要內容
· 元素與元素之間的過渡及循環功能
Net+設計的MixPlus是一個展示交互設計藝術的優秀案例，接下來讓我們了解一下它的交互設計技巧。
MixPlus是向用戶展示一系列唱片專輯的網站。點擊選擇一款曲風，然后在播放列表里滾動挑選、并播放歌曲。這一動畫過程生動有趣，引導用戶從網頁第一屏使用到最后一屏。在網頁底部，用戶可以繼續瀏覽更長的播放列表，也可以返回到Net+。多種唱片專輯的選擇鼓舞著用戶進行交互、或選擇另外一種新的曲風重新查找喜歡的歌曲。
整個交互過程雖然有限，但過程十分流暢。用戶不需要得到過多的解釋即可了解網站的功能。（建議讀者自行到該網站進行體驗。）
還有一個選擇，設計者本可以把每首歌曲設計成卡片的形式，并以懸停的方式進行展示播放按鈕，但這種方式相對沒那么迷人有趣。
三、可用性的新視角
移動應用促使我們重新思考所有的網站體驗，不僅僅是產品在不同設備上的呈現方式。
不久前，設計界的關注點還在“above the scroll”上，即用戶看到的網站第一屏內容。但隨著小屏時代的到來以及滾動重新成為重要的設計工具，設計師們的想法也隨之改變。蘋果手表的Digital Crown則進一步重塑了導航的交互樣式（通過旋轉表冠而不是捏合或滑動手勢）。
那些認為屏幕滾動會抹殺用戶參與度的觀念是用戶體驗中得一大謬見，而且這一謬見很難克服。但偉大的UX Myths網站提供的一些數據可以消除我們的顧慮。
· 數據分析師Chartbeat分析了20億訪問數據后發現，“一個正常的網頁中，用戶66%的注意力都放在了折線之下（below the fold，即網頁第一屏以下的內容）。
· 可用性專家Jakob Nielsen的眼動研究表明，當人們的注意力放在折線之上時， 人們的確會向下滾動屏幕，尤其是網站的設計鼓勵人們這樣做。
在上面的響應式網站中，第一屏只有“Hello”一個信息，但屏幕底部的箭頭鼓勵用戶對該網站進行更深一步的探索，即讓屏幕滾動以查看第一屏以下的內容。點擊鼠標即可實現屏幕滾動，同時隨著一系列簡潔的動效、向用戶展示網站的更多內容。
當然這個網站受了mobile-first philosophy（優先考慮移動端的設計哲學）的影響，但你會發現，它在臺式電腦上的體驗也是不錯的。
說起滾動這一交互樣式，我們發現：假設每一屏的內容都是吸引人的，長滾動便不會成為可用性的障礙。大量的單頁網站設計案例證明，交互設計能以線性的形式展示網站內容，創造難忘的用戶體驗。
作為了不起的交互設計前沿之一的移動設計擁有著豐富的交互樣式，重新定義著用戶與技術之間的關系。
大家對比一下移動設備上的tap手指點擊和網站上的click鼠標點擊。就在兩年前，由于大多數的網站仍然需要click模式的點擊動作或使用滾動條這樣的網站工具，用戶對手機網站的使用還顯得很笨拙。然而現在，用戶已經對滑動、點擊、放大縮小之類的手勢操作駕輕就熟，可以輕松獲取小屏設備上的信息。
考慮到響應式和自適應設計，每一個網站的交互設計不能僅僅局限于臺式機的界面，還應該考慮app等小屏設備（包括可穿戴設備）的交互體驗。每一種設備都需要獨特的交互設計，并影響著用戶在訪問過程中的體驗。
值得注意的是，用戶通會過多種設備入口訪問所需網站。任意一端的惡劣體驗隨時都會造成用戶的永久性流失。因此我們的交互設計要達到跨平臺的一致性，減少用戶在跨平臺使用中的認知負擔。
另外，界面設計和交互設計是自適應和響應式體驗的兩個重要方面。當我們從mobile-first角度考慮屏幕中哪些內容該優先排列時，我們也要思索用戶在實際過程中是如何與這些內容互動的。
四、放眼未來
技術的改變使交互設計的可能性愈加豐富。畢竟，我們大部分正在進行的設計都由對不熟悉的設備迅速熟悉起來的需求所掌控。
你肯定會說可穿戴設備的交互設計將會成為下一個熱門事件。無論接下來的設備是手表、項鏈，還是鞋子里的芯片，與皮膚接觸的人機交互將會越來越受注重，其每一個細節都將起到重要作用。從今往后，設計界將更多地關注如何讓用戶對皮膚上的設備感覺舒適。
個性化依舊會是交互設計的一個目標。地理定位軟件已經創造了很棒的場景體驗，但是像Blossom Type這樣的很多網站變得更加流行，因為它們允許用戶自行輸入信息來創建唯一、可分享的用戶體驗。（Blossom Type通過用戶輸入的內容為用戶創建有趣的電影。）
隨著技術的發展和用戶對新工具的使用，交互設計幾乎每天都在發展變化。盡管我們無法預見下一個大事件，但我們可以持續敏銳地觀察周遭、掌握哪些正在銷售的設備和工具、了解用戶喜歡以哪種方式獲得數字信息等，為下一個大事件的來臨做好準備。
最后，人類交互的主觀性使交互設計更具想象力和趣味性。
欲更多地了解現代交互設計的藝術，可以閱讀Interaction Design Best Practices一書。
【10個其他免費交互設計工具及資源】
在交互設計的領域里，你并不孤單。下面是我們最喜愛的10個工具和資源，它們可以幫助你了解交互設計的發展變化。
1. Interaction Design Basics – Usability.gov outlines questions and considerations for interaction design that are a good springboard on the path to UI/UX design.
2. “How Do You Design Interaction?” – A refreshing approach that teaches you how to design interactions as conversations.
3. “Smart Transitions in User Experience Design” by Smashing Magazine – A look at a variety of simple and effective animations that help guide users through website designs.
4. Interaction Design Best Practices: Mastering Words, Visual and Space – The basics of interaction design are rooted in basic design theory; this free 115-page guide teaches you how to master the tangible elements of IxD.
5. Interaction Design Best Practices: Mastering Time, Responsiveness and Behavior – The free 106-page guide helps you master the trickier intangible elements of IxD.
6. Origins of Famous Micro Interactions – Everything from the “You’ve got mail!” announcement to the Facebook like is a micro interaction. Learn more about how they came to be.
7. Interaction Design Experiments – How do different interactions work? Take a look at a variety of options to help pick the best interaction patterns for your projects.
8. “Making and Breaking UX Best Practices” by UX Booth – The rules for user experience design are changing constantly; this guide helps you understand the roots of common practices and tools.
9. iOS Human Interface Guidelines – Apple’s guide outlines how developers and designers should create for the mobile web.
10. 2015 IxD Awards – The winning projects and finalists create an inspiring set of best practices and examples of how to create different and interesting projects.
原文鏈接：http://thenextweb.com/dd/2015/05/07/the-future-of-interaction-design/
=====================================================譯者簡介
小媛，神經認知語言學碩士? 現從事互聯網產品設計? 熱衷于用戶體驗和交互設計
如需轉載，請聯系作者并注明簡書原文地址
