1、Axure页面设计统一规范产品必看页面设计统一规范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.尺寸:10840px;b.背景色:5175B8;2.3 频道首页logo(学校首页)a. 尺寸:19060px;b.背景色:#ffffff;3 菜单栏尺寸:1200*100px;背景颜色:ffffff;Menu:#666666,20px;Menu之间间距:40px;(ps.若菜单内容变化时需要根据实际情况调整.)4 文字4.1 字体和大小中文采用“
3、微软雅黑”,英文采用“Arial”.对于页面属性中字体大小的设置,需要内容的不同级别来设置,一般标准为:模块类别大小颜色位置HeadMenu导航20px666666登录/注册18px666666登录后用户名14px#333333搜索框14px提示语:#999999;关键字333333content栏目标题18px+bold666666居左内容标题16px+bold333333居左正文14px999999居左foot标题16px+bold#FFFFFF居左正文14pxFFFFFF居左弹出框标题14px+bold333333正文14px#333333输入框14px666666居左提示文字信息14p
4、x#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日期、时间 14px,#999999;各模块首页
5、信息发布时间和评论、回复的时间显示方式按照以下方式,分时间段进行显示:发布时间距离现在时刻显示格式示例=1周年月-日 小时:分(24进制时间)201412-5 18:00=1天and 1周X天前=1小时and 1天X小时前=1分钟and 样式二:45130px,文字:14px,#ffffff,背景颜色f8991d;7.11 表单(按需而定)复选框文字:16px,#333333; 单选框文字:16px,333333;7.12 下拉菜单文字14px,#666666;鼠标移入:文字可以链接;7.13 社交元素社交操作图标大小:16*16;默认颜色:#999999,鼠标移入颜色变化;按钮操作 1004
6、0px,14px,#333333,居中;8 页头、页脚8.1 页头模块类别文字大小颜色位置HeadMenu导航20px#666666登录/注册18px666666登录后用户名14px666666Foot标题16px+bold666666居左正文14px#666666Head:1200100px;Foot:1200*340px;logo:一级首页logo(教育首页logo)、二级logo(学校首页logo、个人首页logo);8.2 页脚样式一:(学校页面)页脚信息按照从左到右的排列次序为:1、外部导航;2、内部导航;3、各类许可证、授权声明、英文版权信息“copyright、中文版权信息、各类网络安全/工商证明/技术支持LOGO4。文字:14px;ffffff;样式二:(教育页面)
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1