设计师如何帮助开发者更好地完成工作

传统观点来看，开发者肯定不会是很赞的设计师，反之亦然。在日常工作中，由于工作的需要而在项目中设计师和开发者必须相互协作，即便有些例外，大部分开发者还是觉得设计师的工作（或反之）是很神秘的。作为一个两边都混得开的人，我给设计师们列了如下的单子，希望这些建议能让应用程序/Web开发者们的生活开心点。

这篇文章得到了Evgenia Grinblo和Sarah Parmenter的启发和建议，他们都是很棒的设计师。你可以点这里看Sarah的演讲(某著名的不存在视频网站)，也提到了一些相同的看法。

下面是一些关于Photoshop的建议

开发者经常要面对来自设计师发来的PSD文件，所以呢，只要是设计师觉得对自己有益，就会对别人有益。下面这些建议适用于创建易于维护的，方便易懂的PSD。

使用智能化的版本控制

有的文件夹装满了莫名其妙名字的各种版本的PSD文件是设计师杯具的梦魇。可以用一些可读好理解的文件命名规则，来给文件的每个版本命名，或者用一些第三方的资源管理工具以及版本控制系统。

用好图层

能不「合并可见图层」就尽量不要这么做。要导出的时候可以先对层分组或者隐藏/显示图层然后再导出，最后再还原成最初的状态。有用的数据就别丢掉，为了流畅/提高性能真不值得合并图层：完全可以用加内存 或者换电脑解决。

给图层命名时要有意义，不要乱起名字

我知道这样很麻烦，但真的很易于别人理解，特别是想要重用里面某些元素时。确保文字图层的名字就是文字的内容，复制图层时候也改个易于理解的名字 而不是xxx copy。

恰当地使图层成组

一个由分散在各个图层的图形元素构成的组件应该放在一个组里，而且这些图层的排列顺序应该按照从左到右从上到下这样的顺序。以层次结构/次序来管理图层一般会比用彩色标签来管理要好点，因为彩色标签在图层呢个移动了以后要重新维护一遍。

精简掉用不着的图层

旧版本，模板，还有引用到的素材，临时的复制图层，这些东西如果以后再也用不着了就应该删掉。时不时地瞟一眼哪些是完全用不着的东西，干掉它。

使用组合图层工具(Layer Comps)

Photoshop的组合图层特性使你可以创建一组图层成为一个组合，改变可不可见/透明度/位置和图层风格。这个特性可以用来处理一个设计的多个状态（例如Web/App的很多Tab导航栏的多种状态等）合成在一个文件里。这可以有效减少维护一大堆复制的图层，同事减小了文件尺寸。学会使用它。

尽量多地使用矢量图形，或者是可以不失真缩放的效果

为了设计的可缩放性，尺寸越大越好。特别是在app的设计上，很可能某天就要把整个设计的尺寸翻倍(iPad3可能就要这样double了你懂的)。确保今后不用再重新绘制一遍某些位图。

如何帮助开发者

下面是一些可以有效帮助到开发者的建议，特别是关于网页设计和app设计，因为他们有特殊的要求和限制：

学会在需要缩放尺寸的地方处理圆角

某些操作系统（OSX或者iOS）会有这样的圆角，并且在所有地方都这么使用，iOS通常矩形圆角的半径是12像素(不太确定@_@)。Firework知道怎么去自动处理这个圆角，但Photoshop不会。所以呢，要熟悉使用「直接选择」工具（囧  我也不知道这是啥意思）在缩放图形尺寸时去处理好圆角。

一定要用72ppi的分辨率

目标是液晶屏幕显示，这不是印刷或出版（分辨率），所以为了使像素可以点点对应，只能选72ppi这个分辨率。超过这个分辨率只会使图形尺寸变大文件变大，木有其他意义。数字出版业的分辨率在这里不太适用。

保证像素完整性

确保Snap to(不知道中文版里叫神马，好像是吸附？)里面的都勾上了，然后根据你的喜好用网格去控制。（解释一下，这里作者意思是图形的边界不要出现出现跨像素的情况）。推荐使用锐利的边界，用精确的像素去区分边界，否则次像素级别的渲染会在某些设备上使你的美丽的设计变得很屎。相关的，在宏观上和某些小的元素都推荐使用偶数长度的图像尺寸，也是方便缩放。感谢Matt Drance指出了这一点。

永远使用RGB颜色模式

这一点不仅对显示器显示比较重要，而且在开发者需要在图中拾色并转成16进制代码写程序的时候也很重要，不能错用其他颜色模式喔。

提供最终可用的资源是你的工作内容之一

绝大多数开发者基本不知道Photoshop咋用，用也只能用到一些最基础的用途。正确地导出所需切图是设计师们的工作，因为他们最熟悉Phtoshop以及这些PSD。 我知道这个比较痛苦，而且很花时间，但这也是在设计完工之后设计师们几乎唯一的工作内容了。

当心字体的使用

不同操作系统会预装不同的字体库，根本无法保证他们在别处也有你在做设计时用到的那些字体（因为你们时设计师肯定拥有比普通人多的字体）。因为显示文字最好的方法就是由系统来渲染这些文字在屏幕上（而不是做成图形），所以选用什么字体是要慎重考量的。 一定记住，有些给定的字体授权你在设计中使用，但是不允许你将字体文件嵌入web或app中，当心使用他们，确保在使用前沟通过有关方面。

模拟特定平台的文字渲染

有时会为了视觉的一致性，可以试验一下在Photoshop中抗锯齿选项打开之后跟在设备中打开抗锯齿之后的效果是否一致。在iOS上，你肯丁会喜欢打开了抗锯齿模式之后的样子。

