AXUER页面设计统一规范参考.docx
《AXUER页面设计统一规范参考.docx》由会员分享，可在线阅读，更多相关《AXUER页面设计统一规范参考.docx（13页珍藏版）》请在冰豆网上搜索。
AXUER页面设计统一规范参考
页面设计统一规范
1页面布局
在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，本项目设计以1200*h的分辨率做为基准，其中：
●Head区域，宽度按照网页分辨率的100%设置，即为1200px；
页头包括logo（顶部区域左1/3区域）和menu区，高度为hpx；
●Content区域，宽度与页头保持一致，为1200px，当区域分为两栏时，第一栏宽度为860px，第二栏宽度为310px，间距为30px。
●当区域分为三栏时，第一栏宽度为200px，第二栏宽度为630px，第三栏宽度为310px，中间间距均为30px。
如图1、图2所示。
高度根据实际内容进行设置；
●Foot区域，宽度按照浏览器100%设置，高度为hpx。
图1两栏布局
图2三栏布局
2logo使用规范（按需而定）
2.1注册登录首页logo
a.尺寸：
270*100px;
b.背景颜色：
#5175B8；
2.2其他页面logo（教育）
a.尺寸：
108*40px；
b.背景色：
#5175B8；
2.3频道首页logo（学校首页）
a.尺寸：
190*60px；
b.背景色：
#ffffff；
3菜单栏
尺寸：
1200*100px；背景颜色：
#ffffff；
Menu：
#，20px；
Menu之间间距：
40px；（ps.若菜单内容变化时需要根据实际情况调整。
）
4文字
4.1字体和大小
中文采用“微软雅黑”，英文采用“Arial”。
对于页面属性中字体大小的设置，需要内容的不同级别来设置，一般标准为：
模块
类别
大小
颜色
位置
Head
Menu导航
20px
#
登录/注册
18px
#
登录后用户名
14px
#
搜索框
14px
提示语：
#；关键字#
content
栏目标题
18px+bold
#
居左
内容标题
16px+bold
#
居左
正文
14px
#
居左
foot
标题
16px+bold
#FFFFFF
居左
正文
14px
#FFFFFF
居左
弹出框
标题
14px+bold
#
正文
14px
#
输入框
14px
#
居左
提示文字信息
14px
#
页面最小文字
14px
其他情况
根据内容需求相应调整
如需标题突出，则可为20+px
4.2文字样式
4.2.1正文
标题居左显示；字体颜色为#；
正文颜色为#，行间距：
24px；
4.2.2页签
文字：
18px，#+bold；
4.2.3列表
栏目标题文字：
18px，#+bold；文字：
14px，#，28字符+…+日期（14px，#）；
行间距：
24px；
4.2.4链接（按需而定）
样式一：
鼠标移入，字体颜色变化；
样式二：
鼠标移入，出现下划线；
说明：
Axure设计中采用样式二。
4.2.5日期、时间
14px，#；
各模块首页信息发布时间和评论、回复的时间显示方式按照以下方式，分时间段进行显示：
发布时间距离现在时刻
显示格式
示例
>=1周
年-月-日小时:
分
（24进制时间）
2014-12-518：
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，#；
样式二：
个人档
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；默认颜色：
#，鼠标移入颜色变化;
按钮操作
100*40px，14px，居中；
网站logo图标：
25*25，本身logo颜色；
7设计样式规范
7.1Tab选项卡
样式一：
18px，#，bold；选中颜色变化；
样式二：
文字：
16px，#，bold；选中颜色变化；
样式三：
豆腐块名称
18px，#，bold；
7.2面包屑
16px，#，bold；
7.3步骤条（按需而定）
图标：
170*40；
字体：
16px,#；
7.4搜索
搜索框大小：
400*38；
搜索框内字体：
14px，#；
7.5按钮
社交操作按钮一：
180*40px
社交操作按钮二：
100*30px
社交操作按钮三：
80*30px
7.6提示
样式一：
提示框：
260*100px；文字14px，#；
按钮：
60*30；
7.7输入框
输入框一般高度为40px，如登录注册中，根据实际情况可以调整输入框的高度和宽度；
7.8翻页
文字：
上一页，1/13页，下一页，14px，#；
当前页面显示条数：
一般为5-10条，具体数目根据不同情形而定；
7.9弹窗
样式一：
文字说明性弹窗，尺寸：
660*?
px；
标题文字20px，#,bold；正文：
16px，#；提示文字16px，#；
按钮：
?
*30；文字：
#，16px；
说明：
根据说明性文字内容，确定该类弹窗的大小
样式二：
尺寸：
500*?
px；
500px
标题：
#，16px，bold；正文描述性文字：
#，14px；输入框文字#，14px，输入框字符限制140；
提示文字#；按钮：
60*30，文字：
#，14px；
样式三：
登录注册，尺寸650*335
注册登录框：
650*335px；
输入框：
330*40px；文字：
16px，#；字符数：
6-18位字符；
说明：
axure中注册登录框为650*400px。
7.10浮层（按需而定）
样式一：
45*45px，背景颜色#B3B3B3，鼠标移入背景色变为#f8991d；文字大小：
14px；
鼠标移入——>
样式二：
45*130px，文字：
14px，#ffffff，背景颜色#f8991d；
7.11表单（按需而定）
复选框
文字：
16px，#；
单选框
文字：
16px，#；
7.12下拉菜单
文字14px,#;
鼠标移入：
文字可以链接；
7.13社交元素
社交操作图标
大小：
16*16；默认颜色：
#，鼠标移入颜色变化;
按钮操作
100*40px，14px，#，居中；
8页头、页脚
8.1页头
模块
类别
文字大小
颜色
位置
Head
Menu导航
20px
#
登录/注册
18px
#
登录后用户名
14px
#
Foot
标题
16px+bold
#
居左
正文
14px
#
Head：
1200*100px；
Foot：
1200*340px；
logo：
一级首页logo（教育首页logo）、二级logo（学校首页logo、个人首页logo）；
8.2页脚
样式一：
（学校页面）
页脚信息按照从左到右的排列次序为：
1、外部导航；
2、内部导航；
3、各类许可证、授权声明、英文版权信息“copyright”、中文版权信息、各类网络安全/工商证明/技术支持LOGO
4.文字：
14px；#ffffff；
样式二：
（教育页面）
升级会员 