编辑导读:随着互联网行业的发展,产品体验的一致性和开发的效率越来越被重视,设计系统的出现就是为了解决这样的问题。一套优秀的设计系统有利于帮助产品在各个平台保持一致的设计语言和风格,给用户一致的产品体验。本文将从4个方面,对设计系统进行深度分析,希望对你有帮助。
【58】如何让庞大的设计系统高效运转 - 图1
58同城是一个海量的分类信息服务平台,提供房产、招聘、二手车、团购、黄页、交友等多种服务。由于存在不同业务类型与错综复杂的用户体系,使得各业务设计师之间的沟通与合作尤为重要。在同一平台下,如何构建58设计中台成了最大的课题。
58UXD用户体验设计中心从未停止探索。近年来成立多个专项体验小组,经过不断的技术完善与创新,建立全新10.0设计语言。最大化保证了平台稳定性与分业务的灵活性,让设计走向专业化和智能化。
【58】如何让庞大的设计系统高效运转 - 图2
我们将业务中公共的、通用性高的部分合并同类项,抽取到中台沉淀为服务能力。在一定的范围内获得最佳秩序,减少相同业务、系统的重复建设,直观地降低设计产品研发成本。
接下来将从项目发起到设计交付全流程进行分析,我们是如何在每个节点进行干预,使设计系统实现高效运转。我们不难发现,随着智能化工具的研发、业务发展的需要,设计师职能逐步从视觉制作转换为设计决策者。工具化、模块化、组件化逐步代替人工,为设计师争取了更多时间进行用户调研、优化产品原型、参与交互等工作,多角色实现全流程体验优化。
【58】如何让庞大的设计系统高效运转 - 图3
那么在每一个环节采取何种措施可以提升设计服务力呢?用一张设计运转齿轮概括我们的优化步骤。
【58】如何让庞大的设计系统高效运转 - 图4
设计流程:需求池、分析策略、制定设计语言、决定执行标准、开始生产、优化交付、反馈验证、沉淀经验、提炼优化点重回需求池。
按阶段划分为:

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

资产池需要设计不断供应、优化、增补保证效率、效果。那整个设计齿轮运转的关键是什么?
从标准、内核、元素、工具四个关键点进行一一解读。
【58】如何让庞大的设计系统高效运转 - 图5

01 标准

专业的设计必须建立标准,举一个小例子,不难发现工厂制衣过程中水洗标都在左侧,这个是行业标准,根据人体工程学等因素设定,工厂根据标准进行批量生产,不论是跨类型还是跨工厂都可以实现模版化快速生产。同样所有产品都需要建立一定的设计准则,根据复用模型量产提升设计规模。
具体可以从需求标准化、流程模块化、组件通用化入手。
【58】如何让庞大的设计系统高效运转 - 图6

1. 需求标准化

标准化需要提供设计需求文档。
从源头做起,把产品需求标准化,根据需求类型自动进入相应的需求池,加快设计理解。要求产品人员按需求填写需求单,获得充分信息辅助设计,避免目标偏差。
【58】如何让庞大的设计系统高效运转 - 图7
标准化可以按格式提供内容。
例如流量运营中的投放需求,根据设计研究对文案、字数、主标题与副标题的行数、图片内容等因素加以规范。产品按格式提供需求文档,加快处理速度,为实现自动化奠定基础。
【58】如何让庞大的设计系统高效运转 - 图8
标准化可以进行需求分级。
如何判断需求的优先级?分级别决定采取怎样的设计手段?
可以根据紧急度与重要度两个维度分别进行判断,重要的不紧急的可以长期重点发力,也可列为okr项目不断跟进,重要的紧急的那么要马上做,紧急的不重要的常态化需求,可以大家分担做。不紧急不重要的级别权重为最低排最后。
【58】如何让庞大的设计系统高效运转 - 图9
【58】如何让庞大的设计系统高效运转 - 图10
根据评级评估表,进入相应排期分类,快速沟通设计成本与相应产出标准。
【58】如何让庞大的设计系统高效运转 - 图11
标准化需要风险评估。
是否存在技术实现难度?是否采用特殊动效、c4d、AR等特殊手法?预期修改意见是否大于3次?是否存在策略层变动风险?是否存在原型变动频繁情况?
如有以上情况,需要在需求文档中额外说明,并邮件同步。技术、产品、设计同学根据风险评估,做好应对方案。

