UI 设计中的“层次差异”体现:

  • 统一的颜色差异:通过色相/明度/饱和度/对比度,强调主次与状态。
    • 但要注意克制不当颜色的使用,避免喧宾夺主、花里胡哨
  • 布局的包含关系:利用分组、留白、卡片/容器层级,形成信息结构的视觉引导。

最佳实践

  • 卡片非常好用,尽可能用卡片聚类信息
    • 卡片标题和内容用主从色系,如蓝-灰
    • 背景颜色与内容颜色区分
      • 如内容白色,则背景就颜色深一点
  • 表单输入组