Become a layer mayor

Tech Exchange WWW.ZIQIANG.NET UCD&UE Department

这些指导都是设计师们长期设计实践形成的一种比较成熟的规则。尽情的使用这些规则，同时不要让他们局限自己。 Contact：raiyaEmail：cyukyo@gmail.com

尽量使用一个PSD文件完成你的设计。很多情况下，在大型网站的设计当中，会用不同的PSD来将整个网站分成很多部分，但是不要习惯性地想ctrl+N/cmd+N。不要把文件夹放在根目录下2层或者更深的地方，不要嫌麻烦。像这样：不要这样：

准确地进行文件命名对某些人来说，即使有“NEW”或者“FINAL”的标签，有些时候区分哪些文件是最新的或者是最好的都很困难。减小文件名的复杂程度，15字符或者更少，而且对我们来说要习惯用英文命名。像这样：不要这样：

将相关资源的文件夹放在PSD的文件夹内。因为为了完成设计，不可避免的要用到一些素材，然而设计的过程中，寻找这些素材的源文件有事也是很恼神的（有时文件修饰出错，PS的历史记录又是一定的）。也可以在相关资源文件夹中进行更细致的分类。同样，尽量使用英文命名：assets 像这样：不要这样：

为所有的UI元素建立一个模板大型网站需要这种UI元素的统一，建立一个统一的模板对前端工作人员也是有益的，更多内容可以搜索一下CSS Spirit。像这样：不要这样：

合理地命名每一个图层，不要嫌麻烦，一旦设计的层次多了，要找到一个图层就非常困难。同时为了让前端能够更快地进行切图，还有对UCD方面的内容信息整合、分析，这个也是有必要的。像这样：不要这样：

使用文件夹。文件夹能够很好的处理层次关系以及组织文件顺序，要习惯使用ctrl+G/cmd+G，也可以右击小眼睛，用颜色区分它们。还有注意的就是，文件夹的顺序，采用一个从上到下的分布，例如header到content到footer，header当中分logo，rss等… 像这样：不要这样：

使用Grid。常见的Grid标准从960px到现在的978px或者1140px都是随着屏幕分辨率的普片变大而出现的，排版上使用Grid能够使内容组织更加清晰。如果必要，可以创建自己的grid，不要拘泥于形式。参考：960、978、1140 像这样：不要这样：

删除没有必要的图层，不要让层次变得杂乱不堪。隐藏一些可能会用到的图层。也可删除PS自带的background图层。像这样：不要这样：

将相似的元素组织在一起。可共用的元素提取出来，然后再用一个上级文件夹封装好。这样可以减少文件的复杂程度，精简而又有必要。像这样：不要这样：

不要使用变形工具更变文字的size，从而出现那种小数位非常多的大小。同时不要使用PS当中给的一些类似13、15、21这样对于网页来说不常规的文字大小。像这样：不要这样：

将使用到的文字放在一个文件夹内，因为不同的用户可能安装字体的种类不同，那么需要达到统一的美观效果，我们需要用一个fonts文件夹组织起用到的字体，并且合理注明使用的位置啊，size等。同时，注意合法使用文字！不要肆意无偿使用和传播商业字体。像这样：不要这样：

不要随意拉伸字体，要注意让设计适合用HTML/CSS编写并且保持美观。像这样：不要这样：

PS当中的文字设置并不能完全和浏览器匹配，去掉段落当中的“连字符（hyphens）” 像这样：不要这样：

为保证圆角弧度的统一，不要直接拉伸，Button的设计尽量使用路径工具画，使用部分路径选择工具修改，以保证整体的美观。像这样：不要这样：

比起一个一个地使用相同的蒙版，不如创建一个组，对组使用统一蒙版。尽量使用普通蒙版而不要使用快速蒙版，以方便之后可能的修改。像这样：不要这样：

LOGO用矢量智能对象的形式保持它的高保真。栅格化的图层在修改LOGO大小的时候不能保证图片是否失真，而LOGO又是非常具有形象代表力度的。注意将矢量的LOGO文件放入assets中，始终记住可改、可寻。像这样：不要这样：

保证所有使用到的图片素材都在assets文件夹中可寻。不论是图片库图片还是icon还是texture，整理是一种优化的习惯。 Tips：建立一个backup文件夹用于备份。当我们有很多备用选项的时候，这种组织很有效。像这样：不要这样：

利用PS中的对齐功能，例如视图中可选择的参考线，智能参考线，边框参考线等等，目测并不能保证精准。认真地盯着屏幕数分钟并不能加强数据的准确性。像这样：不要这样：

使用颜色叠加。有些button或者icon可以使用颜色叠加以及一些图层模式使其与背景更加融合。文字或者矢量形状就不要使用这种属性了，直接在相对应的面板中修改。尽量远离“斜面/浮雕”除非你是在设计一个1990年的商业网站。Orz 像这样：不要这样：

考虑到CSS的复杂程度，不要太过度使用渐变性的pattern，虽然现在CSS3已经很流行了~但是在目前大部分浏览器没有完美支持的情况下，如果是大型一点的针对国内用户的网站，还是不要冒这个险了.., 注意这些方面和前端工程师交流！！谨记。像这样：不要这样：

考虑垂直可延展性除非你用支持CSS3的浏览器。要精确起始颜色并且尽量过渡到背景色。像这样：不要这样：

温和地使用投影考虑阴影的实际感觉，不要让阴影沉重化，始终记得阴影的存在价值和对周围内容、排版的影响。也可以适当使用除了#000000之外的颜色作为阴影色。像这样：不要这样：

合理的使用描边内部描边相对来说更为精确，而居中描边和外部描边就会形成圆角。右边可以看到内部描边和另外两种描边的区别。像这样：不要这样：

要注意校对可以在作品面世之前让个别的工作者一同审视你的作品，帮助你挑出原则性的问题。这样处理1~3次，基本上可以避免大部分原则问题。像这样：不要这样：

将自己的作品与一些模板做比较，以免缺少一些必要的元素，例如导航栏或者图片说明区，时候打补丁就比较难了。

注意筛选可用的素材保证大部分素材都是授权的，或者使用的是免费素材，一定要注意版权的重要性，尊重原创者。下图可以发现未去除的水印。像这样：不要这样：

和前端开发者保持友好！在设计之前搜索一些相关信息，看看自己的设计是否得到浏览器的支持，适当时候要放弃圆角/渐变/阴影等特性。

Save for web & devices. 记住这个快捷键ctrl+shift+alt+S。你会发现一些神奇的功能，特别是在看过网页图片优化之后，也能更明白这样做的意义了。像这样：不要这样：

记得选择Progressive，它采用了类似于GIF交错格式的方式，就是先显示一个较模糊的图片，然后再将清晰的图片显示出来，在该选项下面有个关于扫描数的选项设定。像这样：

一丝不苟 & 保存文件大小适当斟酌一下质量/颜色对于网页加载的影响，以前使用拨号上网，网速不能达到要求，现在不同了。但是太过大型的网站，太多的加载量会影响网页运行效率。注意：不要将这些问题全部留给开发者，一丝不苟，出品时考虑齐全。

图片和基本资料来自： PHOTOSHOPETIQUETTE.COM 文字翻译和资料补充来自自强学堂网站视觉设计部联系邮箱：cyukyo@gmail.com

Recommandé