一份简单实用的微交互设计指南

   功能差不多的情况下,如何让用户一见倾心?微交互是决定用户印象的关键之一,今天这篇好文列举了使用微交互的注意点,以及五个最常见的使用场景,全是干货,来收!

  好的产品往往做好了两点:功能和细节设计。

  功能吸引用户使用你的产品,细节设计将你的用户留下。优秀的细节设计能够使你的产品在众多竞品中脱颖而出,优秀的微交互设计往往能够让用户在初次使用产品时就能够留下深刻的印象。作为一个交互设计师,在设计微交互方案的时候不仅要考虑视觉上的冲击力,还要想办法赋予其信息传递的功能。

  什么是微交互?

  微交互是产品中存在的某一个时刻,它完成了某一个小的任务。Dan Saffer在他的书中(Microinteractions)第一次描述了微交互的概念,这些小细节专注于服务这些必要的功能:

  交流回馈或者动作的结果回馈

  完成某个单独的任务

  增强直接操作的感觉

  帮助用户在视觉上展示操作的结果,以及避免错误

  一些明显的微交互例子包括:

  当你将iPhone设置成静音时伴随出现的的震动提醒、屏幕上的静音icon。


  界面动画提示是否能够点击(当鼠标移到按钮上方时按钮的颜色改变)。


  为什么使用微交互?

  微交互是在对用户一些自然的需求/欲望的认知和反馈。用户从微交互提供的视觉、触觉等反馈中确认他们的行为被接受。微交互还可以引导用户正确的使用系统/产品。

  定义微交互的使用情景

  微交互的一个特点是它可以被放置在很多的场景下,辅助不同的动作行为。总体来说,微交互的使用场景包括:

  展示系统/产品的状态

  Jacob Nielsen在“可用性启发原则”中指出:让你的用户时刻了解发生的事情,用户期望对自己的行为立即得到反馈。但是有些情况下,app需要时间来等待行为处理完成后才能向用户发出反馈。因此,产品界面需要向用户指明此刻正在发生的事。


  ▲ 下载进度表

  或者标明用户所在的位置:


  Tips:不要让你的用户感到无助,让你的用户了解实时的状态并且向其展示进度(比如进度条能够让用户了解进度,消除疑惑)

  提示更新

  我们有时需要向用户推送通知来保证用户了解到事态的更新。动画可以做到这一点,动画可以吸引用户的注意力,避免用户忽视掉重要的信息。


  Tips:微交互里的动效应该遵循KISS原则(keep it simple, stupid),应该尽量简单直接。

  关联上下文

  使用动效来将用户的注意力平滑的在导航页面间切换,向用户解释页面里元素之间的关系,以及页面跳转的来龙去脉。这对于移动设备非常有用,因为屏幕的尺寸限制,移动界面中每一页的内容都很紧凑,使用动效来阐述内容之间的联系非常实用。

  Tips:尽量让每个页面的导航简洁,这样可以有效避免用户在页面跳转中迷失。两个状态之间的却换应该清晰、平滑、快捷。在视觉上统一所有的交互形式,降低用户的学习成本。

  输入可视化

  数据输入是应用中非常重要的环节,微交互可以使用现有的元素来展示数据输入的反馈,从而将这步操作变得更加高效。


  Tips:微交互能够帮助用户理解信息格式,来源,帮助用户便捷输入信息。

  引导互动

  微交互可以鼓励用户、吸引用户与产品交互。它可以在用户体验中产生同理心。但是需要谨慎使用微交互,保证其在感官上不会冒犯你的用户。

  时刻谨记:不要让用户感到厌烦,Keep it simple, stupid.


  Tips:关注用户的情感反馈,因为它在用户体验中起到很重要的作用。多做用户研究和情景调研,设计能被用户频繁使用的微交互方案。

  值得谨记的

  微交互向用户展示动作反馈,通知以及信息框架结构

  微交互应该通过转移用户的注意力、愉悦用户等来达到加快/缩短信息数据的传输

  了解你的用户以及使用微交互的背景,能够让你的微交互方案更加的精准与高效

  微交互必须能够支持长时效的使用,在第一次使用时感到惊喜的方案,可能在第一百次使用时就变成了困扰。

  微交互方案应该人性化一些,并且在视觉上保持和谐。用户在使用的时候应该感到流畅,微交互的方案应该尽可能的从现实生活中获得启发,比如使用拟物化等手段,从而降低学习成本。

  总结

  用心设计,思考用户使用产品的情景,再设计这些微交互时多运用一些生活中常见的操作模式、物体的运动轨迹、常见的行为方式等。产品的易用性来源于对细节的打磨,伟大的设计不仅仅在功能上满足用户的需求,还要在微交互的设计上打动人心。

时间: 2024-09-27 18:29:40

一份简单实用的微交互设计指南的相关文章

交互设计指南:信息可及

 可及,通俗的说是"可以达到",加上主语和宾语,在"交互设计"这个大的语境下,含义应该是"用户可以达到自己的操作目标",这不是和"有效性-用户的操作是有效的"重复了吗?其实,在交互设计实用指南中,"可及"是一个狭义的概念,是放在有效性下面的,具体解释为"色盲.肢体残疾等特殊人士可以完成基本操作".更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人.       也就是

《怦然心动——情感化交互设计指南(修订版)》一导读

