[译]交互设计的5大支柱

1464103735-3021-B9yibobL5vyjpfUVBNfRwucvLRTQ

正如同我在《交互设计最佳实践:卷1》中描述的那样,要做好交互设计,需要对多个学科有着深入的了解和熟练的掌控,因为要使一个由一系列对象组成的系统让人用起来感觉良好、易于学习并且有用,是很不容易的一件事。

首先让我们从交互设计最基本的概念说起,分解其核心设计原则,然后通过五个步骤来更好地进行交互设计。

优秀的交互设计是由人类的连接驱动的。但是到底是什么驱动着人类连接,并且它又是如何转化为数字化界面的呢?这些问题的答案不是非黑即白的。在我们的经验中,优秀的交互设计依赖于基础用户体验设计的完美执行。

一、目标驱动的设计

即使你不亲自参与进行用户研究,但你还是需要知道对设计的构建有成熟的认知。

1464103736-5388-KdMn8PicUlq7kUJiajEmXd6oHBNg

我们找到了以下的用户体验设计过程,可以帮助你与那些有血有肉的用户保持同理心:

1)创建角色——角色是根据你的目标用户的行为和心理虚构出来的人物。当你在做至关重要的设计决策时,角色往往能作为参考派上用场,例如,“作为季节性购物者,莎莉会喜欢什么样的结帐过程?”

2)用户场景——与我们创建的角色相呼应,用户场景解释了角色在使用网站时将如何采取行动。例如,“黑色星期五,莎莉会在工作之前就准备好一长串的要网购的礼物清单。“用户场景迫使你去探索角色与你的产品交互的情境。

3)体验地图——从用户场景更进一步,体验地图记录了围绕单个交互的所有条件,包括情感和外部环境。“由于在滑雪旅行的时候莎莉的腿部骨折了,这让她很生气,作为季节性购物者,她一定会尽快地进行她的圣诞购物。”

这三个技巧帮助我们构建出了一幅完整的体验画面:用户、场景,整个情感旅程。

二、可用性

确保可用性是最低限度的设计。如果你的产品无法让用户正常地使用,还谈什么吸引用户。系统的可用性必须保证让用户觉得毫不费力。用户在探索系统上耗费的时间越短,就越能更快地完成操作。

三、功能可见性和表意符号

功能可见性的概念是指,一个功能必须为自己说话,并表明自己的用途(比如道路用来提供给用户行走)。而表意符号则象征或者暗示了功能可见性(比如平坦道路暗示你可以用脚在上面行走)。

没有表意符号,用户可能无法感知到功能的可见性。

1464103735-9445-ASePW61ic0ng4kf9ZNJODmkMtFjA

在上面的示例中,您可以看到按钮设计的进化。第一阶段它没有任何表意,看起来就像标准的文本,而第三阶段则类似于真实的按钮,具有圆形边缘和渐变。

1464103746-1342-2ZOvOLAykSXXQ1icPJiciakpFn3w

表意符号也可以比喻或者暗喻的形式存在,因为人们还需要知道为什么要与界面交互,而不仅仅是能不能交互。在上面的iPhone Dock示例中,隐喻的图像(手机、信封、音符)达到了沟通的目的,你会知道点击按钮可以达到什么样的目的。

四、易学性

在理想情况下,每个用户只要进行过一次操作后就能记住所有功能。然而现实情况并非如此。熟悉感和直觉性必须被设计到每一个界面中去。

成功的交互设计是通过创建一致性和可预测性的设计来降低整体的复杂度的。例如,有的页面应该保留,链接尽量在新页面中打开;而有的页面涉及到特定的操作和流程,不能在新页面中打开,防止用户重定向。

一致的设计确保了设计的可预测性,进而提高了易学性。

提高易学性的一个常见的策略是使用成熟的UI设计模式。许多网站和应用程序都已经在使用这些模式,用户对它们很熟悉,而你仍然有足够的创作空间来定制你站点中的设计元素。

1464103745-4829-CsuzoPNXOKwwhADmRp9HGFOGjqpQ

