每天要上线100+个活动，怎么拿捏支付宝营销设计的气质？ UI/UX 22年7月14日 编辑 蚂蚁集团设计 取消关注 关注 私信 本文字数1500字左右，预计3分钟读完 01 在支付宝做营销太难了 第一难，就难在支付宝营销活动的数量级巨大品类繁多，说个数吧，我们几乎每天都要上线100+个活动。类型包括支付、公益、出行、保险、理财、信用、大促、节日活动、发券、生活缴费、甚至查快递买菜。与其相关的页面流程设计更是多到数不清。这搁哪个设计师听了脑袋瓜子不得嗡嗡的？ 第二难，是就算这么多活动我们用大把同学大把精力做完了，但活动设计的质量和风格也就很难保持一个对的起支付宝用户的水准。效率低，质量参差不齐，最重要的，是没有一个统一的设计风格。 那么，我们要将支付宝的品牌调性，在营销场景中精准演绎；同时随着营销场景和设计师角色的日渐多元，只有靠着一站式的设计系统，才能最大限度的解决设计共识，从而高度统一产出； 这套设计系统必须具备：明晰的设计原则、完善的Uikit、全面覆盖的素材资产、100%线上还原的Motion&3D落地工具。 02 那么我们如何做 1. 找到符合支付宝营销「气质」的设计风格，建立一套好用的UIKIT 我们用「温暖，舒适」来定义支付宝营销活动气质，并通过形状、色彩、质感、字号、构成和动效来转译给用户。 舒适温润的圆角在视觉上具有安全感，在引导性和对用户的识别速度上都有着无法忽视的优势，因此icon的圆角我们也做了严密的规范。圆角的添加对于元件，素材，模块，都十分重要。 基于支付宝基础支付场景和数字金融场景的业务特性，提取五种基础色，相较产品规范色彩的基础上，提升了明度和纯度值，渐变时色相相邻，让视觉不再刺激更加舒适。更好地服务于营销设计场景。 通过这几点，我们收敛了端内所有使用频率较高的组件，生产了一整套符合温暖舒适感觉的UIKIT，并且通过规则制定满足了几乎所有需要的调整和修改。 2. 创造一套3D&Motion工具及素材库来高效支撑所有活动 基于支付宝人物Ver1.0我们升级过后的形象更加简洁易用，用日常舒适的感觉创建材质，来让我们的人物形象更加亲和，也更加适用于端内的呈现。 我们创建了6个基础角色，并且我们以基础角色稍加改变服装以便能够覆盖支付宝广阔的用户群体，保证这些优质角色能够在各个场景使用。 有了主角还得有好的配角儿，支付宝所覆盖的场景太多了，面向全国的小微企业从业人员，所以我们不光给我们所有的角色量体裁衣把他们变为各个行业的用户，更为其持续产出着巨量优质「配角」。 但是只要干设计就知道，3D形象生产成本高，步骤多，周期长，修改也更加繁琐。所以我们专门搭建了解决这些问题的ARK平台。 ARK是一个可以网页端快捷编辑动作，一键一秒输出渲染图的狠角儿。平台上上传了多数通用的pose，即使需要定制化，基本上只要进平台微调已有动作，然后点击输出，一瞬间我们活动的主视觉就已经输出完毕了。 还有一个问题，就是动效，营销活动中有着大量的动效需要开发实现，以往却在一些不确定因素下在开发和设计之间反复调整，往往受伤的都是动效同学和动效质量。所以我们还产出了一站式设计100%落地的MARS平台。 MARS内置了超多动效预置文件，也能做到动效的高效修改与编辑，能够彻底地解决设计到开发动效效果折损的问题。 3. 有了好用的UIKIT和素材产出平台，我们还做到了高度智能化搭建 有了全面覆盖使用功能的UIKIT，和高效高质量的素材产出平台。一个活动，我们只需要依次挑选背景色彩，人物氛围，以及对应所需要的功能模块。就可以超快速的搭建完整个活动视觉，且无论哪位同学都可以保证活动风格的统一。在复杂的营销活动中，我们重构了一个营销页面诞生的流程和标准。 有了ARK和MARS的加持，再配合气质对应的UIKIT，任何同学都可以在统一的气质感受下以最少的精力去搭建相应的页面了。Alipay Design NEO为我们带来了省力、高效、质量高度统一的设计新体验，这就是属于支付宝新一代的营销工具。 本篇文章来源于微信公众号: 蚂蚁集团设计 蚂蚁集团设计