开场白 怦然心动--情感化交互设计指南(修订版)本书的内容首先是关于人类行为的原则:人们做事的动机,对事物的感受以及如何作出特定的选择. 但这并非是本书的全部内容. 如果尝试去理解人类行为是本书唯一的目标,那我早就搁笔不写了,我会向你推荐其他与此课题相关的更多更好的书籍. 过去十年来,我一直致力于网上的用户体验设计.我怀疑每位进入用户体验行业的人都是从某个已有的成形的学科转过来的,比如图书馆学.视觉传达设计.计算机科学或教育学. 在互联网的泡沫时代终结之前,我以一家技术型创业公司的网页设计师和平

交互设计指南系列一:我们眼中的交互设计

交互设计(Interaction Design, 缩写 IxD 或者 IaD),是定义.设计人造系统的行为的设计领域.人造物,即人工制成物品,例如,软件.移动设备.人造环境.服务.可佩带装置以及系统的组织结构.交互设计在于定义人造物的行为方式(the "interaction",即人工制品在特定场景下的反应方式)相关的界面(Wikipedia).通过对界面和行为进行交互设计,从而可以让使用者使用人造物来完成目标,这就是交互设计的目的. 从用户角度来说,交互设计是一种如何让产品易用,有效

交互设计指南:一次点击

有一次去超市换货,本能的找到服务中心,服务中心说这个业务在超市旁边一个房间里,由于忘记带小票,那个小房间的人让我去另外一个小房间调电脑里的记录,调出来我拿着记录单去了卖货的地方才换货.其实超市退换的需求也不少,整个过程服务态度很好,但是很麻烦. 其实我们日常生活中很多事情,办起来过程很罗嗦,办事的工作人员说这是应该的,都这样做,可应该不应该,谁是评判标准呢? 交互设计一个很重要的目地就是让用户方便快捷的执行任务和完成工作.在互联网产品的交互设计中,尽可能的消除每一个附加工作,做到尽可能一次操作而

交互设计指南:突出重点让用户一目了然

看到这张照片,我们一眼能够看到天宏(图中这位UED俊男)的眼睛.我们能从他的表情里读出一些他的性格.一张好的摄影作品,最重要的一点,就是这个照片是否有焦点,照片的主题是否一目了然.而摄影作品的用光.构图.景深等等手法,其实就是在让一个照片能够有其焦点,并且利用这些艺术手法来烘托气氛,提升主题. 一个优秀的页面亦如此:应当突出重点,一目了然.相信大家也知道,一个用户在浏览网页的过程中,只是扫描页面,而不会像是在看书似的阅读每一处地方,每一行文字.一个网页呈现在用户面前的时候,应该在5秒之内,就能理

交互设计实用指南系列(二):用户信息可及

可及,通俗的说是"可以达到",加上主语和宾语,在"交互设计"这个大的语境下,含义应该是"用户可以达到自己的操作目标",这不是和"有效性-用户的操作是有效的"重复了吗?其实,在交互设计实用指南中,"可及"是一个狭义的概念,是放在有效性下面的,具体解释为"色盲.肢体残疾等特殊人士可以完成基本操作".更扩展一下,这个特殊人群应该还包括老人儿童,文盲等对信息使用不擅长的人. 也就是说,交互设计实

2016年设计师必须掌握的微交互知识

  如何打造一款看起来非常惊艳的应用,我想大家应该有所了解,借助有趣的故事.流畅的流程和令人难忘的视觉设计就好.但是仅有这些并不够,你需要拿出一些真正能打动用户心灵,产生情感联系的东西,让他们感受到应用真正鲜活的一面. 这个时候,就需要微交互登场了. 那些真正让人沉迷的优秀应用很大程度上是因为微交互的存在.微交互出现的瞬间,用户会感受到更强烈的互动和参与感,这些微小而自然的变化会创造出不同凡响的愉悦感,不过通常这些微小的互动并不是那么显眼.当然,对于设计师而言并非如此. 如果你用心观察,每天会遭

移动交互设计案例:客户端APP的通知系统设计

文章描述:本文只梳理设计原则,后续相关内容会持续更新. 这里的通知包括但不限于公告.提醒或消息(不同使用场景下的功能定义不同). 关于各客户端平台(ios.android.wp等)的通知机制,在其交互设计指南中有更详细的说明,大家可自行参考. 写在前面: 通知系统是网站信息传播机制的重要的一部分,足够写一大章来说明.本文只梳理设计原则,后续相关内容会持续更新. 这里的通知包括但不限于公告.提醒或消息(不同使用场景下的功能定义不同). 关于各客户端平台(ios.android.wp等)的通知机制,

交互设计及用户体验的几个概念

1.交互设计 Alan Cooper对交互设计的经典定义: 简单地说,交互设计是人工制品.环境和系统的行为,以及传达这种行为的外观元素的设计和定义. 交互设计首先规划和描述事物的行为的方式,然后描述传达这种行为的最有效形式.交互设计是一门特别关注以下内容的学科: 定义与产品的行为和使用密切相关的产品形式 预测产品的使用如何影响产品与用户的关系,以及用户对产品的理解 探索产品.人和上下文(物质.文化和历史)之间的对话(Riemann和Forlizzi) 这个理解有点晦涩,Alan Cooper的<