网站建设标准化指南V_1.0

解决方案建设标准化指南V_1.0

一.设计原则

• 总体设计 ：明确网站需求（政务、商业、品牌宣传等），确定网站主题。风格应确保统一或协调，包括网站中配色方案、排版和视觉元素等。
• 响应式设计 ：采用响应式设计，确保网站在不同设备和屏幕尺寸上的可用性。
• 简洁易用性 ：站建设要以用户体验为先，从用户的角度出发，提供方便、快捷、舒适的浏览体验。避免过度装饰，保持设计的简洁性，以便用户可以轻松地找到所需信息。设计时考虑到不同用户的需求。

二.网页设计规范

1. 网页尺寸

• 网页宽度 ：1920px，确保符合现代显示器的标准。
• 可视区宽度 ：950px ~ 1200px，具体宽度根据项目和用户群体确定。
• 首屏高度 ：700-750px，确保最重要的信息在用户首次进入网站时可见。
• 文件建立 ：使用宽度为1920px的画布，高度不限，RGB颜色模式，分辨率为72像素/英寸。

2. 字体和排版

• 字体选择 ：中文使用宋体、微软雅黑或黑体，英文使用Times New Roman、Arial或sans-serif。
• 字号规范 ：
  • 导航文字：一般为18px可根据具体项目调整20px,22px。
  • 正文内容：默认是16px,在内容页正文显示上面添加放大、缩小按钮,每点一次字号±2px,提高用户阅读体验。
  • 一号标题：28px-34px,加粗显示(可根据标题字符数量调整)。
  • 二号标题: 18px - 22px,加粗显示,一般情况下单独一行。
  • 辅助信息(作者、发布时间、标注信息等)：12px、14px。
  • 英文字号：10-16px；最小10px。
• 段落格式 ：两端对齐，末行左对齐；首行缩进2个字符。
• 行间距和段间距 ：为字体大小的1.5-2倍。

三. 首页设计

首页是用户首次进入网站时看到的第一个页面，应当突出重点内容，确保用户在进入网站时即可找到重要信息。

1. 布局和板块

• 头部区域（header） ：
  • 包含Logo、主导航、搜索、注册、登录等信息。
  • 标签字段命名为 <header> , <nav> ，分别用于头部区域和导航栏。
  • 一般设置为浮动类型，方便用户随时通过导航栏跳转。
• 主视觉区(banner) ：
  • 用于展示公司品牌形象、新品宣传、主题活动等轮播大图。
  • 标签字段命名为 <section class="banner"> 。
  • Banner区可用 <div class="banner-item"> 存放轮播图片或视频，以及描述文字等。
• 主要内容区(main) ：
  • 包含新闻动态、产品与服务、公司介绍等。
  • 标签字段命名为 <main> 或 <section> ，根据内容的不同功能模块使用不同的标签。
• 底部信息区(footer) ：
  • 包含网站地图、联系我们、版权信息、ICP备案号等信息。
  • 标签字段命名为 <footer> 。
  • 使用列表（ <ul> ）或分块（ <div class="footer-block"> ）形式组织内容。

2. 布局原则

• 协调性 ：
  • 结合网站各个构成要素，提供美观实用的界面。
  • 使用统一的配色方案、字体和视觉元素，保持整体协调。
• 一致性 ：
  • 确保整个页面风格统一，视觉上整齐一致。
  • 保持各个板块的设计风格和样式一致。
• 流动性 ：
  • 引导用户根据兴趣浏览页面内容。
  • 布局设计应符合用户的浏览习惯，增强用户体验。
• 均衡性 ：
  • 保持页面稳定，适度加强页面使用性。
  • 确保页面元素之间的平衡和对称。
• 强调性 ：
  • 突出重要内容，确保不影响整体设计。
  • 使用对比、色彩或排版强调重点内容。

3. 常见布局类型

