交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及其他诸多公司的30多余交互案例。“Modality Interactivity对用户来说更有说服力。因为这使用户在浏览网站的时候更有趣,更吸引他们,并且帮助用户对网站信息产生更积极的态度。” 一位来自罗伯特·莫里斯大学的通讯系助理教授Jeeyun Oh如是说,“交互(Interactivity)通过让用户更深层次地理解网站信息而更具说服力。”欲更多地了解现代交互设计的艺术,可以阅读《Interaction Design Best Practices》一书。


Terry Cao是UXPin(一款线框图与原型制作APP)的内容策略专家。要了解如何掌握现在交互设计的艺术,可以参考免费的电子书籍《Interaction Design Best Practices》。这本书中含AirBnB、 Google、 Apple、Etsy 以及其他诸多公司的30多余交互案例。

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

作为一种无形的设计,交互设计一直以来都是UX中最难的。以往,用户会被简单的交互吸引,如一个意料不到的动画。但现在的动画效果已经随处可见,包括那些以往觉得很难实现的微交互。

为了支持新技术,新的交互形态日益兴起。但是,交互的基本原则是基本不变的。本文将探索交互设计在最近几年的进展,以及未来的发展趋势。

一、交互的本质仍未改变

交互设计不单单是指那些有趣的优秀案例。美国宾夕法尼亚州立大学的研究专家称,用户更容易被网站中带有交互特色的信息说服。

“Modality Interactivity对用户来说更有说服力。因为这使用户在浏览网站的时候更有趣,更吸引他们,并且帮助用户对网站信息产生更积极的态度。” 一位来自罗伯特·莫里斯大学的通讯系助理教授Jeeyun Oh如是说,“交互(Interactivity)通过让用户更深层次地理解网站信息而更具说服力。”

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://styki.org.pl/#1

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://dubaiairportsreview.com/

交互的本质就是参与(engagement)。无论你是哪个时代的设计师,这一点是不会变的;唯一不同的是用户参与时采取的方法。交互设计样式随着HTML5、CSS、Javascript、jQuery等技术的支持而逐渐演变。过去的网站常常被大量内部链接或图片集限定——虽然如今依旧流行,但今天的我们需要用更聪明、更具创造力的方式去处理网站的交互设计。

无论采用什么样的技术,以下5个核心的交互设计原则需牢记。受人类交际和情感的影响,这些原则可以通过技术来辅助,但不要轻易改变它们:

  1. 目标驱动设计(Goal-driven Design)。注重用户角色、用户场景剧本及用户体验地图,以保证每一处交互细节都能让用户离欲完成的目标更近。
  2. 可用性(Usability)。网站功能在达到趣味性之前,应先符合用户直觉、易信赖。只为用户提供真正需要的内容,并努力减少所有的细节冲突及认知负担。
  3. 功能可见性和符号(Affordances & Signifiers)。由于视觉是最主要的感官,形式必须反射功能。
  4. 易学性(Learnability)。与网站已有设计及内部资源相一致的界面会更有预见性,这意味用户的学习成本很低。易学易懂的界面自然更具可用性,因为这样的界面认知成本就少了很多。
  5. 反馈与响应时间(Feedback & Response Time)。界面必须以人性的角度迅速做出响应,如此才会有像真实的对话一样逼真的体验。交互设计就应该像人与人之间的对话,而不是机器对用户所言所行的简单反应。

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://utmanareredo.se/#

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://www.frankdigital.com.au/

无论是过去、现在、还是将来,这5个原则始终决定着交互设计的演变趋势以及未来的发展方向。

二、现代交互设计技巧

新的功能性意味着新的交互方式,也算是娱乐用户的新方法。现在的用户已经习惯了通过响应式和自适应系统所实现的美好设计——响应式和自适应系统创造的永动循环让更多的设计师不断地运用这样的设计来满足用户,让用户更加习惯。

举例说明,以下几个设计技巧并非独立的设计趋势,它们都是响应式和自适应设计潮流下推动交互发展的因素之一。

  • 视差滚动及效果
  • 卡片式布局
  • 《Interaction Design Best Practices》一书中所描述的视频与动画
  • 需要某些身体动作(如滑动、点击等)的设计元素
  • 微交互,一种在使用web网站或app过程中出现的独特样式(试想一下闹钟响起,或删除邮件的微交互场景)
  • 来自网站和app的推送通知及提醒
  • 个性化及本地工具,让用户感觉到每一款app或网站产品都是为他们定制的、创造让用户难忘的使用场景(例如,社交地图软件Waze会根据用户的使用习惯自动询问用户是否于下午六点开车回家)
  • 通过点击或滑动快速展开/隐藏内容
  • 通过悬停效果或动作呈现次要内容
  • 元素与元素之间的过渡及循环功能

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://mixpl.us/withoutyou

