系统页面设计规范V1.0
柯建树2013/07/30
目录
一、基础规范
01、系统宽、高度
02、文本框设计规范
(1)基础规范
(2)应用场景
03、页码设计规范
(1)普通页码翻页
(2)小型页码翻页
04、文字的编排与设计
(1)文字大小
(2)文字颜色
(3)文字行距
(4)英文字体规范
(5)文字链接
05、整齐的概念和应用
06、模块化表现
二、参考指南
01、页面修饰
(1)简单的光影效果
(2)质感的表现
(3)透明效果的应用
02、个性皮肤的应用
03、图标的统一使用
04、图标表意
05、表格
基础规范
一、系统宽、高度
显示器分辨率比例
在软件系统的使用上，遵循以大多数为视觉标准，同时遵循其他分辨率的显示效果。
软件系统一般采用满屏显示内容，宽度为100%，高度100%，在设计网页时，应与使用量最大的分辨率作为参照，即1024px*768px。
在这个尺寸上，系统应当具有全部显示的能力。
不同浏览器，不同分辨率下网页第一屏最大可视区域
在IE下，宽度21表示17px的滚动条加上4px的浏览器边框，做到全部兼容，以小分辨率设计，目前我们系统的设计标准是1003*600。
即PS的设计文档1003px*600px，72dpi。
二、文本框设计规范
尺寸大小
(1)小型输入框应至少设置5个中文字符宽度，内边距（padding）上下3px，左右7px，单行不少于18px；
(2)大型输入框应至少设置8个中文字符宽度，内边距（padding）上下3px，左右7px，单行不少于18px；
(3)搜索框设计宽度至少设置8个中文字符宽度，内边距（padding）上下3px，左右7px，单行不少于18px，宽度不少于130px；
帮助信息
(1)帮助信息一般有二类，限定标签提示、标示性文字等；
(2)“限定标签提示”一般放在搜索框的左面；
(3)“标示性文字”可设置灰色（#CCCCCC）显示，点击输入框后提示文字消失。
提示文字应简明扼要，文字一般用于内容、用途、搜索范围等对用户有真正帮助意义的提示，“请输入关键字”这样的提示不应出现。
1、2、
搜索按钮
(1)搜索按钮一般采用图表形式、文字形式和图标加文字三种;
(2)使用图标形式时只能使用放大镜的图标，而不能使用其他元素。
(3)三种情况如下图：
a、
b、
c、
同一套系统产品中，搜索框的位置和表现形式尽量保持一致
三、页码设计规范
数据量大与数量小的系统都可以统一设计成详细、可操作性强的页码
(1)图标表示，以“回车”图标为标准制作；
(2)文字表示，以“确定”字样为标准制作；
四、文字的编排与设计
总体原则：提高文字的辨识力和页面的易读性。
(1)文字大小：绝大部分使用12px+14px字体的混合搭配，13px可以酌情考虑，因为13px字体的不对称，目前非主流。
A、突出的部分、栏目标题等用14px字体；
B、辅助信息、介绍性文字、列表标题用12px字体；
C、内容标题用22px（h1），居中显示。
D、避免大量使用粗体。
特别注意：菜单尽量不要用12px的加粗字体，这样会导致复杂的文字难以辨认，多采用14px的加粗。
(2)文字颜色
A、同一系统需要定出主题文字颜色；
B、一般情况下字体变化不要超过三种，若有需要，可以尽量采用同一字体的字族；
C、正文的颜色多用深蓝色或灰黑色，以PS的色系为标准。
灰黑色
建议使用
深蓝色
建议使用纯蓝色
(3)文字行距
A、视觉最佳行距是字体大小的1.3-1.6倍；
B、12px宋体，一般使用的行距是8-9px
C、14px宋体，一般使用的是11-12px；
D、正文一般采用14px字体，行距为10-16。
(4)英文字体的使用
A、英文字体建议使用Arial：Arial为无衬线字体，与汉字最为匹配，没有下划线贴边的问题，Q字没有尾巴，。
Css书写规范：font-family:Helvetica,Arial,simsun
(5)文字链接
文字链接不超过3种颜色（规定一种为主要链接颜色），当用户不知道这个是链接的时候就是失败。
五、整齐的概念和应用
(1)解释类及摘要类文字
A、解释性文字无需首行空2个中文字符
B、文章摘要无需首行空2个中文字符
(2)内容正文应该空2行
(3)栏目模块对齐，相同的模块，边框对齐，文字对齐，内边框与文字的间距不少于10px 且对齐。
六、模块化表现
设计准则：同一个系统的模块化表现是全部统一的。
(1)边框线条
(2)模块圆角
(3)模块背景
参考指南
一、页面修饰
(1)简单的光影效果
(2)质感表现
基本采用简单的渐变，不需要繁杂的修饰。
(3)透明效果
二、个性皮肤的应用
设计准则：个性皮肤的更换，在系统元素不变的情况下，更换皮肤，不降低视觉效果。
系统本身元素不变，背景变化。
三、图标的统一使用
图标下载地址：
同一种系统下，图标使用尽量用一种风格图标。
四、图标表意
图标表意对于用户直观感受至关重要，不要滥用和乱用图标。
(1)系统中已经达成共识的主题图标图形符号--在界面中此类图标图形符号的所指已经固定，通过系统的广泛使用和推广被用户广泛接受，这类图标在独立使用的情况下图形符号都已经相对固定，在图形的使用中不能给这些图形增加新的定义。
(2)常用主体图标具象图形与指示辅助图形组合--侧重与对表示一种状况的动作辅助图
形的归类和表现。
四、表格
表格分表头，表身，表尾，在整体设计中，3块应该区分严格且清晰。
(1)表头是表格中每一列的标题概括，本身具有title的含义，是指引用户的关键，在表格中突出表头最为关键，表头的背景色应该突出，字体大小14px加粗，用来区分表头与表
身。
(2)表身是一个表格的主题，呈现数据的地方，需要正式平淡的风格，应该用简单而又淡雅的颜色，且单双行换色。
(3)表尾呈现的是页码。