2. 流程模块化

把工作流程梳理成关键节点,采取阶段性的跟踪。在固定的流程上采取固定的方法,从而让流程实现自运转。例如设计走查的时间点,切入在功能测试的同时进行,在冒烟测试阶段进入视觉测试,上线前必须设计同学审核等等,每一步可以利用iwork进行跟踪。
【58】如何让庞大的设计系统高效运转 - 图12

3. 组件通用化

设计系统中的元素、控件、版式都可以组件化,但切记通用原则,以保证根据不同目的进行不同的组合。
例如58首页的改版,我们将功能划分为不同模块,充分满足业务进行不同的组合与调用,形成新的界面。
【58】如何让庞大的设计系统高效运转 - 图13
【58】如何让庞大的设计系统高效运转 - 图14
需求可以利用工具将组件模块生成为所需页面,并不断验证与优化。
【58】如何让庞大的设计系统高效运转 - 图15

02 内核

任何组合都离不开设计内核,真正展示产品的核心优势与价值,与竞品产生差异化。让我们一起探索58同城用户体验的设计内核。
秉承58同城让生活简单美好的愿景,打造丰富的本地服务信息平台,采用简单易理解的、亲民的、无冗余的设计理念。将“设计规范”逐渐改为设计体系、设计语言,把设计语言作为一种“沟通的方式”向产品的各个触点传递。
设计内核:以简驭繁,做有用的设计。
【58】如何让庞大的设计系统高效运转 - 图16
58同城logo由红、绿、蓝、橙等色调构成,每种颜色代表了不同的业务,品牌理念围绕LOCO(Life、People、Creativity、Ecosystem),包括生活化、人、创造力、生态四个维度进行LOCO配色拆分,平台采用主橙色,分类业务招聘、房产、黄页、二手车等从橙色延续到蓝色,并将LOCO符号拆分延展,组合成相应的业务品牌符号。紧紧围绕设计语言核心理念,保证了一致性与多元化。
【58】如何让庞大的设计系统高效运转 - 图17
全业务通用原则:一致、叠加、多彩、圆润为基调,表达专业、丰富、多元、亲和的设计理念。
【58】如何让庞大的设计系统高效运转 - 图18
【58】如何让庞大的设计系统高效运转 - 图19
根据品牌基因设定固定配色规则,例如通用标签规则的设计,让每一个组件、每一个元素都具有了58的灵魂。
【58】如何让庞大的设计系统高效运转 - 图20

03 元素

为提升设计效率,我们建立了共享设计资产池,其中包括插画库、icon库、元素库、图片库、组件库、玩法库等等。积累需要漫长的过程,所以研发了水晶球共享平台,鼓励设计师上传,互通有无的同时保持设计对齐。
【58】如何让庞大的设计系统高效运转 - 图21

04 工具

工欲善其事,必先利其器。2020年初在58UXD高级总监何潇带领下成立了TOOLKITS设计工具研发小组。小组成员紧密配合,设计驱动全方位打造设计中台,利用工具辅助设计流程中的各个触点。
【58】如何让庞大的设计系统高效运转 - 图22
【58】如何让庞大的设计系统高效运转 - 图23
在设计流程的不同阶段,为设计、产品、技术提供相应的工具。
典型案例:

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

图中为共建项目的责任人,项目背后还有很多努力的同学,整个设计系统离不开58UXD每一位设计师的辛苦付出。如果对其中项目感兴趣的同学,敬请关注58UXD相关文章。
【58】如何让庞大的设计系统高效运转 - 图24
以上分别从标准、内核、元素、工具等角度分析了优化的关键点。58UXD将探索更多的辅助方法帮助设计师减轻负担,更好的服务用户。
我们的目标:让设计提升服务,让生活简单美好。