网站视觉设计规范

网站视觉设计规范一、概述

网站视觉设计规范旨在确保网站整体视觉效果的一致性、美观性及用户体验的优化。通过明确设计标准，可以有效提升品牌形象，降低用户认知成本，并促进网站的长期发展。本规范涵盖色彩、字体、布局、图标、图片等关键设计元素，适用于网站所有页面及组件。

二、设计原则

（一）一致性原则

1.保持色彩体系、字体风格、图标样式等元素在网站各页面中的统一性。

2.核心布局结构（如页头、导航栏、页脚）应遵循相同的设计模式。

3.通过设计系统（DesignSystem）管理组件样式，确保复用性。

（二）用户导向原则

1.优先考虑用户浏览习惯，关键信息（如行动按钮）应显眼且易于交互。

2.避免复杂或炫目的设计，保持界面简洁清晰。

3.针对不同设备（桌面、平板、手机）适配视觉元素。

（三）品牌强化原则

1.使用品牌标准色及辅助色，增强视觉辨识度。

2.品牌Logo及辅助图形应按规定尺寸和位置展示。

3.通过视觉层次突出品牌核心价值。

三、色彩规范

（一）主色系

1.品牌主色：0056b3（示例，需根据实际品牌调整）

-应用场景：页头背景、重点按钮、品牌标识。

2.辅助色：f5f5f5（示例）

-应用场景：页面背景、分隔线。

（二）中性色

1.黑色：333333

-应用场景：正文文字、次要说明。

2.白色：ffffff

-应用场景：背景底色、卡片组件。

（三）强调色

1.警告色：ff4d4f

-应用场景：错误提示、危险操作按钮。

2.成功色：52c41a

-应用场景：确认信息、操作成功提示。

四、字体规范

（一）标题字体

1.主标题：思源黑体（思源黑体CN），字号16px-24px

-应用场景：页面主标题、模块标题。

2.副标题：思源宋体（思源宋体CN），字号14px-16px

-应用场景：二级标题、内容分类。

（二）正文字体

1.正文：思源宋体（思源宋体CN），字号12px，行高1.5

-应用场景：文章内容、说明文字。

（三）特殊说明

1.字体颜色：正文为333333，标题为000000。

2.避免使用过多字体，建议控制在2-3种。

五、布局规范

（一）网格系统

1.采用12列网格布局，栅格宽度为60px。

2.页面宽度：1920px（示例），响应式断点：1200px、768px、480px。

（二）页面结构

1.顶部区域：页头（导航栏+Logo）高度60px。

2.主体区域：左侧导航（固定或自适应）+主内容区+右侧广告（可选）。

3.底部区域：页脚高度50px，包含版权信息、联系方式。

（三）间距规范

1.元素间距：16px（小间距）、24px（标准间距）、32px（大间距）。

2.组件外边距：统一使用24px。

六、图标规范

（一）图标风格

1.统一使用线性图标（无填充）或扁平化风格。

2.图标颜色：主色系0056b3，中性色666666。

（二）常见图标

1.导航图标：箭头、用户、设置等，尺寸16x16px。

2.功能图标：搜索、收藏、删除等，尺寸20x20px。

（三）使用要求

1.图标应避免旋转或变形，保持清晰度。

2.图标间距与文字间距保持一致。

七、图片规范

（一）图片质量

1.网页图片分辨率不低于72dpi，文件大小不超过200KB。

2.原图比例：16:9（横幅）、1:1（方图）、4:3（场景图）。

（二）尺寸规范

1.Banner：1920px宽，300px高（示例）。

2.内容图片：800px宽，450px高（示例）。

（三）使用要求

1.图片需进行压缩处理，避免影响页面加载速度。

2.重要图片需设置alt属性，提高可访问性。

八、交互规范

（一）按钮设计

1.主按钮：填充色（主色）+白色文字，圆角4px。

2.次按钮：描边色（主色）+主色文字，圆角4px。

3.按钮状态：正常（默认）、悬停（加深）、点击（描边变实）。

