image.png


关于本书

插入「表格

书名

《U一点·料》

作者

 阿里巴巴集团 1688用户体验设计部

出版社

机械工业出版社

阅读日期

2015年7月

豆瓣评分

8.0

我的评分

☆☆☆☆


内容简介

1688UED团队的多年实践的良心作品。从方法论落实到工作中的点滴,有思考体系,有工作流程,特别是五导家理论,让初入行的交互设计师受益匪浅。


书摘 和 感悟

一、app动效设计

app动效分类


情境:了解当前处境

变化位置:用转场动效提示从哪里来,到哪里去

层级展示:理解局部和整体的关系,如侧边栏,行内展开


引导:明确可以进行的行动

扩展空间:提示页面有更多可探索的内容,如翻转、弹出窗口、折叠

聚焦:聚焦本身,优雅轻盈告诉用户有什么值得探索,如晃动、发光


响应:反映现状

呈现内容:异步加载,用时间和速度变化行程韵律,让用户感知页面布局、层级和关键内容,带来生机活力

操作反馈:任何动作在理想情况下都应有反馈。可带给用户操作上的安全感,引入控制感、沉浸感,让用户感知界面与真实世界的联系。


情感:引人入胜的细节唤起情感上的舒适感受

如模拟重力、ease-in-ease-out, 弹性,惯性


各类动效如何设计

Disney Animation: The Illusion of Life: 动画的12项基本法则

情境

转场过渡:左移进入,右滑退出,舞台升降(浮层),立体翻转,纸张翻页,中轴旋转,平铺旋转,开关门


层级展示


引导

扩展空间:展示附加内容,使用模态浮层或遮罩


聚焦关注:前馈式的示能

适合关键内容的变化、新功能引导、错误提示、介绍手势、引导用户与某块互动、展示隐藏功能。

image.png



响应

呈现内容:用在图表、仪表盘、地图等逐级出现的内容


操作反馈


情感

动效的本质是更好地表达交互设计意图、掌握视觉焦点,甚至影响用户的情感。

适合情景


表达情感的动效与以下品质有关:易用,信任,关联,创新。



参考资料

Material Design - Motion & Interaction

https://www.uisdc.com/master-two-methods-to-do-dynamic-design

动效元素周期表