交互开始的第一步:触发器详解

最好的触发器应该是符合情景的,体贴用户的,触发器的控件应该与其要传达的状态匹配,且引人注目的程度要与其使用频率匹配,标签也应该简洁明了,通俗易懂。


最好的触发器应该是符合情景的,体贴用户的,触发器的控件应该与其要传达的状态匹配,且引人注目的程度要与其使用频率匹配,标签也应该简洁明了,通俗易懂。

交互开始的第一步:触发器详解

触发器是交互开始的第一步,是任何能启动交互的东西。在互联网的世界中可以根据用户行为分为主要的两大类:手动触发器和系统触发器。

  • 手动触发器:由用户发起,主动行为触发,来自用户的期待或需求。可以是控件、手势、声音、触摸等。
  • 系统触发器:满足一定条件后通过系统判断触发,通常需要监听,如距离感应器等。

交互开始的第一步:触发器详解

触发器原则

1. 触发器必须让用户在使用情境中一眼认出是触发器

当用户接触到一样东西的时候,会有一个认知过程,通过这样东西带给自己的感受,在大脑中搜寻类似的物品,再对此加以判断。比如早期的拟物化设计,产品中的按钮一定是带阴影的样式,让用户一眼看上去就知道是按钮,有点击的欲望。

如图,开启分享的按钮很容易教育用户

交互开始的第一步:触发器详解

2. 保证触发器每次都触发相同的动作

用户使用产品会存在一个学习过程,当用户通过一次触发器得到反馈之后,用户会将这次行为记忆下来,早起的电子产品用户学习的成本非常高,正是因为用户需要记住每一次,点击哪里,会有什么样的结果。想让用户流畅地使用产品,需要保持相同的触发器触发相同的动作。除非是给用户惊喜的地方。

3. 提前展示数据,反映交互包含的数据

简单地说,就是让用户知道会发生什么, 发生了什么,最后的结果。比如一个下载按钮,文案提示一定是“下载”,点击之后会显示下载中或下载进度,下载完成后会显示下载成功/下载失败。

当控件处于不同状态时:

  • 一个状态-一个按钮或简单手势足够
  • 两个状态-拨打开关较为合适
  • 多状态-通过键盘等操作
  • 范围连续动作,滑动态或者拨号盘

多控件组成的触发器尽量少用

4. 不要破坏视觉使用情境

如果触发器看起来像按钮,那么它就应该像按钮一样可以被点击。

5. 用的越多的触发器越要引人注目

  • 多数人经常要用的微交互,应该最引人注目
  • 少数人有时会用的微交互,应该容易注意到
  • 极少数人不常用的微交互,应该通过搜索找到

人注意周围环境的情况分两种

  1. 正在移动或有声音的,人天生对听觉的反应速度快于视觉。
  2. 主动搜寻,人在寻找东西时,视野会变窄,专注于辨别物体,对环境中的事物会下意识地识别和归类。人在识别物体时,会从基本的几何体开始分析,而现实中的物体也往往可以分割为各种简单的几何体,越简单的几何体越容易被用户在第一时间识别和记忆。

6. 不要引起用户对使用情境的错觉

微交互的目标就是把识别成本降到最低,别让用户猜触发器怎么工作。

最引人注目的触发器依次是

  1. 移动的物体,比如产生动作特效的图标
  2. 带使用情境和标签的物体,比如带标签的按钮
  3. 带标签的物体,比如带标签的图标
  4. 只有一个物体,比如单一的大按钮
  5. 只有一个标签,比如菜单项
  6. 什么都没有,不可见的触发器

无论什么交互界面都不可能保证所有的东西都能被立即发现,隐藏过一些东西可以让屏幕或物体看起来简单,同时还不会舍弃功能。

如图,讲简单的代表信息展示出来即可

交互开始的第一步:触发器详解

不可见控件能够起到强调可见控件的作用,让重要和不重要的控件得以区别。最好的微交互应该具有恰到好处的界面,而不是控件越多越好。

不可见的触发器应该能过轻易记住,当触发过一次不可见的触发器后用户只能依赖自己的记忆将其再次启动,比如,下拉刷新等。

除非真的没有地方或屏幕空间,否则不要把不可见触发器用于最高优先级的微交互。

7. 仅在触发器本身无法提供相应信息的情况下才使用标签

如图,设置按钮已经很明显了,就不需要再加上标签说明

交互开始的第一步:触发器详解

标签:

对某些触发器而言,标签也非常重要,标签可以作为微交互的名称或状态指示器,标签表明状态,说明动作,帮助用户确定是不是在执行自己要做的事情。

