微交互是什么(什么是交互式微课)

UI设计未来的发展方向？

每年，设计行业都会出现新趋势，跟上设计行业的最新趋势和转型非常重要。让我们来看看将来会有什么大的发展趋势。

极简主义设计

简约设计是一个让人们关注无价值内容并躲过无价值混乱的过程。这里的重点更多的是内容而不是最终外观，为实现这一目标，设计师遵循一些视觉设计原则。

从过去几年开始，我们在UI设计领域看到了简约的趋势。简约用户界面和出色的可用性相结合，效果很好，因为它简洁，清晰，注重内容并且直观易用。

设计师和开发人员也倾向于简约设计，因为它适用于各种屏幕尺寸和平台，因为要拉伸的元素较少，并且由于需要加载的元素较少，因此产品也快速轻便。

我们将看到更加干净和最小化的用户界面，将来更加关注内容。UI设计软件下载文件夹

微交互的作用

UI和UX应该在视觉上令人愉悦并且功能强大，以对用户产生影响，但同时，它应该是交互式的并且对用户友好。与数字产品的互动应该与人类互动。人性化的数字体验与人类的情感有关。用户在与产品交互时的行为或感受对其相似性和不同性有很大影响。

微交互是微小且流畅的动画，通过承认并提供行动反馈来满足人类的基本需求。这些微小的动画在唤起情感和与用户联系方面非常强大，使用户体验更加无缝和轻盈。

微交互可以在我们现在使用的每个应用程序或网站中看到，例如在Facebook上点击类似按钮，网站预加载器，打开和关闭设置，应用程序屏幕转换等。

卡片

卡片就像容器一样，可以包含关于单个主题的简短信息、图像、文本或链接。卡片是以干净和有组织的形式共享信息的最佳方式，因为它对用户而言是直观的，没有任何解释。

卡片的基础由着名的图像共享网站Pinterest奠定，然后由微软，谷歌和Facebook等大型巨头推广。

随着互联网空间向移动方向倾斜，响应式设计已成为强制性的，这导致了卡的普及。随着用户体验空间极简主义的兴起，卡片在未来仍将受到重创。

插图

Illustrate意为“澄清。”插图是视觉元素，有助于以创造性的方式与用户沟通消息或故事。

数字世界被美丽的网站和应用程序所包围，并且在人群中脱颖而出，让您的产品在视觉上更能吸引用户是非常重要的。

设计师更喜欢插图，因为它比文本更容易被注意到并且与用户更好地沟通; 它还使设计师可以自由地使用动画并创建视觉语言。从过去几年开始，我们已经看到插图变得流行并且替代摄影图像，因为它们很轻，可以跨越各种屏幕尺寸和平台。

原型

原型设计正在向他人展示一个想法。原型可以是草图，线框，故事板或高渲染设计的形式。虽然草图和线框图是制作创意的好方法，但它们并不是向客户或利益相关者展示它的好方法。最好的方法是展示用户如何真实地与产品互动，这种方法为客户和利益相关者提供了更好的产品愿景。

设计师现在更关注原型设计，它已经成为UI设计流程中不可或缺的一部分，并且随着市场中原型设计工具的兴起：Sketch，Adobe XD，Principle，Invision studio，After Effects。设计师将他们的想法变为现实变得更加容易。

大胆的色彩，渐变和排版

2013年是平面设计和简单配色方案的一年，使互联网看起来更加相似和无聊。但是从过去几年开始，我们看到设计师们在大胆，生动的色彩，渐变和排版上玩耍。

人工智能

人工智能正在彻底改变我们与数字机器交互的方式，人类般的个人聊天和语音助手如Siri，Google Assistant，Cortana和Amazon Alexa的崛起。通过技术，用户交互变得更加自然，直观和轻松。

随着人工智能技术（机器学习，自然语言生成，语音识别，虚拟代理，深度学习和决策管理）的进步，人工智能将用户体验提升到另一个层次，并将成为用户体验世界中的游戏规则改变者。

消除用户界面按钮

用你的声音 - 告诉它你感觉很棒并且去海滩。然后将Facebook识别的文本从您的回复拖到您希望它出现的位置。

语音接口

