网页设计

1、网站的分类

• HTML类（80%）

1.png

优点：信息量大，板块划分规整，非常便于后期删除，修改，更新等维护。
缺点：不动感，视觉冲击力不强。

• HTML5、CSS3、JS、JQ（15%）

2.png

优点：有一些小动效，视觉效果更好，每一屏只显示一个主题，主题突出。
缺点：信息量比较小，不太容易后期维护。

• 纯FLASH类（5%）

3.png

优点：视觉冲击力非常强，交互效果特别好。
缺点：加载速度慢，几乎不能更新，移动端不支持。

2、HTML类设计规范

• 元素:
  必备元素：LOGO（标志）、menu（导航）、banner（主场景动画）、内容区，版权信息。
  可选元素：搜索、电话、在线客服、流量统计。
  浏览区域放左边，功能区域放右边。
  列表区域放左边，内容区域放右边。

• 安全尺寸（版心）:
  IE在1024 * 768分辨率下显示满屏宽度为1003PX，最为常见的是960px、990px、1000px。
  整屏高度一般为650px。

• 各元素风格：
  网页设计排版的元素都可以按照我们队内容的理解对其进行主次的区分，对强调的内容采用各种方式对其视觉感进行加强。
  常用方法有：色彩、明暗、大小、稀疏、远近、位置。
  LOGO与导航尽可能设计在网站的头部，并采用平铺的形式，需要突出、醒目、方便浏览者试用。
  背景和内容区尽可能简洁化，颜色选择上尽可能低纯度，色相与明度变化不要太大，追求整体性、统一性、协调性。
  LOGO、导航、按钮、标题等需要突出的元素需要设计的明显一些，颜色选择上纯度调高，各版块对比加强。但这几个元素之间同样要注意协调性。
  布局尽可能避免弧线、不对称效果等不适合做切片的设计。
  采用横平竖直的设计简约、大方、便于设计与制作、便于浏览者阅读。但横平竖直的设计容易造成画面呆板，在设计上需要适当的调整。
  效果风格保持一致，与网站本身主题相匹配。

• 各元素规范：
  第一屏1000 * 650
  头部logo高度80~120PX
  导航高度40PX左右
  banner高度400~550PX
  板块之间10~30PX

3、按钮

按钮.jpg

分类：平面类、体积类、光感类、凹面类
特点：有区别于背景的外框、有对应的文字/图标、可以点击
特征：
按钮大小根据文字大小来定，文字大小一般18~24PT
文字高度一般占按钮高度的一半，左右边距大于上下边距。
web设计中，文字只能用宋体和微软雅黑，14PT以下用宋体，14PT以上用雅黑，按钮一般用微软雅黑。
按钮一般用圆角矩形最多，圆角半径一般在3~10PX，5PX最常见。

• 体积类按钮绘制方法

体积类按钮.jpg

1、输入文字“按钮”，大小24PT，字体微软雅黑。
2、绘制形状，圆角半径为5PT的圆角矩形。
3、改颜色为渐变，上浅下深，确定。
4、添加描边：1PX、内部、描边颜色为渐变、角度90、颜色都要比填色更深。
5、添加内阴影：白色叠加、距离2PX、大小0、不透明度20%~30%。

• 女性化按钮绘制方法

女性化按钮.jpg

1、形状为最大半径的圆角矩形，文字24PT，雅黑。
2、颜色改为红色渐变，描边1PX，内部，渐变比填色略深。
3、内阴影：白色叠加，距离10PX，大小10PX，不透明度50%。

• 光效类按钮：

光效按钮1.jpg

1、在体积类的基础上，新建一个图层
2、选择白色的前景色，绘制白色到透明的径
向渐变，把大小改到按钮的2/3。
3、用矩形选框选到中间一半的位置，删除，向下移动1PX，反选，用50%橡皮擦擦除。
4、该模式为叠加，放到最上边向下1PX的位置，复制一个放下方作为反光，调整不透明度为50%左右。

光效类按钮2.jpg

1、在光效1的基础上新建一个图层，绘制选框。
2、从下到上做白色到透明的渐变，选框向上移动1PX，用50%的橡皮擦擦除。
3、该模式为叠加，透明度为20%左右，用橡皮擦擦除边缘。

• 阴影的打造

阴影打造.jpg

1、新建图层，载入按钮的选区，羽化3PX，填充黑色。
2、改大小和按钮一致，改羽化属性为2PX，用椭圆选框选中黑色投影的下方进行删除。
把投影效果放在按钮的下一层。

• 凹面类按钮

凹面按钮.jpg

1、绘制形状，颜色和附近的颜色一致，该模式为正片叠底。
2、内阴影打造凹下去的感觉，选中
距离为1PX，大小为3PX。
3、投影打造高光，距离为1，大小0，白色叠加。

4、字体

1、网页中内容区域尽量使用像素字（缺省字），12 ~ 14PX宋体，内容区标题用14PX，企业站字号统一为12PX，门户站/专题活动站出现部分14XP，12PX宋体行距一般为16~30PX，20PX最为常见，一般接近字体尺寸的行距设置比较适合正文。

正文字号.jpg

2、标题区尽可能用黑体（雅黑），14~24PX，18号字以上用锐利，18号字以下用平滑。导航区可以用宋体或者黑体

标题字号.jpg

3、网页中一般不用纯黑色字体，一般用#333333代替黑色，#666666、#999999、#cccccc辅助色。

文字色号.jpg

标题或者要突出的正文用#333333
描述性文字用#666666
边框可用#999999
分割线可用#cccccc

4、新闻资讯
行距一般大一些30PX，分割虚线用句号Arial字体，姓名分割符·的输入方法，依次按“v”“1”“g”就出现了。
产品展示用色跟导航一样

5、个人网站

头部 50~70PX
banner 400~550PX
导航 字体18PX微软雅黑
有竖分割线的时候，分割线要比内容大20~30PX
尾部版权信息要比头部导航小。