Better

最近同设计组统一前端样式的一些基本规范，否则不同的设计师容易设计出截然不同的产品，导致产品看上去很山寨。好好阅读了一下 Ant Design 设计部分，理解了背后设计的一些原因，感触还是挺深的。

前言

今天仔细阅读了 Ant Design 的设计部分内容。和代码编写真的是相通的

• 什么样的代码是好的代码 vs 判断设计的好坏
• 编程思想与原则 vs 践行设计价值观中行之有效的向导或提示
• 编程设计模式 vs 设计模式（具体问题的一般解决方案）

全局样式

关于色彩

• Ant Design 提供了一个色彩生成算法，你只需要选择一个主色，算法会为你生成完整的色板
• 品牌色
  • 建议选择色板从浅至深的第六个颜色作为主色
  • 交互状态（默认、悬停、点击和不可用）
  • 其他应用场景：关键行动点、重要信息高亮、图形化等
• 功能色：成功、警告、危险、Link（链接）
• 中性色
  • 合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。
  • 需要考虑深色背景和浅色背景差异
  • 常用场景：文字颜色（标题、主要文字、次要文字、辅助、禁用、展示）、边框颜色、分割线颜色、背景色

关于布局

• 统一画板：蚂蚁中台设计团队统一的画板尺寸为 1440
• 适配：根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局
• 网格单位：网格的基数为 8，不仅符合偶数的思路同时能够匹配多数主流的显示设备
• 关于栅格：采用 24 栅格体系
• 常用模度：提取了一组可以用于 UI 布局空间决策的数组，他们都保持了 8 倍数的原则、具备动态的韵律感

关于文字

• 字体
  • 对字体进行统一，力求在各个操作系统下都有最佳展示效果
  • Ant Design 字体家族中优先使用系统默认的界面，同时提供一套利于屏显的备用字体库
  • 数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体
• 字号
  • Ant Design 对主字号从 12 上升到 14，以保证在多数常用显示器上的用户阅读效率最佳
  • 字阶的选择尽量控制在 3-5 种之间，保持克制的原则，少即是多
• 行高：和字体保持一定的关系
• 字重：微软雅黑没有 500 的字重

关于边框

• 边框颜色
• 圆角大小
• 投影
  • 第 0 层：物体紧贴地面，投影与物体重叠，在界面中不对此层定义阴影值，如输入框
  • 第 1 层：低层级，此时物体被操作（悬停、点击）触发为悬浮状态，操作完成后，悬停状态反馈也跟随消失，物体回归到原有层级中，如卡片悬浮
  • 第 2 层：中层级，物体与基准面的关系是展开并跟随，如下拉面板
  • 第 3 层：高层级，物体的运动和其他层级没有关联，如对话框
• 阴影值与方向
  • 离地面越远的物体，产生的阴影颜色越淡、模糊度越高、面积越大；反之则颜色更深、模糊度越低、面积越小
  • 阴影方向问题：阴影向下是常规场景的用法。还有向上（底部导航或工具栏）、向左（右边导航栏、抽屉、固定表格栏）、向右（左边导航栏、抽屉、固定表格栏）

特殊的输入框状态：默认、输入结果、提示错误、禁用、获取焦点

设计模式

关于原则

• 亲密性
  • 纵向间距关系：规定大中小三个间距
  • 横向间距关系：采用栅格布局来排布组件，组件内部间距建议和纵向间距保持一致
• 对齐
  • 在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线
  • 文案类对齐、表单类对齐、数字类对齐
• 对比
  • 分清主次关系：注意在一些需要用户慎重决策的场景中，系统应该保持中立，不能替用户或者诱导用户做出判断
  • 总分关系对比：汇总与分项
  • 状态关系对比
• 重复：针对列表项
• 直截了当：需要在哪里输出，就要允许在哪里输入，主要指编辑
  • 页内编辑：单击编辑、文字链/图标编辑
  • 利用拖放
• 足不出户：能在这个页面解决的问题，就不要去其它页面解决
  • 覆盖层：避免滥用 Modal 进行二次确认，应该勇敢的让用户去尝试，给用户机会「撤销」即可
    • 二次确认覆盖层
    • 详情覆盖层
    • 输入覆盖层
  • 嵌入层
    • 列表嵌入层
    • 标签页
  • 流程处理
    • 渐进式展示：基于用户的操作，渐进式展现不同的操作选项
    • 配置程序
    • 步骤条
• 简化交互：如果用户鼠标移动距离越少、对象相对目标越大，那么用户越容易操作。通过运用上下文工具（即：放在内容中的操作工具），使内容和操作融合，从而简化交互。
  • 实时可见工具：某个操作非常重要
  • 悬停即现工具：某个操作不那么重要
  • 开关显示工具：某些操作只需要在特定模式时显示
  • 可视区域 ≠ 可点击区域：当需要增强按钮的响应性时，可通过增加用户点击热区的范围，而不是增大按钮形状，从而增强响应性，又不缺失美感。移动端尤其适用
• 提供邀请
  • 很多富交互模式，如拖放、行内编辑、上下文工具都有一个共同问题，就是缺少易发现性，因此提供邀请是完成人机交互的关键所在
  • 静态邀请
    • 引导操作邀请：文本邀请、白板式邀请、未完成邀请
    • 漫游探索邀请：介绍新功能
  • 动态邀请
    • 悬停邀请：在鼠标悬停期间提供邀请
    • 推论邀请：用于交互期间，合理推断用户可能产生的需求
    • 更多内容邀请：用于邀请用户查看更多内容
