AXUER页面设计统一规范参考.docx
《AXUER页面设计统一规范参考.docx》由会员分享,可在线阅读,更多相关《AXUER页面设计统一规范参考.docx(14页珍藏版)》请在冰豆网上搜索。
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:
#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进制时间)
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,#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.1Tab选项卡
样式一:
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;
样式二:
(教育页面)