页面设计基本规范.docx

《页面设计基本规范.docx》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、页面设计基本规范1、栅格系统全站宽度980px,珊格单元为20,珊格间距为10。此珊格并非最完美的珊格，但能够兼容历史页面及广告系统。设计师进行页面设计时请按珊格节点进行设计。化零为整，化繁为简。2、留白全站区块间距统一为5的倍数，10px为最佳，最大不能超过25px。上下相关联时可以缩减50%作为间距。内容间距不能大于区块间距。注：此规范不适用于A类专题设计。3、图片image图片标准：1、图片尺寸为：宽x高(width*height)，均为20的倍数，最小使用为40。2、图片命名规则为：类别

2、宽x高.扩展名(例:B320x180.gif)3、为便于运营后期维护编辑，在页面设计时必须优先使用本列表中的尺寸。4、在同一页面设计中建议最多不要使用超过4种尺寸的图片。5、切割时请复制列表中的图片链接进行引用，方便第一次上线移交运营后，编辑通过图片位得知尺寸。6、页面切割时请直接调用服务器上的标准图片，地址为：7、如需要增加新尺寸图片请提交申请。图片使用：1、横向图片，适用于新闻及咨询图片、资讯幻灯等；2、1：1图片，适用于展示人物头像、list图片展示等；3、竖向图片，适用于模特、人像、服饰

3、行业等；注：此规范不适用于A类专题设计。4、颜色文字颜色1、在进行一般性页面设计时基本执行此标准，遵循有规律的原则。2、频道文字需要添加个性色时，可在正常状态下局部定义，鼠标移入时状态应该保持与规范统一。注：此规范不适用于A类专题设计。轻重/级别场合描述正常状态(a:link)绿标移入(a:hover)效果一级黑标题、正文黑－篮二级黑引导、说明(导读)黑－篮三级黑标注、注解(用户名)灰－篮四级黑弱化(表单默认字)灰－黑一级蓝突出可点击链接蓝－蓝二级蓝突出推荐的链接蓝－橙橙色强化有重要信息的链接橙

4、－蓝白色深色背景上反色使用白－白常用区块此标准为非强制性标准，在不知道用什么颜色时用此标准。注：此规范不适用于A类专题设计。轻重/级别属性边线色填充色文字色效果灰边框区块划分、分隔蓝边框状态、正确信息黄边框信息提示、注意红边框警告、出错东论黄辅助东论形象时5、表单在进行一般性页面设计时推荐执行此标准，遵循有规律的原则。特殊提交按钮可以参考“按钮Button”的规则。注：新开发的产品包括专题，可全套设计个性风格表单。名称／轻重属性调用代码使用注意效果演示一级输入框高度26px;文字14px定义宽度

5、请修改size="30"或者增加style="width:100px"二级输入框高度22px;文字12px定义宽度请修改size="35"或者增加style="width:100px"三级输入框高度18px;文字12px定义宽度请修改size="35"或者增加style="width:100px"一级提交按钮高度26px;文字14px定义宽度可以增加style="width:100px"二级提交按钮高度22px;文字12px定义宽度可以增加style="width:100px"三级提交按钮高度1

6、8px;文字12px定义宽度可以增加style="width:100px"多行文本框文字12px定义宽高可以修改rows="4"cols="40"或者增加style="width:100px;height:24px;"下拉菜单文字12px单选按钮无复选框无6、按钮一级按钮1、在进行一般性页面设计时基本执行此标准，遵循有规律的原则。2、在定制个性按钮时，可以调整颜色，但需要保留透视强度、角度、大小、留白。3、按钮中添加图标时，请遵循图标icon使用规范。注：此规范不适用于A类专题设计。轻重/级别设

7、计参数规则正常normal盘旋hover按下click下载PSD大圆角：半径8px字体：黑体字号：20号PSD中圆角：半径6px字体：宋体字号：14号PSD小圆角：半径4px字体：宋体字号：12号PSD7、字体1、在进行页面设计时执行此标准。2、字体大小均为偶数。3、需要更大字号时可以跟据偶数原则自定义。4、此规范只用于html代码使用的字体。语言场合代码效果中文功能点、工具、说明、注释...(中文最小字)font-family:'宋体';font-size:12px;用户体验设计团队导读、正文

8、...font-family:'宋体';font-size:14px;用户体验设计团队大正文...font-family:'宋体';font-size:16px;用户体验设计团队突出、醒目、按钮...font-family:'宋体';font-size:12px;font-weight:bold;用户体验设计团队重点、标题、按钮...font-family:'宋体';font-size:14px;font-weight:bold;用户体验设计团队头条、标题、按钮...font-family:'宋