|
@@ -0,0 +1,184 @@
|
|
|
|
|
+# 背景
|
|
|
|
|
+
|
|
|
|
|
+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
|
Michael Wang