确认设计的幅面尺寸

这一点特别针对移动设备的app，仅仅按照屏幕尺寸是不太够的－有时需要按照状态栏（最上方）的高度以及设备方向（横或竖）来调整。例如iOS设备竖屏时状态栏会占据长边的长度，横屏时会占据短边的长度。提前跟开发者确认app是否会全屏显示。

善用每个平台的特色

每个平台（操作系统）都有其别致的一面，都有与众不同的界面元素，交互风格（也与设备型号相关）。要经常考虑到这些因素。尽量不去设计得超越了这些规则的限制，除非有非做不可的必要。举个例子，在iPad上有如下的规则需要遵守：

1. 需要app能支持设备在各个方向都有很好的表现
2. 支持左右两栏的layout，横屏时同时显示两栏，竖屏时可以让其中一栏成为另一栏的一部分。
3. 弹出框成为app统一的UI的一部分。
4. 一种比较独特的文档浏览器
5. 在一级一级导航栏上，每个返回上一级的Back按钮都是在左侧切有尖角。

诸如此类，要用心去熟悉这个平台，因为你的设计要去匹配他。没办法用一套设计去匹配所有平台的。

既然设计了横屏模式，那就要再设计一遍竖屏模式

不同的姿势（横竖屏方向）需要不同的物理上的交互风格，不仅仅因为不同的设备有不同的屏幕宽高比例，外壳材质，重量和手持地平衡感。一种不能适配除了原始宽高比之外其他宽高比的设计，是最好的妥协办法。

为不同屏幕尺寸分别设计

在app界面设计中，手机上的内容和展现形式都应该与平板和电脑不同。移动设备，我们还需要考虑诸如此类：用户在屏幕上的关注区域，使用户分心的地方，物理上的缺陷，用户在移动中会使用的风险比如走路/过马路时，或者在开车的时候。

上述这些内容不可避免地与尺寸和设备息息相关，那些有效的设计必须考虑这些因素。

使用真正的内容去填充空白处，最少也是理想化的内容

一些很好的例子都拥有如下特征（这事关于设计中文本信息用什么文字来填充的）：

1. 示例文字要经过充分测试，测试所有可能的长度，而不仅仅在设计时方便随意写了一段。
2. 有时为了方便会省略一些数据，比如用户的头像，这些在实际的设计中是一定要有的。
3. 有些让人感到不舒服的情况是要考虑的，比如极宽或者极窄的图片。
4. 要考虑到有时别人姓名会很长而且中箭不分割；不要仅仅假设人名是两个字的。
5. 输入地址的地方不应该有长度限制，因为地球上任何长度/格式/书写方式的地址都能找到，一定要做到弹性化和允许有空格。
6. 设计中尽量不要通篇都用"Lorem ipsum"。

注：Lorem ipsum是指一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。

考虑语言本地化

绝大部分人一谈到支持别的语言，就立即想到的是文字。当设计师或开发者考虑这个问题时，会去想到布局。所以为了支持多语言显示，你的设计需要为所有文本元素设置50%的字体宽度，不仅仅为了英文。

全局性的光源设置（跟文字阴影投射方向有关）

作为设计师，应该不跟你提这个问题了，但每个平台都有其不能轻易改变的特质（例如iOS里就是光源在正上方居中）。设计中的所有发光和阴影效果都应该与平台本身保持一致性。

使导航/组织结构易于理解

如果你的设计中用到了例如标签导航，或者层级式的导航方式或者其他已成型的结构，就要让这些东西对开发者来说简单易懂。而且要考虑到平台特定的习惯，就像上面说过的那些。应该及早告诉开发者这些层级关系和结构，因为这些与app开发时使用的架构休戚相关。确信看到你的设计就可以轻易理解你的想法。组合图层(Layer Comps)在处理这方面的时候就很有用。

能导出切图的时候不要去自己压缩

一定使用带透明度的PNG格式。别用JPG除非特定场合。文件尺寸不用管，开发者或者他们使用的开发环境会去优化这些图像（得到较小尺寸）。导出每个图形元素都要用透明的背景（及时这个元素就是要放在一个不透明背景上）。

提前沟通关于阴影的处理

与开发者去沟通这个阴影是含在图像里还是有代码去生成。一般的，开发者会自己做阴影，用CSS或者有其他绘图的代码，这样会更简单方便一些，而且还比位图形式的阴影更有一致性。别开始就假设要把阴影嵌在图像里（在草图设计时就应该用图层特效去生成阴影而不是绘制独立阴影层）。

理解按钮是怎样工作的

在app中或者是在web里 按钮们都是有一个单一的图片生成的。或者，也有可能是如下方式生成：

• 图像分成3部分，左中右，左和右是不拉伸的，中间由一个像素宽度拉伸而成（不能垂直拉伸）
• 图像分成9部分，外围都是不拉伸的，中间由一个像素宽度拉伸而成。

按钮就是由以上这些方式拉伸而成。选择合适的渐变方式，与开发者事先沟通，选择确定的按钮生成方案。

最后的一些思考

创造任何的软件都是一种团队合作经历，需要考虑协调图形设计，交互设计以及实现方式。这三面都不可缺少，都是至关重要的。关注你所在领域之外其他领域的同事的需求，这样才能更有效率的完成项目，甚至获得自我提升。 我打算继续写一些从相反的角度看问题的文章－开发者如何能帮助设计师更好地完成工作。写好后肯定在推特上告诉大家，可以跟我联系，而且在这些探讨上非常乐意得到你慷慨地分享思考和建议。