页面设计基本规范.docxVIP

页面设计基本规范 1、栅格系统 全站宽度980px,珊格单元为20,珊格间距为10。 此珊格并非最完美的珊格，但能够兼容历史页面及广告系统。 设计师进行页面设计时请按珊格节点进行设计。化零为整，化繁为简。 2、留白 全站区块间距统一为5的倍数，10px为最佳，最大不能超过25px。 上下相关联时可以缩减50%作为间距。 内容间距不能大于区块间距。 注：此规范不适用于A类专题设计。   3、图片image 图片标准： 1、图片尺寸为：宽x高(width*height)，均为20的倍数，最小使用为40。 2、图片命名规则为：类别 宽 x 高 . 扩展名(例:B320x180.gif) 3、为便于运营后期维护编辑，在页面设计时必须优先使用本列表中的尺寸。 4、在同一页面设计中建议最多不要使用超过4种尺寸的图片。 5、切割时请复制列表中的图片链接进行引用，方便第一次上线移交运营后，编辑通过图片位得知尺寸。 6、页面切割时请直接调用服务器上的标准图片，地址为： 7、如需要增加新尺寸图片请提交申请。 图片使用： 1、横向图片，适用于新闻及咨询图片、资讯幻灯等； 2、1：1图片，适用于展示人物头像、list图片展示等； 3、竖向图片，适用于模特、人像、服饰行业等； 注：此规范不适用于A类专题设计。 4、颜色 文字颜色 1、在进行一般性页面设计时基本执行此标准，遵循有规律的原则。 2、频道文字需要添加个性色时，可在正常状态下局部定义，鼠标移入时状态应该保持与规范统一。 注：此规范不适用于A类专题设计。 轻重/级别场合描述正常状态 (a:link )绿标移入(a:hover)效果一级黑标题、正文黑－篮二级黑引导、说明(导读)黑－篮三级黑标注、注解(用户名)灰－篮四级黑弱化(表单默认字)灰－黑一级蓝突出可点击链接蓝－蓝二级蓝突出推荐的链接蓝－橙橙色强化有重要信息的链接橙－蓝白色深色背景上反色使用白－白常用区块 此标准为非强制性标准，在不知道用什么颜色时用此标准。 注：此规范不适用于A类专题设计。 轻重/级别属性边线色填充色文字色效果灰边框区块划分、分隔蓝边框状态、正确信息黄边框信息提示、注意红边框警告、出错东论黄辅助东论形象时 5、表单 在进行一般性页面设计时推荐执行此标准，遵循有规律的原则。 特殊提交按钮可以参考“按钮Button”的规则。 注：新开发的产品包括专题，可全套设计个性风格表单。 名称／轻重属性调用代码使用注意效果演示一级输入框高度26px;文字14px定义宽度请修改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三级提交按钮高度18px;文字12px定义宽度可以增加style=width:100px多行文本框文字12px定义宽高可以修改rows=4 cols=40或者增加style=width:100px;height:24px;下拉菜单文字12px单选按钮无复选框无 6、按钮 一级按钮 1、在进行一般性页面设计时基本执行此标准，遵循有规律的原则。 2、在定制个性按钮时，可以调整颜色，但需要保留透视强度、角度、大小、留白。 3、按钮中添加图标时，请遵循图标icon使用规范。 注：此规范不适用于A类专题设计。 轻重/级别设计参数规则正常normal盘旋hover按下click下载PSD大圆角：半径8px字体：黑体字号： 20号 HYPERLINK /ui/2009/01/psd/Button_a.psd PSD中圆角：半径6px字体：宋体字号： 14号 HYPERLINK /ui/2009/01/psd/Button_a.psd PSD小圆角：半径4px字体：宋体字号： 12号 HYPERLINK /ui/2009/01/psd/Button_a.psd PSD7、字体 1、在进行页面设计