网页设计

网页类型：

1. 信息展示 ——多动效
2. 功能服务 ——交互多、行业化、注重细节
3. 门户平台（综合） —— 紧凑、层级复杂
4. 电商外贸 ——通用性、流程化、逻辑清晰
5. 营销活动型 ——视觉冲击、花里胡哨、抓眼球、卖点明确
6. 系统管理型网页 ——注重实用性、专业场景、模块化、线上软件

响应式和栅格

响应式：同一套设计元素，网页根据显示宽度自动调整内容的模式，多用于图片多文字少的网站。

自适应：更根据不同设备设计不同的样式适配。

栅格系统：将页面等比切分为 margin，栅格，栅格间距

在响应式时，栅格区域大小随页面宽度改变，间距和margin则不变

网页设计规范

网页文字规范

浏览器显示的字体需要客户端本地安装过的字体才可以正常显示

一般默认微软雅黑 （windows为主）

1. 字号

   中文最小字号：12px

   常规：13-15px

   较大：15-20px

2. 字重：

   ​ light：注释/次要文本

   ​ regular：正常

   ​ bold：强调/标题

3. 字色

4. 行高

​ 阅读文本：字号的1.6-2倍

​ 注释文本：字号的1.4-1.6倍

5. 段间距

   行高的0.4-0.8倍

网页色彩规范

浏览器使用rgb模式

网页图标规范

大小一致，风格一致，粗细一致，透视一致

网页布局规范

一边使用4和8的倍数来制定空间尺寸。

通过亲密性原则使用不同等级的间距数值，一般也是4和8的倍数

长屏展示页面

用户对迷宫般的网站缺乏耐心和访问意愿，越来越多的网页采取长屏来展示内容，将本来需要多页面展示的内容聚合到一页

特点：

1. 信息展示为主
2. 平面设计感强
3. 动效应用少
4. 固定版心 （一般1100-1200）
5. 配图要求高

设计流程：

1. 需求获取
2. 模块分析
3. 原型制作
4. 视觉填充
5. 包装输出

风格统一

字体、字号统一

组件尽量复用

阅读区行距、段距尽量统一，利于读者阅读

尽可能少的使用固定颜色设计

标题颜色使用hsb赋予不同色阶，分别使用在重要性强弱的文本上，形成分级