B类电商业务的Web动效研究与实践

随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在向我们招手了。俗话说得好,颜值不够,动效来凑,Web动效已经不仅仅是网页设计的润滑剂了,它的功能更多的体现在了交互逻辑、视觉渲染和创新实践上,上能引人注目,下能潜移默化。

下面将通过经典的黄金圈法则来为大家讲解我们在B2B聚合页——1688首页项目上的动效设计,主要分为三个部分,动效设计的目的、方法和方案。

首先来一发大师金句,迪士尼动画大师乃特维克的毕生经验浓缩成一句话就是“动画的一切皆在于时间点和空间幅度”,动效设计和做动画是一脉相通的,我们不是要做写实主义的动画,而是要通过时间点和空间幅度的设置为用户建立运动的可信度。

在设计开发的过程中,当设计师做好了一套静态页面而且设想出N种有趣的交互动画,再交付前端进行重构还原页面的时候,由于无法提供精确的动态参数,导致沟通和制作的成本增加,而最终的测试demo也差强人意。因此,我们在1688首页项目的动效设计中总结归纳出一套适于设计师表达动效概念的方法和流程。

Categories: animation, CSS3动画, CSS设计, transition

特别的字给特别的你!20个标题字体素材免费下载

beautiful-free-fonts-headlines-1

编者按:最新的字体素材到咯!今天推荐的这组字体素材,是专门拿来作为标题的,特别是全屏背景网站,这些字体刚好用上了!20组高质量的字体,手快的同学先过稿呦。

想紧跟设计潮流的设计师不要放过咯!《这效果超火!教你创建高大上的多边形字体》

see-more-low-poly-text-effect-ps

Neris

Neris Web Font designers freebies

Arca Majora

Arca Majora free font

Hans Kendrick

Hans Kendrick Regular Font

Hanken Round Font

Hanken Round Font

Aventura Typeface

Aventura Typeface

Atletico Font

Categories: CSS设计, 字体素材收藏

紧跟潮流之背景篇!2015年引领风潮的五种网页摄影图趋势

提到设计,运用摄影图是其中一项基本手段,每件设计都或多或少都会用到。本文要剖析的并非摄影图本身,而是 网页设计 中运用和掌控摄影图的流行趋势。来跟上潮流 >>>

2015即将流行的设计趋势:

其中有些显而易见、广为人知,其他则频频使用,却鲜有提及。当我们将同类趋势收集整理成套,对此概念的认识则会超乎我们想象。而且,像这样把各种趋势对比着看,我们似乎会发现当下采用的方法并非最佳,可以找到更好的替代方案。

一、巨幅背景图

首先考虑一项最盛行的趋势。以下是一系列运用巨大照片作为背景图的网站。毫不夸张地说,这是一种快被消灭掉的方式。但这并不是说就该禁止使用。每种趋势都有它的意义。撰写这个章节时,我的任务就是寻找那些没有把这种风格作为权宜之计的网站。相反,我找的网站都带着目的运用它,背景摄影图在传达网站信息方面,扮演着重要角色。浏览以下案例时请牢记这一点。

Categories: 学习与阅读, 工作记录, 经验分享, 网址分享, 设计前沿