Siri，Cortana，Alexa和Google智能助理都已启动并运行。许多人认为语音接口是未来，很难不同意，因为它们的潜在用途超出了数量。我们可以通过与他们交谈来控制车辆，智能建筑和机器 - 就像我们与真人交谈一样。通过人工智能和机器学习，机器现在能够越来越准确地理解我们的语言。我们不再局限于发出精心编写的“魔法咒语”; 我们可以用完整的句子说。

UI设计未来

有了这么多不同的选项，现在可以忘记使用典型的矩形按钮供用户进行交互。借助今天的技术，我们能够创建全新的界面，可以：

节省用户时间

防止错误，滑倒和错误

补偿任何意外行为

ui设计初学者必学的设计软件 ！

北大青鸟设计培训：微交互设计的具体使用案例？

我们在上文中曾经给大家简单分享了关于提高用户使用体验的微交互的一些基本概念和知识体系。

今天，青岛IT培训就通过案例分析来了解和学习一下，常见的微交互设计都有哪些表现形式的。

滑动交互。

滑动交互是比起点击更加直觉更加顺畅的一种交互，它有助于用户快速切换标签、界面并且获得更多的信息。

作为为常见的交互，它会在潜意识中引导用户，而用户通常不需要去思考就会下意识执行。

这种交互非常有趣，爽快，且令人上瘾。

数据输入。

我们都很清楚创建新帐号和修改密码这类需要大量输入的交互是多麻烦，经常会让用户感到沮丧。

诸如密码强度的测试和输入建议会让用户更好的推进这个过程，这个过程中，尽量借助细节和建议来提升整个输入过程的体验和成功率，会让用户主观感受更舒服。

动画效果。

动画常常作为微交互的一部分而存在，它让微交互可行，并且给予提升。

动画让设计更加人格化，许多微妙的动效在实际操作中并不会被直接注意到，但是如果缺少它，会让人明显感受到缺失感。

动效常常作为环节之间的粘合剂，让交互和流程更加完整顺滑。

值得注意的是，动画的目的是吸引用户，但是不能让用户分心，或者产生挫败感，过于新奇的风格或者动画耗时太多，都会产生不良的效果，或者让人混淆。

系统状态。

当前的系统状态是用户始终应该了解且需要了解的事情。

如果用户无法感知或者被通知到，他们常常会因此感到恼火，因此关闭网站或者APP。

通过微交互让用户确切地了解当前的系统状态，多长时间能完成加载，或者是信息已经被完全提交，等等等等。

哪怕是报错信息，如果足够幽默，同样能够维持用户对产品的信任。

让教程有趣。

绝大多数人都在获取信息，获取解决某个问题的办法。

而教程常常是用户获得答案的重要载体。

在微交互的加持之下，教程常常能够得到简化，能够更加有趣，易于理解，更好地指导用户操作、解决问题。

用户体验中的微交互

概要 ：微交互可以反映系统状态、支持防错设计以及传达品牌。它们由触发启动、目标单一，还能让体验变得更加迷人。

我们每天与电脑进行的交互都会涉及到大量的微交互。微交互以反映 系统状态 或者帮助用户 防错 的方式给予用户反馈。此外，微交互还能用作 品牌推广 的媒介。

用户启动的触发可以是 GUI 命令、手势或者语音形式，而系统启动的触发则需要满足一系列预先确定的条件。若微交互由 GUI 命令触发，视觉反馈元素通常会显示在它的邻近。

微交互包含了大量的数字元素，但并非每个元素都是微交互的一部分。一直显示的静态元素不能算是微交互，因为它们没有被明确地触发。此外，由多个行为构成的流程也不是微交互。下表列出了微交互的一些例子。

Dan Saffer 在 2014年出版的《微交互》一书中定义了这个概念，并简略描述了定义微交互的模型。

在这篇文章中，我们将聚焦于为何微交互对于用户体验是至关重要的，并会提供一些来自用户视角的典型案例。

使用科技产品的最大乐趣之一来自 授权用户和用户参与 。令人愉快的体验指的不只是能用而已，它还需要引人入胜，而这恰恰是微交互较为擅长的地方，它能积极地影响到产品或服务的外观和给人的感觉。

微交互可以通过下列方式提升产品的用户体验：

    * 鼓励参与

    * 显示系统状态

    * 提供防错设计

    * 传达品牌