• 巧用过渡
  • 人脑灰质会对动态的事物（eg：移动、形变、色变等）保持敏感
  • 视图变化中保持上下文
    • 滑入与滑出：可以有效构建虚拟空间
    • 传送带：可极大地扩展虚拟空间
    • 折叠窗口：在视图切换时，有助于保持上下文，同时也能拓展虚拟空间
  • 解释刚刚发生了什么
    • 对象增加：在列表/表格中，新增了一个对象
    • 对象删除：在列表/表格中，删除了一个对象
    • 对象更改：在列表/表格中，更改了一个对象
    • 对象呼出：点击页面中元素，呼出一个新对象
• 即时反应
  • 查询模式：自动完成、实时搜索
  • 反馈模式：实时预览、渐进式展示、进度指示
  • 点击刷新：告知用户有新内容，并提供按钮等工具帮助用户查看新内容
  • 定时刷新：无需用户介入，定时展示新内容

关于按钮选择

• 常规按钮：用于非主要动作。如果不确定选择哪种按钮，次按钮永远是最安全的选择
• 主按钮：突出“完成”、“推荐”类操作；一个按钮区最多使用一个主按钮
• 文字按钮：弱化的按钮，采用更轻量的按钮样式，可用于需大面积展示按钮场景
• 图标按钮
  • 需要在较小的空间内展示尽量多的按钮
  • 使用纯图标按钮必须有 Tooltip 提示按钮含义
• 按钮中添加图标：用于对按钮含义补充解释，提高按钮识别效率
• 特殊按钮
  • 虚线按钮：引导用户在一个区域内添加内容
  • 危险按钮：警示用户该操作存在风险
  • 幽灵按钮：置于复杂或较深的背景中，避免按钮突兀地破坏背景的整体性
  • 行动号召按钮：最大可以将按钮放宽到与父区域等宽，一个屏幕空间中，建议只有一个行动号召按钮

关于空状态

• 空状态应给予提示，帮助让用户了解空状态原因，避免产生误解与迷失
• 给予用户推荐操作提示，帮助用户摆脱空状态

关于结果页

• 标题构成建议为「对象+动作+结果/状态」或「动作+结果/状态」
• 操作引导建议不超过 2 项，过多操作会对用户选择造成困扰
• 轻量的反馈不建议使用结果页，可以使用全局提示、警告提示、通知提醒框等交互方式

关于异常页

• 配图、异常代码/问题、异常描述、建议操作
• 404、403、500
• 加载失败：当页面因为网络等各种原因加载内容失败时展示，一般结合重试操作。
• 设计建议：设计页面时不能只关注理想状态，应完整考虑各类突发场景，已防止体验中断
  • 理想状态
  • 部分状态：部分模块不存在或部分内容为空状态
  • 加载状态：用 Spin 或 Skeleton
  • 错误状态：系统错误、无权限等
  • 空状态：内容完全为空的状态，建议使用引导类的空状态提示，如果是新用户参考使用新人引导页。

开放变量

关于变量命名规范

• 颜色：object-[status]-color-[desc]-[mode]-[index]
• 大小：object-[lg|md|base|sm|xs|xxs]

阅读 default.less 后总结几个东西

• 并不是全部的组件都按照规范的定义来，也有一些组件的特殊情况，直接定义写了固定的大小和颜色
• 关注相对值：比如很多值都是基于 @font-size-base 计算而来
• antd 认为 border 的设置会占用 padding 的值，因此会看到一些针对水平或垂直的设定使用 @padding-md - 1px 计算的方式
• antd 总结了三个高度规则，分别为 32/40/24，分别对应组件的 size 参数：default/lg/sm，但只是针对常驻 UI，比如一些通过交互展开的 UI，比如 Select 的下拉内容项，都是写死的 32 的高度（22 的行号 + 上下 5 的补白），其实 antd 有些地方为了满足高度的要求，垂直方向的 padding 是通过计算而来，公式为 (height - fontSize * relativeLineHeight) / 2 - borderWidth

严格来说，除了一些很特殊的情况，都必须使用规范中定义的变量，针对特殊情况，也建议在当前文件顶部先定义好有语义的变量使用

主题定制

修改原则

• 如果 antd/es/styles/themes/default.less 提供了定制的变量，则优先选择此方式修改
• 如果上述方式目的达不到，则通过全局样式覆盖的方式（应尽可能少，因为 antd 的迭代可能会改变 className 名称，导致无效。同时也不利于维护）

考虑到不同版本之间（哪怕是小版本更新）还是会有些许差别，直接统一个项目组使用同一个版本的 antd，要升级一起升级

参考统一规则

├── antd.less          # antd 全局样式覆盖
├── antdThemeConfig.js # antd 样式变量的覆盖
├── base.less          # 限定字体族、滚动条等基础样式
├── media.less         # 媒体查询工具，用于设置响应式
├── mixins.less        # 常用的工具：比如溢出省略号、清除浮动等
├── reset.less         # 用于抹平不同浏览器之间的差异
├── variables.less     # 规范定义的变量
├── global.less        # 汇总了对外输出的全局性样式，目前包括 antd.less/base.less/reset.less

总结

定制规范并不是一件难的事情，难的在于一个团队之间，如何保持意识统一并执行。每个成员都会有一些不同的看法，或者并没有严格执行，从而导致规范流于形式，最终草草收场，然后一直反复！