Yuguo.us

如何质疑设计稿

Introduction

user

余果

全栈工程师,《Web全栈工程师的自我修养》作者。


Featured

front-end

如何质疑设计稿

Posted by 余果 on .

所谓质疑设计稿,就是重构拿到设计稿之后不应该只是100%还原设计稿,而应该做更多的工作,对设计稿中一些值得推敲的地方多想一想为什么。

为什么要进行质疑

拿一致性做例子。为什么重构比设计师更关心一致性?除去“一致性对用户更友好,更专业”的原因,对于重构更合理的理由是:一致性的设计就能用一致的代码实现。虽然说把一致的部分作为共性代码提取出来可能并不会减少工作量(更确切的说是更多的规划工作和更少的后期维护),但作为重构对此还是乐此不疲。因为这可能是代码工作中较有挑战也较为有趣的一部分,能有成就感,也是优秀到卓越路上必须走的一步。

除了一致性,还有性能、逻辑方面的考虑。

在进行质疑之前

1.我们工作的前提是信任设计师,如果以不信任设计师为基础进行质疑,那么不仅低效,而且会以不专业质疑专业,是很可笑的行为。对设计稿的评价应该是以温和的讨论为途径的、双方思维和视角的互补。

2.对不同类型的页面采用不同的方法进行质疑。在我看来,一些营收性的活动页面更重要的要求是“是所有浏览器的一致性”,而门户portal更重要的是一致性、可扩展性、语义化等等。

所以不要对不重要的页面进行过度设计,因为对一个不太重要的页面投入太多精力的话,在它的扩展性、性能优势在充分发挥出来之前就被撤掉或者永久停止更新了。这是对公司人力成本和个人智力资源的浪费。

单页面活动

所谓活动页面可能是一个新专辑首发、演唱会首唱或者周年庆什么的。部门的设计大湿做的这类型的设计稿灰常华丽,看着赏心悦目。不过在做这样的活动的时候还是有几点需要注意的。

1.页面宽度一般是960px。

希望更大一点的话也可以做到997px。在设计稿上缺少明确的主参考线的情况下,应该跟设计师沟通,需要居中的部分是哪个区域。只能保留997px的情况下,切除哪些部分。

当然这是针对没有成为模板的活动页,当类似的活动出现次数3次以上的时候,就需要从设计上采用模板、代码上采用自动化了。

2.背景

为了顾及1024px分辨率以上的用户,需要考虑997px部分之外如何延展,是左右相同的渐变,还是各不相同的渐变,或者是纯色或者是不可平铺的图。对于每一种都有各不相同的处理方法。

3.按钮

活动的按钮一般比较华丽。可以的话是尽量单独切出来的,但一些放在不规则背景上的、有光晕发散的按钮就只能放在背景图里一起切了。除了静态稿中的按钮,还要询问设计师按钮是否有hover态。

4.浮层

询问设计稿是否有包含所有的浮层设计。如果是一个浮层通用所有情况的,询问浮层中的图标和宽度,每排出现的按钮数量上限。这些问题也可以拉上产品经理一切讨论。并从交互的角度提出建议(一些活动是跳过交互步骤的,而设计师会做一些设计上的考虑,所以文案可能还有缺陷)。

多页面活动

多页面的活动一般都比较大型了,可能有3个以上的设计稿,除了以上单页面出现的问题以外,还需要考虑:

1.按钮的重用

最好能说服设计师,按钮中的文字采用活字。按钮外的光晕(shadow)取消以便能够在各种颜色的背景上重用。当然这些也要酌情考虑,如果一定是需要华丽丽效果的设计稿,也是完全能实现的。

2.背景的重用

大背景能够重用的话,对于图片流量能有十分有效的控制。

门户

门户页面(或者叫portal,入口页面)对于设计上的推敲更多就在于一致性和性能上的要求了。

1.门户下的一系列页面中应该有有规可循的一致性。比如标题下横条的宽度、文字颜色。

如果这些设计稿有点类似但又略有不同,那该如何处理?是按设计稿来,还是自己提取出一个共性来赋予给它们?

设计中的一个原则是:如果需要看上去不同,那就完全不同! 如果两个设计稿中的横线长度差别在1~2px内,或者文字颜色分别是#7dff7d和#9dff9d(肉眼分辨不出来的,相信我),我就会认为是设计师的失误而无需询问。因为很难认为设计师刻意设计出了差别如此之小的设计稿。如果设计中的差异再大一点点,而又引起了自己内心的疑惑的话,那就要询问设计师。如果差别更大一点,又无需询问了,按实完成就好。

2.性能

因为门户网站有更大的流量、持续的时间更为长久,所以在切图的时候就时刻问自己,这里能不能用png8的透明图片搞定了?按钮如何扩展?这里的一个按钮到时候会不会变成3个?这些判断就需要一些经验了。

user

余果

https://yuguo.us

全栈工程师,《Web全栈工程师的自我修养》作者。