[转]设计与构建的亲密接触
本文分三部分讲解:
- 效果图与页面的差异：主要讲解页面与效果图不同的细微之处
- Css3新特性：分两部分，新特性和实例部分
- 设计与构建：构建的趋势与现状
1.效果图与页面的差异：
1)内核小常识分享
主流内核：
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上
Webkit内核：Safari,Chrome等
1 Trident内核和W3C标准脱节，Trident内核的大量Bug等安全问题没有得到解决。
2 Gecko：这是Firefox 和 Flock
所采用内核，这个内核的优点就是功能强大、丰富，可以支持很多复杂网页效果和浏览器扩展接口，但是代价是也显而易见就是要消耗很多的资源，比如内存。
3 Presto：Opera 采用的是 Presto内核，Presto内核被称为公认的浏览网页速度最快的内核，这得益于它在开发时的天生优势，在处理JS脚本等脚本语言时，会比其他的内核快3倍左右，缺点就是为了达到很快的速度而丢掉了一部分网页兼容性。
4 Webkit：Webkit 是 Safari 采用的内核，不过 Safari 是苹果系统下的浏览器(虽然也有windows版，但是比较少)，所以只简单介绍一下这个内核的优点和缺点，优点就是网页浏览速度较快，虽然不及 Presto 但是也胜于 Gecko 和 Trident，缺点是对于网页代码的容错性不高，也就是说对网页代码的兼容性较低，会使一些编写不标准的网页无法正确显示。
5 双核现在很多国内浏览器采用双核（IE+ Webkit），如遨游，360等
总结：根据上述内核不同，造成了页面与效果图的差异，这是其中一个原因。下面我们看下效果图与页面差异性的简单处理方法。
2)效果图与页面之间差异处理
1 引导层你为何有毛边呢
左图为：IE7 8 9 10 及火狐谷歌浏览器的输出的透明图片，右图为IE6的透明图
造成毛边我们采用的方法：
方法一：除IE6外采用PNG24位图，给IE6做张GIF图 或者PNG8的，这样处理不足之处是保证了其它浏览器，但是IE6有点毛边
方法二：我们采用IE6做滤镜用一张PNG24的，其它浏览器也是PNG24，这样处理的好处是没有毛边但是滤镜是很消内存的，一般不采用
方法三：在效果图上做点简单的改变如图：
左图是IE6右图是其它浏览器，加个底图透明，毛边问题就被隐藏起来了，肉眼很难区分
2 图标摆放小窍门
左图是原图对比调整后的图，做了简单的调整，看第一个图标（手机），如果不用红框框出来，很难辨别，
在不影响效果的情况下，我们做出了简单的改变，把图标向左移动了两像素，这样就用一套代码，不用再单独给那两像素定义样式了，图标达到居中的效果。
3 间距栅格化
看上图，间距有30px 18px 16px 13px
我们在做间距截图时，我们通常采用10px 15px 20px 25px 30px这样的规律来处理间距，达到一定的规范性，但又不影响效果
4虚线 项目符号
上面是设计出来的，下面是系统自带的，但是我们一般采用下面的，能用代码写出来就用代码，原因是文件小而灵活，比如：一张图一般几十k，但是代码的话，也许就几k。灵活性的体现：比如能很快的把虚线变成实线
不是特别强调效果时，我们也可以这么做，如上面关闭这段代码，很灵活，可以随时放大、缩小、换色等
5背景图的规律性
背景图可以整铺、平铺、纵铺规律性
如上图，原图，和后面切出来的10，5像素的图对比时。怎么取值都找不到平铺点，这时我们要求助设计师了，给个平铺的点。~~~ O(∩_∩)O
6 字体
常用字体：宋体、 Arial 到后来的黑体、微软雅黑
文字大小：宋体、 Arial建议使用12号+14号字体的混合搭配,微软雅黑通常用单数
总体原则：提高文字的辨识性和页面的易读性
7 行距间距
当出现字间距时，如上图红框，我们一般不采用上面的数字，css中的字间距跟ps中行距的不一样的，一般采用自动排版
在ps面板中，我们会注意到上面几个部分，字号像素，行距，字体，字体是否加粗，行间距最好要设出来，这样便于构建制作时取值
8 文本字段
文本处理要分清字段截取，打点，还是自动换行
Css打点的不足之处：如图，点的位置，大小的不同
2．Css3新特性： css3新特性，css3现实中的应用
总结以下几个跟设计有关的css3的新特性
1） 不依赖图片的视觉效果
CSS3包含了大量新特性，可以用来创建一些以前只能通过图片（或脚本）才实现的视觉效果，比如圆角、阴影、半透明背景、渐变以及图片边框等。在这些新特性之中，多数是属于“背景和边框（Backgrounds and Borders）模块的，其余的则属于“色彩和图像”（Colors and Image Values）模块。
项目中的应用：如下图：
在红框标注中，上图用到了css3圆角，下图用到了css3边框，出来的效果跟原图一样，就不用切成图片了，大大节省了空间。
2）盒容器变形
CSS3中还有一类视觉效果，让我们可以在2D或者3D空间里操作盒容器的位置和形状，比如旋转、缩放或者移动。这些特效称为变形，在“2D变形”（2D Transforms）和“3D变形”（3D Transforms）模块中都有涉及。
下面是一些在线工具，兼容性浏览表，还有个机器猫的小实例。感兴趣的童鞋可以打开看看
http://www.css88.com/tool/css3Preview/Box-Shadow.html 在线CSS3
http://www.css3maker.com/ 在线CSS3
http://fmbip.com/litmus/ 浏览器支持对照表
http://www.liulan7.net/labs/css3.html 机器猫实例（虽然有些过时，但是能直观的看出css3在各个浏览器下的不同之处）
3）独一无二的字体
“字体”（Font）模块引入了@font-face规则，随着CSS3对字体样式的不断丰富，中文网页中对font-face尤其是web app中赋于了新的应用场景，那就是用 Icon Font 代替页面中的图片。
也就是说Css3字体引用分成两部分：一个引入@font-face是定义字体，一个引入是@font-face定义图形
1. Css3可以引入@font-face是定义字体，但是由于中文字体笔画过多没有规律，一般不采用这种方法
而英文字体固定的24个字符，定义好库，使用比较灵活
2.用css3引入是@font-face定义图形，如 图标
http://ux.etao.com/fonts/ 网上用@font-face定义出来的icon
http://weiba.weibo.com/?topnav=1&wvr=5 微博在项目中也应用了@font-face
这样做的优点就是，文件小，图标易于管理，可以随时换色，更改大小，变换位置等。缺点就是目前对纯色的支持比较好，做渐变的话仅pc端webikit内核浏览器支持。移动端webkit不支持此属性，在 Android4.0里测试，也是不支持的。
这里设计要注意的一点就是：图标做成矢量图
4）过渡与动画
CSS3的过渡（transition）在其同名的模块里描述。它是一种简单的动画特效，可以平缓地呈现一个元素的样式变化。例如，当用户将鼠标悬停于按钮之上时渐进且平滑地改变其颜色。更复杂的CSS3″动画”（animation）特性也在其同名的模块里有相应描述，它能够实现更复杂的样式变化和元素位移，而不需要用到Flash或JavaScript。
http://www.wheattime.com/common-css3-animation.html CSS动画（我们麦时同学整理出来的）
http://css3lib.alloyteam.com/ css3ui
项目中的应用： 用谷歌看
http://photo.weibo.com/statics/badge
http://photo.weibo.com/events/travelfeeling
3.构建与设计：趋势与现状
首先，重构的目标： 实现代码复用、页面性能、可维护性、灵活性、相应性
其次，CSS3的现有发展 （不太成熟）
Internet Explorer: 46% 的 Internet 无法看到这些效果，因此不要将这些 东西用于重要的设计。同时保证，在这些效果不起作用的地方，有替代设计可用。
浏览器现在的使用情况：（重点看下iE）
http://tongji.baidu.com/data/ 百度 http://www.ie6countdown.com/#map 微软（2014 IE6倒计时网站）
CSS 验证问题: 这些 CSS3 功能并非最终版本，目前不同的浏览器使用不同标签实现这些功能，可能为你的 Style Sheet 带来验证上的问题。
臃肿代码: 因为不同浏览器要使用不同定义语法，最终将导致你的 CSS 代码十分臃肿。
最后，我们所做的一切努力都是以用户为中心
用户关心：快、美观、流畅、实用性
