设计师该如何帮助开发者

一般来说，开发者肯定不会是很出色的设计师，反之亦然。在日常工作中，由于工作的需要而在项目中设计师和开发者必须相互协作，即便有些例外，大部分开发者还是觉得设计师的工作（或反之）是很神秘的。作为一个在两个行业都有过经历的人，我对设计师提出了一些建议，希望这些建议能让开发者们更加轻松的完成工作。

这篇文章得到了 Evgenia Grinblo 和 Sarah Parmenter 的启发和建议，他们都是很棒的设计师。你可以点这里看 Sarah 在 2011 年的演讲，她也提到了一些相同的看法。

保持整洁

开发者经常需要处理从设计师那里拿过来的 Photoshop 文件（PSD），所以对设计师有帮助的，势必对开发者也有好处。以下这些技巧是为了创造易维护，易理解的 PSD 文件。

使用智能的版本管理

装满了各种奇怪名称的 PSD 文件夹对设计师来说简直就是噩梦。所以你要为各种版本的文件想一个明智的命名方案（一般而言，系统会按照字母顺序对文件进行排序），所以你应该选择一个和素材作用相关的命名再加上一些版本信息。

保留所有图层

能不合并图层就不要去合并。需要导出的时候可以先对图层进行分组，或者显示/隐藏图层，然后再将文件恢复到原貌。不要去破坏现有的数据。不要为了迁就电脑的性能而去合并图层：增加内存或者更换更好的机器才是真正的解决方案。

图层的命名要有意义

我知道这样很麻烦，但真的很易于别人理解，尤其是需要重复利用一些元素时。确保文字图层的名字就是文字的内容，复制图层时也要及时的重命名，而不是仅仅将让他使用默认的“拷贝”。

恰当地使用分组

对于一些由多个图层组成的元素，应当将这些图层放到一个分组里，并且尽量按照从左到右，从上到下的顺序来排序。以层次结构/次序来管理图层一般会比用彩色标签来管理要好点，因为彩色标签在图层移动了以后要重新维护一遍。

精简图层

旧版本，模板，还有引用到的素材，临时的复制图层，如果之后再也不会用到这些东西，那么就及时清理掉。没事的时候就顺便看看这些图层，清理掉没有用的。

使用图层复合

Photoshop 的图层复合特性使你可以创建一个图层状态组，比如可见性，位置以及图层样式。你可以在其中很整齐的管理他们（就像网页或者应用中的选项卡一样）合成在一个文件里。这可以有效减少维护一大堆复制的图层，同时减小了文件提及。要善用此工具。

尽量多地使用矢量图形以及可缩放的特效

为了设计的可缩放性，尺寸越大越好。特别是在应用程序的设计上，有时候因为一些新设备，你可能需要让某个元素的尺寸放大一倍。这样一来，你就不用急急忙忙的再去做一个一样的位图了。

如何帮助开发者

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

学会在调整大小时保留圆角

操作系统一般都是定制一些标准的圆角矩形元素，然后应用在整个系统中（在 iOS 中，圆角的尺寸通常是 12 像素【*这里只说在非 Retina 的 iPad 中，关于 iOS 的圆角大小可以参考这里】）。虽然 Firework 可以在保持圆角不变的情况下调整元素，但 Photoshop 不会。因此，要熟悉使用直接选择工具在缩放图形尺寸时处理好圆角。

使用 72 PPI

这样可以使位图像素和屏幕的物理像素一一对应，PPI 越高，文件就会越大。不要因改变文档分辨率而烦恼。【*在为 Retina 屏幕设计的时候，我本人是倾向于使用 144 PPI，也就是两倍，因为这样做出来的字体大小和开发者在系统中所规定的是一致的。72 PPI 的字号要除 2 才能用】

保证像素完整性

确保你的形状工具（如圆角矩形工具）都设置为对齐边缘。然后根据自己的喜好使用网格或者参考线。推荐使用锐利的边界，用精确的像素去区分边界，否则次像素级别的渲染会在某些设备上使你的美丽的设计变得模糊。相关的，在宏观上和某些小的元素都推荐使用偶数长度的图像尺寸，也是方便缩放。感谢 Matt Drance 指出了这一点。

使用RGB颜色模式

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

提供素材也是你的工作

绝大多数开发者并不知道如何使用 Photoshop，会也只能会一些最基础的功能。正确地导出所需切图是设计师们的工作，因为他们最熟悉 Phtoshop 以及这些 PSD。

我知道这个比较痛苦，而且很花时间，但这也是在设计完工之后设计师们几乎唯一的工作内容了。

