谋思网Web页面设计规范V1﹒0.pptVIP

谋思网设计规范 V1.0 徐川寻 v是version的缩写 v1.0就是第一个版本呢 产品部 product Department 目录 一、 基础规范 二、XHTML制作规范 01.网页的宽度和布局 1.1.一栏式布局、两栏式布局、三栏式布局 1.2.对齐方式02.头部和页尾设计03.页面元素 3.1.网站广告 3.2.网站表单设计 3.3.翻页 3.4.按钮04.文字设计05.图片 一、网页布局 01.目前我们网站的统一宽度为970px(特殊页除外) ①布局结构一般分为，一栏式、两栏式和三栏式布局。 01.1.布局 一栏式布局的页面我们主要用于结构简单，信息量小的一些页，如：注册页面、留言页、等视觉流清晰便于用户快速定位。 两栏式布局我们多用于列表页、资讯详细页等；这种结构能引导用户将视觉焦点放在大面积的主要内容上，右侧可放置次要的信息或者广告，在用户阅读内容的同时或之后才能引导其关注更多相关信息。 三栏式布局我们用于信息量比较多的页面，例如一些一级页面和频道页。 ①例如：关于我们、foot部分的一些页面 网页设计中的”对齐”同传统的印刷排版中的对齐概念是一样的，并且同等重要。 并不是说一切都应该在一条直线上，而是尽可能的保持一贯的整齐，保持整个页面的通透性使我们的设计更有序。更方便阅读。 我们的版块之间的间距一般为10px。??? 一、网页布局 01.2.对齐 二、头部和页尾设计规范 1.头部 网站头部，也称为header 目前我们网站常采用的头部设计主要包括一下2种类型。 背景色的填充宽度都是为100% 备：网站头部和底部都是写在单独的页面中，程序嵌套页面的时候只需要调页面相关统一的头部和底部即可，以便于日后的修改方便。 同一级别或者同一类型页面的头部设计尽量保持一致。 （样式一） （样式二） 二、头部和页尾设计规范 1.页尾设计 网站尾部，也称为Tailer,指的是页面底部部分。 需要注意的是，页尾的信息不要过多过杂，整站能统一的地方尽量保持统一。 目前我们整站有2种类型，一种只针对我们的网站首页使用，另一种用于网站首页除外的页面。 关于页尾的设计新趋势 为了更好地利用网站的空间，目前有些网站在页尾除了放置联系方式和行版权信息外，也放置网站的辅助导航，使页尾发挥更大的引导作用（如下图）。 三、页面元素 1.广告位 目前网站的广告位尺寸大概分为以下几种： 1、970像素 * 100像素 2、970像素 * 90像素 3、690像素 * 100像素 4、270像素 * 100像素 5、250像素 * 100像素 6、250像素 * 90像素 其他的广告位根据实际情况来定，不管是什么格式的广告位，一定要保证图片的清晰质量高，广告位的尺寸尽量为整。 2.图片 同页面中，相同的地方的图片大小要一致，便于后台提取，例如： 2.表单设计 表单是网站中运用较多的页面元素之一，主要用于采集和提交 用户输入的信息，可以通过表单采集用户的名字和E-mail地址等各种信息，最典型的就是注册表单或会员资料表。 视觉美观的表单，能够使表单填写更加舒适，比如较大的字体和间距，不会让用户产生局促感等。 三、页面元素 我们一般采用标签右对齐的方式，这样可以减少标签和输入框的距离， 可大量减少眼睛移动和填写表单的时间，而且又美观。 对于内容较多的，我们尽量按逻辑分组。 对于这种表单，我们尽量加上border,以至于各浏览器效果一致。 3.翻页 翻页也是我们常用的元素之一，尤其是列表页多用 目前我们网站使的样式为： 目前样式比较多，也不是很美观，待统一。 4.按钮 按钮的主次关系，当页面上同时出现2个及以上的按钮时，比如 我们就需要根据按钮间逻辑关系，重要程度及使用场景等考虑其主次关系，在突出主要按钮的同时，有必要减轻次要操作的视觉重量。 三、页面元素 4.文字 网页中总体上使用：??????字体 font-family:Arial, 宋体????? 字号 font-size:12px 14px;????? 字色 暂时还没有统一，按情况来定 　 字体设置上请尽量使用双尾数值，比如 12px 14px 16px 22px：??? ?文字的行间距使用双尾数值：???? ?12号字体常用行间距│22px ｜ 24px 特殊情况除外???? ?14号宋体常用行间距 24px│特殊情况除外 链接规范：　　链接不带下划线为链接通常的默认风格，特殊位置为了美观和明显可特例。　　链接的颜色可配合主题颜色风格改变，但鼠标移动其上时的链接颜色，本网站统一为加下划线“#BA2636；”。