（二）表单设计

1.输入框：边框dddddd，聚焦边框0056b3。

2.错误提示：红色文本+图标，位置在输入框下方。

（三）动画效果

1.过渡效果：渐变动画，时长200ms。

2.禁用状态：透明度降低至0.5。

九、执行与维护

（一）设计工具

1.主流工具：Figma、Sketch、AdobeXD。

2.设计稿需标注颜色代码、字体样式、间距数值。

（二）版本管理

1.每次更新需记录变更内容，并同步至设计系统。

2.定期（如每季度）审查规范执行情况。

（三）培训要求

1.新团队成员需通过设计规范培训考核。

2.提供设计规范文档电子版及在线示例库。

一、概述

网站视觉设计规范旨在确保网站整体视觉效果的一致性、美观性及用户体验的优化。通过明确设计标准，可以有效提升品牌形象，降低用户认知成本，并促进网站的长期发展。本规范涵盖色彩、字体、布局、图标、图片、交互、动效等关键设计元素，适用于网站所有页面及组件。遵循本规范有助于跨部门协作，减少沟通成本，保证最终产品符合预期标准。

二、设计原则

（一）一致性原则

1.保持色彩体系、字体风格、图标样式等元素在网站各页面中的统一性。

具体操作：所有页面需使用品牌主色、辅助色及中性色体系，禁止擅自添加非规范颜色。字体选择、字号大小、粗细、行距等需统一，例如标题层级（H1-H6）的样式应全站保持一致。图标风格（线性、面性、填充）和尺寸需统一，避免出现多种风格的图标混用。

2.核心布局结构（如页头、导航栏、页脚）应遵循相同的设计模式。

具体操作：页头高度、导航栏位置和样式、搜索框位置、页脚内容区域划分等，应在不同页面中保持高度一致。例如，页头始终位于页面顶部居中，包含Logo、主导航和搜索框。

3.通过设计系统（DesignSystem）管理组件样式，确保复用性。

具体操作：建立可复用的UI组件库，如按钮（主按钮、次按钮、文本按钮）、输入框、卡片、下拉菜单等，并定义其默认样式、状态（正常、悬停、聚焦、禁用）及响应式适配规则。开发团队需基于此组件库实现前端界面。

（二）用户导向原则

1.优先考虑用户浏览习惯，关键信息（如行动按钮）应显眼且易于交互。

具体操作：行动按钮（Call-to-Action,CTA）通常使用主色填充，置于页面重要位置（如内容末尾、弹窗中央），并使用对比色文字（如白色）确保可读性。避免将重要按钮隐藏在深层菜单或使用弱化样式。

2.避免复杂或炫目的设计，保持界面简洁清晰。

具体操作：遵循“少即是多”原则，减少不必要的装饰元素和动画效果。信息层级清晰，通过留白、字体大小和粗细区分主次内容。例如，正文内容字号为14px，标题字号更大并加粗。

3.针对不同设备（桌面、平板、手机）适配视觉元素。

具体操作：采用响应式设计，设置不同断点（如桌面≥1200px、平板768px-1199px、手机＜768px）下的布局调整规则。例如，桌面版导航为横向菜单，平板版可转为汉堡菜单，手机版为全屏下拉菜单。

（三）品牌强化原则

1.使用品牌标准色及辅助色，增强视觉辨识度。

具体操作：品牌主色用于Logo、关键背景和强调元素；辅助色用于次要背景、分隔线、图标描边等。例如，主色0056b3用于按钮和重要图形，辅助色f5f5f5用于卡片背景。

2.品牌Logo及辅助图形应按规定尺寸和位置展示。

具体操作：Logo标准尺寸（如100px宽）、位置（页头左上角）及使用场景（官网首页、下载页）需严格规定。辅助图形（如品牌吉祥物、背景纹理）的使用需符合预设规范，避免变形或颜色失真。

3.通过视觉层次突出品牌核心价值。

