AXUER页面设计统一规范-参考

页面设计统一规范

1 页面布局

在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，本项目设计以1200*h的分辨率做为基准，其中：

●Head区域，宽度按照网页分辨率的100%设置，即为1200px；

页头包括logo（顶部区域左1/3区域）和menu区，高度为h px；

●Content区域，宽度与页头保持一致，为1200px，当区域分为两栏时，第一栏宽

度为860px，第二栏宽度为310px，间距为30px。

●当区域分为三栏时，第一栏宽度为200px，第二栏宽度为630px，第三栏宽度为

310px，中间间距均为30px。如图1、图2所示。高度根据实际内容进行设置；

●Foot区域，宽度按照浏览器100%设置，高度为h px。

图1 两栏布局

图2 三栏布局2 logo使用规范（按需而定）

2.1 注册登录首页logo

a.尺寸：270*100px;

b.背景颜色：#5175B8；270px

100px

2.2 其他页面logo（教育）

a.尺寸：108*40px；

b.背景色：#5175B8；

2.3 频道首页logo（学校首页）

a. 尺寸：190*60px；

b.背景色：#ffffff；

3 菜单栏

尺寸：1200*100px；背景颜色：#ffffff；

Menu：#666666，20px；

Menu之间间距：40px；（ps.若菜单内容变化时需要根据实际情况调整。）

4 文字

4.1 字体和大小

中文采用“微软雅黑”，英文采用“Arial”。

对于页面属性中字体大小的设置，需要内容的不同级别来设置，一般标准为：模块类别大小颜色

位置

Head Menu导航20px #666666 登录/注册18px #666666 登录后用户名14px #333333

90px

60px

108px

40px

搜索框14px 提示语：#999999；关键字#333333 content

栏目标题18px+bold #666666 居左

内容标题16px+bold #333333 居左

正文14px #999999 居左

foot

标题16px+bold #FFFFFF 居左

正文14px #FFFFFF 居左

弹出框

标题14px+bold #333333

正文14px #333333

输入框14px #666666 居左

提示文字信息14px #999999

页面最小文字14px

其他情况

根据内容需求相

应调整

如需标题突出，

则可为20+px

4.2 文字样式

4.2.1 正文

标题居左显示；字体颜色为#333333；

正文颜色为#666666，行间距：24px；

4.2.2 页签

文字：18px，#333333+bold；

4.2.3 列表

栏目标题文字：18px，#333333+bold；文字：14px，#666666，28字符+…+日期（14px，#999999）；

行间距：24px；

4.2.4 （按需而定）

样式一：鼠标移入，字体颜色变化；

样式二：鼠标移入，出现下划线； 说明：Axure 设计中采用样式二。

4.2.5 日期、时间

14px ，#999999；

各模块首页信息发布时间和评论、回复的时间显示方式按照以下方式，分时间段进行显示： 备注：详情页信息发布时间以“年-月-日 小时：分”形式完全显示。

5 边框

使用Axure 设计时所有有线条边框，边框颜色均设置为#cccccc.

6 图片、图标

6.1 图片

6.1.1 用户头像

样式一：menu 导航，30*30px

动态

60*60px ；用户昵称：8字符+…，14px ，#666666；

样式二：个人档

100*100px ；用户昵称：8字符+…；

样式三：搜索导航结果

30*30px ；用户昵称：8字符+…；

发布时间距离现在时刻 显示格式

示例

>=1周

年-月-日 小时:分

(24进制时间) 2014-12-5 18：00 >=1天and <1周 X 天前 >=1小时and <1天 X 小时前 >=1分钟and <1小时 X 分钟前

<1分钟

“刚刚”

刚发布的评论或者回复

6.1.2 课程图片（按需而定）

摘要样式

主题区域：120*90px

详情页样式：400*300px

6.1.3 广告图片（按需而定）

主体区域：860*300px

侧栏区域：310*200px

竖形广告：270*170px

6.2 图标

社交操作图标

大小：16*16；默认颜色：#999999，鼠标移入颜色变化; 按钮操作

100*40px，14px，居中；

网站logo图标：25*25，本身logo颜色；

7 设计样式规范

7.1 Tab选项卡

样式一：

18px，#333333，bold；选中颜色变化；

样式二：