# 背景

UI 规范本来应该由 UI 设计师来确定，但在设计师缺失的情况下，仅靠程序员也能高效方便的做出一种中规中矩的 UI。  
本文以 Web 为设计目标，移动端原生应用有很大不同，但可以根据这些章节做对应修改。  
本文考虑能应用到 mobile first 的场景。

## 需求

程序员一般不具备整体的页面设计能力，所以需要提供的是明确的指令和模板。  
程序员不应该深入设计细节，应该通过表达意图，而不是具体细节来完成业务。  
意图：按钮：主要，大小。
默认对齐：文字在不同的容器内对齐方式不一样，按钮、表格、标题。元素之间的对齐。

- 常用的页面模板。登录，注册，主页，顶部导航，侧边导航，表单查询，表格。
- 按钮的类型。

css reset
h1 div container responsive

normal-text
rem: root em
em: container em
em 与组件库之间的关系
浏览器默认的字体是 16px。

字体大小会随着设备的大小而调整？必要性？设备大小，只影响布局？

块之间的间距。间距来标明各块之间的亲密度。
相同背景色的块之间的分隔线。

从已有的项目中抽取规范。

```s
.title-text {
  font-size: 22px;
  font-weight: 600;
  line-height: 32px;
  color: #1a1a1a;
}
```

## 布局

### header

```s
.bd-navbar {
  min-height: 4rem;
}
.navbar {
}
```

### 侧边栏 sidebar

### 底边 footer

### 默认的边距(margin/padding)

默认的边距为$spacer，$spacer 为 1rem。mt、py-2 等等为定制的边距。mt-n2 可以为负的 margin。

### 模块间距

一般的 padding 是 1rem。
column 的 padding 是 15px。但 rem/html_font-size 是 16px，这里做一下改变？

### 行高 line-height

### 段落间距 paragraph margin

### 间距的渐进（亲密性）

导航以颜色来区分。  
模块以线条分割。
标题与正文之间间隔 2rem。
正文的 line-height 为 1.5rem。
段落之间的分割为 1rem？

## 颜色

- 标题颜色 #000000
- 提示颜色 #666666
- 文字点击状态 #FF8900
- 文字悬浮颜色
- 链接颜色
- 链接悬浮变色
- 品牌色
- 正文色
- 标题色
- 副标题色
- 作者、日期等色
- 背景色
- 边框色
- 输入框填充色
- 阴影色
- 成功操作颜色
- 失败操作颜色

## 字体

### font-family

优先采用系统默认字体。

```s
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
```

### font-size

### font-weight

## 图片

### svg

### 应用本身的图片尺寸

顶部导航图标 48
个人中心指示性图标 32

### 图片与描述的间距

0.5rem？

### 按钮中图片与文字的间距，line-height，font-size

间距 0.5em ？
图片与文字高度一致

### 按钮中图片的变色

### 透明度

透明度可以用来对比重要和不重要，启用和禁用。

## 样例

## Bootstrap 链接

### 定制

### Reboot

### 颜色

### 表单对齐

### 表格对齐

### 水平居中

### 垂直居中

### 水平和垂直居中

### Utilities

### ElementUI

## TODO

- UI guildlines auto check
- flex class (bootstrap container class)
- media query breakpoint
- border / line-height
- color variables
- namespace
- 定制已有组件
- 科普：颜色对比度。像素，ppi。
- z-index 规划
- sketch=ui axure=product js/css/html=component
- 网页
- animation

https://zellwk.com/blog/rem-vs-em/
https://www.designbetter.co/design-systems-handbook