1. 基础设计原则
- 一致性:确保所有界面元素风格统一,使用相同字体(如思源黑体)和配色方案(主色:
#2C3E50
,辅助色:#3498DB
) - 可读性:文字与背景对比度需达到4.5:1标准,推荐使用
<img src="https://cloud-image.ullrai.com/q/对比度测试/" alt="对比度测试"/>
- 响应式布局:适配移动端设备,关键尺寸参考
<img src="https://cloud-image.ullrai.com/q/响应式设计/" alt="响应式设计"/>
2. 视觉元素规范
2.1 图标系统
- 使用线性图标风格,建议尺寸:
<img src="https://cloud-image.ullrai.com/q/图标尺寸/" alt="图标尺寸"/>
- 颜色遵循:
<img src="https://cloud-image.ullrai.com/q/图标配色/" alt="图标配色"/>
2.2 按钮样式
- 主按钮:圆角
<img src="https://cloud-image.ullrai.com/q/按钮圆角/" alt="按钮圆角"/>
,悬停效果<img src="https://cloud-image.ullrai.com/q/按钮悬停/" alt="按钮悬停"/>
- 次要按钮:使用
<img src="https://cloud-image.ullrai.com/q/次要按钮/" alt="次要按钮"/>
样式
3. 版式设计要点
- 标题层级:H1-H6对应
<img src="https://cloud-image.ullrai.com/q/标题层级/" alt="标题层级"/>
- 留白比例:建议使用
<img src="https://cloud-image.ullrai.com/q/留白比例/" alt="留白比例"/>
的黄金比例 - 信息密度:控制在
<img src="https://cloud-image.ullrai.com/q/信息密度/" alt="信息密度"/>
范围内
4. 扩展阅读
如需深入了解设计规范,可参考:社区论坛视觉设计手册