电商平台风格指南.docxVIP

电商平台风格指南

一、电商平台风格指南概述

电商平台风格指南旨在为平台用户提供一致、专业且具有吸引力的视觉和交互体验。本指南涵盖色彩、字体、布局、图标、图片等关键设计元素，确保平台整体风格统一，提升用户满意度和品牌形象。

二、色彩规范

（一）主色调

1.品牌蓝：007bff，用于导航栏、按钮、强调元素，体现科技感和信任感。

2.辅助色：28a745（绿色），用于成功提示、优惠券标识；dc3545（红色），用于警告和删除操作。

（二）辅助色调

1.浅灰色：f8f9fa，用于背景和分隔线，保持界面简洁。

2.深灰色：343a40，用于次要文本和说明，降低视觉干扰。

（三）禁用色

1.避免使用与品牌色冲突的颜色，如ff0000（红色）或0000ff（蓝色）作为主色调。

三、字体规范

（一）标题字体

1.主标题：思源黑体（思源黑体SC），字号24-36px，用于页面主标题和分类名称。

2.副标题：思源宋体（思源宋体TC），字号18-20px，用于模块标题和说明文字。

（二）正文字体

1.正文：微软雅黑（微软雅黑UI），字号14-16px，确保阅读流畅性。

2.注释：微软雅黑（微软雅黑UI），字号12px，颜色为深灰色343a40。

（三）特殊文本

1.按钮文字：加粗显示，字号16px，与主色调007bff保持一致。

四、布局规范

（一）页面结构

1.头部：包含logo、搜索栏、购物车图标，高度固定60px。

2.导航栏：分类菜单横向排列，悬停时展开子分类，使用下拉动画。

3.主体区域：采用栅格布局，网格间距20px，适应不同屏幕尺寸。

（二）商品展示

1.列表页：每行3-4个商品卡片，图片高度固定200px，标题字号16px。

2.详情页：图片占据左侧60%区域，右侧30%为商品信息和购买按钮。

（三）响应式设计

1.移动端：头部菜单转为汉堡式，商品卡片改为垂直排列。

2.平板端：保持栅格布局，调整网格数为2列。

五、图标规范

（一）图标风格

1.统一风格：使用线性图标（如FontAwesomeFree），线条粗细1.5px，颜色与主色调一致。

2.常用图标：购物车、收藏、搜索、用户头像等，确保图标语义清晰。

（二）图标使用场景

1.导航栏：购物车图标显示数量（如“??12”），收藏图标高亮显示已收藏状态。

2.按钮：删除操作使用红色垃圾桶图标，确认操作使用绿色对勾图标。

六、图片规范

（一）商品图片

1.尺寸要求：主图1000px×1000px，缩略图300px×300px，保持高清晰度。

2.风格统一：商品主图需采用统一白底或灰底背景，避免杂乱。

（二）装饰图片

1.Banner图：宽度1920px，高度500px，主色调与品牌色一致。

2.页面分割：使用透明度50%的色块或线条，保持界面层次感。

七、交互规范

（一）按钮设计

1.状态分类：默认、悬停、点击、禁用，分别对应不同颜色深浅和透明度。

2.尺寸规范：主按钮宽120px×40px，次按钮宽100px×30px。

（二）动画效果

1.过渡动画：页面切换使用0.3s淡入淡出，图片放大使用0.2s缓动效果。

2.加载状态：使用旋转的灰色加载图标，直径50px，边框宽2px。

八、其他规范

（一）可访问性

1.色弱模式：提供高对比度模式（黑底白字），点击右上角眼镜图标切换。

2.键盘导航：所有交互元素需支持Tab键聚焦，焦点框为2px虚线。

（二）命名规范

1.类名命名：如`.btn-primary`（主按钮）、`.text-subtitle`（副标题），避免使用中文或拼音。

2.文件命名：图片文件名格式“模块-类型-描述（如banner-homepage）”。

本指南适用于所有平台设计团队，如有疑问可参考附录中的设计稿示例。定期更新以适应市场变化，建议每季度复核一次。

一、电商平台风格指南概述

电商平台风格指南旨在为平台用户提供一致、专业且具有吸引力的视觉和交互体验。本指南涵盖色彩、字体、布局、图标、图片、交互等关键设计元素，确保平台整体风格统一，提升用户满意度和品牌形象。通过遵循本指南，设计团队可以高效协作，减少沟通成本，同时确保最终产品符合品牌调性。

二、色彩规范

（一）主色调

1.品牌蓝：007bff，作为平台的核心色，应用于以下场景：

(1)导航栏的默认和激活状态按钮；

(2)主要操作按钮（如“加入购物车”“立即购买”）；

(3)页面分隔线和提示框的边框。

示例：登录按钮背景色为007bff，文字颜色为白色ffffff，悬停时变为0056b3。

2.辅助色：

(1)28a745（绿色）：用于成功提示（如“订单提交成功”）、优惠券标识、环保商品标签。

(