B4 《页面UI设计规约》
1.目的
本页面概要设计UI规约（简称“UI规约”）是针对某某系统（以下简称“本系统”）所规定的页面约定，其目的有两点。
①为用户提供统一的网站系统接口。
②明确具体的可访问性与可用性方针。
2.通用性
本系统以通用性设计为根本考虑点进行设计，需要遵循以下规约。
①开发Web网站系统时要遵循最新W3C（World Wide Web Consortium）的技术标准，同时要兼顾可访问性的其他辅助标准。
②要考虑利用者与系统交互的效率，同时不需要借助特定的额外输出/输入装置。
③对于高龄者或者轻微视觉、听觉障碍者，为其使不在本网站Web系统取得信息时有障碍，需要考虑内容的表现形式及操作方法。
④不要让利用者因为经验、知识、文化、语言的差异而产生误解或者不足，要构建一个容易理解的系统。
3.基本方针
（1）客户环境
本系统使用范围为利用PC的XX用户群。
①客户对象浏览器。
Microsoft Internet Explorer11以上，其他浏览器不在品质担保范围内。
浏览器设定如附表B4-1所示。
附表B4-1 浏览器设定
②浏览器像素。
a.1024×768像素以上。
b.全页面表示时的大小，也就是有效显示领域。
（2）使用规定
①使用语言。
a.以W3C推荐的XHTML1.0为标准。
b.以W3C推荐的CSS1、CSS2为标准。
②XHTML及CSS使用方法。
a.XHTML：用于构造页面要素内容。
b.CSS：用于页面要素内容的显示形式。
（3）页面要素
①操作性。
a.链接或者表单组件，要根据TAB键设定的顺序来移动。
b.光标的初始位置。
如果有输入框时，在第一个输入框。
如果是确认或者结束页面，需要在确认按钮或者结束跳转按钮上。
其他情况任意。
c.一个人利用键盘与鼠标可以完成所有操作。
d.页面之间不使用自动跳转的部件。
e.不使用需要定期更新的部件（如需要，可用浏览器下载或者更新某插件，目的是降低使用者使用的复杂性与排斥感）。
f.对动作键不进行控制（如〈F5〉键等，不进行屏蔽控制）。
②显示。
a.不使用忽明忽暗的要素。
b.链接之间要至少有一个半角空格进行间隔。
c.在理解或者操作页面元素时所需的必要信息，不应该依存于某种形式或者位置。
d.网站地图要井然有序，提供适当的字体及行间距等。
e.页面内不使用页面转移的元素（例如：单击图片后就转移到新的页面，显示图片信息）。
③脚本与插件。
a.不使用ActiveX、JavaApplet、Flash等这些插件。
b.不使用依赖于浏览器的种类及版本的脚本语言或者标签库。
④文字编码。
统一使用UTF-8。
⑤文字种类。
不使用GB2312规定外的特殊文字。
⑥图片。
a.GIF格式，用于图标（Icon）等形式的图片。
b.JPEG格式，主照片等形式图片。
c.PNG格式，图表等形式的图片。
d.图片大小不要超过1MB。
⑦字体。
a.标准字体大小使用浏览器默认的大小。
b.错误消息字体大小使用14pt。
⑧颜色。
a.主要使用色系为深绿色，具体16位编码值如附表B4-2所示。
附表B4-2 页面基本色系
b.链接的颜色使用默认值即可，如附表B4-3所示。
附表B4-3 链接颜色
c.为了强调一部分文本内容或者错误消息要用红色，如附表B4-4所示。
附表B4-4 强调颜色
d.根据颜色来表现的内容，如果颜色不能够显示出来，也要让客户理解本来的原意。
e.在前景色与背景色混合的页面中，也要让有色盲症或者只能够识别黑白色的客户可以区别。
4.页面转移
（1）输入系
从菜单进入输入页面，为了防止输入错误需要有确认页面（并非所有系统都要有确认页面，应根据客户需求决定），最后到结果页面，如附图B4-1所示。
附图B4-1 输入系示意图
（2）参照系
从菜单进入检索页面，单击“检索”按钮显示检索结果一览，选择某一条数据进入参照页面，如附图B4-2所示。
附图B4-2 参照系示意图
（3）修改系
从菜单进入检索页面，单击“检索”按钮显示检索结果一览，选择某一条数据进入修改页面，之后进入确认页面，最后是修改结果页面，如附图B4-3所示。
附图B4-3 修改系示意图
①修改页面。
修改页面要有修改前后项目的修改对比效果，修改前所有项目为非活性（用于参照），修改后的项目默认值与修改前一样。对页面项目元素排版时，如果页面元素少（30以内），只需要一列显示即可，此时的修改页面，左侧为修改前信息，右侧为修改后信息。如果元素多（30以上），则需要考虑两列或者3列（最多3列）来排列，此时的修改页面，修改前后的元素可以上下安排，排列时，上下或者左右只能采取一种方式，如附图B4-4所示。
附图B4-4 修改前后排列形式
②确认页面。
确认页面要将有修改变化项目的背景色设置成浅黄色，用于提示其项目已被修改，如附图B4-5所示。
附图B4-5 修改前后背景色
（4）删除系
从菜单进入检索页面，单击“检索”按钮显示检索结果一览，选择某一条数据进入删除确认页面，最后是删除结果页面，如附图B4-6所示。
附图B4-6 删除系示意图
（5）其他
①提示消息。
说明信息显示的时候，不需要特别的转移控制（例如：利用Ajax在某一个操作完成时显示的提示信息，信息显示完毕随即消失）。
②警告消息。
警告信息显示的时候（例如：弹出警告对话框），处理是继续还是中止，要用户自己判断（上传同名文件时，给出是否可以覆盖的提示）。页面一般不会转移，而是回到本页面。
③确认消息。
确认消息显示的时候，处理是继续还是中止，要用户自己判断（例如：删除某一条数据时给出的弹出确认对话框）。如果继续，那么会转移到处理页面；如果中止，那么保留在本页面。
5.页面构成
（1）使用Frame
使用Frame进行页面的分割时，在主要内容显示区域不要再次使用其进行页面分割。
（2）基本构成
①版面设计。
a.网站全体分为头部、菜单、内容3部分。
b.页面文字大小如果是“中”且3屏还显示不完的话，则需要考虑分页来展示。
c.如果出现纵向滚动条，那么需要适当放一些引导到顶部的锚点链接。
d.不是特殊情况，不使用横向滚动条。
②各构成要素包含的内容如附表B4-5所示。
附表B4-5 页面内容要素
③各阶层版面设计图样。
a.菜单页面如附图B4-7所示。
附图B4-7 菜单页面排版
b.内容页面如附图B4-8所示。
附图B4-8 内容页面排版
④页面部件配置。
a.页面部件要纵向左侧对齐排列。
b.文本框等部件的标签要放在其部件的左侧。
c.表、表的列标题、行标题等要中间对齐。
d.页面主体四周要保留10像素以上的空白空隙。
e.部件之间要保持3像素以上的空白空隙。
（3）显示格式
页面项目主要的显示格式如附表B4-6所示（包括输入系、确认页面时的显示格式）。
附表B4-6 各种页面元素显示格式
（续）
（4）输入格式
①页面元素主要的输入格式如附表B4-7所示。
附表B4-7 各种页面元素输入格式
在上表中，输入项是日期的时候，有时需要提供文本框，进行数据的输入，如附图B4-9所示。
附图B4-9 日期格式
在上表中，输入项是金额时，需要自动加入逗号（当光标离开输入框时，自动进行格式转换），如附图B4-10所示。
附图B4-10 金额格式
②输入项。
对于页面必填项，要在标签后添加“*”，且字体颜色要用红色，给客户明显提示。
（5）消息
①在页面内容部分的上部显示。
②显示时，需要有图标、消息编码、消息内容3部分。
消息种类如附表B4-8所示。
附表B4-8 消息种类
（6）页面元素
①页面主要元素。
页面主要元素一般有10种，其使用场合与注意事项等详细信息如附表B4-9所示。
附表B4-9 页面主要元素
（续）
②基本按钮。
页面基本按钮如附表B4-10所示，其他业务按钮根据业务需求进行定义。
附表B4-10 基本按钮
③其他页面元素。
a.TAB顺序。
按〈Tab〉键，光标要在页面元素上按由上到下、由左到右的顺序移动。
b.样式（CSS）。
为统一管理，所有样式要放在样式文件中，不要单独在各个标签里写。
c.脚本。
脚本要放在其相应文件内，不要放入各页面标签内（例如：JavaScript要放在XX.js文件内，而不是放在XX.jsp文件内）。
d.输入验证错误。
输入框等验证错误时（单项目验证与相关项目验证），输入框的背景要变成粉红色进行提示。
e.其他。
不要在单词内留有空格。
不要使用ASCII码表情符。
不要使用没有意义的记号。
不要使用特殊数学表达式。
尽量使用中文，不使用英文来表现（可用在中文后的括号内说明）。
在有特殊情况时需要及时与PM商量，来决定表现形式。
（7）检索
①检索条件。
a.Code、日期等完全一致检索。
b.特殊有意义编号等前方一致检索。
c.住所、名字等部分一致检索。
②检索结果。
a.检索件数在一览右上侧显示。
b.一页最大显示条数为20条，超过20条要有翻页标签。
c.翻页标签要有一次一页（向前与向后）、一次10页（向前与向后）、最后页、最前页转移入口。
d.页面最大有10个翻页链接入口。
e.详细页面转移时，提供各行转移的按钮（或者链接）。
f.如果转移用的是按钮，要放在最右侧；如果是单选按钮，要放在最左侧。
g.检索结果为0件的时候，需要给出提示信息。
h.检索结果超过最大件数1000件时，需要给出警告信息并提供目前检索数据。
6.报表
①报表内容要可以在A4页面显示。
②横纵设计应根据数据项目需求。
③注意整体报表布局、防止数据项目顺序不合理、结构关系不明确甚至错误。
④行、列的宽与高要统一，大小适合。
⑤项目为数字时，需要显示业务允许的最大数据。
⑥需要一行显示的项目很多时，可用横向设计，亦可以通过缩小字体来增加必要项目。