专栏名称: 交互设计学堂
系统学习交互知识,就找老D。干货分享、在线培训、行知书院三大版块帮你提升自己。 最新资讯-全是干货还有老D点评,每天推送; 交互培训-在线课程帮助小伙伴进入交互行业,只要3个月; 行知书院-老D帮小伙伴们解读经典设计书籍,都是“硬”知识。
目录
相关文章推荐
龙爪槐守望者  ·  5月公众号流量主收入443.16元,比平常一 ... ·  昨天  
庞门正道  ·  减肥呢,别搞! ·  2 天前  
ZaomeDesign  ·  韩国新地标!一座“扭动”的摄影美术馆 ·  3 天前  
51好读  ›  专栏  ›  交互设计学堂

用微妙动效改善用户体验的简单方法

交互设计学堂  · 公众号  · 设计  · 2017-05-04 20:17

正文

请到「今天看啥」查看全文


无限滚动是一种体现动效的好方式,只要页面上的组件是干净、有粘着力的。 太多的色块或太多的动效会混淆访客并带来不可预测的负载。可以考虑使用大背景图片或者是带有令人愉快色调的网格来创建粘结性和简洁性。

Wavo(https://wavo.me), 音乐/社交媒体网站,提供了一个极好的无限滚动的例子。该网站色调是黑白的,图像是清爽、简单的,它们很好地打破了负空间的每个部分。当用户向下滚动页面时,他们可以很容易地专注于那里的信息,同时仍然沉浸在品牌的美感中。

使图表&图形变得生动

动画图表易于结合,而且看起来有趣。它们给你的网站添加了一小部分的运动来创建一个有趣的信息图表。Custora.com(https://pulse.custora.com/pulse/platform), 是一个分析电子商务趋势的网站,它通过一系列丰富的动画图表展示其数据。

度量(例如移动订单),在条形图中生成,当您向下滚动时,该条形图将加载。 它带来了一些兴奋点,否则将是一些沉闷的数据点。 游客自然地被吸引到观看加载条,因为他们想看看它们的停留点。

在这个案例中,动画被用来潜入访客的心理。 此外,动画又是愉悦眼睛的,因为页面没有过重的颜色和其他形式的动画。 网站在一个清爽、白色背景上,运用轻柔的色彩以及柔和明亮的字体, 这使页面上的内容有机会突显,而不必与网站上的其他元素竞争。

慢动效的氛围

慢动作动画是将运动融入您的网页设计的最优雅的方式之一。 当页面元素在一段时间内稍微移动时,它自动吸引访问者的眼睛。 它类似于向人们耳语来让他们倾听。







请到「今天看啥」查看全文