一文读懂微交互

一个深受喜爱的好产品和一个让人觉得凑合用的一般产品,区别往往就在于微交互带给人的体验。本文的目的就是深入分析微交互,帮助读者设计出优秀的产品。



微交互的概念及构成

什么是微交互?

微交互,就是产品中涉及一种使用场景的交互,只体现为一种功能,只完成一件事,产品通过交互来实现功能的细节,细节可以让用户更方便,更愉快的使用产品

举个栗子,现在大家都习惯用微信或支付宝付款了,当打开自己的付款码时有没有发现,手机屏幕变亮了呢(只针对之前屏幕亮度过低的用户)?较暗的屏幕会导致扫码枪扫码失败,这就是一个很好的微交互实例。

微交互的组成


触发器:任何微交互的第一部分都是触发器,触发器启动微交互。例如用户想给手机设置静音模式,那么下拉栏中静音图标按钮就是触发器。

 规则:微交互启动之后,就会引发一系列行为,这就需要一套规则来约定用户进行什么样的操作就会获得什么样的反馈。就像每款游戏的核心是一组规则一样,游戏规则决定了游戏该怎么玩,微交互规则决定了微交互能怎么用。

 反馈:用户所能看到、听到或者感受到的都能帮助用户理解系统规则。反馈的目的就是帮助用户理解微交互。比如手机在收到一条短信后通常会以震动和响声形式作为反馈。

 循环与模式:微交互随时间的推移会怎样呢?交互状态是要等到手工关闭才结束,还是说等一小会儿就会退出?于是就需要给微交互设定持续时间。用户在不同的环境或状态下往往需要不同的交互模式,比如手机的免打扰模式适合用户在休息、学习中使用,静音模式适合用户在会议、上课时使用。


1.触发器

触发器的构成及规则

触发器由三部分组成,分别是控件、控件状态、文本或图示标签。

触发器应当包含的规则:

(1)触发器必须让用户在使用情况下认出了其是触发器;

(2)保证触发器每次都触发相同的动作;

(3) 提前展示数据,触发器本身可以反映微交互中包含的数据,展示内部最有价值的信息;

(4)不要破坏视觉使用情况,如果触发器看起来像按钮,那应该像按钮一样被按下去;

(5) 用得越多的触发器越要引起人注目。


判断触发器需要多引人注目的黄金规则

(1)多数人经常要用的微交互,应该最引人注目;

(2)少数人有时会用的微交互,应该容易注意到;

(3)极少数人不常使用的微交互,应该通过搜索找到。

最引人注目的触发器:

(1) 移动的物体,如脉动目标;

(2) 带使用情境和标签的物体,比如带标签的按钮;

(3) 带标签的物体,比如带标签的图标;

(4) 只有一个物体,比如图标;

(5) 只有一个标签,比如菜单项。

系统触发器

并非所有触发器都是手动的。很多触发器都是系统自己发起的,这类触发器叫做系统触发器。

系统触发器的规则:

(1)触发器多长时间启动一次?

(2)已经知道哪些与用户相关的数据,怎样利用这些数据才能让触发器更高效,比如用户时间是午夜,就可以减少系统触发器启动的次数。

(3)有没有触发器已经启动的指示器。

(4)系统出错时会发生什么?例如网络断开、数据无效时,是尝试重新启动还是再次尝试?          

2.规则

每个微交互的核心同样是一组规则,设计规则时最重要的是确定目标。设计规则之前,需要确定一个最简单、最明确的说法,即微交互到底是什么。微交互越接近目标,成功的概率就越高。

规则应包含的内容

(1) 用户单机图标时会发生什么;

(2) 交互期间用户可以进行什么操作;

(3) 动作发生的顺序及时间;

(4) 使用什么数据及数据来源;

(5)  简洁的相关配置及参数;

(6)  什么时候提供什么反馈;

(7)  微交互处于什么模式;

(8)  微交互是否重复以及多久重复一次;

(9)  微交互结束时会发生什么。

设计规则的方式    

