记一次前端项目 UI 收敛实践

May 30, 2021

文章摘要:前段时间我在公司参与开发了内部项目(以下称作 “M 项目” ),开发一段时间后,项目的 UI 设计风格、前端样式代码逐渐散乱。本文记录了一次从散乱到收敛的实践过程,顺便介绍了一种通过代码管理设计规范的方案,希望能给大家带来帮助。

一、背景

  1. M 项目的设计稿,经历过若干次迭代后,设计风格、规范发生了一些变化;UI 设计时有些设计元素偏离了设计规范。
  2. 前端开发时,code review 频率不高,样式代码的编写有待规范,例如有时有的同学直接从摹客生成的冗余样式代码复制过来用。
  3. 前端、UI 对设计规范的理解不一致,例如 UI 的 font-weight 有 400/500/600/700 的设计,而前端一般只处理 normal/bold

从设计角度,偏离设计规范会引起信息结构混乱,无法形成有效的亲密性、对比、对齐关系。

在代码中主要的问题表现为:不使用公共变量、公共变量多、相似颜色多,不利于代码的维护。

因此我抽时间整理了一下需要收敛的样式,与 PM、UI 交流,共同整理了一套设计规范,对齐前端、UI 对设计规范的理解,这有助于规范代码中的设计变量,规范设计师设计 M 项目的设计稿。

二、收敛过程

1. 梳理变量

排查所有页面及代码,梳理要收敛的样式,梳理成下列形式:

(内容大致相似,篇幅有限,在此列举一部分)

颜色:
主色收敛
1968e5;(旧设计稿用的多)
1763fb;(正在使用)
2a69ff(H5 主色)
005cff(H5 背景色、主色)
#1a76fc(首页)
统一成 1763fb?

待确认,h5背景色暂时保留

字重收敛 设计师给出的 font-weight 可能包含“400、500、700、800”,开发时减少字重只设置 normal(默认) 和 bold,其他字重不做区分。 设计师在进行设计的时候要注意,默认字重(normal)和 400 等值,bold 和 700 等值,其他粗细的值不应做设计,对于粗体的使用应相对谨慎,粗体影响文本所占据的宽度。 原因: 1. 区别不大,无法有效地区分信息层级; 2. 提高代码可维护性 字号收敛 使用双数字号:部分 UI 设计稿用到了奇数字号(13px 15px等),前端不做处理,而是尽可能和 PC 端相同元素的字号保持一致。 行高规则: 1. 1.5 倍行高 2. 保持双数字号的行高 原因: 1. 字阶尽可能有一定跨度,便于区分不同的信息层次; 2. 减少字阶规定的字号个数,便于前端维护样式代码; 3. 奇数字号在进行对齐的时候不容易对齐,兼容性也有一些问题; 建议的字阶: 圆角收敛 4px 5px 7px 8px 9px 收敛成两种圆角 => 4px 8px 边距 8的倍数 4、8、16、24、32 设计近似为8的倍数时,使用8的倍数的距离 避免使用 12、20 这样的距离值,如果设计师不可避免,则开发时单独处理

2. 开会沟通

  1. 前端、产品、设计师开会,沟通梳理的变量;
  2. 沟通并对齐设计规范的理解、前端提出设计规范的建议;
  3. 会后:设计师进行设计规范的确认,PM 再次确认修改后的视觉效果。

3. 收敛详情

主色:

目前项目和设计稿中存在以下5种主色:

1968e5;(旧设计稿用的多)

1763fb;(正在使用)

2a69ff(H5 主色)

005cff(H5 背景色、主色)

#1a76fc(首页)

收敛结果:

文本颜色:

  1. 去掉 text-color 默认的 #000
  2. 色值的新旧对比

