Tapper Mark 知识库设计系统

展示从0-1构建B端产品的设计系统的经历。

01

背景介绍

我加入Tap4fun 效率设计团队初始阶段,亟需对公司内部多条业务线进行设计重构,在此之前各业务线产品都不经过设计流程,直接由PM输出文档,并由开发直接实现,旧版系统中存在较多明显的体验问题以及视觉问题。

另一方面公司内部系统业务线多达近十条,且处于快速发展与规模化的阶段,仅仅拆分设计师单独负责业务线设计,可能会导致设计输出物统一性不合规,体验标准难以衡量,效率成本剧增等问题,组件与设计模块的不可复用也会间接导致业务线开发侧的成本与效率问题。一套协调统一的设计系统有利于指导各业务线设计,保证设计输出一致性,用户使用产品体验的一致性及降本增效。

工作内容&时间线

我的主要工作范畴是主导公司内部知识库产品设计系统的组件设计及组件文档撰写,并持续跟踪至组件开发完成上线。

负责的组件(后续维护人员在不同版本期间有变动)包括但不限于 Color颜色、Font字体、Icon图标、Button按钮、模态窗Modal、Header顶部导航&面包屑、分页器、Upload上传组件、Steps步骤条、Anchor锚点导航、Time Picker日期检查器、Tag标签、Default Page 缺省页等

时间线

组件设计流程

此处讲述我们如何设计一个组件, 从组件需求确定到正式上线并同步至各业务线的过程。

时间线

撰写文档的结构与案例

组件文档核心结构为,元素拆解-类型汇总-视觉样式-交互演示-应用案例,该文档主要交付对象为开发人员,根据文档进行组件封装后,可快速在代码侧调用,设计师原则上不需要频繁查阅此文档。注:新人设计师入职后会有此文档培训。

设计师在具体需求设计场景中通常在设计团队library中直接调用【智能组件库】,较少查阅此文档。智能组件库是解决设计一致性及设计效率的进一步方案。 下面是 Upload 上传组件文档的案例。

010203040506

背景介绍

公司内多条业务反馈涉及到富文本编辑器业务组件,而设计系统中并未纳入该业务组件,需要由底层重新设计以支持各业务线场景。

工作内容&时间线

主要非为调研阶段和输出阶段:

  • 调研分析
  • 初稿输出-评审
  • 最终视觉稿输出-规范化
时间线

预研阶段/资料收集与分析

收集了业务线对富文本编辑器patterns的具体需求,同时参考业界主流开源富文本编辑器,重点关注:

  • 功能规格
  • 适配布局
  • 交互细节
  • 视觉细节

分析资料概览(可向下滚动查看):

时间线

富文本编辑器结构

© 李尧 2023