UED基础建议~其二(H5交互式动画界面设计)

1.用原创手绘方式讲故事

1.设计风格的定性
2.人物形象细节的推导
3.一个简单的故事

2.3D文字设计在H5页面中的的灵活使用

1.确立方案。
2.封面视觉的确立
3.最后设计LOADING页

3.设计建议

H5动画按照功能分成3大类
1.讲故事类
由用户触发讲述一个遵循通用设计原则(主体人物、视差传达空间感)的故事
//用户交互不局限点击,还可以摇一摇,抹一抹等
2.强调类
//通过动静对比把用户注意力集中在特定元素,达到传递信息的目的
3.反馈类
//针对用户操作或页面状态的反馈
2.动画实现方式
1.css动画
//能够实现2D/3D位移、缩放、颜色和透明度变换以及简单的滤镜效果(模糊)。体积小,效率高是优先考虑的动画实现方式
2.逐帧动画
//以GIF图或JPG/PNG序列的格式呈现,还原度高,可以模拟形变效果,但体积大,更适合展示时长较短,面积较小的可循环动画
3.CSS动画主要样式
1.位移动画(translate)
//因为位置变化而产生的动画称为位移动画
2.旋转动画(roate)
//因为角度的变化而产生的动画称为旋转动画
3.缩放动画(scale)
//因为大小的变化而产生的动画称为缩放动画,其中又分等比缩放和非等比缩放
4.形变动画(skew)
//因为倾斜的变化而产生的动画称为形变动画
5.css可以拓展为3D的样式
5.CSS动画的缓动曲线
//某些属性(位置、大小)会随着时间发生变化,这种变化可以用缓动曲线表示
1.线性(无缓动)
//单位时间内匀速运动的动画轨迹。其特点是动画速度平均无变化,可视觉感受比较僵硬
//是最为基础的动画运动轨迹
2.加速/减速
//单位时间内加速或减速运动的动画轨迹,
//其特点是物体速度随着时间变化而产生速度的运动变化,可以使动画视觉效果柔化,显得优雅
3.弹性曲线
//在单位时间内呈若干回弹运动的动画曲线
//特点是动画效果通过多次往复的运动实现。
6.技术实现角度谈H5页面设计的几个注意事项
1.不同屏幕尺寸的适配
2.背景层和内容层的分离
//若果页面中需要将每个元素都可以点击,如果这些元素与背景层是融合在一起的,那么虽然可以做到在不同屏幕下背景图的自适应,
//但我们的点击区域可能会和对应的背景区域不重叠,甚至偏离。
//解决方案:我们将背景层和可操作的元素分离出来,将每一个可点击元素独立出来,便不会出现这问题了。
3.横屏和竖屏的适配
4.动态的选择
//1.尽量去除不必要的动画
//2.尽量使用简单动画
//3.同时进行的动画尽量少

你可能感兴趣的:(UED基础建议~其二(H5交互式动画界面设计))