前端设计规范设计规范价值制定设计规范的益处是设计一套约定设计语言，根据约定设计语言搭建一套设计框架，达到设计和开发的统

设计规范价值

制定设计规范的益处是设计一套约定设计语言，根据约定设计语言搭建一套设计框架，达到设计和开发的统一性、可复用性、可扩展性。

一致性

通过高层设计规范约束，低层依赖高层，达到页面的统一性。

可复用性

搭建设计框架，低层复用高层组件。经过项目实践、设计变得可迭代，更新后的设计框架又可以复用到项目中。

质量保障

开发和设计使用同一套语言，在开发阶段，就有依据校验设计的问题，从而规避一些设计问题。

相较于传统设计中，设计只能单人进行，若无相关约束，设计质量只能依据个人经验，质量得不到可靠保证。通过制定设计规范，设计语言经过多名设计和开发参与，相较于个人经验，质量得到极大提升，依据实际项目迭代，更新设计语言，达到可靠的设计表达。

可扩展性

制定设计语言，在开发层面上，通过在高层制定设计规范，低层依赖设高层设计，可轻松达到主题定制、样式调整等效果。

降低使用成本

制定设计语言，根据阅读设计规范，新人也能快速入手，并达到可靠的设计质量和页面效果。通过使用设计语言制定的基础组件，极大减少了由于个人原因造成的设计错误，并保证了一些极其细微的设计细节。

设计原则

清晰性 结构布局、内容消惑、及时反馈

一致性 韵律、务实、美

准确性 歪曲、遗漏、误导

有效性 重点、克制

命名规范

颜色命名规范

--property_primary

--property_secondary

// status：click、hover、disabled、activated...

--property_[status]

大小命名规范

--property_small

--property_regular

--property_medium

--property_large

多个等级命名规范

--property_neutral_rank

eg：

--font-color_neutral_1: #ffffff;

色彩

品牌色、功能色、中性色。

从一致性考虑，使用邻近色；

从重点内容考虑，使用对比色；

从用户情感考虑，使用功能色；

品牌色

常用于主要按钮和文字、重点操作状态、高亮提醒、空状态等。

:root {
  --primary-color: #165dff;
  --primary-color_click: #0e42d2;
  --primary-color_hover: #4080ff;
  --primary-color_disabled: #94bfff;
}

功能色

主要作用是向用户明确的传达成功、警告、错误、链接等信息和状态。此外色彩还是人类情感的一部分：

成功代表正面情感，表示可行、植物、安全等含义。

警告代表注意、阻止等含义。

错误代表负面情感，表示不可行、严重、危险、失败、热量等含义。

链接代表中性情感，表示提示，引导等含义。

:root {
  --success-color: #009a29;
  --warning-color: #d25f00;
  --error-color: #cb2634;
  --link-color: #0e42d2;
}

中性色

主要作用调和色彩搭配，衬托主色及其他色彩，同时拉开内容层次，使用户更专注于内容。常用于文字、背景、图标、边框和分割线等元素。

:root {
  --border-color_primary: #e5e6e8;
  --background-color_primary: #ffffff;
}

字体

字体、字体大小、字体权重、字体颜色。

字体

字体等宽、识别度高、混排美观、跨平台性。

引入外部扩展字体会增加数据包的容量，影响加载性能，同时需要兼顾 fallback 原则。

html, body {
  font-family: Roboto,"Helvetica Neue", "Segoe UI", Tahoma,Verdana, -apple-system, BlinkMacSystemFont ,sans-serif;
  font-variant-numeric: tabular-nums;
}

字体权重

同一个字体的不同字重能传达不同的信息权重和情绪。细的字体给人以细腻、轻快的感觉，而粗体则给人着重和严肃的认知。多数情况下，采用 Regular 以及 Medium 的两种字体重量，分别对应代码中的 400 和 500；在英文或数字字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。

:root {
  --font-weight_small: 300;
  --font-weight_regular: 400;
  --font-weight_medium: 500;
  --font-weight_large: 600;
}

字体颜色

字体颜色应当考量与背景色等关系，我们参考了 WCAG 的标准，将正文文本、标题和背景色之间保持在了 7:1 以上的 AAA 级对比度。