Net+设计的MixPlus是一个展示交互设计艺术的优秀案例,接下来让我们了解一下它的交互设计技巧。

MixPlus是向用户展示一系列唱片专辑的网站。点击选择一款曲风,然后在播放列表里滚动挑选、并播放歌曲。这一动画过程生动有趣,引导用户从网页第一屏使用到最后一屏。在网页底部,用户可以继续浏览更长的播放列表,也可以返回到Net+。多种唱片专辑的选择鼓舞着用户进行交互、或选择另外一种新的曲风重新查找喜欢的歌曲。

整个交互过程虽然有限,但过程十分流畅。用户不需要得到过多的解释即可了解网站的功能。(建议读者自行到该网站进行体验。)

还有一个选择,设计者本可以把每首歌曲设计成卡片的形式,并以悬停的方式进行展示播放按钮,但这种方式相对没那么迷人有趣。

三、可用性的新视角

移动应用促使我们重新思考所有的网站体验,不仅仅是产品在不同设备上的呈现方式。

不久前,设计界的关注点还在“above the scroll”上,即用户看到的网站第一屏内容。但随着小屏时代的到来以及滚动重新成为重要的设计工具,设计师们的想法也随之改变。苹果手表的Digital Crown则进一步重塑了导航的交互样式(通过旋转表冠而不是捏合或滑动手势)。

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://vaalentin.github.io/2015/

那些认为屏幕滚动会抹杀用户参与度的观念是用户体验中得一大谬见,而且这一谬见很难克服。但伟大的UX Myths网站提供的一些数据可以消除我们的顾虑。

  • 数据分析师Chartbeat分析了20亿访问数据后发现,“一个正常的网页中,用户66%的注意力都放在了折线之下(below the fold,即网页第一屏以下的内容)。
  • 可用性专家Jakob Nielsen的眼动研究表明,当人们的注意力放在折线之上时, 人们的确会向下滚动屏幕,尤其是网站的设计鼓励人们这样做。

在上面的响应式网站中,第一屏只有“Hello”一个信息,但屏幕底部的箭头鼓励用户对该网站进行更深一步的探索,即让屏幕滚动以查看第一屏以下的内容。点击鼠标即可实现屏幕滚动,同时随着一系列简洁的动效、向用户展示网站的更多内容。

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://vaalentin.github.io/2015/

当然这个网站受了mobile-first philosophy(优先考虑移动端的设计哲学)的影响,但你会发现,它在台式电脑上的体验也是不错的。

说起滚动这一交互样式,我们发现:假设每一屏的内容都是吸引人的,长滚动便不会成为可用性的障碍。大量的单页网站设计案例证明,交互设计能以线性的形式展示网站内容,创造难忘的用户体验。

作为了不起的交互设计前沿之一的移动设计拥有着丰富的交互样式,重新定义着用户与技术之间的关系。

大家对比一下移动设备上的tap手指点击和网站上的click鼠标点击。就在两年前,由于大多数的网站仍然需要click模式的点击动作或使用滚动条这样的网站工具,用户对手机网站的使用还显得很笨拙。然而现在,用户已经对滑动、点击、放大缩小之类的手势操作驾轻就熟,可以轻松获取小屏设备上的信息。

考虑到响应式和自适应设计,每一个网站的交互设计不能仅仅局限于台式机的界面,还应该考虑app等小屏设备(包括可穿戴设备)的交互体验。每一种设备都需要独特的交互设计,并影响着用户在访问过程中的体验。

值得注意的是,用户通会过多种设备入口访问所需网站。任意一端的恶劣体验随时都会造成用户的永久性流失。因此我们的交互设计要达到跨平台的一致性,减少用户在跨平台使用中的认知负担。

另外,界面设计和交互设计是自适应和响应式体验的两个重要方面。当我们从mobile-first角度考虑屏幕中哪些内容该优先排列时,我们也要思索用户在实际过程中是如何与这些内容互动的。

四、放眼未来

技术的改变使交互设计的可能性愈加丰富。毕竟,我们大部分正在进行的设计都由对不熟悉的设备迅速熟悉起来的需求所掌控。

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://project360.mammut.ch/#home

你肯定会说可穿戴设备的交互设计将会成为下一个热门事件。无论接下来的设备是手表、项链,还是鞋子里的芯片,与皮肤接触的人机交互将会越来越受注重,其每一个细节都将起到重要作用。从今往后,设计界将更多地关注如何让用户对皮肤上的设备感觉舒适。