如果在已经较为复杂的界面,标签会增加触发器的复杂性。如果担心会引发歧义,那就不要使用标签。

微交互的目的在于清楚明确地传达功能,标签需要清楚明确,同一功能的标签需要统一,标签的设计需要简洁明了。

控件:

控件的状态一般分为以下几种

  1. 默认状态:不活动的空闲状态。
  2. 活动状态:如果后台有活动,可以通过触发器来表示。
  3. 悬停状态:web端一般可以通过鼠标悬停来做到,而移动端可以通过状态体现。
  4. 反转状态:用于表示存在或活动,可继续操作。
  5. 鼠标单击/手指点击/进行中:通过动作启动微交互,可以让触发器消失,文案变化等。
  6. 切换状态:通常应用于切换按钮上,点亮表示按钮打开。
  7. 设置状态:开关和滑动条可以体现微交互当前的设置和阶段。

系统触发器:

系统触发器无需用户介入,只要满足条件就会自动触发。

常见的启动条件有

  • 用户操作或系统出现的错误
  • 需要获取用户地理位置相关或满足地理位置
  • 收到数据
  • 内部数据
  • 其它微交互

最好在设置中提供选项让用户能够调整系统的触发器

系统触发器规则:

  • 启动的时间需要合适,不能打断用户的日常使用,在设定启动的时间时需要考虑尽可能多的用户使用场景
  • 启动频率适当,启动太过频繁对用户也是极大的干扰
  • 系统出错状态的交互也需要合理提示用户,不要给用户太生硬的提示

通过数据可以很好的了解用户启动的触发器。

最好的触发器应该是符合情景的,体贴用户的,触发器的控件应该与其要传达的状态匹配,且引人注目的程度要与其使用频率匹配,标签也应该简洁明了,通俗易懂。

一切规则的前提,触发器要能把用户带到实际的交互之中。

 

本文由 @placeless 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-22 17:27
下一篇 2017-05-22 19:37

