糖心网站风格指南：视觉与交互规范（官方）
在数字时代，网站不仅是信息的载体，更是品牌形象的重要窗口。糖心网站一直致力于为用户提供舒适、直观且美观的使用体验。本篇官方指南将系统阐述糖心网站的视觉与交互规范，帮助设计师、开发者和内容创作者统一风格，打造一致且高品质的数字体验。
一、品牌视觉体系
1. 色彩规范
糖心网站采用温暖而现代的配色方案，以“甜美温润”为核心视觉特征：
- 主色：糖果粉 (#FFB6C1)，用于品牌标识及关键交互元素。
- 辅助色：薄荷绿 (#98FB98)、柠檬黄 (#FFFACD)，用于提示信息、按钮背景等。
- 中性色：象牙白 (#FFFFF0)、浅灰 (#F5F5F5)，用于页面底色和模块分割，确保内容可读性。
2. 字体规范
- 标题字体：苹方 Bold，强调视觉层次感。
- 正文字体：苹方 Regular，保证长文本阅读的舒适性。
- 字号与行距：标题 ≥24px，正文 16px，行高 1.5，确保清晰、整洁的排版。
3. 图标与图像
- 图标采用圆润简洁风格，与整体视觉保持统一。
- 图片风格建议色调明亮、自然，避免过于复杂或高对比度的处理，以保持整体视觉的温暖感。
二、界面交互规范
1. 按钮与链接
- 主要按钮：糖果粉背景，白色文字，带轻微圆角，悬停时颜色加深。
- 次要按钮：透明底 + 糖果粉边框，悬停时填充主色。
- 文本链接：强调色下划线，鼠标悬停显示颜色渐变效果。
2. 导航设计
- 顶部导航固定，确保用户随时可访问核心功能。
- 菜单分层清晰，子菜单可折叠，避免视觉负担。
- 导航标签文字简洁，避免冗长表述。
3. 动效与反馈
- 按钮点击、表单提交等操作有轻微反馈动效，增强交互感。
- 弹窗、提示信息出现与消失使用渐变或缩放过渡，保持页面流畅性。
三、内容排版与模块规范
1. 模块划分
- 页面模块采用卡片式布局，内容块间保持适度空白。
- 不同模块通过背景色、边框或阴影区分，形成清晰的层次感。
2. 图片与文字搭配
- 图片与文字比例控制在 40:60 至 60:40 之间，确保信息传达有效且视觉平衡。
- 重要信息使用强调色或加粗字体突出，但不宜过多，以免造成视觉疲劳。
3. 表单与输入控件
- 输入框圆角设计，边框颜色与主题色统一。
- 表单状态提示（错误、成功）颜色清晰明确，确保用户操作无障碍。
四、响应式设计与可访问性
- 页面对桌面、平板、移动端自适应，保证跨设备一致体验。
- 高对比度模式、键盘导航及屏幕阅读器支持，确保无障碍访问。
- 图片添加替代文字，表单控件标签清晰，遵循可访问性最佳实践。
五、总结
糖心网站风格指南以“温暖、简洁、易用”为核心，通过视觉和交互的统一规范，为用户提供舒适、流畅的体验。设计与开发团队可依照本指南保持风格一致，帮助品牌在数字世界中建立独特而可信赖的形象。
