Matt Gemmell:设计师如何帮助开发者

英文原文:how designers can help developers,翻译:sharen24

前言:传统观点来看,开发者肯定不会是很出色的设计师,反之亦然。在日常工作中,由于工作的需要而在项目中设计师和开发者必须相互协作,即便有些例外,大部分开发者还是觉得设计师的工作(或反之)是很神秘的。作为一个两边都混得开的人,我给设计师们列了如下的单子,希望这些建议能让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上,你肯丁会喜欢打开了抗锯齿模式之后的样子。

Matt Gemmell Being good is boring

本文作者 Matt Gemmell

 

确认设计的幅面尺寸

这一点特别针对移动设备的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部分,外围都是不拉伸的,中间由一个像素宽度拉伸而成。

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

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

我打算继续写一些从相反的角度看问题的文章-开发者如何能帮助设计师更好地完成工作。写好后肯定在推特上告诉大家,可以跟我联系,而且在这些探讨上非常乐意得到你慷慨地分享思考和建议。

 

1 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部