原文链接:https://mp.weixin.qq.com/s/tYQVkmguGHILXwocS62MaA

58同城|如何让庞大的设计系统实现高效运转? - 图1

58同城是一个海量的分类信息服务平台,提供房产、招聘、二手车、团购、黄页、交友等多种服务。由于存在不同业务类型与错综复杂的用户体系,使得各业务设计师之间的沟通与合作尤为重要。在同一平台下,如何构建58设计中台成了最大的课题。

58UXD用户体验设计中心从未停止探索。近年来成立多个专项体验小组,经过不断的技术完善与创新,建立全新10.0设计语言。最大化保证了平台稳定性与分业务的灵活性,让设计走向专业化和智能化。

58同城|如何让庞大的设计系统实现高效运转? - 图2

我们将业务中公共的、通用性高的部分合并同类项,抽取到中台沉淀为服务能力。在一定的范围内获得最佳秩序,减少相同业务、系统的重复建设,直观地降低设计产品研发成本。

接下来将从项目发起到设计交付全流程进行分析,我们是如何在每个节点进行干预,使设计系统实现高效运转。我们不难发现,随着智能化工具的研发、业务发展的需要,设计师职能逐步从视觉制作转换为设计决策者。工具化、模块化、组件化逐步代替人工,为设计师争取了更多时间进行用户调研、优化产品原型、参与交互等工作,多角色实现全流程体验优化。
image.png
那么在每一个环节采取何种措施可以提升设计服务力呢?用一张设计运转齿轮概括我们的优化步骤。
image.png
设计流程:需求池、分析策略、制定设计语言、决定执行标准、开始生产、优化交付、反馈验证、沉淀经验、提炼优化点重回需求池。

按阶段划分为:
设计前:将需求分级与标准化,根据设计语言的制定设计方案。
设计中:进入模块化后根据原型拼接,同步选择生产方式,利用资产池中的相关元素,依靠人机来完成需求制作,最后完成交付。
设计后:针对上线后的数据后平台观测,加入用户分析形成新的优化点,最终回流需求池,沉淀的经验加入知识库。

资产池需要设计不断供应、优化、增补保证效率、效果。那整个设计齿轮运转的关键是什么?

从标准、内核、元素、工具四个关键点进行一一解读。
image.png
image.gif

01 标准

专业的设计必须建立标准,举一个小例子,不难发现工厂制衣过程中水洗标都在左侧,这个是行业标准,根据人体工程学等因素设定,工厂根据标准进行批量生产,不论是跨类型还是跨工厂都可以实现模版化快速生产。同样所有产品都需要建立一定的设计准则,根据复用模型量产提升设计规模。

具体可以从需求标准化 、流程模块化、组件通用化入手。
image.png
·需求标准化
标准化需要提供设计需求文档。

从源头做起,把产品需求标准化,根据需求类型自动进入相应的需求池,加快设计理解。要求产品人员按需求填写需求单,获得充分信息辅助设计,避免目标偏差。
image.png


标准化可以按格式提供内容。

例如流量运营中的投放需求,根据设计研究对文案、字数、主标题与副标题的行数、图片内容等因素加以规范。产品按格式提供需求文档,加快处理速度,为实现自动化奠定基础。
image.png

标准化可以进行需求分级。

如何判断需求的优先级?分级别决定采取怎样的设计手段?

可以根据紧急度与重要度两个维度分别进行判断,重要的不紧急的可以长期重点发力,也可列为okr项目不断跟进,重要的紧急的那么要马上做,紧急的不重要的常态化需求,可以大家分担做。不紧急不重要的级别权重为最低排最后。

image.png

image.png
根据评级评估表,进入相应排期分类,快速沟通设计成本与相应产出标准。
image.png

标准化需要风险评估。

是否存在技术实现难度?是否采用特殊动效、c4d、AR等特殊手法?预期修改意见是否大于3次?是否存在策略层变动风险?是否存在原型变动频繁情况?

如有以上情况,需要在需求文档中额外说明,并邮件同步。技术、产品、设计同学根据风险评估,做好应对方案。

