[译]交互设计的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

相关推荐

  • 快速用 Sketch 绘制30个图标

    长得好看的人都已关注操作分解:一个正方形,两个同等直径的圆形即可完成,最后旋转多选矩形 Edit 后可以一起改圆角正方形不停地裁剪一个椭圆加长方形,复制即可圆角矩形加两个不同大小的圆合成小矩形旋转角度,最后拉下 Radius 即可选中锚点删掉,调下倾斜度,复制合成添加锚点一拉一调添加左右两个锚点的时候放大比较容易处理号细节锚点的 radius合成后记得 Flatten 下,就可以选择锚点加 radius添加钢笔锚点,并且 Show Gr...

    2018-04-09
  • 日照这家单位招人啦!提成、五险一金、带薪培训、年终奖、节日福利···

    关于我们与其说我们是一个团队,我倒觉得我们更像一个温暖的大家庭。工作上我们团结协作、互相体恤,生活上我们互相帮助、彼此鼓励,家人遇到困扰,我们会拧成一股绳共度难关,家人有喜事有收获,我们会由衷的祝贺!我们每一个人都在用真心去经营我们的置业网大家庭,所以我们无比珍惜和感恩,也希望你和我们一样将它视如珍宝……公司简介日照置业网传媒有限公司主要经营各类广告的发布代理及各项活动策划,各类网站制作管理维护与设计,目前经营包含日照置业网等6家网站,...

    2018-04-08
  • 那些年苹果做错的设计

    设计不是艺术,它不是孤立存在的,更不是设计师的自娱自乐。设计永远和人、使用场景、用户需求相关联。iOS会不断地更新迭代它的设计,除了有商业目的上的考虑外,更多的是根据时代(人、环境、需求)的变化而变化,去做符合当下的设计。

    2017-05-16
  • iOS10 交互设计启示

    导读:本文用交互设计的思维对iOS10的新特性进行分析。撇开平时我们考虑的界面排布,页面元素等问题不谈,将视角转移到屏幕外的东西:如时间维度的,空间维度的,手势操作等等,以提升我们的用户体验。本文作者是蘑…

    2017-08-04
  • 100本UI设计/交互设计PDF电子书资源,UI设计师进阶必读书目,还在持续更新哦【024期】

    好素材,不加班今天小编为您精选了【100本UI设计/交互设计PDF电子书】大小:3.07G提供方式:百度网盘获取方式:请查看文章底部部分书籍展示领取素材的方式长按二维码回复:024长按二维码回复:024长按二维码回复:024无需分享直接获取素材热门素材推荐▶UI设计师作品集模板,PSD格式【001期】▶设计项目展示经典范例四套【002期】▶三套2.5D插画设计素材合集【003期】▶C4D设计素材包含建筑【004期】▶100多套欧美网页设...

    2018-05-07
  • Adobe的UX设计系列:如何为移动应用设计错误状态

    人非圣贤,孰能无过。当人们操作用户界面的时候,错误难免会发生。有时候是因为用户做了错误操作,有时候则是由于应用本身出了问题。无论原因如何,出现的错误以及对其处理的方式,都对用户体验产生巨大的影响。糟糕的错误处理方式以及无用的报错信息会让用户感到万分沮丧,甚至会导致用户放弃继续使用你的应用程序。

    2017-05-15
  • 为女性设计APP的7个小技巧

    Groove CEO解释了如何以正确的方式为女性设计APP。 提示:如果你将花,心形,及娃娃混在一起设计,那你可能需要重新思考你的设计。 当我的公司Groove着手建立一个定期跟踪器,我们知道这将是一个挑战。 搜索以女性客户为…

    2015-04-28
  • UI最佳实践:深度解析模态窗口

    模态已成为今天的可怕的弹出窗口的版本。用户发现模态窗口很骚扰人,人们本能地自动关闭这些窗口。

    2017-05-05
  • 设计师要懂心理学の眼见非脑见

    我们一般认为,当我们观察周围的一切时,眼睛会将看到的信息传输给大脑,大脑再对信息进行处理,让我们感受到真实的世界。但其实不然,脑见并非眼见,因为大脑总会解析眼睛看到的所有信息。试举一例,请观察下图: …

    2014-11-26
  • 产品经理需要用心做好的交互体验——权限获取

    满城尽带黄金甲里,有句台词说得好,“朕给你的,才是你的,朕不给你,你不能抢”。用户给APP授权了,APP才能使用,直接索取或者暗度陈仓,效果往往会适得其反。今天就让小Q讲讲她的交互心得吧~很多APP会在初次使用的过程中直接弹框索取权限,这确实是最简单的实现方式,但被拒的可能性也最大。另外一类APP会在询问时通过一些小技巧变着法的诱导用户点击“允许”。实现成本不会比第一种高出很多,但获取授权的几率会增大。还有一种APP,会等用户用到相关功...

    2018-01-30