Jbos乔帮主说过：“好的设计师，不会使用烂木板作为衣柜的背板”。虽然你最终稿的设计很美，但你的psd很糟糕，当别人用你的psd的话会觉得你这个设计师很不负责任的。

　　一份让人觉得可怕的psd有如下特点：

　　1. psd 文件尺寸 竟然有71M，

　　2. psd 图层上百个，各种看不懂的图层。

　　3. 设计稿完全是个插画，怎么看都不像个网页，无从下手切图。

　　4. GUI为矢量图，边界不清晰。

　　合理分层，结构清晰

　　不管你做的是设计，还是插画。结构设计也是一种设计，当你合理并且清晰的规划好你的设 计稿，那么这个设计就有十之八九了。

　　如何对网页设计稿进行分组分层呢？

　　1. 按框架分。(网页分 ，头部head ， 主题 main，底部 foot，以此类推)。

　　2. 按模块分。(每个小原件，小装饰，合成一个大物件就能做为一个模块)

　　3. 按属性分。(这点比较重要，设计师如果做的是web界面，需要了解什么是“图片输出”  和 “代码输出”,

       原因是当切图的时候，我们需要将 “代码输出”类型所属的图层隐藏掉，然后再进行导出)。还有一些注释(注释好重要，后面有讲)相关的东西。

　　4. 按状态分，(web设计跟插画设计 一个很大的区别就是 web设计是有交互的，需要针对 各个交互状态进行分层分组)

　　在这里解释一下什么是“代码输出”和“图片输出”

　　“代码输出” 指的是设计稿中的一些效果是可以使用代码来实现的，如后期可编辑的文字(大段文字，小按钮里的宋体文字)，圆角，渐变效果(高级浏览器可实现)。

　　“图片输出” 则是指出了代码输出以外的东西，如图标icon，背景效果，以及一些 使用代码不可实现的文字效果(如艺术字体)。

　　下图是一个良好结构的示范：
          

本站技术原创栏目文章均为中睿原创或编译，转载请注明：文章来自中睿，本站保留追究责任的权利。