先把能想到的规则大体上记录下来组织规则的大体框架,再画出整个交互的流程图,梳理清楚用户整个操作过程,按照操作先后顺序在框架之中舔砖加瓦,不断完善细节。制定好了规则,最好能给其他人演示一遍,毕竟一个人的思维会有局限性,最好的方法就是利用大家的智慧不断完善规则。


3.反馈

微交互反馈的目的,是帮助用户理解微交互的规则。

需要给用户的反馈

(1)什么事情已经开始做了;

(2) 用户刚刚做了什么事情;

(3) 哪些过程已经开始了;

(4) 哪些过程已经结束了;

(5) 哪些过程正在进行中;

(6) 用户不能干什么。

反馈需要遵循的原则

别让反馈给用户造成压力,最好的反馈永远不会高深莫测,用最少的反馈传达最丰富的信息。可以使用被人忽视的东西作为传达信息的手段,例如滚动条、光标、进度条、悬浮层等。

反馈的人性化设计

反馈可以作为一种体现微交互乃至整个产品的手段,通过反馈,可以制造一点紧张或幽默的气氛,给产品赋予人性的气息

例如:在上传时间比较长的情况下,云存储服务Dropbox会建议你吃根巧克力棒,如果你的短信太长,Google Voice 不再计算字数,而是会说“你当真?”。这种短暂又人性化的时刻不会让人觉得讨厌或无聊,而更可能是讨人喜欢。  


这个微交互不让你自己计算活动的时长,而是会在选择结束时间时自动给出活动的持续时间,是一个非常棒的微交互案例。

反馈的规则

反馈也有自己的生成规则,这些规则如下:

(1)环境变化:需要考虑反馈会根据用户的环境变化而变化嘛,比如到了晚上,音量是否应该减小

(2)持续时间:反馈需要持续多长时间?如何停止?

(3)强烈程度:反馈的效果有多亮、多快、多剧烈?是为了烘托气氛还是为了引人注目?

(4)重复次数:反馈需要重复嘛?多久重复一次?


4.循环与模式

模式

模式是规则的一个分支,而且对微交互来说,模式应该尽可能少用。模式最主要的目的是执行一种不常用的动作,这种动作可能会妨碍微交互达成其主要目的。

例如:常见的模式就是设置,用户可以在其中指定一些有关微交互的选项,在进入设置模式时,通常仅修改微交互,而不会同时执行主任务,此时的操作与其他操作隔离。

弹簧模式与一次性模式

弹簧模式:用户按下键的情况下才会激活,用户停止上述动作,模式就会消失。弹簧模式的价值在于,用户很少会忘记自己在不同模式里,因为他们必须通过实际操作才能切换到另一个模式里。这种模式的缺点是不适合费时的操作或复杂的输入。

一次性模式:用户在发起模式时,模式的持续时间与动作执行时间相等,动作结束后,模式就结束。一次性模式最适合任务切换或上下文工具。

循环

循环就是不断重复的一段时间,通常用于设定持续时间。循环的核心是计时,即确定微交互的速度持续时间。可以使用循环来扩展微交互的生命周期

四种循环模式:

(1)技术循环:重复既定次数的循环,例如,当网络断开时,检查10次是否有网络连接。

(2)条件循环:在满足条件的情况下反复执行的循环,如果条件变化,则循环停止。例如,如果有网络连接,每30分钟更新一次微博热门榜

(3)集合循环:与计数循环类似,这种循环会遍历集合中的每个值,然后停止。例如:对没封未读的邮件,给未读计数器加1。

(4)无穷循环:循环开始后,除非出错或被人强制停止,否则永远不会结束。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,919评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,567评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,316评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,294评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,318评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,245评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,120评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,964评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,376评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,592评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,764评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,460评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,070评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,697评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,846评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,819评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,665评论 2 354

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,654评论 18 139
  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,979评论 3 119
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,088评论 25 707
  • 白浅升为上神以来,不知何故法力竟损耗如此之多,以至于她都无法运用自如,为此还专门跑去问过折颜,老凤凰却是...
    柠檬泪小野喵阅读 136评论 0 0
  • 日有所思夜有所梦 梦的世界永远都是千变万化,千奇百怪 入眠时,做的梦都是各式各样 或是预测以后会发生的事 或是之前...
    北地游人阅读 315评论 0 0