如何做好大厂H5运营视觉规范（快手）

不知道做H5的同学们，有没有计算过在和开发讨论对齐这件事上 花了多少时间？

“左边再来2px ，这里的高度又不对” 等等。一次活动耗时10min走查对齐（这还算少的吧），10次一个半小时以上，小公司10个设计师一个月算上线50个h5，那基本就是一天的工时，那大厂成千上百个运营活动，这笔时间帐有没有算过呢？是否有节约时间的方法？

答案是：当然有（不然这篇文章没得说了）

我还是先官方简述一下做这个项目的背景：因运营设计的输出无统一性、原则性，设计产出参差不齐且效率低开发成本大，为达到视觉设计产出高效和较好质量，需建立运营规范，赋能各个业务线。目的：建立统一、易用的运营设计规范，协助设计师高效完成高质量高效率的业务需求，减少设计开发成本。

如何解决？

大厂解决这件事的优势是可跨部门合作，有充足的人力支持，能够实现该规范的研发资源，配合规范落地有2个不可缺的因素，一是遇见好领导能够引导和帮助我，而是大公司有辅助活动上线编辑的平台，只需要我将规范输出，他们就可以实现H5搭建的实时编辑，真正节约运营、设计师的时间；劣势也是跨部门，需要你不断的去推进和协调。

从规范初版到落地，总的来说分4大步骤： 1.问题定位；2.求同存异；3.实验测试；4.应用沉淀。

问题定位

1 收集问题

因为本身已经明确需解决的目标，所以没做太深入的调研，而是直接针对离规范最近的“设计师”们进行一些问题收集，查漏补缺。

a. 是否增加banner设计样式案例？（xx部门-运营设计师王某某）

b. 是否增加运营活动常用玩法模板例如排行榜，打卡等；（xx部门-运营设计师李某）

c. 3个logo及以上的logo联名怎么处理？需不需要分一级联名和二级联名（xx部门-品牌设计师-张某）

d.（不知道怎么分类）外包供应商很多不用sketch都用ps，规范可不可出ps版本的方便直接调用（xx部门-品牌设计。师-黄某）

   …

这里需解释一下，我们的规范主要针对H5，也会有一些日常banner、开屏、logo的使用规范。

求同存异

1 保持一定个性化

设计师在做一个H5的时候，最重的精力一定是放在头图，除了符合产品首屏线露出的高度上限，头图部分一定是最个性化不做限制的；H5的UI皮肤也不做颜色、质感等限制，毕竟我们需要根据实际需求来。

2 合并同类型组件

确定不限制的地方后，我们就要了解大多数H5的模块共性，将常见的H5梳理出来，拆解为各个模块，找到可以合并通用的地方，形成规范。这里我们和产品的同学也进行了多轮的沟通，他们规划的活动大致覆盖多少常用模块，例如抽奖、榜单等等。

以2020年春节活动H5为例，标注了一些常用模块（活动上线也是运用了这套规范）

实验测试

1 栅格实验

1 栅格实验（以feed流模块为例）

我们基于750和1242px，分别设计了两组栅格方案，每组两套栅格，一个是针对无边框情况，一个是针对有边框情况：

a. 750px-无边框情况下，视频距页边距为34px，有边框情况下，边框距页边距为34px，框内元素遵循有框栅格；

b. 1242px-无边框情况下，视频距页边距为58px，有边框情况下，边框距页边距为58px；框内元素遵循有框栅格；

c. 三列视频分为无页边距情况（参考快手主站）和页有边距情况；

这样无论是有边框还是无边框的情况，他们最外面的元素始终是统一的。

什么是有框，什么是无框呢？（基于750px，以feed流为例）

左边视频底下还有一层底，就属于有框，右边无框的则视频区域更大，给设计师提供了两种版式，实际运用左边的会更多。

我们统一了什么？

有了这套栅格后，我们可以将常用模块进行大间距统一，feed流无框和有框视频模块距页边距都为34px，其他模块如抽奖、榜单等距离页边距也为34px，模块内小颗粒度的组件遵循栅格往里推。这样我们就能得到一个很丝滑的H5～ 从上到下很畅通，且也不用一直跟开发掰扯我这里到底是什么间距，做个高冷的设计师不好嘛。

2 应用测试

我们输出了一套skech源文件和线上规范文档， 设计师们可以直接copy组件，将规范过的组件先给到小部分设计师去使用，不断测试了上线的效果，及时优化一些细节。来吧宝儿，让我叉会腰欣赏一下成果。

规范源文件：

丝滑的上线效果：

应用沉淀

1 上线使用

经历各种拉齐和协调。。配合快手内部运营搭建平台——积木JIMU终于顺利上线，要知道开发大大们的时间很宝贵！还为运营同学奉上了保姆级的搭建指南（1242px为例）。

2 调研使用情况

麻雀虽小，五脏俱全，作为一个视觉设计师，却有一颗产品的心，怎么能不追求体验呢，反馈是一定要的。于是出了个调查问卷（这里选了几个问题示意一下），给到运营设计师和运营们。还好～调研结果是正向的。

总结

项目流程：把上面的4点拆分就是下面这个流程了。

这次项目是我入行业两年多的时候做的，很感谢一路上给过我帮助的人，和我一起讨论、帮助出规范的同学们。毕竟在大厂，推进一个拉齐的事情，确实不太容易。。可能我胆子比较大，不认识的认识的都能拉到一起聊聊（上升狮子飘过）。对于一个视觉设计师来说，可能还有些不太专业的地方，还需要多学习，希望我能越来越接近产品一点儿。

补上一句，最新的规范是其他同事在更新了，目前是基于828px的规范。

就这样了，感谢大伙儿看到现在，第一次写文章，希望得到更多鼓励～～

———————————————————————————————————————————————————

本文未经香草许可，请勿转载。