日志
这些小小的改变,能够让UI动效更上一层楼
2018-05-16 10:21
UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。 动效呈现出状态切换的过程,展现了元素之间的逻辑关系,并且吸引用户的注意力,引导他们执行有效的交互。 在设计动效的过程中,Material Motion 的设计原则,IBM 动画设计规则和 UX动效宣言都是不错的设计参考和指引。遵循这些现有的规范,能够很好地提升动效本身的体验和效果,从优秀走向卓越。今天的动效设计都是遵循着这些规范使用 InVision Studio 来进行制作的。 左侧标签切换的时候使用了淡入淡出,右侧标签页切换使用了滑动效果。
卡片是最常见的 UI 元素,左侧的界面中,点击卡片之后,展开新的界面;右侧界面中,点击卡片之后,卡片扩展并填充整个屏幕。
左边的列表使用了较为迅速的淡入淡出动效,而右边的列表当中,淡入淡出以延时的方式呈现,效果类似瀑布的展开方式。
左侧的动效是内容在顶层覆盖列表,而右侧的动效是从中间扩展将上下内容顶开。
左侧的动效中,菜单从底部淡入界面,而右侧的动效中,菜单是从被点击的按钮中扩展开的。
左侧的按钮通过文本说明和色彩变化来指示状态改变,而右侧按钮则通过加载控件来展示不同的事件的发生。
左侧仅仅是通过色彩、符号和位置来吸引注意力,而右侧加入了微妙的动效来吸引用户注意。
我希望今天所提到的这些技巧能够让你在设计交互动画的时候,拿出更加自然、优秀的方案。从优秀到卓越,有的时候只需要进行微小的改变。值得一提的是,像 InVision Studio 这样的工具,对于动效本身的提升是很明显的,它能够提供更多自然而富有直觉性的动效。 总之,在设计动效的时候,注意状态变化的指示,元素之间关系的强化,适当地增加一些乐趣。遵循这样的原则,总能让动效更上一层楼。 阅读全文 |
下一篇: 信息杂乱无章?教你构建合理的视觉层次!
-
删除
sharkoasis:和QT有什么关系?有相应实现吗?
2018-05-19 20:16 -