具体操作：使用色彩饱和度、对比度、字体风格等手段强调品牌特点。例如，若品牌调性为科技感，可使用冷色调主色、无衬线字体和简洁几何图形。

三、色彩规范

（一）主色系

1.品牌主色：0056b3（示例，需根据实际品牌调整）

应用场景：

页头背景、主导航栏选中态背景。

主要行动按钮（如“立即购买”、“注册”）的填充色。

品牌Logo的主要色块。

重要信息提示框（如成功、错误）的边框或背景色。

2.辅助色：f5f5f5（示例）

应用场景：

卡片式内容背景、模态框（弹窗）背景。

网格系统的分隔线、内容列表的分隔线。

图标或图形的描边色（次要状态）。

（二）中性色

1.黑色：333333

应用场景：

正文主体文字、段落说明文字。

次要按钮文字、提示性文本（如帮助链接）。

表单标签文字（如“用户名：”）。

2.白色：ffffff

应用场景：

页面背景、卡片或模态框的背景色。

图标（在深色背景上时）的填充色。

成功状态提示文字（如“操作成功”）。

（三）强调色

1.警告色：ff4d4f

应用场景：

危险操作按钮（如“删除”）。

错误提示信息（如表单验证失败）。

危机状态指示（如库存不足）。

2.成功色：52c41a

应用场景：

成功操作反馈（如“已保存”）。

促销信息（如“限时优惠”）。

选中状态指示（如复选框勾选后）。

（四）状态色

1.禁用色：d9d9d9

应用场景：不可点击的按钮、不可编辑的输入框。

具体样式：按钮为灰色填充+灰色边框，文字为666666。

2.聚焦色：40a9ff

应用场景：输入框、按钮、可交互元素在获得焦点时。

具体样式：细框线（1-2px）围绕元素，颜色为聚焦色。

四、字体规范

（一）标题字体

1.主标题：思源黑体（思源黑体CN），字号16px-24px

应用场景：

页面主标题（H1）。

侧边栏模块标题。

内容列表标题（H2）。

具体样式：字号16px为标准，加粗；22px为较大标题（H2级）；24px为最大标题（H1级），加粗。行高1.2-1.4。

2.副标题：思源宋体（思源宋体CN），字号14px-16px

应用场景：

H3级标题。

内容段落首句加粗。

描述性文字（如产品特点）。

具体样式：字号14px为标准，正常粗细；16px为较大副标题，中等加粗。行高1.3-1.5。

（二）正文字体

1.正文：思源宋体（思源宋体CN），字号12px，行高1.5

应用场景：

文章详情页内容。

产品描述。

帮助文档。

具体样式：字号12px，标准行高1.5，首行缩进2个字符。段落间距：段前段后各16px。

（三）特殊说明

1.字体颜色：正文为333333，标题为000000。

应用场景：确保文字与背景有足够对比度，保证可读性。标题色可根据品牌调性微调（如品牌色0056b3的深色系）。

2.字体粗细：

正文字体：正常（400），强调（600）。

标题字体：常规（400）、中等（500）、加粗（700）。

3.避免使用过多字体：建议控制在2-3种（标题、正文、辅助）。

五、布局规范

（一）网格系统

1.采用12列网格布局，栅格宽度为60px。

具体操作：设计稿或代码实现时，以60px为基本单位进行布局。例如，一个内容区域宽度为360px（6列）。

2.页面宽度：1920px（示例），响应式断点：1200px、768px、480px。

应用场景：

1920px：桌面端全宽布局。

1200px-1199px：平板端调整侧边栏宽度或隐藏某些元素。

768px-767px：手机端转为单列布局，导航折叠。

＜480px：超小屏优化，按钮宽度优先内容而非图标。

（二）页面结构

1.顶部区域：页头（导航栏+Logo）高度60px。

具体布局：Logo居左，宽度固定（如100px）；主导航居中，水平排列；搜索框/次要功能（如登录）居右。

2.主体区域：左侧导航（固定或自适应）+主内容区+右侧广告（可选）。

