走心！优秀的移动端UI应当如何用微交互打磨细节？

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

编者按：UI设计的细节很重要，它不仅仅体现在静态的元素上，动效和微交互也是如今UI和UX设计中最重要的细节。想要打造优秀的移动端UI设计，微交互和动效设计是绕不开的问题，今天的文章我们来聊聊这个~

著名魔术师 Dariel Fitzkee 曾经说过：“魔术是表演和细节的艺术。”而交互设计同样是如此。设计师大多能够很好的控制设计的大方向，但是细节处理不当的话，会让优秀的设计方案功亏一篑，要不怎么说“细节当中藏有魔鬼”呢？也正是因此，那些精心设计的微交互会让用户体验显得精巧而到位。

想要了解微交互到底对你的设计有什么好处，那么你最好将你的设计思路勾勒出来。用来绘制原型和线框图的工具有很多，这里推荐使用近期比较火的adobe Experience，也就是Adobe XD，它是专门为线框图和交互设计而生的。

关于Adobe XD，你可以从这篇文章《Experience Design CC 体验版使用详细评测》了解它的基本特色。当你有了工具，也有了想法，接下来我们开始进入正题，一起来看看有哪些值得注意的微交互细节设计。

呈现系统状态

对于UI的状态设计，Jakob Nielsen 曾经说过，“系统应当始终通过合理的反馈告知用户当前正在发生的事情，所处的状态。”这也就意味着界面需要通过反馈让用户明白发生了什么，而无需用户猜测。而带有动效的微交互正是以提供视觉反馈而闻名。

想要展现创意十足的微交互动效，数据的上传和下载过程都是不错的选择。

另外一个经典的案例就是下来刷新，这是目前移动端UI中内容更新最常见的交互手段，一个畅快的下拉刷新微交互动效能够让用户欲罢不能。

让按钮和控件容易被感知

即使隔着手机的玻璃屏幕，界面上的按钮和控件也应当是易于被感知，让人觉得它们是真实有形的。运动轨迹和视觉线索能够以即时反馈的形式，弥合这种现实和虚拟图像之间的界限，让人看起来、感觉上都是在直接操作。UI界面中的按钮能够模仿现实中的按钮反馈来强化交互，简单的说来，就是让用户输入和操作的视觉反馈更加明显一些。

视觉反馈之所以有用，是因为它符合用户对于交互的期望，当用户针对某个控件进行了操作，而它们给予了对应的反馈，这种感觉是非常良好的。

构建有意义的过渡

动效一个很重要的功能，是展现状态和内容的转变与过渡，用来解释屏幕上各种元素的排布和层次。

图标可能会从一个形状变为另外一个形状，在不同的时间以不同的功能呈现，而这种过渡和转变就是靠动效来表现的。

动效设计的优势不仅仅是单纯的引导，它让转变和过渡的等待过程变得更加有趣，愉悦用户。在移动端设备上，过渡动效显得尤为重要，它使得大量的信息呈现不再那么单调。这种情况在Apple Watch 上表现的尤为明显。

Apple iOS系统的UI设计中就很好的利用了这些有意义的过渡动效。下面的案例中，用户点击文件夹或者APP，图标当大扩展到整个屏幕，展现出细节和详情。

另外一个案例则来自Material Design，过渡动效不仅呈现出控件和不同界面之间的关系，还通过色彩点名两者的关系，并且展现出了状态的改变。这样的过渡过程是流畅、轻松且高效的。

帮助用户快速入门

动效和微交互在用户快速入门的时候是非常有用的。当用户初次使用应用的时候，流畅的用户体验和贴心而不繁复的引导对于用户的初次使用和交互有着直接的影响。设计师将最关键、最重要的信息通过引导告知用户，同时还要控制好整个引导流程足够简明而舒适。

这个过程中，动效和微交互让信息展现更加顺畅，帮助用户更加高效地抵达目标。

凸显UI中的变化

微交互能够直接吸引用户的注意力。在绝大多数情况下，设计师通过动效化的微交互将用的注意力吸引到某个重要的细节上去（比如通知推送）。不过，在这个过程中，要确保动效是功能性的，并且对于用户而言是合理而能接受的。

增加令人愉悦的细节

动效在APP中的主要是以过渡的形式呈现，而那些真正让用户感到愉悦的动效大多是非标准和非常规的，它们的不同和令人意外的体验是取悦用户的关键。下面的案例中，触发按钮之后，动效提供了两重功能：告知用户按钮已经触发，然后见证一段有趣的动画。

虽然有人认为这样的动画有炫技之嫌，但是最重要的是照顾到用户的情绪和体验，能够调动用户的情绪，这个动效在整个UI交互中就称职了。

设计微动效中值得思考的问题

当你按照上面提及的思路来设计微交互的时候，有几个问题需要注意：

·微交互几乎不可见，但是又是功能性的。确保你所设计的动效和功能、目标是保持一致的，不会让用户感到尴尬或者烦躁。对于频繁的小幅度的操作，尽量让反馈和响应快速而适度，对于较大的变化则应当让动效明显而充实。

·有长期的构思。微交互是需要长期、持续使用的，有些看起来好玩的尝试可能会在持续使用过程中让人觉得不舒服。

·过度的设计可能会让你的微交互成为致命的缺陷。微交互的加载过程不能耗时过长，不要占据过多的系统资源，展现过程也不要太花费时间。相反，它应当呈现有价值的内容，并且尽量节省时间，降低用户等待的时长。

·不要从零开始。对于你的目标用户和受众多少还是有一些了解的，利用好这些信息和知识，确保你的微交互是精准而有效的。

·使用其他的UI元素构建视觉层次。微交互应当与整体界面风格保持一致。

结语

细致的细节设计能够让整个产品更有生命力。正如同Charles Eames 曾经所说，“细节并不只是细节，它是构建起整个设计的基本元素。”你的UI和交互设计中的每一个元素都是至关重要的，一个又一个细节设计让你的产品最终脱颖而出，而真正让人难忘的产品，靠的是这一个个精致到位的细节堆出来的。真正优秀的设计，从功能到元素，从交互到过渡，都是可靠的。

【Nick Babich 的用户体验设计经验之谈】

1. 输入框设计：《讲真，你真的懂得文本输入框设计的那些潜规则么？》
2. 表单设计：《抠细节！设计高效好用表单的10个技巧》
3. 极简APP UI：《超赞！帮你打造极简风APP UI 的实用设计技巧》
4. 前端开发：《有法可依！帮你衡量一个动效是否合格的六个核心因素》
5. 面包屑：《并不简单！网页中为你指路的面包屑到底应当怎么使用？》
6. 移动端页面：《跟着建议走！这样的移动端网站设计才对头》

原文地址：Smashingmagazine
原文作者：Nick Babich
优设译文：@陈子木

本文由木子设计网原创翻译，请尊重版权和译者成果，转摘请附上优设链接，违者必究。谢谢各位编辑同仁配合。

【木子设计网 原创文章 投稿邮箱：13671295@qq.com】

================关于木子设计网================
"木子设计网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：https://www.muzisucai.com/。
设计微博：拥有粉丝量150万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：https://www.muzisucai.com/