5个小技巧,用动效提升界面的用户体验就这么简单

动效能讲述故事。和图片不同,动效能够呈现变化的过程,讲述一段简短而有趣的故事,能够同你进行对话:“嘿,你该看这个按钮了”或者“哦耶!你刚刚完成了一个操作!”不过,动效的目标并不是单纯的娱乐用户,而是帮助用户了解交互的效果和界面中发生的变化,让用户更为有效地使用你的APP。Zurb 有一句话很好的解释了这一点:

“我们设计的不再仅仅只是静态的界面,实际上,我们所设计的是用户从界面获得内容的过程。”

动效广泛运用于网页内容和背景当中,用来强化功能,提升美感:它会直接影响用户的行为,引导用户注意到特定的内容,呈现状态,帮助用户找到他们想要的内容,达成目标。想要借助动效提升用户体验,可以参考下面的指引来进行优化:

加载过程不要让用户感到单调无聊

如果你无法缩短加载和等待的过程,那么你应当尽量让用户在等待过程中感到愉悦,这个时候的动效基本只是在提醒用户后台正在加载。而几乎所有的网站和APP都会碰到这样的情况,而好的设计通常都是通过微妙而有趣的动效,让用户的注意力转移到动效本身上,而不是被无聊的情绪所左右。下面的的案例中,设计师让界面从基本的框架结构开始加载,明显地缩短了等待的主观体验。

不要让状态改变过于生硬

动效最重要的功能之一是强化过渡效果,所以,它需要让过程的起始和结束都要被明显的呈现出来。一个设计良好的过度动效应当合理地将用户的注意力引导到需要被关注的地方。

Adrian Zumbrunnen 有个非常不错的案例,它展现了用户点击了链接之后,滚动动效是如何让用户明白变化过程的。对比下面硬生生的转变和加了动态效果之后的版本:

正如你所见,这个动效让用户明白了界面的结构和转变的过程,有助于用户了解下一步应当如何与之进行交互。

阐明元素之间的关系

动效还能提升用户对界面的操控感。

正如同下面的案例所展示的,一个菜单按钮随着平滑的动效展开为一个播放控制界面,随后点击返回,又收缩为一个按钮。这个特效不仅仅让界面看起来神奇无比,而且告知了用户按钮的实际功能。有意思的是,这个动效还强调了播放和暂停两种状态的差别,两者可以互相变化,而不会共存。

这个案例中,动效将用户的注意力引导到了屏幕的正中央,播放和暂停两种状态的改变是用户注意的焦点。

另外一个案例则是更为常见的浮动按钮,点击“+”按钮,按钮展开其中隐藏的其他功能按钮,而按钮中的“+”则变化为意为编辑的铅笔图标。这个图标变化的细节向用户暗示了接下来会发生什么,并且明确了按钮不同状态下的差异。

出错的时候给用户以反馈

当用户执行了某个操作之后,动效能够强化这个交互所产生的效果。报错,就是最常见的反馈机制之一。

下面的案例就相当典型,一个简单的左右晃动的特效给用户一种界面“正在摇头”的感觉,让他们明白所输入的内容并不正确。这种拟人化的动效让界面充满了真实的质感,信息的反馈也更直觉化。

动图

通过反馈告知用户目标达成

动效不仅能够“摇头”还能“点头”,它同样能够以视觉化的方式告知用户交互所达成的结果。当用户操作完成之后,结果不应当是生硬的弹出,而是自然的过渡并呈现出来,“展现,而不是单纯的告知”。

在下面 Stripe 的案例中,用户点击“支付”之后,一个简单微妙的动效联通了“支付”和“支付成功”两种状态,这个时候,动效赋予了支付这个操作一种轻松写意的感觉,是一种让用户欣赏甚至沉迷的细节体验。

动图

结语

当你熟练运用动效的时候,它会成为你UI设计过程中最强大的工具之一。一个动效是否合适,你确实需要花费时间仔细思考。我们应当在设计之处就开始思考动效要如何展现,并且将它视之为界面的天然的组成部分,因为它的存在并不仅仅能够强化界面的视觉,而且能够优化功能,强化体验。正如同乔布斯曾经所说的那样:

“设计并不仅仅关乎视觉和感受,它要呈现的是事物运作的规律。

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏zhangdd.com

流量分析常见指标

1)基础分析(PV,IP,UV) Ø 趋势分析:根据选定的时段,提供网站流量数据,通过流量趋势变化形态,为您分析网站访客的访问规律、网站发展状况提供参考。 ...

11810
来自专栏漫漫全栈路

R.I.P. :传统整体式架构 VS 微服务

我咨询了十几个微服务项目。有些人表示,微服务真棒(这是未来!),而有些人很沮丧(谁发明了这个废物?)

16720
来自专栏技术翻译

AI在测试自动化中

如今,几乎所有IT项目都面临着以更快的速度和更准确的方式运营和部署软件和服务的挑战,为项目团队创造了一个无情的高压环境。要求每天都在变化,而且从来没有足够的工程...

48020
来自专栏互联网杂技

8个视觉稿设计工具,页面视觉和实时交互就靠它们

对于视觉设计师、交互设计师来说,他们需要做的不仅仅是设计一张张静态的页面和独立的icon,他们需要将这些元素整体组合在一起,根据整体画面感和视觉体验来做出修改。...

34850
来自专栏企鹅号快讯

Python或将取代VBA,成为Excel官方脚本语言

程序员头条(ID:CoderTop) 报道 微软正考虑添加 Python 为官方的 Excel 脚本语言‍ 据外媒报道,微软正考虑添加 Python 为官方的一...

33190
来自专栏大前端开发

微信小程序如何保证与微信聊天之间的顺畅切换体验?

你现在在微信中,阅读一篇订阅号或公众号的文章,或者在使用一个HTML5应用。然后,你突然想和微信上的一个朋友聊两句,这时候,你就必须退出这个文章或应用页面,然后...

17060
来自专栏BestSDK

【刷脸登陆】 一种毋须动用大脑皮层的登录方式

一登是啥? 一登是一家人脸登录服务提供商,以开发组件的形式,为 Android、iOS 应用开发者提供人脸登录功能接入服务。用户不需要记住很多密码,因为人脸就是...

244100
来自专栏程序员的知识天地

web前端知识体系大全,教你如何学习前端!

大约在几个月之前,让我看完了《webkit技术内幕》这本书的时候,突然有了一个想法。想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前...

26720
来自专栏无原型不设计

如何规范移动应用交互设计?UI/UX设计师须知的11个小技巧

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

42990

如何在一天内建立物联网应用程序

物联网(IoT)的建立是为了解决现实世界中麻烦的问题,而将物联网技术整合到更广泛的信息生态系统中的过程几乎是同等麻烦的。这就是为什么物联网不是您可以在商店(或其...

54840

扫码关注云+社区

领取腾讯云代金券