
人人产品经理社区推出产品经理培训课程,邀请BAT产品总监亲自指导你学习产品设计!
(本文为我的个人笔记,我在使用Hype3工具进行原型设计和JS开发时,避开了大量的数值计算,但仍然需要理解一些重要的概念。)
当设计师需要为RD(研发部门)制作动态特效时,他们需要明确以下六点信息。这些要点是根据邱政宪、Cateyes Lin和谢孟哲的分享整理得出的:
1. 起始状态和结束状态:动态特效的开始和结束画面设计,也就是动画前后的静态画面。
2. 变化属性:包括尺寸、距离、色码、透明度等组件属性,在动画中还需要考虑X轴、Y轴以及可能的Z轴变化。设计师需要准确标注这些数值,而非仅提供一种“感觉”。RD在编写程序时需要依据这些具体数值。
3. 时间脚本:定义在何时发生何种属性变化,类似于关键帧的概念。设计师需要详细规划每个组件在不同时间点的属性变化。
4. 渐变函数:可以理解为动画的“加速度”或“减速度”。优秀的动画应具有流畅的过渡效果,这需要设计师与RD共同讨论选择合适的动画曲线。
5. 操作行为:即动画的触发条件,需要考虑用户操作如何影响动画效果。在游戏设计中这一点尤为重要。
5. 参考范例:设计师需要提供动画模拟、原型等视觉范例,而最难的部分在于如何准确传达前面提到的五种数值属性。关于这些数值的标注对于RD来说尤为重要。这就需要我们的RD具备强大的技能了。让我们听听谢孟哲的经验分享吧。他将为我们揭示为什么好的RD需要具备通灵技能的原因。他将分享一种常见情况,即在设计过程中会遇到普通动画和特殊动画的区别,如翻页动画和复杂的特效动画等,后者通常需要专业的特效函数库和软件研发团队的支持。对于普通的动画设计来说,工程师开发时有系统提供的操作方式作为指导原则相对来说更容易掌握其标准程度更为严格的理解为了把这一部分做的更好的了解会需要在坐标系方向等进行各种详细的参数的定义并进行标注这样的设定也会体现在各种数字上面同时会加入时间的概念加入一个时间的参数以衡量这个动画带给用户的使用体验是否能够接受这也是工程师和设计师之间经常沟通的部分通过沟通和协作共同决定一个合适的参数值使得动画看起来更加流畅自然通过沟通来共同确定一个合适的参数设定以便于营造优质的观感使原本设定的想象与功能转化具有鲜活生动色彩明亮流畅的互动页面令人有欣赏网页的操作体验时感觉像是看了一部视觉盛宴从而极大地提升了用户的满意度同时谢孟哲还分享了一个实用的工具通过该工具设计师和工程师可以直观地调整动画曲线并实时查看效果从而更加高效地协作完成动画设计的工作。总的来说设计师和工程师之间的沟通和协作是完成高质量动画的关键通过理解彼此的工作需求和挑战共同创造出优秀的用户体验。
