bing1472634085000

今天多数汽车 ui 的设计，由于不直观、过时和缺乏美学表现力，一直饱受诟病。其他行业都将设计的品质奉为标准，汽车生产商在这方面则动作迟缓。所以，许多设计师抓住了这个机会，思考未来的汽车界面会如何改变我们的驾驶体验。

时下对动效的追捧，疯狂至可以用一句话形容——“没有动效的 APP，简直不是好的 APP”。优秀的动效设计在提升产品体验、用户粘性方面的积极作用有目共睹，已然成为现下 Web、APP 产品交互设计和界面设计必不可少的元素。笔者想从常见基础动效、动效作用、动效的应用设计和动效评判四个方面简单谈谈对动效理解。

注：D 族通道是指 “Tencent Design 腾讯设计通道”，设计通道成立于 2006 年，隶属于腾讯职业发展通道设计族（简称 TDCP or D 族），致力于腾讯设计专业培养及公司设计氛围提升。日常主要工作包括助力员工通道晋级（制定晋级标准、组织晋级培训、认证培训课程）、促进设计骨干交流（组织外部考察、课题沙龙、设计峰会）、组织专业深度专业培训（专家课程、大师课程、腾讯学院课程）、传播设计文化（设计展、设计公益日、设计论坛）等，并积累建立起通道数据中心，服务于公司各项设计相关工作。腾讯设计通道是助力设计师成长的重要平台，在 2016 年 9 月举办了第一届 TDW(腾讯设计周)，为设计师提供一个分享行业趋势，相互交流和提升的平台。

纯 CSS 版 演示地址：http://weber.pub/demo/160912/css.html 搭配 Jquery 使用 演示地址：http://weber.pub/demo/160912/jq.html

国内设计大牛 @树波 分享 ui 动效，并无私的奉献出了 psd 和 aep 的工程文件。

功能性动画是一种微妙的动画，有着明确、合理的目标。它能减少认知负荷，防止变化视盲，在空间上营造更好的印象。但还有一点，动画让用户界面鲜活起来。 通过组合与分割、改变形状和尺寸，运动可以使外表感觉鲜活。应当运用功能性的动画，流畅地在导航内容间引导用户，解释屏幕元素和排列的变化，并且强调元素层级。