1310-6499-520
今天是:
站内搜索:  
您的当前位置:主页 > 知识博客 > 交互设计 >
联系我们

名称:九分网络科技

联系:13106499520

地址:福建省福州市仓山区金榕南路553号


扫一扫添加微信

如何做好微交互,增加产品魅力值?--九分网络

时间:2020-06-21   分类:交互设计    作者:网络   来源:网络整理   点击:67

如何做好微交互,增加产品魅力值?--九分网络 copyright 9fen.net

www.9fen.net

之所以喜欢这篇文章,并将它翻译出来,其原因是文中的那些动画打动了我,仔细思考每一个动画都能让自己产生很多联想和灵感,借此分享给大家,也是希望大家能有所收获。

www.9fen.net

当然可能又会有人说,这些动画怎么去实现啊,开发做不了啊。不过我认为,尽管有些微交互目前实现起来会有些困难,但是咱们设计师首先要有这些意识,就是能够辨识哪些体验是好的,哪些是不好的,我觉得这种意识对创意性的工作很重要。 九分网络

本篇文章,我将展示一些有效微交互的例子,同时也会解释一下,它们是如何提高产品用户体验,另外也会教大家怎样做微交互测试。你可以利用这些信息来说服你的老板或你的设计团队(甚至包括你自己),微交互是灵活的,并且是设计丰富交互体验的必备要素。 内容采集来自9fen.net

微交互所要求的关注细节是获得有效、强大用户体验的关键原则。设计过程中的每个部分都很重要,拥有好用且令人难忘的细节能让你的应用脱颖而出。 本文来自九分网络

在整个用户与产品的交互过程中,微交互创造出了一些有趣的瞬间。典型的微交互比如像拖放,当用户开始拖动时,目标对象会突出显示,这帮助用户明确知道拖动的元素是哪个,并明确能放到哪里去。 www.9fen.net

一、微交互在界面中的优势

1. 页面之间的切换动画 九分网络

微动画在界面状态之间进行了平滑的转换,并改善了应用的体验。用户可以更好地了解之前和当前的状态。同时,微动画使得应用有了「情绪」并同时增加了必要的细节。 九分网络

如何做好微交互,增加产品魅力值?--九分网络 copyright 9fen.net

内容采集来自9fen.net

△ by Anton Skvortsov for Norde

copyright 9fen.net

2. 无限滚动与顶部动画相匹配 copyright 9fen.net

Polarsteps 应用中的微动画是向用户显示进度的好方法。 用户可以看到他们的动作与滚动内容之间的关系。个性化和指针是搜索特定日期照片的最佳方式。 内容采集来自9fen.net

如何做好微交互,增加产品魅力值?--九分网络 copyright 9fen.net

www.9fen.net

3. 上传或下载状态 本文来自九分网络

使用微动画展示了上传/下载的状态。在这个例子中,微交互同时还显示了下载了多少M字节。动画进度条为无聊的下载过程增添了乐趣。 内容采集来自9fen.net

如何做好微交互,增加产品魅力值?--九分网络 内容采集来自9fen.net

九分网络

△ by Nick Buturishvil 内容采集来自9fen.net

4. 通知 九分网络

微动画使用户能够快速识别,并高效的与应用进行交互,同时也能使实际显示的形式更加优雅。

内容采集来自9fen.net

如何做好微交互,增加产品魅力值?--九分网络

copyright 9fen.net

九分网络

△ by Mikhail Gribkov for Kultprosvet

本文来自九分网络

5. 下拉刷新 www.9fen.net

刷新这种经常使用的内容操作将成为你的界面设计亮点,其中包含了有想法的、独特的微动画。使用动画通知用户页面正在加载,并在下载完成时消失。

内容采集来自9fen.net

如何做好微交互,增加产品魅力值?--九分网络

www.9fen.net

www.9fen.net

△ by Hoang Nguyen www.9fen.net

6. 响应式点击 内容采集来自9fen.net

响应式微动画鼓励用户进行操作,这是用户与界面进行更多交互的关键原因。

内容采集来自9fen.net

如何做好微交互,增加产品魅力值?--九分网络 九分网络

九分网络

△ by Tigran Manukyan

copyright 9fen.net

7. 动效设计使得填充表单变得更加有趣 内容采集来自9fen.net

微动画用有趣和交互性元素改进了填充表单的枯燥过程。一个烦人的体验会变得因增加了微动画而更有价值,即使用户需要多次输入电子邮件,用户也会毫不犹豫地填写整个表单。

www.9fen.net

如何做好微交互,增加产品魅力值?--九分网络 九分网络

九分网络

△ by Clay Walte

www.9fen.net

8. 文字动效

本文来自九分网络

文本动画为你的设计提供了独特性并展示创新的用户体验设计方法。 毫无疑问,这些巧妙的效果在极简主义界面中尤其受欢迎。 本文来自九分网络

如何做好微交互,增加产品魅力值?--九分网络

www.9fen.net

本文来自九分网络

△ by Mary Lou 内容采集来自9fen.net

9. 开关动效

九分网络

微动画可以改善无聊的元素,如开关。当应用关闭时,动画就会停止,用户会立即收到交互反馈。 copyright 9fen.net

如何做好微交互,增加产品魅力值?--九分网络 copyright 9fen.net

九分网络

△ by Mo

本文来自九分网络

10. 滑动 本文来自九分网络

微动画最常用的地方之一是内容滑动。微动画将一个熟悉的滑动手势变成了一个独特的界面,而用户可以在一个连续的流程动画中查看内容。

本文来自九分网络

如何做好微交互,增加产品魅力值?--九分网络

九分网络

九分网络

△ by Nikita Duhovny www.9fen.net

11. 突出变化 九分网络

标签: 经验分享 用户体验 微交互 动效设计 交互动画 用户测试

郑重声明:本文版权归原作者所有,九分网络转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。


九分网络专业提供公众号、小程序、PC及移动端站点搭建!网站程序及服务器维护:13106499520。微信:452570709

----相关文章----