页面设计基本规范.docx
页面设计基本规范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号PSD中圆角：半径6px字体：宋体字号： 14号PSD小圆角：半径4px字体：宋体字号： 12号PSD7、字体1、在进行页面设计时执行此标准。2、字体大小均为偶数。3、需要更大字号时可以跟据偶数原则自定义。4、此规范只用于html代码使用的字体。语言场合代码效果中文功能点、工具、说明、注释.(中文最小字)font-family:'宋体' font-size:12px;用户体验设计团队导读、正文.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:'宋体' font-size:16px; font-weight:bold;用户体验设计团队头条、标题、按钮.font-family:'黑体'font-size:18px;用户体验设计团队大标题、按钮.font-family:'黑体' font-size:20px;用户体验设计团队大标题.font-family:'黑体' font-size:24px; font-weight:bold用户体验设计团队英文功能点、工具、注释.(英文最小字)font-family:Arial, Helvetica, sans-serif; font-size:10pxUser experience design team功能点、工具、注释、正文.font-family:Arial, Helvetica, sans-serif; font-size:12pxUser experience design team正文.font-family:Arial, Helvetica, sans-serif; font-size:14pxUser experience design team突出、重点.font-family:Arial, Helvetica, sans-serif; font-size:10px; font-weight:boldUser experience design team标题、醒目.font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:boldUser experience design team大标题、醒目.font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:boldUser experience design team8、目标target规则Target说明 1、在进行一般性页面设计时基本执行此标准，遵循有规律的原则。 2、新开窗口必须添加“target="_blank"”，当前窗口打开可以不添加“target="_self"” 注：如有以下列表中没有的标准，可以按照近似原则定义。 位置情况目标代码首页导读内容新开窗口target="_blank"标题内容新开窗口target="_blank"导航频道当前窗口target="_self"广告All新开窗口target="_blank"轮播All新开窗口target="_blank"城市城市新开窗口target="_blank"产品线产品线当前窗口target="_self"搜索搜索结果新开窗口target="_blank"通告证个人中心新开窗口target="_blank"友情链接All新开窗口target="_blank"二级首页(楼)楼楼当前窗口target="_self"层层当前窗口target="_self"标题内容新开窗口target="_blank"导读内容新开窗口target="_blank"更多All新开窗口target="_blank"三级列表页列表贴子内容新开窗口target="_blank"嵌入式专题内容新开窗口target="_blank"标签Tag标签Tag当前窗口target="_self"发表新贴发贴当前窗口target="_self"内容页发表新贴发贴当前窗口target="_self"翻页All当前窗口target="_self"查看短信个人中心新开窗口target="_blank"内容相关按钮All当前窗口target="_self"个人相关按钮All新开窗口target="_blank"外部链接All新开窗口target="_blank"广播台All新开窗口target="_blank"大秀场All新开窗口target="_blank"注册向导All注册新开窗口target="_blank"下一步下一步当前窗口target="_self"All说明帮助新开窗口target="_blank"底部信息All都快传媒新开窗口target="_blank"警察叔叔网警新开窗口target="_blank"东论LOGO东论新开窗口target="_blank"9、sns视觉规范一、全站有链接(可点击)的地方颜色全部为 #0657b2(具体可以参考页面基本规范-颜色)；二、左边,右边两栏的背景填充色为 #f5f8ff 描边色为 #d8e0ed；三、所有表示时间类的文字全部用 #,正文和标题用 #,其他地方如有冒号为后缀的文字一律用 #66666；四、其他地方的具体颜色请参照下图：。