桌面端：左侧导航固定，主内容区占8-9列，右侧广告占3列。

平板端：左侧导航可收起，主内容区占全屏9-10列。

手机端：左侧导航转为顶部下拉菜单，主内容区占全屏。

3.底部区域：页脚高度50px，包含版权信息、联系方式。

具体布局：左侧为版权声明；中间为网站导航链接；右侧为联系方式或社交媒体图标。

（三）间距规范

1.元素间距：16px（小间距）、24px（标准间距）、32px（大间距）。

应用场景：

小间距：按钮内部边距、图标与文字间距。

标准间距：段落间距、卡片与卡片间距。

大间距：模块与模块间距、栅格间隙。

2.组件外边距：统一使用24px。

具体操作：所有独立组件（如按钮、输入框、卡片）的外边距设置为24px，保证视觉平衡。

六、图标规范

（一）图标风格

1.统一使用线性图标（无填充）或扁平化风格。

具体操作：全站图标风格保持一致，避免混合使用实心填充、渐变或拟态图标。推荐使用线性图标（描边+白色填充）或纯色填充的扁平图标。

2.图标颜色：主色系0056b3，中性色666666。

应用场景：

主色0056b3：导航图标、状态图标（如成功、警告）。

中性色666666：次要功能图标（如设置、信息）。

（二）常见图标

1.导航图标：箭头、用户、设置等，尺寸16x16px。

应用场景：导航菜单、面包屑、设置面板。

2.功能图标：搜索、收藏、删除等，尺寸20x20px。

应用场景：搜索框、收藏夹、删除按钮。

3.状态图标：加载中（旋转圆环）、成功（对勾）、错误（警告三角形）。

应用场景：异步操作反馈、表单验证结果。

（三）使用要求

1.图标应避免旋转或变形，保持清晰度。

具体操作：图标旋转角度统一（如箭头向下为加载中），避免倾斜或扭曲。矢量图标优先，确保缩放不失真。

2.图标间距与文字间距保持一致。

应用场景：图标旁有文字时，间距使用标准间距24px。

七、图片规范

（一）图片质量

1.网页图片分辨率不低于72dpi，文件大小不超过200KB。

具体操作：使用图片压缩工具（如TinyPNG、ImageOptim）优化文件大小，同时保证视觉质量。

2.原图比例：16:9（横幅）、1:1（方图）、4:3（场景图）。

应用场景：

Banner：16:9，1920px宽。

社交媒体分享图：1:1，适合封面展示。

产品展示：4:3，突出细节。

（二）尺寸规范

1.Banner：1920px宽，300px高（示例）。

应用场景：网站首页顶部横幅。

2.内容图片：800px宽，450px高（示例）。

应用场景：文章详情页、产品列表页的主图。

（三）使用要求

1.图片需进行压缩处理，避免影响页面加载速度。

具体操作：优先使用JPG格式（照片类），PNG格式（图标类）。

2.重要图片需设置alt属性，提高可访问性。

应用场景：所有非装饰性图片（如产品图、说明图）需添加alt描述，如“智能手表功能展示”。

3.图片版权：使用原创或已授权图片，避免侵权。

八、交互规范

（一）按钮设计

1.主按钮：填充色（主色）+白色文字，圆角4px。

具体样式：0056b3填充，白色文字，悬停时色值加深（如003d82），聚焦时描边40a9ff。

2.次按钮：描边色（主色）+主色文字，圆角4px。

具体样式：白色填充，0056b3描边，主色文字，悬停时描边加粗或色值加深。

3.按钮状态：正常（默认）、悬停、点击、聚焦、禁用。

具体变化：

悬停：色值加深、背景透明度微调。

点击：背景色略变深、边框下沉。

聚焦：细框线40a9ff环绕。

禁用：灰色填充、文字666666、透明度0.5。

（二）表单设计

1.输入框：边框dddddd，聚焦边框0056b3。

具体样式：白色背景，聚焦时边框变粗（2px）并使用0056b3。错误状态使用红色边框。

2.错