AXUER页面设计统一规范-参考参考模板

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 两栏布局1 / 11图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：#666666，20px；Menu之间间距：40px；（ps.若菜单

3、内容变化时需要根据实际情况调整。）4 文字4.1 字体和大小中文采用“微软雅黑”，英文采用“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#

4、333333正文14px#333333输入框14px#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 链接（按需而定）样式一：鼠标移入，字体颜色变化；样式二：鼠标移入，出

5、现下划线；说明：Axure设计中采用样式二。4.2.5 日期、时间 14px，#999999；各模块首页信息发布时间和评论、回复的时间显示方式按照以下方式，分时间段进行显示：发布时间距离现在时刻显示格式示例>=1周年-月-日 小时:分(24进制时间)2014-12-5 18：00>=1天and <1周X天前>=1小时and <1天X小时前>=1分钟and <1小时X分钟前<1分钟“刚刚”刚发布的评论或者回复 备注：详情页信息发布时间以“年-月-日 小时：分”形式完全显示。5 边框使用Axure设计时所有有线条边框，边框颜色均设置为#cccccc.

6、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*300px6.1.3 广告图片（按需而定）主体区域：860*300px侧栏区域：310*200px竖形广告：270*170px6.2 图标社交操作图标大小：16*16；默认颜色：#999999，鼠标移入颜色变化;按钮操作 100*40px，14px，居

7、中；网站logo图标：25*25，本身logo颜色；7 设计样式规范7.1 Tab选项卡样式一：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*30px7.6 提示样式一：提示

8、框：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；500

9、px标题：#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，文字：14

10、px，#ffffff，背景颜色#f8991d；7.11 表单（按需而定）复选框文字：16px，#333333； 单选框文字：16px，#333333；7.12 下拉菜单文字14px,#666666;鼠标移入：文字可以链接；7.13 社交元素社交操作图标大小：16*16；默认颜色：#999999，鼠标移入颜色变化;按钮操作 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）