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

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


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

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

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

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

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

触发器原则

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

相关推荐

  • 从会计到交互设计,她用社会热点打动皇家艺术学院招生官!

    本科学的是会计研究生申请的却是交互设计零基础、跨专业却能在短短一年时间拿到5所顶尖艺术院校的offerQS世界艺术类大学排名第一的皇艺和享誉世界的英国伦艺都向她抛出了橄榄枝从西单骑摩拜到望京全程3个多小时收集了20多个单车乱堆积地点采访了数十位大爷和小朋友回家腿痛了整整一周只为做一个项目的调研成长的路上总是布满荆棘但坚持就是胜利杜娜/研究生/交互设计皇家艺术学院预科伦敦传媒学院格拉斯哥艺术学院金斯顿大学谢菲尔德哈勒姆大学杜娜offer(...

    2018-04-25
  • 深入研究了4款外卖APP,我做了交互优化

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

    2017-08-04
  • 【UXRen原创】杀死转化率的 4 大 UX 错误

    作者:Sean Ellis   译者:吆喝科技   本文编译自 Sean Ellis 所撰写的《UX mistakes that are killing your conversions 》 ,作为资深交互设计师, Sean Ellis 谈论 UX 在转换率优化的重要性。Sean Ellis 是 Qual…

    交互专题 2017-08-07
  • 用户体验设计上的6个关键见解

    用户体验在产品设计中的重要性不言而喻,但是并不是所有的产品经理都能在用户体验设计上做到完美。入行产品经理那么久,也许你已经能特别熟练的写PRD,轻而易举的用Axure画原型,甚至还能用Axure实现“打飞机”,但是却做不到将用户体验设计上升一个新层次?如果这也是你目前遇到的情况,那么请认真看看这篇文章,它或许会给你一个答案。 “如果你不能说出你的想法,就算这些想法非常的棒,它们也不会存活。” “伟大的设计就像在讲诉一个故事。”“太多的文本信息并不会增加太多的价值。”

    2017-05-23
  • 好的人机交互设计(UX)评判标准的四个原则

    一些设计的基本原则往往是通用的,甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。 一个设计师&产品…

    2015-04-14
  • [官方]mockplus视频教程:10分钟玩转mockplus

    官方出品教程,10分钟快速了解一下mockplus软件操作基础。 视频免费播放地址

    2015-06-30
  • 商业模式驱动视频互动设计:手淘的视频就该这么玩儿

    当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

    2017-05-16
  • Daydream产品设计案例 - YouTube VR

    每年这个季节都盼着来自北方的冷空气能早些把这个城市吹干、吹冷。这世上,又湿又温暖的地方未必都是好地方。 随着Daydream头显和Pixel手机的发布上市,Google官方的各路VR app也陆续上线。我个人还没有机会、没有…

    2016-12-08
  • 上海benhealth招聘实习生 150/天

    回复「简历」,送你优秀简历模板。岗位岗位实习生岗位职责参与公司移动端、小程序以及 PC 端 Web 产品的交互设计;与产品经理和开发人员共同完成产品开发。岗位要求1. 平面、视觉传达相关专业本科或以上学历;2. 熟悉 Axure 和 Sketch 等交互设计工具;3. 热衷网络文化,熟悉网络热点和主流 App;4. 良好的沟通学习能力,工作热情高,责任感强。薪资福利150 元/天工作地点上海简历投递投递邮箱:jun.pan@benhea...

    2018-04-08
  • 总结几个产品交互设计原则

    什么是交互设计?这是一个很泛的概念,很多人讲交互都会试图去区分交互设计、UI设计和体验设计等。但是我个人觉得,这些东西根本没有界限。UI层面也涉及交互、交互也是一种体验设计,没必要把他们彻底分裂出来。每…

    2017-08-02