Become a layer mayor
-
Upload
raiya-yang -
Category
Design
-
view
581 -
download
3
description
Transcript of Become a layer mayor
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交错格式的方式,就是先显
示一个较模糊的图片,然后再将清
晰的图片显示出来,在该选项下面
有个关于扫描数的选项设定。
像这样:
一丝不苟 & 保存文件大小
适当斟酌一下质量/颜色对于网页加
载的影响,以前使用拨号上网,网
速不能达到要求,现在不同了。但
是太过大型的网站,太多的加载量
会影响网页运行效率。
注意:不要将这些问题全部留给开
发者,一丝不苟,出品时考虑齐全。