附:提升彩色背景下的文字对比度(http://dwbbb.com/blog/improve-web-legibility/): 在彩色背景上使用灰色文本会降低对比度:

收敛结果:

icon 收敛结果:

边框:

输入框边框 #d9d9d9

输入框边框(antd)等,也有很多地方用到 #ebecf0、#d9d9d9

普通边框(大部分)#eeeeee

表格边框:#f0f0f0

共计5种,收敛结果:

背景色:

h5 首页背景色:#fafbfa

h5 子页面:#fafafa

pc 大部分页面背景色 #f7f7f7

表格背景色:#f8f9fa

共计4种,收敛结果:

PC背景色适配新色板的色值:

按钮背景色: #eee

适配新色板的色值,收敛结果:

文本:

  1. 字重收敛

    设计师给出的 font-weight 可能包含“400、500、700、800”,开发时减少字重只设置 normal(默认) 和 bold,其他字重不做区分。

    设计师在进行设计的时候要注意,默认字重(normal)和 400 等值,bold 和 700 等值,其他粗细的值不应做设计,对于粗体的使用应相对谨慎,粗体影响文本所占据的宽度。

    原因:

    区别不大,无法有效地区分信息层级;提高代码可维护性

  2. 字号收敛

    使用双数字号:

    部分 UI 设计稿用到了奇数字号(13px 15px等),前端不做处理,而是尽可能和 PC 端相同元素的字号保持一致。

    行高规则:

    1. 1.5 倍行高
    2. 保持双数字号的行高
    3. 1.5 倍行高如果是单数则 -1,双数不变

    原因:

    字阶尽可能有一定跨度,便于区分不同的信息层次;
    减少字阶规定的字号个数,便于前端维护样式代码;
    奇数字号在进行对齐的时候不容易对齐,兼容性也有一些问题

圆角:

2px 4px 5px 7px 8px 9px 16px

共计7种,收敛成4种:

收敛成两种主要的圆角 => 4px 8px

和两种不常用的圆角 => 2px 16px

边距:

8的倍数

4、8、16、24、32

设计近似为8的倍数时,使用8的倍数的距离

避免使用 12、20 这样的距离值,如果设计师不可避免,则开发时单独处理

3. 产出:设计规范

a. 经过上面的梳理,设计师给了我们一份下面这样的设计规范:

b. 使用 React 管理设计规范,详情请看第三部分(设计规范)

4. 组内分享

进行组内分享,使前端开发者对设计规范理解一致

三、设计规范

1. 什么是设计规范?

设计规范的形式:以图片&文字、网页(摹客)的形式展示配色、文本字号、排版信息,提供给设计、开发人员使用,作为设计、开发的参考。

效率工程某一版本的旧规范:(内部链接地址)

M 项目的设计规范现在是使用 sketch 制作,通过插件上传到摹客平台上

2. 使用 React 管理设计规范

使用 react & typescript 输出 M 项目的设计规范(sketch 文件),修改配置文件(src/config.ts)中的变量,就可以修改设计规范中的配色、文本字号、排版信息。

关于这个工具有兴趣的同学可以在我的博客里查看详情: http://dwbbb.com/blog/react-sketchapp-build-design-system/

3. 为什么使用代码生成设计规范?

Sketch 中管理设计系统的资产是复杂、容易出错且耗时的。设计资产的稳定迭代能够提高设计师与零设计团队的工作效率。

在设计规范逐渐复杂时,对规范的版本迭代变得越来越难。以往设计师需要手动去修改规范,这样往往容易出错,而且速度比较慢,尤其是制作一些重复性较强的内容的时候,例如调色板上面可能会有上百种颜色,这些色彩可能会频繁调整。

使用代码生成设计稿还有一些优点:

  1. 代码控制设计规范的版本迭代
  2. 代码可以方便地输出重复性的视图
  3. React-sketchapp 这个工具使用 React,有利于程序上的复用,包括变量文件、组件代码及其样式。
  4. 使用真实数据或组件生成设计稿,这将使设计稿与最终产出的页面更接近
  5. 基于 Sketch 定制一些效率工具,例如通过简单的配置生成完整设计规范,从而将设计规范快速应用到一系列项目中

4. 内部系统需要设计规范吗?

国内很多团队缺少设计师,或者设计资源不够充足,往往需要程序员直接上手进行设计(尤其是中后台系统),这时程序员就会跟着感觉走,写出丑陋的页面甚至难以维护的代码。缺乏规范的页面即使使用了美观的 UI 库也会成为东施效颦,不伦不类。

因此对于这样的团队来说,程序员学习一些设计规范的基本使用方式,将会大大改善这一情况:遵循一定的设计规范进行设计将会快速提高这些页面的颜值,工具赏心悦目,使用者使用起来工作也会很开心。

四、还可以做什么?

确定了一套设计规范,并用代码实现,导出 sketch,这样就够了么?

其实还有很多可以做的事情

1. 代码生成 sketch 模板库

设计师可以使用 sketch 中的模板库快速在设计稿中插入组件

2. 提供组件的快速配置

(如下图右侧的输入框、下拉选项),快速修改组件



3. 效率工具

可以提供一个站点,在线填写一些非常简单的配置项(例如产品的配色、字号、圆角等),服务端起一个服务运行 mars-sketch-ts 这个项目,提供在线导出设计规范(sketch/图片/pdf)、样式变量(css/js)、sketch 模板库模板(提供给设计师进行业务组件的二次设计或业务设计稿的开发)

五、总结

工具只是一种方式,只是为设计规范提供了准确、稳定的迭代,并体现到代码上。

最重要的还是要对齐前端、UI 对设计规范的理解,避免在长时间的设计开发过程中 UI 设计风格、前端样式代码逐渐散乱。