谨慎的使用字体

不同操作系统会预装不同的字体库，你无法保证别人那里也有你用的那些字体（因为设计师肯定拥有比普通人多的字体）。显示文字最好的方法就是由系统来渲染这些文字在屏幕上（而不是做成图形），所以选用什么字体是要慎重考量的。

一定记住，有些特定的字体授权你在设计中使用，但是不允许你将字体文件嵌入网页或应用中，在使用之前，确保没有这些问题（版权）。

模拟特定平台的文字渲染

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

确认设计的幅面尺寸

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

善用每个平台的特色

每个平台（操作系统）都有独特用户界面，交互样式（也与设备型号相关）。要经常考虑到这些因素。一个好的设计是不会刻意去破坏这种平衡。除非你有比这更好的方案。对于 iOS 系统的 iPad，你需要注意这些：

需要同时适用于两个方向（*横向和纵向）
两栏的界面同时适用于横屏和竖屏模式
漂浮选单（Pop-Overs）是用来区分当前操作和背景的 UI 元素
一种比较独特的文档浏览器
在层级导航栏上，每个后退按钮都有一个指向左边的特定样式。

诸如此类，要用心去熟悉这个平台，因为你的设计要去匹配他。没办法用一套设计去匹配所有平台的（即使是在网页上，也需要某种程度的适应性和灵活性）。

分开设计

不同的方向在肢体上有着不同的交互不仅仅是屏幕的高宽比，外壳材质，重量和手持平衡感也是影响因素。如果你的设计不能适应默认高宽比之外的比例，那么就显得有点妥协了。

为不同屏幕尺寸分别设计

在设计应用时，手机上的内容和展现形式都应该与平板和电脑不同。移动设备，我们还需要考虑到使用的环境：一些干扰元素，在使用设备时可能受到的伤害，比如在运动或者处于危险中（走路时遇到障碍物，横穿马路时需要注意交通安全，以及开车时需要安全驾驶等等）。

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

使用真实的内容

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

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

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

考虑本地化

绝大部分人一谈到支持别的语言，就立即想到的是文字。当设计师或开发者考虑这个问题时，会去想到布局。所以，相比较英文而言，为了支持本地化，你的设计需要为所有文本元素设置文本宽度，一般为** 50% 的浮动空间**。

相对于英文，亚洲语言可能只需要 50% 的空间就可以表现出原文的意思了，而欧洲语言可能要多出 50% 的空间。尤其是当你在设计按钮和帮助文本的时候，你应该非常清楚这些数据。

遵守全局光

作为设计师，你可能已经知道这点了，每个平台都有其固有的，不可改变的全局光（例如 iOS 里就是光源在正上方居中，也就是 90° 光源）。设计中的所有发光和阴影效果都应该与平台本身保持一致性。

清晰的导航和组织结构

如果你的设计中用到了例如标签导航，或者层级式的导航方式或者其他已成型的结构，就要让这些东西对开发者来说简单易懂。而且要考虑到平台特定的习惯，就像上面说过的那些。应该及早告诉开发者这些层级关系和结构，因为这些与应用开发时使用的架构息息相关。要确保一眼看上去你能明白你的设计思路。图层复合在处理这方面的时候就很有用。

不要压缩切片

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

关于投影

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

理解按钮

在应用或者是网页中，按钮都是有一个单一的图片生成的。或者，也有可能是如下方式生成：

图像分成 3 部分，左中右，左右两边都是固定的，中间是由一个像素宽的图片不断重复而成（不能垂直拉伸）
图像分成 9 部分，左边分为上中下，右边和中间也是，但是左边和右边的元素都不重复，中间的元素则是全部重复组成（可以垂直和水平拉伸）【*左中右的中间元素应该都是可以重复的】。

由于一些元素重复性，在设计的时候应该留有一定的间距。对于 9 宫格的图片，在垂直重复后很可能无法表现出渐变效果可以与开发者商量通过提供透明的图片素材和 CSS 渐变代码来替代。

结语

创造任何的软件都是一种团队合作经历，需要考虑协调图形设计，交互设计以及实现方式。这三面都不可缺少，都是至关重要的。关注你所在领域之外其他领域的同事的需求，这样才能更有效率的完成项目，甚至获得自我提升。

我打算继续写一些从相反的角度看问题的文章 —— 开发者如何帮助设计师。完后后会在 Twitter 上公布，你可以随时 Follow 我（@mattgemmell ）同样你也可以分享你自己关于这方面的想法。

作者：Matt Gemmell
**翻译：**Max Cheung
原文链接：How Designers Can Help Developers