作为设计师 ， 最关心的也许就是排版好不好看、图片美不美观、视觉炫不炫 ， 我们尽可能的去把设计稿做的最漂亮 ， 然后就把硕大的PSD文件就直接发给重构了 ， 殊不知这个时候重构正在恨你：
这么大的PSD ， 还木有打开!本来就开了各种浏览器编辑器神马的又要打开若大的PSD文件 ， 机子要卡死了!!!机子卡死就算了吧 ， 打开一看 ， 我去 ， 几百个图层呀!好吧几百个图层也就算了 ， 为什么我明明要拖动按钮 ， 各种连七八糟的图层也拖进来了 ， 根本找不到我要的图层!!
对于图层管理 ， 这可能是大家比较容易忽视的操作习惯 ， 特别是初学者或者新人 ， 也可能有人说：这有什么值得一提的?做好设计稿就行了 ， 其他交给重构吧!我们看多了程序员井井有条的代码 ， 规范有序的文档 ， 认为图层命名不是我们要干的事情—-其实不然 ， 下面有几个原因：
1)使用PSD的群体：设计师本人、客户、工程技术人员(程序员)、新人接手等 。
1)PSD图层太多 ， 当时记得 ， 时间一长容易忘记 。
2)项目设计过程难免有需求更改、修改建议 ， 导致设计稿需要反复修改 ， 杂乱的图层结构是不是让你更添一愁呢?
3)作为一名网页重构工作者 ， 会直接面对你的PSD文件 ， 无须的图层及命名令人抓狂 。。。。
看来管理好图层真的很重要 。
1)PSD图层命名
2)模块化管理你的图层
3)智能对象的使用
4)重构也需关注设计
看一个案例 ， 设计稿与HTML页面的的名称对应位置图 。可以看下左边代码的几个节点 ， 用颜色做了区分 ， 颜色对应了右边的模块 ， 最外面的红色(wrapper)是这个页面的外套 ， 对应PSD上就是整个页面;接下来紫色(header) ， 对应PSD上的头部(LOGO+导航);同理：绿色、黄色 。可以发现基本是从上到下的顺序 ， 当然还有例外的情况 ， 这里就不说了 。看个直观感受就可以了 。
网页里常用的模块名称：
直接看图和对应的中英文名称：整个页面(wrap/wrapper)、头部(header)、主导航(mainNav),如果整个页面只有一个导航就用“导航(nav)”、页脚 ， 或者叫版权(footer)、搜索(search)、登录(login)… 等等 。
了解了图层命名 ， 也许你的PSD图层已经几百个了 ， 该对图层管理管理了 。
1)什么是模块化
2)模块化调用、复用
3)效率和输出
模块化的定义 ， 每个模块完成一个特定的子功能 ， 所有的模块按某种方法组装起来 ， 成为一个整体 ， 完成整个系统所要求的功能 。在系统的结构中 ， 模块是可组合、分解和更换的但愿 。
貌似文字有点复杂 ， 模块化是程序设计里面的词语 ， 我们这里就可以简化下：按照视觉功能块组建一个PSD图层分组 ， 类似前面说的头部(header)、登录(login)、搜索(search)等 。
模块化组建后 ， 可以在各个页面作为公共组件来使用 ， 就不必要把相同的图层再设计组合一遍了 ， 直接把这个分组拖进来就是了 。
模块化在门户官网的项目设计中尤为重要 ， 特别显效率 ， 后面还有讲到 。
虽然我们对图层命名了 ， 自然会耽误一些设计时间 ， 可能有人觉得效率变低了嘛?! 我自己觉得一方面这是一个设计师的职业习惯问题 ， 另一方面这并不耽误你提升效率 ， 当遇到大型门户网站设计时 ， 你会发现这是多么的好用 。
推荐阅读
- 网页设计制作教程
- 2016淘宝双十一活动商家报名时间与报名流程
- 如何去设计一个自适应的网页设计或html5
- 别再问我用什么网页设计软件了？
- 刺梨子与金樱子的区别 金樱子和刺梨子的区别
- 浅谈我国网页游戏发展现状与趋势
- 新手要知道的网页设计法则
- 产品必修课：网页设计的目的有哪些？
- 网站建设的内容管理与实现手段
- 小金樱子与大金樱子的功效区别 小金樱子与金樱子区别