你认为将PSD设计稿写成前端页面最快、最高效的步骤是怎样的?

关注者
145
被浏览
13672

10 个回答

1. 了解视觉设计师给出的图,找出可以重用的部分,缺少的东西。特别是缺少的东西,比如一个按钮的 hover 外观,当你要拼成 sprite 又找不到图的时候,再去沟通,设计师也很难很快给你。这就拖时间了。

2. [重要]边切图边想像自己如何实现。按能够实现的方式去切图。记下一些必要的尺寸。这样可以让你切完图已经差不多知道所有东西都应该怎么实现,也不用怕实现不了需要重新切图。而记下尺寸可以让你在写的时候不用再去折腾源图或 sprite 。

3. 在标准浏览器 FX、chrome、Opera、IE9 等浏览器中的一个用标准去构建一个页面。写完之后就是检查一些兼容问题了(通常经过第2步,你已经了解实现方法,有兼容问题的也一般都会习惯性避开,所以,作为不复杂的公司业务页面,一般都是很少会有bug的)。

4. 用 JS 实现交互(第2步又显得非常重要,结构、语义、实现方法都有了,就省去很多麻烦了)。

大概就是这样吧。不过,话说回来,习惯就好。主要注意的是,让你的某一个步骤减少你最容易犯错的。比如页面兼容,你就应该有个步骤可以让你避免。比如项目时间的预估,你也得有相应的步骤去确保你在预估时间内能搞定。

而如果只是为个人写,那就完全按照自己来就O了。不用像大公司流程一样,还要照顾其他队友的进度。
  1. 先切图,弄一个sprite出来
  2. 利用css框架快速构建页面基本结构,规划通用模块结构。
  3. 上色,加图片。
  4. 微调,解决兼容性问题。
  5. 加入js代码,将部分内容转换为js模板(如果需要)。