比起下拉刷新之类的现代元素， 滚动条 这种标准的微交互通常不太可能会设计得很差。主要是这些新兴的交互方式要求我们必须付出更多的努力和思考才能创造出充满意义、设计优良的用户体验。

我们来看一个微交互的优秀案例吧。

为了管理日常任务，我使用了任务管理工具 Asana。该工具的某些方面是我尤为喜欢的，比如它的标签和视觉设计。但是到目前为止，我最喜欢 Asana 的地方还是在于每当我完成某项任务时偶尔会有独角兽飞过浏览器这一点。这其实是微交互的一个例子。

当用户将任务标记为完成时，会有一个较小的对话框出现在页面的左下角。该对话框提供了系统的反馈——任务已经被标记为完成，同时还有一个防错选项用于撤销之前的行为以防那是一个 误操作 。对话框出现后的大约一秒，会有一只独角兽穿过浏览器的左下角区域，用以祝贺用户出色地完成了相应任务。在这个案例中，共有2个微交互：实用的对话框和受游戏化设计所启发的独角兽动画。

如果你使用过任务管理工具，你应该知道可以选择的工具其实很多，比如 Asana、Jira、Trello 或者 Wrike. 这些产品有很多共通之处。他们有相同的功能，比如将任务指派给团队成员、创建看板或者跟其他产品进行整合。然而，如果仔细分析这些产品的微交互的话，它们之间的差异就相当明显了。比如在 Trello 中 ，将任务移动到已完成列表并不会发生额外的特别明显的特效。对很多人来说，这已经足够契合他们的期望。然而我渴望在完成任务时还能看到独角兽，对我个人来说这算是一种正面强化。

当然了，微交互不只是让用户感觉舒服而已。微交互能做的事情包括显示系统状态、支持防错以及传达品牌。在这些场景中对微交互的的应用能够带来巨大的价值，因此这也使得微交互成为了让你的产品区别于竞争对手的关键方式。微交互通过反馈来告知用户信息并保证用户可以继续使用当前的产品，没有它们，你的用户的体验将会相当糟糕。

第一条 可用性探索 聚焦于 系统状态 的可见性。这条探索强化了产品应该让用户易于理解这一需求。通过让产品变得易于理解并实时显示系统的当前状态，能让用户体会到掌控感和参与感。任何系统状态的显示都是微交互，因为它们天然具备了触发（不管是用户行为还是系统状态的变化）和反馈。

进度指示器 是微交互的一个子集，它能让用户知道系统仍在运行，可以随时回应他们的行为。进度指示器大多为线性的或圆形的组件，它们能够显示明确的或不确定的等待时间。在用户等待操作的结果反馈时，这种元素能够鼓励他们继续停留在当前的产品。

用户下拉刷新信息流的场景中 LinkedIn 使用的是圆形进度条。该组件可以明确表示系统仍在运行，因此用户不必反复猜测它是否还能识别他们的行为。多亏了这样的微交互，用户愿意等待更多的帖子进行加载，从而持续停留在 LinkdIn 中。

有时候系统需要表明它们在等待用户进一步的输入。在开始的触发之后，微交互会 提示用户系统已经待命 ，并需要更多的信息输入。这一类的微交互鼓励用户继续跟当前的产品进行交互。

例如，当你在 iOS 的桌面屏幕上长按某个 app 的图标，系统会通过轻微抖动所有 app 的方式来予以回应。该活动表明系统已在等待进一步的行为（也就是说，不管是轻点 app 左上角的”X” 来删除应用还是将图标拖放到另一个位置）。

微交互并不局限于网站。Google Home 之类的语音助手在等待用户的命令时，也使用了微交互来显示待命模式。在用户说完“Hey Google”之后，该设备会显示一个包含四个圆点的动画。这些圆点接着又会立即构成一个带有微妙闪烁动效的方块。通过这样的视觉反馈，用户就能立马知道设备已经在等待命令，因此可以开始问它“天气如何？”之类的问题了。

防错 （另一条可用性探索）聚焦于避免容易出错的情况，还可以提供确认操作。

微交互将这些情况传达给用户，并通过支持撤销操作和避免重复工作来提升令人满意的用户体验。

人人都会犯错 ，这在数字世界里指的是有时候我们会不小心点击了某处。因此系统应该要确保撤销操作可以变得容易一些，以免用户不得不历经重重障碍才能逆转他们的无心之失。微交互可以 显示 UI 组件的当前状态 ，还能够提示用户他们可以进行进一步的交互了。

