Axure页面设计统一规范(产品必看).docx

《Axure页面设计统一规范(产品必看).docx》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、页面设计统一规范1页面布局22logo使用规范（按需而定）42.1注册登录首页logo42.2其他页面logo（教育）52.3频道首页logo（学校首页）53菜单栏54文字54.1字体和大小54.2文字样式64.2.1正文64.2.2页签64.2.3列表64.2.4链接（按需而定）64.2.5日期、时间75边框76图片、图标76.1图片76.1.1用户头像76.1.2课程图片（按需而定）76.1.3广告图片（按需而定）86.2图标87设计样式规范87.1Tab选项卡87.2面包屑97.3步骤条（按需而定）97.4搜索97.5按钮97.6提示97.7输入框107.8翻页

2、107.9弹窗107.10浮层（按需而定）107.11表单（按需而定）117.12下拉菜单117.13社交元素118页头、页脚118.1页头118.2页脚121页面布局在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，本项目设计以1200*h的分辨率做为基准，其中：lHead区域，宽度按照网页分辨率的100%设置，即为1200px；页头包括logo（顶部区域左1/3区域）和menu区，高度为hpx；lContent区域，宽度与页头保持一致，为1200px，当区域分为两栏时，第一栏宽度为860px，第二栏宽度为310px，间距为30px。l当区域分

3、为三栏时，第一栏宽度为200px，第二栏宽度为630px，第三栏宽度为310px，中间间距均为30px。如图1、图2所示。高度根据实际内容进行设置；lFoot区域，宽度按照浏览器100%设置，高度为hpx。15图1两栏布局图2三栏布局1logo使用规范（按需而定）1.1注册登录首页logoa.尺寸：270*100px;b.背景颜色：#5175B8；151.1其他页面logo（教育）a.尺寸：108*40px；b.背景色：#5175B8；1.2频道首页logo（学校首页）a.尺寸：190*60px；b.背景色：#ffffff；2菜单栏尺寸：1200*100px；背景颜色

4、：#ffffff；Menu：#，20px；Menu之间间距：40px；（ps.若菜单内容变化时需要根据实际情况调整。）3文字3.1字体和大小中文采用“微软雅黑”，英文采用“Arial”。对于页面属性中字体大小的设置，需要内容的不同级别来设置，一般标准为：模块类别大小颜色位置HeadMenu导航20px#登录/注册18px#登录后用户名14px#15搜索框14px提示语：#；关键字#content栏目标题18px+bold#居左内容标题16px+bold#居左正文14px#居左foot标题16px+bold#FFFFFF居左正文14px#FFFFFF居左弹出框标题14p

5、x+bold#正文14px#输入框14px#居左提示文字信息14px#页面最小文字14px其他情况根据内容需求相应调整如需标题突出，则可为20+px1.1文字样式1.1.1正文标题居左显示；字体颜色为#；正文颜色为#，行间距：24px；151.1.1页签文字：18px，#+bold；1.1.2列表栏目标题文字：18px，#+bold；文字：14px，#，28字符+…+日期（14px，#）；行间距：24px；1.1.3链接（按需而定）样式一：鼠标移入，字体颜色变化；样式二：鼠标移入，出现下划线；说明：Axure设计中采用样式二。1.1.4日期、时间14px，#；各模块首

6、页信息发布时间和评论、回复的时间显示方式按照以下方式，分时间段进行显示：发布时间距离现在时刻显示格式示例>=1周年-月-日小时:分(24进制时间)2014-12-518：00>=1天and<1周X天前>=1小时and<1天X小时前>=1分钟and<1小时X分钟前<1分钟“刚刚”刚发布的评论或者回复15备注：详情页信息发布时间以“年-月-日小时：分”形式完全显示。1边框使用Axure设计时所有有线条边框，边框颜色均设置为#cccccc.2图片、图标2.1图片2.1.1用户头像样式一：menu导航，30*30px动态60*60px；用户昵称：8字符+…，14px，#；样式

7、二：个人档100*100px；用户昵称：8字符+…；样式三：搜索导航结果30*30px；用户昵称：8字符+…；151.1.1课程图片（按需而定）摘要样式主题区域：120*90px详情页样式：400*300px1.1.2广告图片（按需而定）主体区域：860*300px侧栏区域：310*200px竖形广告：270*170px1.2图标社交操作图标大小：16*16；默认颜色：#，鼠标移入颜色变化;按钮操作100*40px，14px，居中；15网站logo图标：25*25，本身logo颜色；1设计样式规范1.1Tab选项卡样式一：18px，#，bold；选中