交互设计的未来:技术的改变使交互设计的可能性愈加丰富

Photo credit: http://blossomtype.com/#

个性化依旧会是交互设计的一个目标。地理定位软件已经创造了很棒的场景体验,但是像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.

 

作者:Terry Cao   2015-5-7 10:05am    发表于DESIGN & DEV

原文链接:http://thenextweb.com/dd/2015/05/07/the-future-of-interaction-design/

译者:小媛,神经认知语言学硕士  现从事互联网产品设计  热衷于用户体验和交互设计

译文地址:http://www.jianshu.com/p/daaa353e6d95

版权声明:若该文章涉及版权问题,请联系我们主编,QQ:419297645

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/31795/

(0)
CatherineCatherine
上一篇 2017-06-02 20:09
下一篇 2017-06-02 22:29

相关推荐

  • 以一个实际项目为例|从0到1的产品中,交互设计师如何避免踩坑

    除了自身执行力上对设计师专业能力的要求,对产品体验的敏感度,也要适当关注一下产品思维的提升,减少在设计过程中踩着“坑”艰难前行。

    2017-05-16
  • 译文 | 车载系统交互设计畅想Part3:主动性辅助面板-场景式车载助理

    在第一篇章中,我通过对智能汽车车载中控仪表的重新设计来减少驾驶中过多信息对驾驶员的注意力干扰。我的设计思路是通过多维度的交互操作来帮助驾驶员完成一些简单的操作任务,同时保证双手不离开方向盘。通过更多最对新手驾驶员的采访研究与测试,我又在第二章节中针对消除驾驶过程中的焦虑情绪做了分析与方案设计。在本章节中,我试图总结前两章节的研究发现,并设计一套针对智能驾驶的主动控制系统。

    2017-04-30
  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26
  • 为流畅的交互体验,创建完美的用户流程

    如果有人问你:你怎样定义“流程”这个词,或者说举一个案例来进行描述,你会怎么说?这篇译文,作者给出了详细的解答。一是外文文章一般与当地的文化有关,所以翻译成中文很多时候都失去了它原来的味道,让中国读者感到有点不顺畅,这个是很正常的,很多小说翻译成中文阁主也不爱看。所以为减少这个情况的影响,阁主会在文章后加上阁主自己对文章的总结和建议~以下是原文~

    2017-04-28
  • 真诚的用户体验设计

    不知道身为「用户体验设计师(UX Designer)」的诸位是否也有过和我一样的困惑:初入行时兴冲冲觉得自己就是那个为一切产品用户体验问题负责的「真命天子」,积极主动去搜集反馈访谈用户,可当真正卷起袖子打算为解决这些「体验问题」大干一场的时候,却发现有些无从下手。

    2017-05-26
  • 用户体验设计的5大目标

    我们常说产品的用户体验设计很重要,但究竟怎样才算好的用户体验呢?以下5大UX设计目标层层递进,帮你在最短的时间内明确用户体验设计方向,成为一名合格的UX设计师。“我能否以最简单,快捷,直接的方式得到我想要的东西?”最好是“别让我思考”。“我是否享受使用该产品的过程?”“该产品是否有足够的吸引力让我愿意长期使用”,甚至“成为我生活的一部分,让我戒不掉?”“该产品是否能调动我的力量,让我主动加入产品宣传推广的队伍。”

    2017-04-30
  • 探讨:对话式交互会成为未来主流的交互方式吗?

    本文详细分析了对话式交互的优缺点和应用场景,适合产品经理、UI设计师和交互设计师来阅读。

    2017-05-07
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • Fitbit:一份用户体验案例研究

    当谈论到锻炼时,这个世界上有三类人:每时每刻都在健身的健康达人;那些一天中全部锻炼内容就是从前门走到车里,每天在沙发看电视的人们;在这两者之间,想变的健康强壮但缺少一些动力去健身房的人(又称在屁股上踢一脚才行动的人)。 我,和我知道的大多数人一样,都是第三种类型的人。我们被称为是

    微信热点 2018-03-31
  • iOS 9人机界面指南(三):iOS 技术 (中)

    文章索引译者注:本文译自苹果官方人机界面指南 iOS Human Interface Guidelines (2015年10 月21日),由腾讯ISUX设计师翻译整理,非发文者一人之作。译文首发于ISUX博客,如在阅读过程中发现错误与疏漏之处,欢迎不吝指出。后续章节会陆续更新,敬请期待。

    2017-05-29