MattGemmell：设计师如何帮助开发者

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

成都创新互联公司是一家以重庆网站建设公司、网页设计、品牌设计、软件运维、seo优化、小程序App开发等移动开发为一体互联网公司。已累计为成都岗亭等众行业中小客户提供优质的互联网建站和软件开发服务。

这篇文章得到了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里 按钮们都是有一个单一的图片生成的。或者，也有可能是如下方式生成：

1、图像分成3部分，左中右，左和右是不拉伸的，中间由一个像素宽度拉伸而成（不能垂直拉伸）

2、图像分成9部分，外围都是不拉伸的，中间由一个像素宽度拉伸而成。

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

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

原文链接：http://article.yeeyan.org/view/284135/249615

当前标题：MattGemmell：设计师如何帮助开发者
链接分享：http://www.shufengxianlan.com/qtweb/news42/551642.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联