400-870-3094

当前位置 ： 首页 > 知识分享 > 网站建设 > 网页UI设计规范、布局及提升用户体验设计（一）

网页UI设计规范、布局及提升用户体验设计（一）

发布时间：2024年5月24日 13:00 作者：誉新源

网页UI设计规范

1. 网页规范：

网页宽度设定为1920像素，高度不设限制，有效可视区通常在950px至1200px宽度之间，实际尺寸依项目需求、客户要求及目标用户群体而定。

2. 字体规范：

中文常用字体包括宋体（无衬线）、微软雅黑（Windows LCD）和苹方（MAC）。英文常用字体有Times New Roman、Arial和sans-serif字体。

  • 中文字常用字号：
    • 导航文字：14px、16px、18px、20px
    • 正文内容：12px、14px
    • 标题：22px、24px、26px、28px、30px
    • 辅助信息：12px、14px
  • 英文字常用字号：
    • 标题和内容文字：10-16px
    • 中英文结合：最小12px
    • 全英文网站：最小10px（如底部信息）

3. 网页页面等级：

  1. 首页：首次访问时显示的页面，包含LOGO、公司名称、导航、banner、新闻、相关信息和底部信息。注意：每个网站只有一个首页。
  2. 二级页面：从首页点击进入的页面。
  3. 三级页面：从二级页面点击进入的页面。

4. 网页常见板块划分：

  1. 头部区域（top或header）：Logo、主导航、搜索、注册、登录、版本等信息
  2. 主视觉区（banner）：展示公司品牌形象、新品宣传、主题活动等轮播大图
  3. 主要内容区（main）：新闻动态、产品与服务、公司介绍等
  4. 底部信息区（footer）：网站地图、联系我们、版权信息、ICP备案号等

5. 网页的颜色选择：

  • 源自LOGO的颜色
  • 环境启发的颜色
  • 产品相关的颜色
  • 通过调整四色明度和色相创建平衡
  • 从产品相关图片中提取四种颜色作为主色调（常见于服装、饰品、化妆品类网站）

6. 网页设计注意事项：

  • 使用高清无水印大图
  • 图片旁应配以文字说明，避免大量无文字的图片展示
  • 文字排版要避免标点符号在行首，单字不应独占一行
  • 文字位于色块中央，不宜留过多空白
  • 箭头朝下需有下拉菜单，合起状态时箭头朝右
  • banner需原创设计，含文字层次和对比
  • 产品分类需展示不同产品
  • 每个板块应有明显链接
  • 避免重复图片，确保每张图片有独特元素
  • 勿直接使用预设计的图片素材
  • 板块设计要有文字解释和链接
  • 同一版块内图片风格保持一致
  • 图片与文字间保持适当距离
上一篇：
网站建设8个基本流程，一个都不能少！
下一篇：
深圳如何做好网站制作，网站建设完成后要如何去维护？
↺返回列表

相关文章

相关案例

关于我们
公司简介
知识分享
网站推广 网站建设
人工智能
人工智能 机器学习 深度学习
联系我们
联系我们
联系方式
客户经理电话：18025323819
QQ：1269712299
邮箱：1269712299@qq.com
地址:深圳市南山区高新技术产业园w2-A座715
友情链接：
©2023 深圳誉新源科技有限公司 版权所有 抄袭必究 法律顾问：汪健 律师 申请友情链接1269712288 备案号：粤ICP备16016962号