例如,面包屑导航就是一种常见的网页设计模式,用来帮助用户浏览网站。不管在什么网站,如果你看到面包屑导航,你就知道怎么使用。这种熟悉感有助于提高产品的易学性。当产品是易学的,就能鼓励人们去使用它们,自然而然地提高了可用性。

五、反馈和响应时间

反馈是交互的核心。因为每次交互都是用户和产品之间的对话,所以你的产品最好保持着友好、有趣且有用的特性。

无论是精心设计的动效、有趣而生动的微交互,还是一个简单的哔哔声,你的产品必须同用户进行沟通,给予反馈,不论这个操作是否完成。

在下面这个是来自于Hootsuite的例子,如果用户较长一段时间没有操作的话,这只猫头鹰就会“睡觉”,这样的反馈是聪明而有趣的,并且实际上把一个可能算是负面的体验(停止更新数据)转变成了一个积极的体验。

1464103750-8517-F15TubOvWCc1KrWgMXlrB7U4kE4g

反馈的另一个关键因素是响应时间。最好的状态当然是立即响应。想象一下,如果你在弹吉他,每个音调都在弹奏后好几秒才出来会多么让人烦躁。

改进交互的5个步骤

现在你已经知道了那些基础原则,接下来我们来介绍改进交互设计的方法。

著名的交互设计师斯蒂芬·安德森建议过,当你作为用户使用你的界面时,如果有个真人扮演你的界面与你交互,将会令你大开眼界。任何一个尴尬的反馈都会被放大,你会在这个过程中学会规避反人类的交互设计,一旦你完成了这些角色扮演,就可以开始编写交互的脚本,并重新组织你的交互了。

过程是这样的:

1)角色扮演和互动:随便抓两个人过来,一个作为界面,另一个做笔记。做一个浏览器窗口的牌子由扮演界面的人举着,再把界面用投影仪展示出来。然后,你扮演用户,同“界面”进行对话,其中你作为用户解释你的目标,而“界面”只能通过标签,菜单以及UI中的其他元素与你进行反馈。好好地观察并记录,看看结果会怎样。

1464103758-3453-B9yibobL5vyjpfUVBNfRwucvLRTQ

2)勾勒出故事线索:把体验的每一步都记录成文档,包括每一步的任务和用户情感。就像在《用户体验设计文档指南》中所讨论过的,这可能简单到只是几个用户场景,也可能复杂到是一个四层级体验地图。

1464103763-8266-BPtUSthjxykBWKEVyibCTWar29cw

3)简化步骤:有时候用户要达成目标需要经历许多步骤(比如在网上订机票)。在制作原型的时候,就应该将一个复杂的目标分解成为一系列简单的步骤(比如询问目的地,然后设定出发/到达日期,等等)。例如,维珍航空的阶梯型设计,就是为了让预订过程更简单易行。

1464103765-1494-ZMlSD0xK6gFVVfLCxhAXIq9dw5qg

4)限制用户的选择:这可能是最困难的一步,但是你必须尽量减少用户的操作。时刻提醒自己,这个步骤当中的每一个选项是不是非要不可的,如果不是,将它分离到其他的非关键位置。

5)注意微时刻:Micromoment,这是一个新的合成词,指的是用户在与界面进行交互的时候可能会犹豫,前进,或者突然停止。回想角色扮演的环节,你会记得那些犹豫、忐忑的时刻。为了让交互更清晰,你应该充分考虑每一个细节上的文案,结合可靠的UI模式,引导用户在这些微时刻作出对的选择。

不注意细节魔术师的魔术会失败,同样的道理,糟糕的交互会毁掉整个用户体验。上面的流程可以帮你让交互设计成为界面和用户沟通的桥梁,而非单纯地让界面“动起来”。

结语:

交互设计并不单单是关于界面的行为,它是一项基于用户行为的适应性技术,你必须知道你的目标用户在功能和情感上的喜好和期望。然后在技术限制的情况下,设计出令人满意的产品。

最好的交互设计大概就是这样的:你的产品要能及时响应,不要让人有太多的思考,并且操作起来很顺手。

