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