比如一个404页面如下:

Art从平面视觉角度会给出这种图图:

而前端要把它拆解成需要的盒模型,即结构+表现模块化,拆解后的图应该是这样的:

如果真要做成这样那前端得兴奋得跟磕了药一样,做完页面出去逛逛街买买下午茶,不过我想设计师做鬼都不会放过我的⊙﹏⊙ 上午的视觉规范部门分享会刚好提到这个问题,心里小小滴YY了一下,决定写给Art们和有志做Art的同学看O(∩_∩)O

1. 这个任务的设计稿比较简单,我先拿来做个范例,LSL同学不要想太多,哈哈^^

2. 第二张图(箭头版)对前端来说有用的地方没有几处(再次强调:LSL同学不要想太多),比如Ctrip全站行高1.6,内外补丁是不会贴着文字上下基线走的,所以切图的时候要精确到像素还原设计稿还是要自己量一遍;

3. Art和前端对于结构的理解毕竟不在同一范畴,比如什么地方用margin、什么地方用padding就不能写死在设计稿上,如果Art真到了这地步那前端基本就可以直接去6楼了(在Ctrip,6楼是个神奇的地方,可以解决部门内外一切争端,绝无后患--人事部离职办理专柜╮(╯_╰)╭);

4. 既然是这样,那我们可以考虑一个折中方案:

a. 前端充分了解业务需求,考虑扩展性,适当灵活一点,毕竟在Firebug里调像素值要比Photoshop快多了。工作的重点不在像素值,而在于需求,我们不是冷酷无情的Coder,而是有情有义有实现能力的艺术家 ♡_♡

b. Art空下来的时候可以关注一下盒模型,尽量使间距对称,行高神马的只在规范里写就好,设计稿就不用量了,只要把模块框出来就可以,其它的全都丢给前端吧 ┭┮﹏┭┮

借用一下豆瓣前端kejun关于UI规格标注里的一句话:Design is about how it works, not just how it looks.

本文作者:admin 转载请注明来自:携程设计委员会