熊掌

设计师如何交付颜色给工程师(Web、Android和iOS)

Web和Android可以给十六进制,形式类似#ff0000或者0xff0000(PS调色板里可以找到),当然给RGB也行,因为这个两个平台都有相应的函数进行色值转换(rgb()),不过十六进制最方便。

如果需要颜色带透明,可以再十六进制前面加两位,形如#deff0000或者0xdeff0000,如果是给RGB颜色要加不透明度也行,因为这两个平台也有相应的函数进行转换(argb()),特别注意的是不透明度的取值范围是0到255哦。

这里需要特别说明一下十六进制这种表示方法,我们都很熟悉RGB表示一种颜色,三个参数每一个的范围都是0到255,其实十六进制就是RGB的另一种写法,总计六位,每两位对应RGB一个参数。比如#30a3ce这个颜色,30表示R,a3表示G,ce表示B,如果把这些都换算回十进制的话,会发现他们就是48、163和206正是这个颜色的RGB值。另外,不透明度(alpha)的取值范围也是0到255,这可就苦了设计师了,因为一般绘图软件里的不透明度值都是百分数计,一下换算到二百五十五分计很不习惯,但是不习惯也得适应哦。

这样说大家可能就能明白前头提到的带透明度的十六进制颜色的意思了,其实就是在RGB前头加了一个A(alpha),当然这个A的取值范围也是十进制的0到255。比如你需要给#30a3ce加一个10%的不透明度,就要用255乘以0.1得到25.5,四舍五入成26,然后把26转换成十六进制成1a,最后把它添加到颜色代码的前面,变成#1a30a3ce就可以啦。

iOS平台可就尤其特别了,很多设计师都知道iOS需要RGB颜色,不过很少有设计师深入到代码层面去一探究竟。其实iOS的RGB三个参数的取值范围都是0到1,代码的表现形式如下

Red:84.0/255 green:170.0/255 blue:221.0/255 alpha:1

为了方便与其他平台对接,我们用x/255(它的值范围是0到1)这样的分数来换算颜色,如此设计师就可以直接用PS里的RGB值啦。细心的话你可能会发现,iOS平台直接把alpha值标注在了颜色后面,它的取值范围也是0到1,所以只需将绘图软件里的百分数换算成小数即可。

至于有的同学指出为什么需要在RGB每一个分子后加个“.0”,这里涉及到有关程序语言数据类型的问题,简单来说加了“.0”就可以让这个结果变精确也更不容易出错。有兴趣的同学可以自行学习。

当然,这里举这些例子并不是要求大家一定要照本宣科,毕竟不同的团队不同的工程师有各自不同的习惯,设计师应该尽可能地熟悉工程团队的习惯,这样才能与工程师更好地合作。

这里补充一个小诀窍,如何快速在十进制和十六进制之间换算(针对数学不好的同学们~)。打开系统自带的计算机,换到程序员模式,在十进制模式下输入一个数,然后改选十六进制,系统就会自动换算哦。逆向换算同理。




评论

热度(1)