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

页面设计统一规范1页面布局 22logo使用规范（按需而定） 42.1注册登录首页logo 42.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翻页 107.9弹窗 107.10浮层（按需而定） 107.11表单（按需而定） 117.12下拉菜单 117.13社交元素 118页头、页脚 118.1页头 118.2页脚 12页面布局在页面布局中，对各个功能区域的切分是按照“像素”和“比例”方式来进行的，本项目设计以1200*h的分辨率做为基准，其中：·Head区域，宽度按照网页分辨率的100%设置，即为1200px；页头包括logo（顶部区域左1/3区域）和menu区，高度为hpx；·Content区域，宽度与页头保持一致，为1200px，当区域分为两栏时，第一栏宽度为860px，第二栏宽度为310px，间距为30px。·当区域分为三栏时，第一栏宽度为200px，第二栏宽度为630px，第三栏宽度为310px，中间间距均为30px。如图1、图2所示。高度根据实际内容进行设置；·Foot区域，宽度按照浏览器100%设置，高度为hpx。图1两栏布局图2三栏布局logo使用规范（按需而定）注册登录首页logo270px100pxa.尺寸：270*100px;b.背景颜色：#5175B8；其他页面logo（教育）108px40pxa.尺寸：108*40px；b.背景色：#5175B8；频道首页logo（学校首页）90px60pxa.尺寸：190*60px；b.背景色：#ffffff；菜单栏尺寸：1200*100px；背景颜色：#ffffff；Menu：#666666，20px；Menu之间间距：40px；（ps.若菜单内容变化时需要根据实际情况调整。）文字字体和大小中文采用“微软雅黑”，英文采用“Arial”。对于页面属性中字体大小的设置，需要内容的不同级别来设置，一般标准为： 模块 类别 大小 颜色 位置 Head Menu导航 20px #666666 登录/注册 18px #666666 登录后用户名 14px #333333 搜索框 14px 提示语：#999999；关键字#333333 content 栏目标 18px+bold #666666 居左 内容标题 16px+bold #333333 居左 正文 14px #999999 居左 foot 标题 16px+bold #FFFFFF 居左 正文 14px #FFFFFF 居左 弹出框 标题 14px+bold #333333 正文 14px #333333 输入框 14px #666666 居左 提示文字信息 14px #999999 页面最小文字 14px 其他情况 根据内容需求相应调整 如需标题突出，则可为20+px 文字样式正文标题居左显示；字体颜色为#333333；正文颜色为#666666，行间距：24px；页签文字：18px，#333333+bold；列表栏目标题文字：18px，#333333+bold；文字：14px，#666666，28字符+…+日期（14px，#999999）；行间距：24px；链接（按需而定）样式一：鼠标移入，字体颜色变化；样式二：鼠标移入，出现下划线；说明：Axure设计中采用样式二。日期、时间14px，#999999；各模块首页信息发布时间和评论、回复的时间显示方式按照以下方式，分时间段进行显示： 发布时间距离现在时刻 显示格式 示例 >=1周 年-月-日小时:分(24进制时间) 2014-12-518：00 >=1天and<1周 X天前 >=1小时and<1天 X小时前 >=1分钟and<1小时 X分钟前 <1分钟 “刚刚” 刚发布的评论或者回复备注：详情页信息发布时间以“年-月-日小时：分”形式完全显示。边框使用Axure设计时所有有线条边框，边框颜色均设置为#cccccc.图片、图标图片用户头像样式一：menu导航，30*30px动态60*60px；用户昵称：8字符+…，14px，#666666；样式二：个人档100*100px；用户昵称：8字符+…；样式三：搜索导航结果30*30px；用户昵称：8字符+…；课程图片（按需而定）摘要样式主题区域：120*90px详情页样式：400*300px广告图片（按需而定）主体区域：860*300px侧栏区域：310*200px竖形广告：270*170px图标社交操作图标大小：16*16；默认颜色：#999999，鼠标移入颜色变化;按钮操作100*40px，14px，居中；网站logo图标：25*25，本身logo颜色；设计样式规范Tab选项卡样式一：18px，#333333，bold；选中颜色变化；样式二：文字：16px，#333333，bold；选中颜色变化；样式三：豆腐块名称18px，#333333，bold；面包屑16px，#666666，bold；步骤条（按需而定）图标：170*40；字体：16px,#666666；搜索搜索框大小：400*38；搜索框内字体：14px，#333333；按钮社交操作按钮一：180*40px社交操作按钮二：100*30px社交操作按钮三：80*30px提示样式一：提示框：260*100px；文字14px，#333333；按钮：60*30；输入框输入框一般高度为40px，如登录注册中，根据实际情况可以调整输入框的高度和宽度；翻页文字：上一页，1/13页，下一页，14px，#666666；当前页面显示条数：一般为5-10条，具体数目根据不同情形而定；弹窗样式一：文字说明性弹窗，尺寸：660*?px；标题文字20px，#333333,bold；正文：16px，#333333；提示文字16px，#999999；按钮：?*30；文字：#333333，16px；说明：根据说明性文字内容，确定该类弹窗的大小样式二：尺寸：500*?px；500px标题：#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。浮层（按需而定）样式一：45*45px，背景颜色#B3B3B3，鼠标移入背景色变为#f8991d；文字大小：14px；鼠标移入——>样式二：45*130px，文字：14px，#ffffff，背景颜色#f8991d；表单（按需而定）复选框文字：16px，#333333；单选框文字：16px，#333333；下拉菜单文字14px,#666666;鼠标移入：文字可以链接；社交元素社交操作图标大小：16*16；默认颜色：#999999，鼠标移入颜色变化;按钮操作100*40px，14px，#333333，居中；页头、页脚页头 模块 类别 文字大小 颜色 位置 Head Menu导航 20px #666666 登录/注册 18px #666666 登录后用户名 14px #666666 Foot 标题 16px+bold #666666 居左 正文 14px #666666 Head：1200*100px；Foot：1200*340px；logo：一级首页logo（教育首页logo）、二级logo（学校首页logo、个人首页logo）；页脚样式一：（学校页面）页脚信息按照从左到右的排列次序为：1、外部导航；2、内部导航；3、各类许可证、授权声明、英文版权信息“copyright”、中文版权信息、各类网络安全/工商证明/技术支持LOGO4.文字：14px；#ffffff；样式二：（教育页面）1