• 一栏式布局 ：
  • 结构简单，视觉流程清晰，适用于信息量小的网站。
  • 标签字段命名为 <main> ，或根据需要划分更多的 <section> 。
  • 通常配合大幅精美图片或交互动画，实现视觉冲击效果。
• 两栏式布局 ：
  • 最常见的布局方式之一，分为左窄右宽、左宽右窄、左右均等。
  • 左窄右宽：
    • 左侧为导航栏，右侧为网页内容，符合用户浏览习惯。
    • 标签字段命名为 <nav> 和 <main> 或 <section> 。
  • 左宽右窄：
    • 左侧为内容区，右侧为导航或辅助信息，突出内容主导地位。
    • 标签字段命名为 <main> 和 <aside> 。
• 三栏式布局 ：
  • 排版紧凑，充分利用网站空间，展示更多信息。
  • 标签字段命名为 <main> , <nav> 和 <aside> 。
  • 通常用于信息量丰富的网站，如门户网站、电商网站、学习类网站首页。

四. 底部信息区设计

底部信息区是网站的最后一部分，提供网站相关的辅助信息。

• 内容 ：
  • 包括版权信息、联系信息、网站地图、隐私政策等。
  • 标签字段命名为 <footer> ，组织信息时可使用列表（ <ul> ）或分块（ <div> ）。
  • 提供用户关心的相关链接，如关于我们、联系我们、服务条款等。
• 设计 ：
  • 使用较小字号（12px-14px），确保可读性。
  • 颜色通常为浅色，如#999999，以与正文区分。
  • 设计应简洁，不要堆积过多信息。
  • 可分为多个小块模块，用 <div class="footer-block"> 划分信息。
• 实现方式 ：
  • 使用 <footer> 标签定义底部信息区。
  • 在 <footer> 中使用 <div> 或 <ul> 组织内容。
  • 分配不同的CSS类名来设计不同内容块的样式。

请根据实际需求和规范调整内容页、首页和底部信息区的设计，实现一致且美观的整体风格。

五. 内容页设计

内容页设计通常为左右两栏的布局，左侧为内容信息区，右侧为功能区。左侧宽度较大，右侧宽度较窄。

1. 左侧布局

• 一号标题 ：
  • 字号：28px-34px，字体加粗，标签字段命名为 <h1> .
  • 根据标题字符数量调整字号，确保可读性。
• 辅助信息 ：
  • 包括作者、发布时间、来源等，字号为12px、14px，颜色为浅灰色。
  • 标签字段命名为 <div class="aux-info"> ，位于标题下方。
• 放大、缩小按钮 ：
  • 在正文上方添加两个按钮用于放大、缩小正文内容，按钮标签为 <button class="zoom-in"> 和 <button class="zoom-out"> 。
  • 每次点击字号调整±2px，提高用户阅读体验。
• 正文信息 ：
  • 默认字号为16px，标签字段命名为 <p> 或 <div class="content"> 。
  • 行间距为1.5-2倍字体大小，确保可读性。
• 二号标题 ：
  • 字号为18px-22px，字体加粗显示。
  • 一般情况下单独一行，标签字段命名为 <h2> 。

2. 右侧布局

右栏通常分为上下三个模块，分别是主要功能、浏览量排行和重点信息推荐。

• 主要功能 ：
  • 标签字段命名为 <div class="main-features"> 。
  • 包含搜索、分享、打印等功能，设计应与整体风格一致。
• 浏览量排行 ：
  • 标签字段命名为 <div class="most-viewed"> 。
  • 显示浏览量最高的文章列表，使用列表形式展示。
• 重点信息推荐 ：
  • 标签字段命名为 <div class="recommended-info"> 。
  • 显示编辑精选或相关信息，使用列表或卡片形式展示。

3. 其他设计注意事项

• 排版规范 ：
  • 左右两栏之间保持适度间距，确保内容整洁有序。
  • 左侧内容区的排版应注意段落间距和对齐，确保可读性。
