网页流动设计 第1篇
提到性能，你会想：“当然，这很明显。动画应当运行流畅，不能卡顿。”正确，这在理论上确实显而易见。但问题是我仍然能看到一些网站，虽然用最新技术构建，动画却很卡。
现在，想象一下在低分辨率的平板或手机上，浏览那些网站是什么样子。一方面，这是个检验个性的方法，但另一方面，它无法给这些龟速网站带来任何业务。如果你的印象中只有卡顿的动画，或者压根没有动画，那还不如让界面元素直接各就各位。
这就是证明了，那些加入了诸多动画和特效的网站也不怎么样，它们需要加载界面和进度条。没有人在看到想要的信息前，有义务等待动画加载。
EZEQUIEL BRUNI 在这里给出一点技术层面的建议：考虑了硬件加速和性能之后，CSS几乎总是优于JavaScript。有选择时，使用基于CSS的动画，将JS作为备选。
网页流动设计 第2篇
美国数学家克劳德·香农为一般通信过程建立起一个信息流动的物理模型，主要包括四个阶段：信息源--编码器--信道--译码器和信宿。根据这个物理模型，也可以模拟出网页设计信息流通的基本过程。
网页设计信息流动模型中的信息源指的是信息的来源，广义上说是指一定时代人类的社会生活，因为所有有关网页设计的动机、课题、素材、经验等都是源于现代社会生活；狭义上说是源于客户对网站的策划与要求，以及设计师在实现其策划要求时所体现出的审美经验。
编码器的作用是设计师把从信息源得到的信息制作成浏览者能够接受与理解的信号的活动。设计师的编码包括技术（语法）编码、语义编码和审美编码。技术编码是设计师对构成网页设计的界面编排、造型、色彩、音响、交互等进行系统的安排，以构成特定设计形态的过程；语义编码是设计师运用相关的网络技术手段，将网页所要传达的基本内容凝定在技术信息中的过程；审美编码就是设计师根据自身的审美经验和个性色彩对设计形态和基本内容进行艺术处理的过程。
信道是用于承载网页设计信息本身的虚拟物质，设计信息需要通过网页的造型、图像、色彩、照明、音响、交互、云技术手段等进行传输和存储。设计信息传输信道常常是既有图像、色彩、文字等视觉型信道，也有带有声音的音响型信道，还有可以进行人机互动的交互型信道及上述多种手段结合的复合型信道。在网页设计多元化的今天，多信道的传输已经十分普遍。
浏览者在设计信息的传输过程中相当于译码器和信宿。所谓译码就是浏览者把从信道上接受到的信号翻译为自身懂得的信号的过程。浏览者依据头脑中所掌握的相关技术符号，首先对通过各种信道传输过来的网页表现形态及呈现方式等信息做出是否明白或理解的判断，这是第一次译码，即语法算子译码。如浏览者是否可以明白网页的操作方式，如果明白，需要进一步根据自身的主观意识、评定标准及所处时代的要求等，即所掌握的语义符号，对信息进行再次译码，找到所需的有效信息，即语义算子译码。在此基础上，再根据受众的审美经验、审美趣味、审美认识等对网页信息作出第三次译码，在了解网页基本内容的同时获得审美信息，即审美算子译码。
免费获取网站建设与品牌策划方案报价
微信二维码
微信二维码
网页流动设计 第3篇
如今，用动画来讲故事的这种形式已经超越了卡通，当然啦，这里提及到的动画是那些被设计出来与用户互动（比如向下滚动）的网站，操作引发了动画并讲述了故事。
有些普遍例子，那些页面会在你眼前将产品“装配”起来，以此展现新产品。其他则更像卡通片，或者有个小卡通形象跟随你到页面的每个地方。这些动画的作用存在争议；通常它们并没有提升可用性的意图，只是为了让用户印象深刻，为他们提供页面主题相应的环境。它们可能是在试图呈现一件产品的工艺，或是分享打造这件创造物的经历。
动画能否做到这点，取决于它们本身的质量。你要考虑的是其是否过度影响了网站的性能，或是影响了页面内容本身。如果用户在网站上找不到自己要的东西，世上所有的动画效果都救不了它。
网页流动设计 第4篇
对于这种没有目的的动画你要学会尽量避免，因为它可能会使人分心。你应该想办法让人们的视线集中在商品信息和购买按钮上让他们来此达成目的。如果网站没有提供特定的目标，或者确定目标时过于使人分心，他们就不会再回来了。
装饰性的动画应该完全隐藏起来。在人们完成行动召唤后再展现出来。还可以包含微妙的动画，只在用户触发某个特殊操作时才展现，比如鼠标悬停在页头和页尾的某个小物件上面。例如：
在任何页面一路滚动到最底部，会出现一只友善的恐龙“给你拍照”。而且在有气球的页面上，画面中的气球会微妙地来回飘浮。
网页流动设计 第5篇
动画要快，准确的说，应该发生得快。这里我不是在说性能，而是一个物体在运动过程中实际耗费的时间。
在我们度量界面动画时，“毫秒”是最通常的度量单位。再长的话，人们就会开始对机器或产品、或是两者失去耐心。得确保它够短，不然让人感觉迟钝。
对于人们反复使用的产品，即使相当有趣好玩，第10次看到时也会失去吸引力。你要明白的事，它只是个跳动的按钮或是滑动菜单，而不是你最爱的电视节目的片头，没有人会为此随声附和。
网页流动设计 第6篇
回到正题，我们不能将动画效果随手加于网页元素之上，然后期盼它能提升转化率。那太傻了，就像设计的所有其他方面，使用哪种动画，何时使用，这都需要仔细考虑。
实际细节与实现也是必须考虑的。如果你的动画过于耗费资源，拖慢用户的移动设备，或者更糟的是拖慢他们的桌面设备，这就有问题了。我们由此入手，看看网页上几种典型的动画：
网页流动设计 第7篇
将动画当作设计工具而非样式表现时，最好从细微处着手。比如，微小低调的动画表现更好。第二，巨大炫目的动画必须带有实用的目的，不能只为了“好看”。
除了那些让UI元素感觉“真实”和接近自然的动画，多数网站都不需要任何动画。问问自己：巨大炫目的东西在屏幕上四处移动，比常规文字和美丽的图片更能告知和引导用户吗？
多数情况下，答案很可能都是“不”。当然也会有例外，例外总是会有。但多数时候，让按钮动起来，让隐藏的导航条滑入，用动画移除发送客服邮件后的成功提示，这就足够了。
微妙是好设计的关键，这点往往被低估。以此为起点，然后如果你能确信，更大更闪耀的东西在用户体验方面更符合你的目标，那么再全力以赴！