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

相关推荐

  • 不止于美:浅析信息图形设计

    人在喝完可乐一小时内会有什么反应?高速发展的中国互联网在一分钟内会发生些什么事情?美国大选,川普和希拉里的支持率到底有多大差距?信息图带你一分钟搞懂这些事!随着经济技术的发展,信息化科技化速度越来越快,信息量的不断增加,使我们对于信息的整理与识别要求也越来越高。繁忙的工作生活下,如何使信息更为直观的提供给用户,信息图形设计在这种环境下应运而生。

    2017-04-30
  • 案例分析|上传作品时,设计师也要包装一下

    前几天看见我的第一个铁粉——佳佳在站酷网站上传了她的首发作品,虽然对于首发作品来说还算不错,但我是还是为她着急,为啥呢?因为缺乏包装的技巧!所以,我单独写一篇自己的感受和建议。

    2017-04-30
  • 【交互基础】系列之解析移动端导航设计模式

    鉴于目前交互设计的知识体系较为混乱,我写了这个[交互基础]系列专题,旨在整理移动端交互设计基础知识。巩固自己的知识体系,也与大家共勉,打好基础,才能飞得更高!

    2017-04-30
  • 实例分析:运营活动项目中交互设计的4大维度

    文章以作者最近做的一个会员卡绑定激活的运营活动作为案例,总结了交互设计中的一些“套路”。我:这是什么个需求?
    pm:一个会员卡激活绑定的流程页。
    我:会员卡是什么东西?
    pm:这是一个实体卡,是我们平台用户升级为会员用的,上面有logo,卡号和密码图层我:这卡是怎么来的?
    pm:平台通过线下运营活动给平台老用户进行的福利或者用户进行购买获得。
    我:会员卡有什么用?
    pm:激活后可以将帐号升级为会员(类似qq会员那种)
    我:用户要怎么才能激活?
    pm:通过扫描会员卡后面的二维码来进行激活。
    我:激活后又会怎样?
    pm:激活后用户升级为会员,能享受各种xxxxx牛逼的特权。
    我:为什么要做这个需求?
    pm:让我们平台用户能够升级为会员,然后就…….
    我:额……

    2017-04-30
  • 5分钟,带你掌握20个表格设计技巧

    译者Jimmy:貌似翻译项目走上了正轨,应该能保持一周更行一篇,或者两周更新一篇的节奏。:)这次翻译的是一篇关于数据报表的文章,对于没有设计过报表的设计师来说,应该很有用!文章标题有所修改。原因自然是为了点击量啦~ 哈哈~

    2017-04-30
  • 这个按钮不简单

    Slack 将保存时的「状态提示」设计在了同一按钮中。Flava 通过按钮的不同状态将「删除」与「确认」两个操作结合在了一起。Arent & Pyke 巧妙的将进度提示设计在了提交按钮中。Fantastical 2 利用了 iOS 的 Switch Button 来对 Event 和 Reminder 两种类型进行切换,并在按钮中加入了相应的图标用以识别。Wifeel 将 iOS 和 Android 版 App 的下载按钮统一设计在了一个按钮中。Tidy 在进行「归档」和「添加至相册」操作时,会在顶部以同色的方式来标识所对应的操作按钮。在 Tumblr 中关注某个用户时,「Follow」按钮会变为当前用户的头像并以一个小动画来作为关注成功的提示。

    2017-06-05
  • 5分钟交互设计指南系列:对话框

    框 (dialogs) 是叠加在应用主视图上的弹出 (pop-up) 视图,一般会要求用户作出反应。对话框可以分为模态对话框 (modal dialogs) 和非模态对话框 (modeless dialogs)。

    2017-10-31
  • 运营设计常用“套路”拾趣(附实战案例)

    阳春白日风花香,又是一年芳菲至,在这最美的时节,各种运营活动又开启了,就此从视觉角度结合实战案例的小心得,对运营设计的“套路”浅谈一二。罗伯特.庞德说过:“这是一个两分钟的世界,你只有一分钟展示给人们,另一分钟让他们喜欢你。”

    2017-04-30
  • 设计师应该了解的“用户记忆理论”

    记忆是人类储存信息的“硬盘”,它可以收集信息,处理信息,并且可以对外界的刺激做出反应。人类可以在需要的时候可以去“硬盘”中调取信息。但是这个“硬盘”有着一些瑕疵,因为它会受到人类机体和情感因素所影响。了解记忆的运行机制,会帮助设计师创建出人性化的界面,节省工作量,提升产品的易用性。

    2017-04-30
  • UI设计实例:如何将功能性动画完美融入设计以提升用户体验

    来Nick大神关于功能性动画的一篇文章,翻译过来与大家分享一下。

    2017-05-10