相关推荐

  • 值得你深入了解的交互设计五大支柱

    1、用户角色(Persona):Persona文档(控制在2~5个)通常需要包含你的目标用户。作为Persona中的虚构的角色,它的属性和特征是 基于产品研究和用户定位来设定的,用作后续设计过程中所面对的“理想用户”,本质上,它就是一个占位符。作为人物设定,其中会包含个人信息,远不止于年龄 和收入信息这么简单。Persona 文档的目标是利用角色来验证你的目标用户是如何感受如何看待你的设计的。
    2、移情地图(Empathy Map):它像是一个轻量级的Persona文档,在资源短缺时间紧的状况下,可以使用这个文档。Empathy Map 将 Persona 中的角色的个性和性格部分移除了,更加专注于用户在特定情况下的感受。
    3、用户剧本(User Scenario):如果Persona 是帮你设计了一个故事中的角色,那么User Scenario 就是故事的剧本。用户剧本通常是围绕着一个特定目标来设计的。比如说,第二天是母亲节,要为母亲预订一份礼物。目标很明确,要达成目标,用户需要点击几次 按钮,走哪些流程,需要多长时间,如何在过程中融入情感,贯穿始终。对整个用户流程有了预判之后,设计师对于UI和UX的设计就有了把握。
    4、用户地图(Customer Journey Map):这份文档同上门的用户剧本很像,但是它比起前者跨度更大,贯穿体验设计始终。设计人员可以对产品的背景有更深入的了解才能更好地设计,而产品投 入使用之后也不是最终结束,这也是跨度如此之大的原因所在。用户旅图将会涵盖角色信息、用户剧本和移情地图的全部信息。这么设定并不是要让用户旅图成为一 个大杂烩,而是要将用户性格和用户流程、交互过程结合到一起来看待问题,每个阶段不同环节,都牵涉到不同的情绪和情感。Affordance 是 James J. Gibson 造出来的一个词,Gibson 是20世纪最重要的认知心理学家之一,他的生态学式视知觉论和直接知觉为认知心理学开辟了新的领地。affordance 是 afford (提供、给予、承担)的名词形式,环境的 affordance 是指这个环境可提供给动物的属性,无论是好的还是坏的,所以我认为“可供性”是一个合适的翻译。Gibson 用来解释 affordance 的例子是这样的:如果一块地表面接近水平(而不是倾斜的),接近平整的(而不是凸起或凹陷的),以及充分延伸的(与动物的尺寸相关),如果地表面的物质是 坚硬的(与动物的重量相关),我们可称它为基底、场地或地面,它是可以站上去的(stan-on-able),可让四足或两足动物保持竖直姿势,它是可以 行走(walk-on-able)和跑动(run-over-able)的,它不像水表面或沼泽表面之于一定重量的动物那样是可陷入的(sink- into-able)。列出的四项属性——水平、平整、延伸和坚硬——它们是这个表面的物理属性,如果以物理中使用的度量衡去衡量它们的话,但是对于特定 动物的支撑可供性,它们必须与动物关联上才可以被衡量,它们不是抽象的物理属性,它们是为所指动物特定的,与动物的姿势和行为相关,所以 affordance 不能像我们在物理中那样来衡量。能指和所指是语言学上的一对概念,能指意为语言文字的声音,形象;所指则是语言的意义本身。按照语言学家或者哲学家们的划分,人们试图通过语言表达出来的东西叫”所指”,而语言实际传达出来的东西叫”能指”。

    2017-06-04
  • 百度贴吧体验升级背后的故事,用户洞察与交互升级

    作者:百度UXC随着产品的发展和用户群体的演变,用户对产品的认知也在发生变化,当用户认知和产品形象发生偏差时,体验升级就势在必行了。而用户对产品的认知大概体现在视觉感受(品牌形象)和使用感受(交互操作)上。对此我们从用户出发寻找设计上的突破口。洞察用户让设计有的放矢视觉感受对于大多数人是一种难以言说的东西,难以通过简单的方式得到答案。面对这个问题,我们选择迎难而上,通过精巧的实验、可视化的方式来解决,邀请用户与设计师一起,参与到品牌升级...

    2018-01-30
  • 交互设计新人的核心竞争力

    从实习的第一天起,我就数着日子在过,时间走的太快拦也拦不住,要做要学的事情又太多。转眼七月已经过去,总觉得还是有点后知后觉,花了一个月的时间去适应新环境和新工作,慢慢才知道寻求突破点的重要性,所以今…

    2017-08-04
  • 屏幕外的交互设计:界面设计 ≠ 屏幕设计

    网易UEDC – Vicol :在互联网做设计的朋友,工作中几乎每天都接触着电脑和手机屏幕,像我的交互设计 工作也以接需求画原型图写文档为主。但我今天想说的,和这些看起来没有什么关系。我想说点屏幕外的交互设计 。

    2017-09-28
  • 产品信息架构的思考

    这篇适合交互设计或者对交互设计感兴趣的小伙伴们看。所以我就不解释信息架构是什么了(链接阅读:怎么理解信息架构,什么是信息架构?)。 今天写一下产品信息架构的思考。 任何产品都有信息架构,或繁杂或简单。…

    2015-11-18
  • 碉堡了-微信团队出品-Sketch插件合集Wesketch

    静电说:微信团队刚刚出品了一款针对Sketch的插件合集-Wesketch,让我们一探究竟吧。WeSketch能做什么?更高效的团队协作,如:UI Kit 同步、色板同步等。更快捷的交互设计,如:图标库、自动连线、标记注释、全局替换文字、字体、颜色。更精准的前端还原,如:补齐宽高导出图片、导出 CSS 代码(支持小程序)等。如何下载和安装?访问Github地址:https://github.com/weixin/WeSketch/blo...

    2018-03-02
  • 央视(传统媒体)与互联网巨头(AB)在新交互形式“脸部识别”上的互怼

    支付宝霸气回应:“被盗我全赔”表明了对于人脸识别这个技术领域有比较大的知识储备与研究,针对人脸识别交互本身并不是支付宝作出这个霸气回应的核心因素

    2017-03-17
  • 从一个弹窗的关闭按钮引发的讨论和思考

    作者:李逍遥(UXRen翻译组管理员,UI设计师)   弹窗的右上角有个关闭按钮,功能好像跟下面的取消确定差不多,都是操作完成后弹窗关闭。咋的一看好像很多余,是不是多余呢,因为设计规范的时候碰巧遇到这个问题。…

    交互专题 2023-03-03
  • 用户吐槽:新版新浪微博的5大槽点

    昨天新浪微博发布了新版V6,据说是“加强基于兴趣的信息传播,在提升用户内容获取效率、阅读体验基础 上,面向垂直领域认证用户推出兴趣内容生产、传播及变现工具,完善内容生产与消费生态。微博计划打造一张以信息…

    2014-10-15
  • 交互设计方案也需要测试和评估的!

      对于一个交互设计在最终上线之前我们要对整体进行评估,那么又有什么评估的方法呢? @elya:对架构、布局、内容、行为四个方面对照检查 1.架构和导航Architecture and navigation ¨ 是否采用了用户熟悉或容易…

    交互设计 2015-02-03