AXUER面设计统一规范-参考.doc

页面设计统一规范
1 页面布局
在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，本项目设计以1200*h的分辨率做为基准，其中：
l Head区域，宽度按照网页分辨率的100%设立，即为1200px；
页头涉及logo（顶部区域左1/3区域）和menu区，高度为h px；
l Content区域，宽度与页头保持一致，为1200px，当区域分为两栏时，第一栏宽度为860px，第二栏宽度为310px，间距为30px。
l 当区域分为三栏时，第一栏宽度为200px，第二栏宽度为630px，第三栏宽度为310px，中间间距均为30px。如图1、图2所示。高度根据实际内容进行设立；
l Foot区域，宽度按照浏览器100%设立，高度为h px。

图1 两栏布局

图2 三栏布局
2 logo使用规范（按需而定）
2.1 注册登录首页logo
270px
100px

a. 尺寸：270*100px;
b. 背景颜色：#5175B8；
2.2 其他页面logo（教育）
108px
40px

a. 尺寸：108*40px；
b. 背景色：#5175B8；
2.3 频道首页logo（学校首页）
90px
60px

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

搜索框
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；
各模块首页信息发布时间和评论、回复的时间显示方式按照以下方式，分时间段进行显示：
发布时间距离现在时刻
显示格式
示例
>=1周
年-月-日 小时:分
(24进制时间)
2023-12-5 18：00
>=1天and <1周
X天前

>=1小时and <1天
X小时前

>=1分钟and <1小时
X分钟前

<1分钟
“刚刚”
刚发布的评论或者回复

备注：详情页信息发布时间以“年-月-日 小时：分”形式完全显示。

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 课程图片（按需而定）
摘要样式
主题区域：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；选中颜色变化；

样式二：

文字：16px，#333333，bold；选中颜色变化；

样式三：豆腐块名称

18px，#333333，bold；
7.2 面包屑
16px，#666666，bold；
7.3 环节条（按需而定）

图标：170*40；
字体：16px,#666666；
7.4 搜索

搜索框大小：400*38；
搜索框内字体：14px，#333333；
7.5 按钮
社交操作按钮一：180*40px

社交操作按钮二：100*30px

社交操作按钮三：80*30px

7.6 提醒
样式一：
提醒框：260*100px；文字14px，#333333；
按钮：60*30；

7.7 输入框
输入框一般高度为40px，如登录注册中，根据实际情况可以调整输入框的高度和宽度；
7.8 翻页
文字：上一页，1/13页，下一页，14px，#666666；
当前页面显示条数：
一般为5-10条，具体数目根据不同情形而定；

7.9 弹窗
样式一：文字说明性弹窗，尺寸：660*? px；

标题文字20px，#333333,bold；正文：16px，#333333；提醒文字16px，#999999；
按钮：?*30；文字：#333333，16px；
说明：根据说明性文字内容，拟定该类弹窗的大小
样式二：尺寸：500*? px；
500px

标题：#333333，16px，bold；正文描述性文字：#333333，14px；输入框文字#666666，14px，输入框字符限制140；
提醒文字#999999；按钮：60*30，文字：#333333，14px；
样式三：登录注册，尺寸650*335

注册登录框：650*335px；
输入框：330*40px；文字：16px，#999999；字符数：6-18位字符；
说明：axure中注册登录框为650*400px。
7.10 浮层（按需而定）
样式一：45*45px，背景颜色#B3B3B3，鼠标移入背景色变为#f8991d；文字大小：14px；
鼠标移入——>
样式二：45*130px，文字：14px，#ffffff，背景颜色#f8991d；

7.11 表单（按需而定）
复选框

文字：16px，#333333；
单选框

文字：16px，#333333；
7.12 下拉菜单

文字14px,#666666;
鼠标移入：文字可以链接；
7.13 社交元素
社交操作图标

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

按钮操作

100*40px，14px，#333333，居中；
8 页头、页脚
8.1 页头
模块
类别
文字大小
颜色
位置
Head
Menu导航
20px
#666666

登录/注册
18px
#666666

登录后用户名
14px
#666666

Foot
标题
16px+bold
#666666
居左
正文
14px
#666666

Head：1200*100px；
Foot：1200*340px；
logo：一级首页logo（教育首页logo）、二级logo（学校首页logo、个人首页logo）；

8.2 页脚
样式一：（学校页面）

页脚信息按照从左到右的排列顺序为：
1、外部导航；
2、内部导航；
3、各类许可证、授权声明、英文版权信息“copyright”、中文版权信息、各类网络安全/工商证明/技术支持LOGO
4.文字：14px；#ffffff；
样式二：（教育页面）