PIZn

      好吧，你被题目骗了，这并不是讲述我设计的某一个作品的稿子。在每一篇文章的开头，我都特别地讲些废话，对，标题党闷烧男，谢谢。取名《”.我的设计稿、》，是因为我所讲的都会围绕我觉得合理的设计稿。 讲些什么呢，大概是关于网页设计中 PSD 文件稿的整理方面。

      越发觉得做设计的，一个需要天分，另外一个需要灵感。而设计的技术，也是必不可少的，至少需要把灵感抽象出来。把需求，借助工具，转换成为一张好的设计稿，是一件伟大的事情。这个过程也许是头脑混乱，毫无逻辑和秩序可言的。恩，那么，在我们觉得满意的时候，面对着这样一张设计的稿子，是选择让他去吧，还是选择整理一下呢？欲知答案，可直接跳到第 6 小段落。

      这个星期，我接触到了一个页面的稿子，对，就一个页面。这个页面不复杂，但却有命名特别规范的 某某页面1.psd 到 某某页面6.psd 共6个不同的文件。接到手，没啥，感觉挺好的，那个设计师画的很不错，一个游戏主题的。由于一些事情，搁置了一两个小时后，我终于有时间开始进行我的工作了。对比了一下这 6 个页面，发觉变化的地方，就一个 Tab 图片轮转和一个鼠标滑过的效果。此刻的心情就大不一样了，迷惑于为什么就这样点变化，可以延伸到 6 个文件，把 300M 左右的文件一下子复杂到接近 2G 容量。

      先这样，不理，紧接着就进行页面仔常规的切图小任务。小心翼翼地打开 PSD 文件，机器配置不错，打开挺快的。由于之前切的图都是自己的设计稿子，所以早就做好了迎接新挑战的心里准备了。哇！果然，我发现我所见到的稿子，在 Photoshop 里面，左边的部分是那么的完美，而右边文件夹的部分，则让我郁闷着，一直郁闷的。形容一下吧，右边的文件夹有好多小眼睛，点开了，图层没有变化，关闭了，也没变化。图层的命名是图层1，图层2，图层3……，有几个图层的文件夹，点掉眼睛之后，呈现了非常理的模块化设计。囧，什么是非常理的模块化设计？常理的模块化设计，就是设计的东东在一个模块里，ps 里面的小眼睛点掉，就隐藏了整个模块。而非常理，就是点掉了一个模块的小眼睛，把这个模块和另外一个模块的一些图层也给隐藏掉了。

      每一个设计师的设计习惯都是不同的，非常之理解。作为一个页面仔，我只是想尽快完成我的工作。于是，面对着匿名的图层，点啊，切啊，换另外一张 PSD 文件啊，就这样折腾了一个下午。最后，为了减少图片组件的请求数，还得半生不熟的合并图片啊，选择格式啊等等。任务最终是完成了，但我总觉得还是有好多问题需要思考。例如设计好一个网页之后，这个网页如果不是自己用，那么应该如何做才好？例如页面仔应该如何切图才切得快切得犀利？还例如，从交互的需求，到需求的设计，再到设计的实现，这三个角色应该如何去沟通与协调？

      恩，话题直接跳到这里，今天只想谈谈自己在设计完一个作品稿子之后的整理过程。在《”.我的web界面设计方法、》中，曾经谈过我设计一个页面的过程，包括参考线的辅助，文件夹的命名和组织等等。或许是我个人的设计习惯吧，我习惯于在觉得设计得不错的时候，就整理下一些细节，以便于接下来的切图和其他修改。我个人觉得哦，一个好的设计稿，除了界面设计很赞之外，还需要包括以下几方面：

      1，适当的参考线

      参考线是在我们设计的过程中增加的，有些是必要的，有些是不必要的。去掉那些不必要的，形成一个可以隐藏和出现的网格，有助于我们下次修改这个稿子的时候和切片时的定位。

      2，图层命名和去除设计过程图层

      给予我们的每一个图层一个命名，也许对于一个超大的设计稿有些困难，但一般的也没也不见得多大。来个命名，方便我们查找，至少比点眼睛快多。而去除设计过程图层，即我们在设计的时候一些没用的，已经被隐藏的图层，删了它，为啥，你懂的。

      3，把同一个模块的图层放到文件夹

      Ps 有文件夹的功能，在我们组织的时候特别方便哈。例如 head 模块，放在 head 文件夹里，只需要点掉文件夹前面的眼睛，便隐藏了那个 head 模块。

      4，有必要的时候，加上注释

      5，PSD 文件不宜太多

      一个 PSD 文件，通过图层的隐藏和显现，是可以包含整个页面的交互的。尽量使用一个源文件，同时要备份。

      好了，说了这么多，也只是我的个人看法罢了。当我们融入到一个大平台了之后，就会发现规范是特别重要的。养成好的设计习惯，开发习惯，对于一个新人来说，非常重要。恩，我是新人，我在寻找好的方向。新人觉得交互、视觉、前端之间需要约定一些规范，通过交流协调完成任务，通过规范提高工作效率。

      Okay,Just Do It !