1、AXUER页面设计统一规范参考页面设计统一规范1 页面布局在页面布局中,对各个功能区域的切分是按照“像素”和“比例”方式来进行的,本项目设计以1200*h的分辨率做为基准,其中: Head区域,宽度按照网页分辨率的100%设置,即为1200px;页头包括logo(顶部区域左1/3区域)和menu区,高度为h px; Content区域,宽度与页头保持一致,为1200px,当区域分为两栏时,第一栏宽度为860px,第二栏宽度为310px,间距为30px。 当区域分为三栏时,第一栏宽度为200px,第二栏宽度为630px,第三栏宽度为310px,中间间距均为30px。如图1、图2所示。高度根据实际
2、内容进行设置; Foot区域,宽度按照浏览器100%设置,高度为h px。图1 两栏布局图2 三栏布局2 logo使用规范(按需而定)2.1 注册登录首页logoa.尺寸: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 字体
3、和大小中文采用“微软雅黑”,英文采用“Arial”。对于页面属性中字体大小的设置,需要内容的不同级别来设置,一般标准为:模块类别大小颜色位置HeadMenu导航20px#666666登录/注册18px#666666登录后用户名14px#333333搜索框14px提示语:#999999;关键字#333333content栏目标题18px+bold#666666居左内容标题16px+bold#333333居左正文14px#999999居左foot标题16px+bold#FFFFFF居左正文14px#FFFFFF居左弹出框标题14px+bold#333333正文14px#333333输入框14px#
4、666666居左提示文字信息14px#999999页面最小文字14px其他情况根据内容需求相应调整如需标题突出,则可为20+px4.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日期、时
5、间 14px,#999999;各模块首页信息发布时间和评论、回复的时间显示方式按照以下方式,分时间段进行显示:发布时间距离现在时刻显示格式示例=1周年-月-日 小时:分(24进制时间)2014-12-5 18:00=1天and =1小时and =1分钟and 1小时X分钟前样式二:45*130px,文字:14px,#ffffff,背景颜色#f8991d;7.11 表单(按需而定)复选框文字:16px,#333333; 单选框文字:16px,#333333;7.12 下拉菜单文字14px,#666666;鼠标移入:文字可以链接;7.13 社交元素社交操作图标大小:16*16;默认颜色:#9999
6、99,鼠标移入颜色变化;按钮操作 100*40px,14px,#333333,居中;8 页头、页脚8.1 页头模块类别文字大小颜色位置HeadMenu导航20px#666666登录/注册18px#666666登录后用户名14px#666666Foot标题16px+bold#666666居左正文14px#666666Head:1200*100px;Foot:1200*340px;logo:一级首页logo(教育首页logo)、二级logo(学校首页logo、个人首页logo);8.2 页脚样式一:(学校页面)页脚信息按照从左到右的排列次序为:1、外部导航;2、内部导航;3、各类许可证、授权声明、英文版权信息“copyright”、中文版权信息、各类网络安全/工商证明/技术支持LOGO4.文字:14px;#ffffff;样式二:(教育页面)
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1