设计原则

基于「确定」和「自然」的设计价值观，我们制定了以下设计原则来指导具体的设计工作。

亲密性 Proximity

相关的信息应该在视觉上保持亲密，不相关的信息应该分离。

原则说明

亲密性是指将相关的项目组织在一起，移动这些项目，使它们的物理位置相互靠近，这样一来，相关的项目将被看作凝聚为一体的一个组，而不再是一堆彼此无关的片段。

应用场景

• 表单设计：相关的表单字段应该分组放置
• 导航设计：相关的导航项目应该归类组织
• 内容布局：相关的内容块应该在视觉上保持接近

对齐 Alignment

任何元素都不能在页面上随意安放，每个元素都应该与页面上的其他元素有某种视觉联系。

原则说明

对齐能够建立一种更有条理的外观，创建一个清晰、精巧而且清爽的外观。

对齐类型

• 左对齐：最常用的对齐方式，适合大多数文本内容
• 右对齐：常用于数字、价格等需要比较的内容
• 居中对齐：适合标题、按钮等需要突出的元素
• 两端对齐：适合大段文本内容

重复 Repetition

设计中的某些方面需要在整个作品中重复。

原则说明

重复能够统一并且加强设计，可以统一那些原本并不相关的部分。重复不仅仅意味着相同元素的重复，也可以是某些设计决策的重复。

重复元素

• 颜色重复：品牌色、辅助色的重复使用
• 字体重复：统一的字体族和字重
• 形状重复：按钮圆角、卡片阴影等
• 间距重复：统一的间距规范

对比 Contrast

页面上的不同元素之间要有对比效果。

原则说明

对比的目的是增强页面效果，同时有助于信息的组织。要想实现有效的对比，对比就必须强烈，不要畏首畏尾。

对比类型

• 大小对比：通过不同的字号、尺寸创建层次
• 颜色对比：使用对比色突出重要信息
• 字重对比：粗体与细体的对比
• 形状对比：直线与曲线、方形与圆形的对比

层次 Hierarchy

建立清晰的视觉层次，引导用户的视觉流程。

原则说明

层次帮助用户理解信息的重要性和阅读顺序，通过大小、颜色、位置等手段建立层次关系。

简洁 Simplicity

去除不必要的元素，保持设计的简洁性。

原则说明

简洁不是简单，而是在满足功能需求的前提下，去除多余的装饰和元素，让用户能够专注于核心内容。