Perfect Pixels

对于页面的设计一直以来,前端开发与设计师的磨合都是一个问题,设计出来的东西是不是一定要完全与设计稿一样呢?设计稿是不是也要计算呢?设计师是把设计完后的东西直接给开发吗?开发难道还要为不完全的设计做最后的调整与修饰吗?

既然我们已经做了这么多的项目,那有一些经验我觉得还是值得跟大家分享一下。

关于设计

对于大多数网页设计师来说,设计可能就像平面设计一样,排版,调色即可。但是这里我要说一下网页设计与平面设计有非常大的不同,其中最不同的一点就是,网页设计是有精度的,不仅仅要对大版面考虑精度,对于细节同样需要考虑。甚至是文字的使用与字体大小 ,行距等。

其中的计算我在以前的文章中都有介绍。

前端开发手册之设计篇 里面详细的讲解了关于字体与设计时应该计算分格的问题。

前端MVC – PSD设计篇 里面也同样讲解了关于PSD转HTML时应该注意的问题。

我这里以GlobalMakret Web Design 2011为实例,这是设计稿(已经去除辅助线与标尺):

GM-2011-home-design

关于前端开发

在完美的设计之后,就到了实践的步骤,让设计稿动起来。

在这里首先要说一下,关于字体的差异,在PSD转HTML时一大问题就是字体不能完全转换,因为浏览器渲染的问题,不同的浏览器里对字体的渲染并不相同。所以这在设计时同样需要考虑的问题。

先看图,开发后的HTML页面(Win7 Firefox3.6 截图):

GM-2011-home-html

可以看到Win7对于字体的渲染效果还是非常不错的,由于使用了ClearType技术,对字体的渲染几乎可以达到PS里的锐利效果(对于IE效果会更好些,IE对字体的渲染一直都不错)。

重叠

设计就让他完美的去实现,这才是我们的目的,不然设计师费了那么大的力气设计的作品就这样被糟蹋了肯定会骂娘的~

GM-2011-home-after

这是把两加图(设计稿与浏览器截图)重叠后的效果图,从图可以看到,图片是肯定可以Perfect Pixels!但是文字的确非常难,但是我们也一定要至少保证首字母是应该重合的或者差不多重合,由其是行距,这行关键,因为设计就在于这几PX的版本中,如果这都无法保证,那就相当于没有设计一样!

问题

图中依然可以看到有些问题的存在,就是更改,在设计时由于不能把信息提供的准确,而最终导致终稿与实现的还是有差异,不要小看这一点点差异,对于精益求精的我们来说,是非常难以忍受的,因为很可能这样就没有辅助色,或者没有了中灰色!或者由于格的间距发生变化,留白就会了现差异,这就严重的影响了视觉效果。

在现在来说,在设计之初提供的东西非常有限,都喜欢做完后再添加东西。这点要在平时尽量的去灌输思想,并且在实践中让大家更默契才能减少问题的发生。优质的产品是源于团队的默契!

(由于XP对字体的渲染与Win7相差比较大,所以在XP下不开户ClearType,只能保证80%的相似度。)

后计

设计一定要将他完美的实现,实现一定要更精确!

所有简单的事情,把它做的精细就是完美。

有相关问题欢迎与我讨论联系方式

YSjia

此条目发表在 css, html, UE, 实验室 分类目录,贴了 , 标签。将固定链接加入收藏夹。