·流程模块化
把工作流程梳理成关键节点,采取阶段性的跟踪。在固定的流程上采取固定的方法,从而让流程实现自运转。例如设计走查的时间点,切入在功能测试的同时进行,在冒烟测试阶段进入视觉测试,上线前必须设计同学审核等等,每一步可以利用iwork进行跟踪。
image.png
image.gif

·组件通用化
设计系统中的元素、控件、版式都可以组件化,但切记通用原则,以保证根据不同目的进行不同的组合。

例如58首页的改版,我们将功能划分为不同模块,充分满足业务进行不同的组合与调用,形成新的界面。

58同城|如何让庞大的设计系统实现高效运转? - 图15

image.png

需求可以利用工具将组件模块生成为所需页面,并不断验证与优化。

image.gifimage.png

**

02 内核

任何组合都离不开设计内核,真正展示产品的核心优势与价值,与竞品产生差异化。让我们一起探索58同城用户体验的设计内核。

秉承58同城让生活简单美好的愿景,打造丰富的本地服务信息平台,采用简单易理解的、亲民的、无冗余的设计理念。将“设计规范”逐渐改为设计体系、设计语言,把设计语言作为一种“沟通的方式”向产品的各个触点传递。

设计内核:以简驭繁,做有用的设计。
image.png

58同城logo由红、绿、蓝、橙等色调构成,每种颜色代表了不同的业务,品牌理念围绕LOCO(Life、People、Creativity、Ecosystem),包括生活化、人、创造力、生态四个维度进行LOCO配色拆分,平台采用主橙色,分类业务招聘、房产、黄页、二手车等从橙色延续到蓝色,并将LOCO符号拆分延展,组合成相应的业务品牌符号。紧紧围绕设计语言核心理念,保证了一致性与多元化。
image.png

全业务通用原则:一致、叠加、多彩、圆润为基调,表达专业、丰富、多元、亲和的设计理念。

image.gifimage.png

image.png

根据品牌基因设定固定配色规则,例如通用标签规则的设计,让每一个组件、每一个元素都具有了58的灵魂。

image.png

03

元素

为提升设计效率,我们建立了共享设计资产池 ,其中包括插画库、icon库、元素库、图片库、组件库、玩法库等等。积累需要漫长的过程,所以研发了水晶球共享平台,鼓励设计师上传,互通有无的同时保持设计对齐。
image.png

04

工具

工欲善其事,必先利其器。2020年初在58UXD高级总监何潇带领下成立了TOOLKITS设计工具研发小组。小组成员紧密配合,设计驱动全方位打造设计中台,利用工具辅助设计流程中的各个触点。
image.gifimage.png
image.png


在设计流程的不同阶段,为设计、产品、技术提供相应的工具。

·典型案例
58问卷系统:企业定制化云服务平台。服务于企业以及产品的调研。提供丰富的问卷模版与58特色的商家数据服务。
IWIKI:文档库管理平台。上传知识沉淀、分享、用研、竞品分析等,同时支持规范查询等相关内容。
IWORK:产品需求管理平台。产品、设计师、技术的任务池,追踪整个设计流程。
58云盘:文件存储云平台。源文件等大型资产存储,支持远程在线协作。
水晶球:设计资产分类管理中心。素材可视化分类,设计产出的复用与再造,为智能化生产提供原材料。
斑马:人工智能设计平台。提供智能合图、抠图、素材模版搭建等功能,最终通过机器制图实现设计自动化。
风火轮:组件可视化三方协作平台。从代码、设计样式等进行全面打通,提高设计还原度。实现代码组件化,减少沟通成本,全面提效。
MATRIX:中后台设计组件平台。致力于打造企业级的产品设计体系,建立适用于设计团队、开发团队、产品团队的全链路通用产品解决方案。让项目开发更直观,更高效、更简单。

image.png
图中为共建项目的责任人,项目背后还有很多努力的同学,整个设计系统离不开58UXD每一位设计师的辛苦付出。如果对其中项目感兴趣的同学,敬请关注58UXD相关文章。

58同城|如何让庞大的设计系统实现高效运转? - 图30

以上分别从标准、内核、元素、工具等角度分析了优化的关键点。58UXD将探索更多的辅助方法帮助设计师减轻负担,更好的服务用户。

我们的目标:让设计提升服务,让生活简单美好。
image.png


58同城|如何让庞大的设计系统实现高效运转? - 图32