项目三:商业网站, 黑马团队

OKA国际眼镜分页设计文档(杨媛)

2014年11月01日

一、首页布局与尺寸(单位:像素)

1、整体布局

12

2

2、细节布局

1

(注:红色为间距,白色为内容区)

二、网站配色

1、网站整体配色

主要色(#000000)+辅助色(#ffffff)+点缀色(#f81229)

3

2、LOGO配色方案

主要色(#000000)+辅助色(#ffffff)

4

3、导航配色方案
主要色(#000000)+辅助色(#f81229)

5

4.栏目配色方案
主要色(#ce393b)+辅助色(#000000 #ffffff)

6

5.背景配色
网页背景:#ffffff 图片9

三、修饰

1.导航设计

7

文字大小:20点

文字颜色:白色

字体:宋体

2、栏目设计

8

文字字体:宋体

文字颜色:白色(#ffffff)

文字背景颜色:红色(#ce393b)?灰色(#8e8c8c)

9 10

文字字体:宋体

字母字体:华文新魏

字体颜色:白色(#ffffff0)

背景:黑色(#000000)

3、主要内容背景设计

图片9白色(ffffff)

4、标题图片设计

13

四、交互

1、鼠标经过效果

14

 

8

六、布局图初稿

12