云舟数据看板

01项目背景

云舟是一家做电商数据分析的 SaaS 公司，产品用了三年，页面是不同人在不同时期做的，按钮、表格、图表各有各的样子。客户抱怨「像三个产品拼起来的」。

02我的角色

搭建设计体系（色彩、字体、组件、图表规范），重做了数据总览、订单分析、用户增长三个核心页面，并与前端一起把组件落进代码库。

03设计过程

1. 1

   先盘点再动手

   把现有界面全部截图，列出 14 种按钮、9 种表格样式，先和产品、研发开会定下哪些保留，哪些合并。

2. 2

   图表是重点

   制定了图表色板、坐标轴样式和空状态规范，所有图表用同一套十二色色板，并加入色盲友好校验。

3. 3

   组件落地

   用 Figma 变量和代码中的设计令牌一一对应，改一个颜色，设计稿和前端一起变。

04结果

新体系覆盖产品 90% 的页面。开发新页面的平均时间缩短了约三分之一，客户满意度调研中「界面易用性」一项提升明显。