Ant Design 学习笔记

设计价值观

• 自然

1. 在感知和认知中，视觉系统扮演着最重要的角色，通过提炼自然界中的客观规律并运用到界面设计中，从而创建更有层次产品体验；同时，适时加入听觉系统、触觉系统等，创建更多维、更真实的产品体验。详见视觉语言

2. 在行为的执行中，利用行为分析、人工智能、传感器等一系列方式，辅助用户有效决策、减少用户额外操作，从而节省用户脑力和体力，让人机交互行为更自然。

• 确定

1. 保持克制： 能做，但想清楚了不做。设计者应当聚焦在最有价值产品功能打磨，并用尽可能少的设计元素将其表达。正如 Antoine de St.Exupery 所说：完美不在于无以复加，而在于无可删减，万事莫不如此.
2. 面向对象的方法： 探索设计规律，并将其抽象成『对象』，增强界面设计的灵活性和可维护性，同时也减少『设计者』的主观干扰，从而降低系统的不确定性。例如：色值换算、间距排版。
3. 模块化设计： 将复杂或者重复出现的局部封装成模块，提供有限接口与其他模块互动，最终全面减少系统的复杂度，进而增进可靠性以及可维护性。设计者可运用现有的组件/模板或者自行抽象可复用的组件/模板，节约无谓的设计且保持系统一致性，让『设计者』把创造力专注在最需要的地方。

原则

• 亲密性

1. 纵向间距关系
2. 横向间距关系

• 对齐

1. 文案类对其
2. 表单类对其
3. 数字类对其

• 对比

1. 主次关系对比
2. 总分关系对比
3. 状态关系对比

• 重复

1. 重复元素

• 直截了当

1. 页内编辑
2. 利用拖放

• 足不出户

1. 覆盖层
2. 嵌入层
3. 虚拟页面
4. 流程处理

• 简化交互

1. 实时可见工具
2. 悬停即现工具
3. 开关显示工具
4. 交互中的工具
5. 可视区域≠可点击区域

• 提供邀请

1. 静态邀请
2. 动态邀请

• 巧用过渡

1. 在视觉变化中保持上下文
2. 解释刚刚发生了什么
3. 改善感知性能
4. 自然运动

• 及时反应

1. 查询模式
2. 反馈模式

视觉

• 色彩

1. 色彩模型
2. 系统级色彩体系
3. 产品级色彩体系
4. 企业级产品设计中的色彩应用

• 布局

1. 统一画板
2. 适配
3. 网格单位
4. 关于栅格
5. 常用模度
6. 是启发，而非限制

• 字体

1. 字体家族
2. 主字体
3. 子阶与行高
4. 字重
5. 字体颜色
6. 建议

• 图标

1. 系统图标
2. 业务图标

模式

• 概览

1. 信息框架
2. 资源

• 文案

1. 语言
2. 语气
3. 大小写和标点符号

• 导航

1. 导航菜单
2. 面包屑
3. 标签页
4. 步骤条
5. 分页器

• 数据录入

1. 文本录入
2. 选择录入
3. 文件上传

• 数据展示

1. 表格
2. 折叠面板
3. 卡片
4. 走马灯
5. 树形控件
6. 时间轴

• 反馈

1. 提示信息
2. 过程反馈
3. 结果反馈

可视化

动效

参考资料

赏

请我喝杯咖啡~

支付宝

微信