Tech Exchange
WWW.ZIQIANG.NET UCD&UE Department
文 件 组 织
尽量使用一个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交错格式的方式，就是先显
示一个较模糊的图片，然后再将清
晰的图片显示出来，在该选项下面
有个关于扫描数的选项设定。
像这样：
一丝不苟 & 保存文件大小
适当斟酌一下质量/颜色对于网页加
载的影响，以前使用拨号上网，网
速不能达到要求，现在不同了。但
是太过大型的网站，太多的加载量
会影响网页运行效率。
注意：不要将这些问题全部留给开
发者，一丝不苟，出品时考虑齐全。
Recommended
