背景

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

需求

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

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

css reset h1 div container responsive

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

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

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

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

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

布局

header

.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

优先采用系统默认字体。

  // 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

UI规范.md 3.5 KB Permalink History Raw

背景

需求

布局