:root {
  --font-color_primary: rgba(0,0,0,0.65);
  --font-color_secondary: rgba(0,0,0,0.45);
  --font-color_placeholder: rgba(0,0,0,0.2);
  --font-color_disabled: rgba(0,0,0,0.25);
}

间距

间距包括行高、内边距、外边距。

行高

行高一般与字体大小有着对应关系，目前通用的建议中，西文的基本行高是字号的1.2倍左右，中文因为字符密实且高度一致，根据阅读人群划分（儿童、年轻人、老年人），可达到 1.5 至 2 倍甚至更大。

:root {
  --line-height_primary: 1.4em;
}

内边距

内边距是指元素内部空出的空间，一般用来控制内容与边框的空间。

:root {
  --padding_small: 8px;
  --padding_regular: 16px;
  --padding_medium: 24px;
  --padding_large: 32px;
}

外边距

外边距是指元素与元素之间的距离。

:root {
  --margin_small: 8px;
  --margin_regular: 16px;
  --margin_medium: 24px;
  --margin_large: 32px;
}

边框

边框是元素的边界，代表着视觉的分割。一个边框由四部分组成：边框样式、边框宽度、边框颜色、边框弧度。

:root {
  --border_regular: 1px;
  --border_medium: 2px;
  --border-radius_regular: 4px;
  --border-radius_medium: 8px;
  --border-radius_large: 50%;
}

效果

我们常用一些效果来辅助元素实现实现视觉效果的分层、对比。

1、阴影

不同的阴影高度可以代表不同的元素层级。

:root {
  --box-shadow_neutral_1: 0px 2px 5px 0.1px #000000;
  --box-shadow_neutral_2: 0px 4px 10px 0.1px #000000;
  --box-shadow_neutral_3: 0px 4px 10px 0.1px #000000;
  --box-shadow_neutral_4: 0px 8px 20px 0.1px #000000;
}

2、滤镜

滤镜，通常用来创建一个高级、趣味性的效果。

@mixin filter{
  --bg-color: #fff;
  backdrop-filter: saturate(50%) blur(4px);
  background-image: radial-gradient(transparent 1px,var(--bg-color) 1px)
}

3、背景

背景，通常用来显示区分视觉元素，达到视觉效果的层级和对比增强。

:root {
  --background-color_primary: #ffffff;
}

5、动画

动画是设计中常用的元素，通常用于引导和过渡，它需要遵循以下原则：自然、高效、克制。

辅助

1、空白方案

空白文案组件。

2、Loading 方案

Loading 组件。

3、动画方案

常用动画设计。

通用样式

1、文本省略

// 单行省略
@mixin ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
// 多行省略
@mixin line_clamp($line) {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: $line;
  -moz-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

2、滚动条

$thumb-color: #f0f2f5;
$track-color: #fff;
$thumb-width: 6px;
$thumb-radius: 3px;
html,
body {
  /* FireFox */
  scrollbar-color: $thumb-color transparent;
  scrollbar-width: thin;
  /* IE */
  scrollbar-face-color: $thumb-color;
  scrollbar-highlight-color: #fff;
  scrollbar-track-color: $track-color;
  scrollbar-base-color: #fff;
}
// WebKit
::-webkit-scrollbar {
  width: $thumb-width;
}
::-webkit-scrollbar-thumb {
  border-radius: $thumb-radius;
  background: $thumb-color;
}
::-webkit-scrollbar-track {
  background: $track-color;
}

3、内容提示说明

内容省略说明、内容解释说明等。

使用指南

1、下载 VSCode 插件

下载 CSS Variable Autocomplete, 安装使用。

2、CSS 使用

3、JavaScript 操作 CSS Var

// 修改全局 var
let root = document.querySelector(':root')
root.style.setProperty('--font-color_primary', '#fff');

// 修改某元素 var
this.$el.style.setProperty('--width', '120px')

// style eg:
div {
  width: var(--width);
  color: var(----font-color_primary);
}

4、theme 定制

组件库样式，采用 theme/theme.scss进行覆盖

组件库组件样式覆盖，采用style/components/[component].scss进行覆盖

全局样式，采用 global.scss进行约定

全局封装样式，采用 mixin.scss进行约定

全局变量，采用var.scss进行约定

全局动画，采用tansition.scss进行约定

本文正在参加「金石计划 . 瓜分6万现金大奖」