1价值观
- 自然
- 确定
2原则
- 亲密性
- 标准间距-亲密性通过间距来确定间距可以分为小间距，中间距，大间距三种
- 非标准间距 - 通过基本间距（8px）为单位增减
- 栅格系统
- 对齐
- 小文案对齐 - 标题和内容对齐
- 表单对齐 - 冒号对齐
- 数字对齐 - 小数点对齐
- 对比
- 主次关系对比 - 强化重点项目/弱化次要项
- 总分关系对比 - 用排版决定 字体大小显示总分
- 状态关系对比 - 静态/动态 对比
- 重复
- 相同的元素在整个界面中不断重复，不仅可以有效降低用户的学习成-本，也可以帮助用户识别出这些元素之间的关联性。
- 重复元素可以是一条粗线、一种线框，某种相同的颜色、设计要素、设计风格，某种格式、空间关系等。
- 本质上而言是保持设计风格统一性
- 直接
- 用户应该可以通过所见到的元素直接交互（不要新启页面或者弹窗）
- 如果易读性为主则编辑按钮不应该太远
- 足不出户
- 用户因该更少的转换场景
- 用弹出框完成输入
- 简化操作
- 实时可见工具
- 悬停即现工具
- 开关显示工具
- 增大按钮点击范围而不是按钮可见大小
- 邀请-用户提示
-
静态提示
文本邀请-白板邀请-未完成邀请
-
动态提示
鼠标悬停 - 推断 - 更多内容
-
- 及时反映
- 定时更新
- 加载进度
- 反馈模式
- 自动完成
3视觉
- 色彩-（系统级-产品级）
- 品牌色
- 功能色
- 中性色
- 布局 - 秩序之美
- 统一画板（无用）
- 适配（灵活）
- 栅格
- 字体
-
font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
主字体和高
font-size 12px 14px 16px line-height 20px 22px 24px line-height = font-size+8px
-
字重 通常为400 500 600三种
-
文案
1. 表明立足点
2. 精简语句
不用提示用户已经知道内容
3. 表述一致
4. 重要类容对比度
5. 标点
感叹号-强烈的语境
复制代码补充
张鑫旭大神的一些原则 无宽度原则 20px高度原则