-END-


作者:Jerry Cao,一位就职于UXPin的内容策略专家

原文地址:http://thenextweb.com/dd/2015/03/03/the-5-pillars-of-interaction-design/

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

(0)
iouedioued
上一篇 2016-05-24 23:26
下一篇 2016-05-24 23:34

相关推荐

  • APP中使用UI交互设计动效的三个好处

    1.让整个画面充满活力 在界面中加入了动态元素,可以很大的增加用户使用app趣味性,使整个app界面看起来不会那么枯燥,ui设计需要做的就是让 这些动态的元素效果有一种和用户在交流的情感。 来源 来源 来源 2.提高…

    2015-11-11
  • 为什么要考虑用户场景?

    这是个特别好的问题,因为我在还是新手的时候对这个问题也很疑惑。用户在哪个场景下用关我屁事啊?我只需要用户用得爽就行了嘛。

    2017-06-01
  • 什么是好UX?有哪些主要评判标准?

    这可能是UX领域没有人能真正全面回答的问题,我也只是根据经验给大家分享一下自己的看法。本文将从UX为出发点,阐释了什么是好的UX并与大家分享了UX界的一些新观点。

    2017-05-17
  • 浅析一个复杂页面的布局设计

    很多产品的信息量很大,又因为各种各样的原因设计师不能对内容进行轻易删减。如果不好好整理信息,会让界面越来越凌乱。我从去年开始做的很多项目都是这种情况,于是总结了一套简单好用,又有理有据的为复杂界面设计布局的方法。Logo、搜索、用户信息、导航、Explore功能列表、发帖发图、最新动态、朋友推荐、语言选择、网站声明、聊天板、我创建的、设置、注销……

    2017-05-03
  • 纽约视觉艺术学院SVA交互设计硕士毕业展 | 点赞按钮背后的学问

    SVA的交互设计专业汇集享有国际盛誉的设计师及其当今各大领域的专业人士,学生背景来自不同行业,有交互、数字媒体、纯艺、产品、平面、家居、建筑、计算机、社会学等等,学生之间能互补知识,拓展思路。要你设计一个点赞按钮,你会怎么设计?交互设计是什么?不知道的话,你可以回顾「谷歌UX交互设计师丨郑嘉」的分享会:用逻辑支持设计决定丨Google 设计师 郑嘉带你认识UX,她认为交互设计思维是用逻辑支持你的设计决定。SVA交互设计看点读交互的学生,...

    2018-05-04
  • AxureUX后台业务管理系统原型模板发布

    这是一套基于电商产品的后台业务管理系统原型模板,包含了商品、订单、库存、用户、促销、运营、内容、统计、财务、设置、权限等十多个电商后台系统管理模块。模板中提供了多套登录界面和布局框架方案,同时整理出了后台系统中各类常用的交互元素及组件,可以方便快速的复用到任何中大型系统项目原型方案中。模板框架采用了自适应布局处理,可以在各种屏幕分辨率下达到最佳的兼容性和浏览效果,同时所有功能模块二级界面都是单独设计并使用内联框架嵌入,可极大的提升输出效...

    2018-03-06
  • 社交APP-Same的产品和交互设计体验总结

    手机里总有一些app是下载试用了之后不会卸载的app,而same这款app在我的手机中是呆的时间最长的一款,我并不经常打开它,即使在其体验出现各种问题时,比如闪退,引导页进不去app(需杀掉进程进入,偶尔一次可进去…

    2016-03-14
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 超级干货:75条界面版式设计准则

    一个好的界面设计应该拥有高转化率且方便用户使用,换句话说:既能达到商业目的又能满足方便易用的要求。 有一个设计咨询公司根据自己的客户案例,总结了 75 个经过实践证明的原则: 1. 使用单栏布局代替多栏布局 …

    2016-07-14
  • 设计规范 | 组件控件结构体系—加载类

    本文作者将加载划分为6种类型,分别适用于不同的场景,各有优缺点。设计师在设计时,可以根据用户的使用场景和环境设计适合的加载。

    2017-08-04