Axure页面设计统一规范(产品必看)

页面设计统一规范

1 页面布局 (2)

2 logo使用规范（按需而定） (3)

2.1 注册登录首页logo (3)

2.2 其他页面logo（教育） (4)

2.3 频道首页logo（学校首页） (4)

3 菜单栏 (4)

4 文字 (4)

4.1 字体和大小 (4)

4.2 文字样式 (5)

4.2.1 正文 (5)

4.2.2 页签 (5)

4.2.3 列表 (5)

4.2.4 链接（按需而定） (5)

4.2.5 日期、时间 (6)

5 边框 (6)

6 图片、图标 (6)

6.1 图片 (6)

6.1.1 用户头像 (6)

6.1.2 课程图片（按需而定） (6)

6.1.3 广告图片（按需而定） (7)

6.2 图标 (7)

7 设计样式规范 (7)

7.1 Tab选项卡 (7)

7.2 面包屑 (8)

7.3 步骤条（按需而定） (8)

7.4 搜索 (8)

7.5 按钮 (8)

7.6 提示 (8)

7.7 输入框 (9)

7.8 翻页 (9)

7.9 弹窗 (9)

7.10 浮层（按需而定） (9)

7.11 表单（按需而定） (10)

7.12 下拉菜单 (10)

7.13 社交元素 (10)

8 页头、页脚 (10)

8.1 页头 (10)

8.2 页脚 (11)

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字符+…；

6.1.2 课程图片（按需而定）

摘要样式

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

示例

>=1周

年-月-日 小时:分

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

<1分钟

“刚刚”

刚发布的评论或者回复