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

《AXUER页面设计统一规范-参考.docx》由会员分享，可在线阅读，更多相关《AXUER页面设计统一规范-参考.docx（10页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、页面设计统一规范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 Foo

2、t区域，宽度按照浏览器100%设置，高度为h px。图1 两栏布局图2 三栏布局2 logo使用规范（按需而定）2.1 注册登录首页logo270px100pxa. 尺寸：270*100px;b. 背景颜色：#5175B8；2.2 其他页面logo（教育）108px40pxa. 尺寸：108*40px；b. 背景色：#5175B8；2.3 频道首页logo（学校首页）90px60pxa. 尺寸：190*60px；b. 背景色：#ffffff；3 菜单栏尺寸：1200*100px；背景颜色：#ffffff；Menu：#，20px；Menu之间间距：40px；（ps.若菜单内容变化时需要根据实际情

3、况调整。）4 文字4.1 字体和大小中文采用“微软雅黑”，英文采用“Arial”。对于页面属性中字体大小的设置，需要内容的不同级别来设置，一般标准为：模块类别大小颜色位置HeadMenu导航20px#登录/注册18px#登录后用户名14px#搜索框14px提示语：#；关键字#content栏目标题18px+bold#居左内容标题16px+bold#居左正文14px#居左foot标题16px+bold#FFFFFF居左正文14px#FFFFFF居左弹出框标题14px+bold#正文14px#输入框14px#居左提示文字信息14px#页面最小文字14px其他情况根据内容需求相应调整如需标题突出，则

4、可为20+px4.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进制时间)20

5、14-12-5 18：00=1天and =1小时and =1分钟and 1小时X分钟前样式二：45*130px，文字：14px，#ffffff，背景颜色#f8991d；7.11 表单（按需而定）复选框文字：16px，#； 单选框文字：16px，#；7.12 下拉菜单文字14px,#;鼠标移入：文字可以链接；7.13 社交元素社交操作图标大小：16*16；默认颜色：#，鼠标移入颜色变化;按钮操作 100*40px，14px，#，居中；8 页头、页脚8.1 页头模块类别文字大小颜色位置HeadMenu导航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”、中文版权信息、各类网络安全/工商证明/技术支持LOGO4.文字：14px；#ffffff；样式二：（教育页面）