新浪UED

设计与构建的亲密接触

by yanjun / 博客,网页重构 / 2012-12-27
设计与构建的亲密接触

本文分三部分讲解:

  1. 效果图与页面的差异:主要讲解页面与效果图不同的细微之处
  2. Css3新特性:分两部分,新特性和实例部分
  3. 设计与构建:构建的趋势与现状

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 代码十分臃肿。

最后,我们所做的一切努力都是以用户为中心

用户关心:快、美观、流畅、实用性

Lace Front Wigs   ,
human hair extensions   ,
hair extensions    |
hair extensions    |
hair extensions    |
hair-extensions-luxy    |
hair-extensions-me    |
hair-extensions-hid    |
hair-extensions-cash    |
hair-extensions-lace    |
clip in human hair extensions
hair extension
hair extensions for short hair
hair extentions
luxury for princess

文章评论

  1. 秀设计 说:

    对于我来说 理解上有点难度~~

    看小编讲解得很深入,很是眼馋!呵呵

秀设计进行回复 取消回复

电子邮件地址不会被公开。 必填项已用*标注

* 验证图片 刷新验证码

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>