起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識交互設(shè)計(jì)的未來：技術(shù)的改變使交互設(shè)計(jì)的可能性愈加豐富
Terry Cao是UXPin（一款線框圖與原型制作APP）的內(nèi)容策略專家。要了解如何掌握現(xiàn)在交互設(shè)計(jì)的藝術(shù)，可以參考免費(fèi)的電子書籍《Interaction Design Best Practices》。這本書中含AirBnB、 Google、 Apple、Etsy 以及其他諸多公司的30多余交互案例。
作為一種無形的設(shè)計(jì)，交互設(shè)計(jì)一直以來都是UX中最難的。以往，用戶會被簡單的交互吸引，如一個(gè)意料不到的動畫。但現(xiàn)在的動畫效果已經(jīng)隨處可見，包括那些以往覺得很難實(shí)現(xiàn)的微交互。
為了支持新技術(shù)，新的交互形態(tài)日益興起。但是，交互的基本原則是基本不變的。本文將探索交互設(shè)計(jì)在最近幾年的進(jìn)展，以及未來的發(fā)展趨勢。
一、交互的本質(zhì)仍未改變
交互設(shè)計(jì)不單單是指那些有趣的優(yōu)秀案例。美國賓夕法尼亞州立大學(xué)的研究專家稱，用戶更容易被網(wǎng)站中帶有交互特色的信息說服。
“Modality Interactivity對用戶來說更有說服力。因?yàn)檫@使用戶在瀏覽網(wǎng)站的時(shí)候更有趣，更吸引他們，并且?guī)椭脩魧W(wǎng)站信息產(chǎn)生更積極的態(tài)度?！?一位來自羅伯特·莫里斯大學(xué)的通訊系助理教授Jeeyun Oh如是說，“交互（Interactivity）通過讓用戶更深層次地理解網(wǎng)站信息而更具說服力?！?/p>
Photo credit： http://styki.org.pl/#1
Photo credit: http://dubaiairportsreview.com/
交互的本質(zhì)就是參與（engagement）。無論你是哪個(gè)時(shí)代的設(shè)計(jì)師，這一點(diǎn)是不會變的；唯一不同的是用戶參與時(shí)采取的方法。交互設(shè)計(jì)樣式隨著HTML5、CSS、Javascript、jQuery等技術(shù)的支持而逐漸演變。過去的網(wǎng)站常常被大量內(nèi)部鏈接或圖片集限定——雖然如今依舊流行，但今天的我們需要用更聰明、更具創(chuàng)造力的方式去處理網(wǎng)站的交互設(shè)計(jì)。
無論采用什么樣的技術(shù)，以下5個(gè)核心的交互設(shè)計(jì)原則需牢記。受人類交際和情感的影響，這些原則可以通過技術(shù)來輔助，但不要輕易改變它們：
- 目標(biāo)驅(qū)動設(shè)計(jì)（Goal-driven Design)。注重用戶角色、用戶場景劇本及用戶體驗(yàn)地圖，以保證每一處交互細(xì)節(jié)都能讓用戶離欲完成的目標(biāo)更近。
- 可用性（Usability）。網(wǎng)站功能在達(dá)到趣味性之前，應(yīng)先符合用戶直覺、易信賴。只為用戶提供真正需要的內(nèi)容，并努力減少所有的細(xì)節(jié)沖突及認(rèn)知負(fù)擔(dān)。
- 功能可見性和符號（Affordances & Signifiers）。由于視覺是最主要的感官，形式必須反射功能。
- 易學(xué)性（Learnability）。與網(wǎng)站已有設(shè)計(jì)及內(nèi)部資源相一致的界面會更有預(yù)見性，這意味用戶的學(xué)習(xí)成本很低。易學(xué)易懂的界面自然更具可用性，因?yàn)檫@樣的界面認(rèn)知成本就少了很多。
- 反饋與響應(yīng)時(shí)間（Feedback & Response Time）。界面必須以人性的角度迅速做出響應(yīng)，如此才會有像真實(shí)的對話一樣逼真的體驗(yàn)。交互設(shè)計(jì)就應(yīng)該像人與人之間的對話，而不是機(jī)器對用戶所言所行的簡單反應(yīng)。
Photo credit: http://utmanareredo.se/#
Photo credit: http://www.frankdigital.com.au/
無論是過去、現(xiàn)在、還是將來，這5個(gè)原則始終決定著交互設(shè)計(jì)的演變趨勢以及未來的發(fā)展方向。
二、現(xiàn)代交互設(shè)計(jì)技巧
新的功能性意味著新的交互方式，也算是娛樂用戶的新方法?，F(xiàn)在的用戶已經(jīng)習(xí)慣了通過響應(yīng)式和自適應(yīng)系統(tǒng)所實(shí)現(xiàn)的美好設(shè)計(jì)——響應(yīng)式和自適應(yīng)系統(tǒng)創(chuàng)造的永動循環(huán)讓更多的設(shè)計(jì)師不斷地運(yùn)用這樣的設(shè)計(jì)來滿足用戶，讓用戶更加習(xí)慣。
舉例說明，以下幾個(gè)設(shè)計(jì)技巧并非獨(dú)立的設(shè)計(jì)趨勢，它們都是響應(yīng)式和自適應(yīng)設(shè)計(jì)潮流下推動交互發(fā)展的因素之一。
- 視差滾動及效果
- 卡片式布局
- 《Interaction Design Best Practices》一書中所描述的視頻與動畫
- 需要某些身體動作（如滑動、點(diǎn)擊等）的設(shè)計(jì)元素
- 微交互，一種在使用web網(wǎng)站或app過程中出現(xiàn)的獨(dú)特樣式（試想一下鬧鐘響起，或刪除郵件的微交互場景）
- 來自網(wǎng)站和app的推送通知及提醒
- 個(gè)性化及本地工具，讓用戶感覺到每一款app或網(wǎng)站產(chǎn)品都是為他們定制的、創(chuàng)造讓用戶難忘的使用場景（例如，社交地圖軟件Waze會根據(jù)用戶的使用習(xí)慣自動詢問用戶是否于下午六點(diǎn)開車回家）
- 通過點(diǎn)擊或滑動快速展開/隱藏內(nèi)容
- 通過懸停效果或動作呈現(xiàn)次要內(nèi)容
- 元素與元素之間的過渡及循環(huán)功能
Photo credit: http://mixpl.us/withoutyou
Net+設(shè)計(jì)的MixPlus是一個(gè)展示交互設(shè)計(jì)藝術(shù)的優(yōu)秀案例，接下來讓我們了解一下它的交互設(shè)計(jì)技巧。
MixPlus是向用戶展示一系列唱片專輯的網(wǎng)站。點(diǎn)擊選擇一款曲風(fēng)，然后在播放列表里滾動挑選、并播放歌曲。這一動畫過程生動有趣，引導(dǎo)用戶從網(wǎng)頁第一屏使用到最后一屏。在網(wǎng)頁底部，用戶可以繼續(xù)瀏覽更長的播放列表，也可以返回到Net+。多種唱片專輯的選擇鼓舞著用戶進(jìn)行交互、或選擇另外一種新的曲風(fēng)重新查找喜歡的歌曲。
整個(gè)交互過程雖然有限，但過程十分流暢。用戶不需要得到過多的解釋即可了解網(wǎng)站的功能。（建議讀者自行到該網(wǎng)站進(jìn)行體驗(yàn)。）
還有一個(gè)選擇，設(shè)計(jì)者本可以把每首歌曲設(shè)計(jì)成卡片的形式，并以懸停的方式進(jìn)行展示播放按鈕，但這種方式相對沒那么迷人有趣。
三、可用性的新視角
移動應(yīng)用促使我們重新思考所有的網(wǎng)站體驗(yàn)，不僅僅是產(chǎn)品在不同設(shè)備上的呈現(xiàn)方式。
不久前，設(shè)計(jì)界的關(guān)注點(diǎn)還在“above the scroll”上，即用戶看到的網(wǎng)站第一屏內(nèi)容。但隨著小屏?xí)r代的到來以及滾動重新成為重要的設(shè)計(jì)工具，設(shè)計(jì)師們的想法也隨之改變。蘋果手表的Digital Crown則進(jìn)一步重塑了導(dǎo)航的交互樣式（通過旋轉(zhuǎn)表冠而不是捏合或滑動手勢）。
Photo credit: http://vaalentin.github.io/2015/
那些認(rèn)為屏幕滾動會抹殺用戶參與度的觀念是用戶體驗(yàn)中得一大謬見，而且這一謬見很難克服。但偉大的UX Myths網(wǎng)站提供的一些數(shù)據(jù)可以消除我們的顧慮。
- 數(shù)據(jù)分析師Chartbeat分析了20億訪問數(shù)據(jù)后發(fā)現(xiàn)，“一個(gè)正常的網(wǎng)頁中，用戶66%的注意力都放在了折線之下（below the fold，即網(wǎng)頁第一屏以下的內(nèi)容）。
- 可用性專家Jakob Nielsen的眼動研究表明，當(dāng)人們的注意力放在折線之上時(shí)， 人們的確會向下滾動屏幕，尤其是網(wǎng)站的設(shè)計(jì)鼓勵人們這樣做。
在上面的響應(yīng)式網(wǎng)站中，第一屏只有“Hello”一個(gè)信息，但屏幕底部的箭頭鼓勵用戶對該網(wǎng)站進(jìn)行更深一步的探索，即讓屏幕滾動以查看第一屏以下的內(nèi)容。點(diǎn)擊鼠標(biāo)即可實(shí)現(xiàn)屏幕滾動，同時(shí)隨著一系列簡潔的動效、向用戶展示網(wǎng)站的更多內(nèi)容。
Photo credit: http://vaalentin.github.io/2015/
當(dāng)然這個(gè)網(wǎng)站受了mobile-first philosophy（優(yōu)先考慮移動端的設(shè)計(jì)哲學(xué)）的影響，但你會發(fā)現(xiàn)，它在臺式電腦上的體驗(yàn)也是不錯(cuò)的。
說起滾動這一交互樣式，我們發(fā)現(xiàn)：假設(shè)每一屏的內(nèi)容都是吸引人的，長滾動便不會成為可用性的障礙。大量的單頁網(wǎng)站設(shè)計(jì)案例證明，交互設(shè)計(jì)能以線性的形式展示網(wǎng)站內(nèi)容，創(chuàng)造難忘的用戶體驗(yàn)。
作為了不起的交互設(shè)計(jì)前沿之一的移動設(shè)計(jì)擁有著豐富的交互樣式，重新定義著用戶與技術(shù)之間的關(guān)系。
大家對比一下移動設(shè)備上的tap手指點(diǎn)擊和網(wǎng)站上的click鼠標(biāo)點(diǎn)擊。就在兩年前，由于大多數(shù)的網(wǎng)站仍然需要click模式的點(diǎn)擊動作或使用滾動條這樣的網(wǎng)站工具，用戶對手機(jī)網(wǎng)站的使用還顯得很笨拙。然而現(xiàn)在，用戶已經(jīng)對滑動、點(diǎn)擊、放大縮小之類的手勢操作駕輕就熟，可以輕松獲取小屏設(shè)備上的信息。
考慮到響應(yīng)式和自適應(yīng)設(shè)計(jì)，每一個(gè)網(wǎng)站的交互設(shè)計(jì)不能僅僅局限于臺式機(jī)的界面，還應(yīng)該考慮app等小屏設(shè)備（包括可穿戴設(shè)備）的交互體驗(yàn)。每一種設(shè)備都需要獨(dú)特的交互設(shè)計(jì)，并影響著用戶在訪問過程中的體驗(yàn)。
值得注意的是，用戶通會過多種設(shè)備入口訪問所需網(wǎng)站。任意一端的惡劣體驗(yàn)隨時(shí)都會造成用戶的永久性流失。因此我們的交互設(shè)計(jì)要達(dá)到跨平臺的一致性，減少用戶在跨平臺使用中的認(rèn)知負(fù)擔(dān)。
另外，界面設(shè)計(jì)和交互設(shè)計(jì)是自適應(yīng)和響應(yīng)式體驗(yàn)的兩個(gè)重要方面。當(dāng)我們從mobile-first角度考慮屏幕中哪些內(nèi)容該優(yōu)先排列時(shí)，我們也要思索用戶在實(shí)際過程中是如何與這些內(nèi)容互動的。
四、放眼未來
技術(shù)的改變使交互設(shè)計(jì)的可能性愈加豐富。畢竟，我們大部分正在進(jìn)行的設(shè)計(jì)都由對不熟悉的設(shè)備迅速熟悉起來的需求所掌控。
Photo credit: http://project360.mammut.ch/#home
你肯定會說可穿戴設(shè)備的交互設(shè)計(jì)將會成為下一個(gè)熱門事件。無論接下來的設(shè)備是手表、項(xiàng)鏈，還是鞋子里的芯片，與皮膚接觸的人機(jī)交互將會越來越受注重，其每一個(gè)細(xì)節(jié)都將起到重要作用。從今往后，設(shè)計(jì)界將更多地關(guān)注如何讓用戶對皮膚上的設(shè)備感覺舒適。
Photo credit: http://blossomtype.com/#
個(gè)性化依舊會是交互設(shè)計(jì)的一個(gè)目標(biāo)。地理定位軟件已經(jīng)創(chuàng)造了很棒的場景體驗(yàn)，但是像Blossom Type這樣的很多網(wǎng)站變得更加流行，因?yàn)樗鼈冊试S用戶自行輸入信息來創(chuàng)建唯一、可分享的用戶體驗(yàn)。（Blossom Type通過用戶輸入的內(nèi)容為用戶創(chuàng)建有趣的電影。）
隨著技術(shù)的發(fā)展和用戶對新工具的使用，交互設(shè)計(jì)幾乎每天都在發(fā)展變化。盡管我們無法預(yù)見下一個(gè)大事件，但我們可以持續(xù)敏銳地觀察周遭、掌握哪些正在銷售的設(shè)備和工具、了解用戶喜歡以哪種方式獲得數(shù)字信息等，為下一個(gè)大事件的來臨做好準(zhǔn)備。
最后，人類交互的主觀性使交互設(shè)計(jì)更具想象力和趣味性。
欲更多地了解現(xiàn)代交互設(shè)計(jì)的藝術(shù)，可以閱讀《Interaction Design Best Practices》一書。
【10個(gè)其他免費(fèi)交互設(shè)計(jì)工具及資源】
在交互設(shè)計(jì)的領(lǐng)域里，你并不孤單。下面是我們最喜愛的10個(gè)工具和資源，它們可以幫助你了解交互設(shè)計(jì)的發(fā)展變化。
- Interaction Design Basics – Usability.gov outlines questions and considerations for interaction design that are a good springboard on the path to UI/UX design.
- “How Do You Design Interaction?” – A refreshing approach that teaches you how to design interactions as conversations.
- “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.
- 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.
- Interaction Design Best Practices: Mastering Time, Responsiveness and Behavior – The free 106-page guide helps you master the trickier intangible elements of IxD.
- 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.
- 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.
- “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.
- iOS Human Interface Guidelines – Apple’s guide outlines how developers and designers should create for the mobile web.
- 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.
作者：Terry Cao ? 2015-5-7 10:05am ? ?發(fā)表于DESIGN & DEV
原文鏈接：http://thenextweb.com/dd/2015/05/07/the-future-of-interaction-design/
譯者：小媛，神經(jīng)認(rèn)知語言學(xué)碩士? 現(xiàn)從事互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)? 熱衷于用戶體驗(yàn)和交互設(shè)計(jì)
譯文地址：http://www.jianshu.com/p/daaa353e6d95
版權(quán)聲明：若該文章涉及版權(quán)問題，請聯(lián)系我們主編，QQ：419297645
- 目前還沒評論，等你發(fā)揮！
