antd设计思想

antd 设计原则:

  • 亲密性。小 中 大 y = 8 + 8*n
  • 对其。文案对齐,表单对齐,数字对齐
  • 对比。增强视觉效果,要大胆的使用对比效果。
    • 主次关系对比
    • 总分关系对比
    • 状态关系对比
    • 重复。重复的元素可以降低用户的学习成本,识别元素之间的关联性
  • 直接了当。页内编辑;利用拖放
  • 足不出户。就是使得用户的编辑能够尽可能的方便,
  • 简化交互。交互简单,多为用户考虑,所见即为其提供快速可得
  • 提供邀请。过渡邀请。
  • 巧用过渡。添加一些过渡,使得交互更加自然
  • 即时反应。对用户的输入立即做出回应

视觉:

  • 色彩统一,指示明确
  • 布局
    • 统一画板尺寸
    • 适配方案,中台系统主要的分辨率为 1920,1440,1366。左右适配、上下适配
    • 网格单位
    • 常用模度
    • 启发而非限制。所有的设计有一定的原则,但都不是绝对,作为一种设计语言,启发式的来引导设计,而非完全定义设计
  • 字体。主字体,字重,颜色。
  • 图标。图标的设计非常的重要。样式统一,化繁为简

设计模式:

  • 文案。语言组织明确,组织思考角度,何时为用户角度,何时为开发角度。文案细节,注意细节
  • 导航。多种导航方式结合使用,根据业务逻辑采用合适的导航样式
  • 数据录入。数据录入就紧跟着交互提示。各种类型的数据录入方式
  • 数据展示。表格,折叠面板,卡片,走马灯,树形控件,时间轴
  • 反馈。提示信息,过程反馈,结果反馈

可视化

动效