说到如何建立手机网站，大家一定想到的是手机，随着移动设备硬件的升级，越来越多的App和Rom得以拥有了流水般的动效。手机网站也随之应时而生，那今天258集团中移动建站系统就跟大家来聊一聊移动手机网站的动效设计——流动之美。

首先，为什么要有动效?

产品设计师经常说的一个词叫“情感化设计”，我们设计了漂亮的界面，整理了清晰的逻辑，除了这两样之外，我们还需要动效来把这些漂亮的设计衔接起来，界面、交互、动效构成了情感化设计的三大载体。

“界面跳转太生硬了”“页面卡死了吗?”“返回首页在哪”… 大家在思考如何建立手机网站中一定都经历过这样的问题，动效帮助我们很好的解决这些问题，同时又带来了新的帮助。

中移动建站系统整理为如下5大作用：

过渡流畅

过渡流畅是我们对于动效的认识里对容易想到也比较被认可的一点，通过页面及其元素的出现和消失，以及大小、位置和透明度的变化，使用户和页面内容的交互过程更流畅。页面的滑动、元素的出现整个操作如水般流畅。

层级展现

随着移动应用越来越复杂，承载的功能越来越多，原来的三层结构原则已经不能完全适用，合理清晰的结构层级对用户理解应用和使用应用有着至关重要的作用。具体的方式为：通过焦点缩放、覆盖、滑出等动效帮助用户构建空间感受。就像iOS7一样，通过动效上来构建了整个系统的空间结构，Appflow的页面跳转也是同样的道理。

引导作用

移动手机网站不比PC网站，移动手机网站可用的空间就屏幕那么大点儿，很多功能的入口可能都是隐藏的，此时动效的作用就来了。其通过动效对功能的方向、位置、唤出操作、路径等进行暗示和指导，以便用户在有限的移动屏幕内发现更多功能。譬如说，iOS7锁屏界面的动效提示用户向右滑动;百度手机输入法的熊头菜单滚动提示用户翻页;微信的朋友圈引导用户一步一步操作。

高效反馈

高效反馈可以说是移动网页比较原始的需求，其通过动效让用户了解网站当前状态，同时对用户操作(平移、放大、缩小、删除)做出及时反馈。譬如说在用户点击登入按钮后，我们需要给用户展示网页当前的状态(未登入-登入中-登入完成)，如果我们不把反馈给用户，用户可能就觉得“页面卡死了吗?”，同样的对平移、放大等操作，及时友好的反馈也是必要的。

创新体验

随着大家对手机网站设计越来越重视，大家的体验越来越趋于统一水平范围内的时候，体验的差异化就越来越小。那在可用性良好的前提下，通过细节设计和交互方式创新为网站增加亮点，可以带来更惊喜的体验和表达网站的气质与态度(X格)。

比较后，258与各位分享12个字：界面先行、资源替换、趣味吸引。

来源 品牌网 转载请注明出处