• 响应式设计 ：
  • 确保内容页在不同设备和屏幕尺寸上呈现良好。
  • 根据设备宽度调整两栏的比例和布局。
• 视觉设计 ：
  • 确保左侧和右侧的视觉风格统一，与整体网站设计保持一致。
  • 使用一致的字体、颜色和样式，提高用户体验。

六. 设计注意事项

• 图像选择 ：使用高清、无水印的图片，与网站主题相关。
• 文字说明 ：图片旁或下方配简洁的文字说明。
• 排版 ：避免标点符号位于行首，段落首行缩进2个字符。
• 色块中的文字 ：应居中，避免上下留有太多空白空间。
• 下拉菜单 ：箭头朝下表示菜单打开，箭头朝右表示菜单合起。
• Banner设计 ：需要进行合成和设计，确保文字和图片的对比关系。
• 链接和文字 ：板块内必须体现明显的链接和文字解释。
• 空白空间 ：合理使用，避免页面过于拥挤，确保可读性。

七. 网站交互体验

• 注册流程 ：
  • 简化注册流程，降低用户门槛。
  • 提供邮箱或手机号注册，减少用户输入复杂用户名的困扰。
  • 显示注册进度，引导用户顺利完成注册流程。
  • 提供第三方登录/注册选项，提升便捷性。
• 登录流程 ：
  • 允许使用邮箱、用户名或手机号登录。
  • 提供明确错误提示，让用户清楚知道登录失败的原因。
  • 添加“忘记密码”链接，方便用户找回密码。
• 按钮设计 ：
  • 按钮设计应显得可点击，提供反馈信息。
  • 使用醒目的颜色突出按钮，确保与品牌配色方案匹配。
  • 按钮放置在合适位置，如表单底部、信息附近、页面底部等。
  • 设计标准形状的按钮，如方形或圆角矩形，符合用户认知。
  • 按钮文本应简洁明了，明确按钮功能。
  • 赋予按钮更高的视觉优先级，让其成为页面中最显眼的元素。
• 导航栏 ：
  • 位置：通常位于页面顶部，提供主要导航菜单。
  • 样式：清晰简洁，字号为18px。
  • 颜色：与网站整体设计风格相匹配。
  • 功能：提供快速访问主要内容的链接。
• 搜索栏 (可选)：
  • 通常位于导航栏中或页面顶部，便于用户快速搜索内容。
  • 使用Placeholder提示用户输入搜索关键词。
  • 搜索按钮设计突出，让用户一眼可见。

八. 视觉设计

• 统一性 ：保持整个网站的设计风格一致，包括字体、颜色、布局等。
• 对比度 ：使用适当对比度，突出重要内容，提高可读性。
• 可读性 ：确保文字、图片和其他元素的可读性。
• 品牌识别 ：使用公司LOGO和品牌颜色，加强品牌识别度。
• 灵活性 ：根据不同设备和用户群体的需求，适度调整设计。

九. 颜色规范

主色调 ：来自于公司LOGO的颜色，确保与品牌形象一致。或者选择一个符合公司形象的产品图片，在图中提炼出四种颜色，调整明度和直线色即可作为网站主页的主色调，灵活运用于不同文字。

正文文字颜色 ：通常为深灰色（#333333到#666666之间）。

辅助文字颜色 ：通常为浅色（例如#999999）。. 颜色规范

• 主色调 ：来自于公司LOGO的颜色，确保与品牌形象一致。或者选择一个符合公司形象的产品图片，在图中提炼出四种颜色，调整明度和直线色即可作为网站主页的主色调，灵活运用于不同文字。
• 正文文字颜色 ：通常为深灰色（#333333到#666666之间）。
• 辅助文字颜色 ：通常为浅色（例如#999999）。

十. 结论

• 确保首页设计符合整体网站风格，提供用户友好的体验。
• 注重细节设计，如字体、颜色、布局等，确保一致性和美观性。
• 持续优化设计，根据用户反馈和测试结果进行调整，提高用户体验。

参考文章: