antd 设计原则:
- 亲密性。小 中 大 y = 8 + 8*n
- 对其。文案对齐,表单对齐,数字对齐
- 对比。增强视觉效果,要大胆的使用对比效果。
- 主次关系对比
- 总分关系对比
- 状态关系对比
- 重复。重复的元素可以降低用户的学习成本,识别元素之间的关联性
- 直接了当。页内编辑;利用拖放
- 足不出户。就是使得用户的编辑能够尽可能的方便,
- 简化交互。交互简单,多为用户考虑,所见即为其提供快速可得
- 提供邀请。过渡邀请。
- 巧用过渡。添加一些过渡,使得交互更加自然
- 即时反应。对用户的输入立即做出回应
视觉:
- 色彩统一,指示明确
- 布局
- 统一画板尺寸
- 适配方案,中台系统主要的分辨率为 1920,1440,1366。左右适配、上下适配
- 网格单位
- 常用模度
- 启发而非限制。所有的设计有一定的原则,但都不是绝对,作为一种设计语言,启发式的来引导设计,而非完全定义设计
- 字体。主字体,字重,颜色。
- 图标。图标的设计非常的重要。样式统一,化繁为简
设计模式:
- 文案。语言组织明确,组织思考角度,何时为用户角度,何时为开发角度。文案细节,注意细节
- 导航。多种导航方式结合使用,根据业务逻辑采用合适的导航样式
- 数据录入。数据录入就紧跟着交互提示。各种类型的数据录入方式
- 数据展示。表格,折叠面板,卡片,走马灯,树形控件,时间轴
- 反馈。提示信息,过程反馈,结果反馈