微交互可以说是对撤销操作最完美的支持方式，因为它们能够明确提示用户系统状态已经发生变化。

Gap.com 允许你收藏喜欢的商品，只要点击图片右上角的心形图标就行。这个微交互使用了跳动的心形动画来表达你已经收藏了某件商品。你可以很容易的通过再次点击心形图标撤销收藏的行为，然后它就会恢复为原来的灰色状态。

这种跳动的心形动效是 利用动画吸引用户注意的恰当方式 ，因为：

    * 它足够微妙，没有粗暴的将用户的注意力从主要任务中猛然拉开（相反的，过于明显的动画会对用户造成极大的干扰）。

    * 只在很短的时间内显示该动画，因此它仍然可以算作微交互，跟不合时宜地长久显示截然不同。

    * 跳动的心形动效跟常规的点亮颜色的心形图标的区别在于它更有助于传达系统状态的变化，并能够引导用户留意因意外操作而产生的潜在影响（这在触摸驱动的用户界面中常常发生）。

在账号创建的流程中，比起在点击最后的提交按钮然后收到错误提示说你的 密码 不符合要求（之前并未说明这些要求），还有不少事情是更加令人崩溃的。但是使用微交互的话就可以用来提示用户所输入的密码是否符合要求，这可以大大 避免重复的输入操作 （比如重新填写表单）。如果没有这些微交互，用户会在注册的过程中随时感到抓狂，并且如果注册并不是必须的操作的话，他们便会立马离开。

eBay 的注册表单使用了微交互来有效避免验证时的错误发生。例如，密码输入框被激活后，会出现一个列表显示对应的密码设置的要求。在输入的过程中，每当密码满足其中任一要求，该列表都会自动更新。如果输入的内容都不符合要求，它的下方则会出现红色的错误提示。这一系列的微交互组合起来保证了用户可以得到一致的反馈和流畅的体验。

微交互不应该是空洞无物的，而是要服务于某个目的，因此我们也可以用它来进行品牌传达。如果你的品牌形象充满乐趣而且色彩斑斓，那么让它体现在微交互中是相当合适的。相反地，若你的品牌需要传达出专业和可靠的感觉，那么在下拉刷新的微交互中使用搞笑的方式（比如甜甜圈）就相当欠缺考虑了。就像你的文案拥有某种 口吻 一样，你的微交互也有它自己的口吻。（ 品牌作为体验 的优秀案例）

在使用苹果的信息 app 发送生日快乐的消息时，屏幕中会出现满满的气球动画。苹果将自己定位为一个富含创意同时以人为本的品牌，而这个生日的微交互以创造情感化的感官体验的方式完美地契合了自身的品牌特性。

Snapchat 利用了微交互来表示两位  Bitmoji 用户处在同一个聊天窗口中。如果对方正在输入，他的 Bitmoji 上会显示表示正在思考的气泡。而如果他在阅读消息，对应的 Bitmoji 则会显示为正在偷偷查看消息输入框。在这个案例中，微交互所提供的反馈会鼓励用户继续进行对话并持续使用这个 app 。

许多品牌严重依赖视觉来进行传达，其实声音也拥有相当程度的感染力。假设有人要求你画出某个保险公司的 logo 或者唱出他们的广告歌曲，你认为哪一个会更容易呢？如果你经常看电视，那么你首先想起来的很有可能是它的广告歌曲。其实微交互也会用到听觉反馈。例如，在用户启动 Xbox One 时系统会给予听觉和视觉的反馈：Xbox 按钮亮起来，系统发出简短但特别的旋律。Xbox One 的用户是很有可能将这个声音跟关机时的声音、以及跟其他游戏平台的声音区分开来的。因此这个微交互既成为了与系统交互的签名元素，也是 Xbox 品牌的一个明显特征。

设计优秀的微交互可以显著影响到用户体验。它们可以作为与用户进行交流的媒介产生其相应的价值。微交互能提供系统状态的视觉反馈或者帮助用户避免错误。此外，微交互还能以传达品牌的方式丰富你的产品，这能够极大的鼓励用户选择你的产品而不是竞争对手。总而言之，这些微小的细节可以让好的产品蜕变成优秀的产品，从而让用户沉迷其中。

原文链接：