软件界面设计规范 V1.0-视觉部分.doc

软件界面设计规范_V1.0-视觉部分.doc1 / 13
软件界面设计规范
1 概要
界面设计中一定要保持界面的 一致性 。
一致性既包括使用 标准的控件 ，也指使用 相同的信息表现方法 ，如在字体、标签风格、颜色、 术语、显示错误信息等方面确保一致。
界面 / 13
窗口风格
窗口风格要注意表现的一致性。
1）报错页面的风格一致，最好有统一的报错页面
2） 类似功能的窗口打开的风格要一致
3） 相同功能在不同模块的名称要一致
4） 子窗体应尽量在显示在主窗体的左上或居中放置
5） 弹出式窗口尽量在不借助滚动条的情况下显示所有内容
6） 框边界要与背景有区分，边界要清楚。
7） 弹出框的文字要有对齐，当不同长度文字的排版出现对对齐不一致的时候，上下文字必须统一右
对齐， 输入框统一左对齐，如果文字对其空间不够，可考虑换行。
11 / 13
9页面留白
无论是在页面中还是在弹出层中，内容距离上下左右的边距都不能太近，这样有助于用户的浏览，
给用户浏览以喘息的空间。如下图：
顶部留白10px~15px,上下边距10px~15px，左右边距15px~20px，行与行输入框距离 5px~10px。
具体留白大小可根据软件的具体情况统一设定，整体保持统一性即可，不可同一软件中不同标准执
行。
12 / 13
10字体规范
：
软件中所用字体一般是电脑系统的默认字体。
汉字：宋体、黑体、微软雅黑。
英文： Arial, Verda na。
13 / 13
：
软件中一般用14px和12px，14px文字主要用于一级菜单和板块的标题区标题， 12px文字
字体颜色：
通常情况：黑色( #000000 )
深色背景中：白色( #ffffff )
白色背景中：深灰( #333333 )
表格中链接的默认色：天蓝色( #0059D5) 链接的鼠标滑过 hover 色：红色( #ff0000 ) 警示性文字的颜色：红色( #ff0000 )如：必选项的提示符号 “*“。
11 页面元素
按钮
按钮风格相同，大小相似，字体一致 无效按钮要屏蔽。高： 24 像素，宽：根据文字长度定；按钮 的文字居中，字体统一大小 12px、右、下、左的边距分别为： 6x,12x,6x,12px，按钮之间的间距统-
为 8px；
表格
表格整体色调采用灰调，便于用户长时间操作部视觉疲劳，表格分为标题部分，主体内容部分。标 题部分应该用相应的颜色加以区别， 表格隔行应用不同的颜色加以区别。 表格选中行应用色调区分， 表格的行高为25像素。表格四周的文字要有空隙 padding属性2px。不同表格之间必须有对齐。如
(图 19)三个表格之间表格的顶部、 底部都应该有对齐，表格之间应有空隙，空隙。
14 / 13
输入框

必输项中不可为空，不可输入空格
16 / 13
必输项给出必输项标识( * )

超过数据库规定长度时不允许输入
多行文本输入、文本区域
尺寸：自定义
内边距上下左右皆为 5px
行距为
边框：宽度 1px，颜色#666666

1） 身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定

1 ）日期显示格式一致，如 ： yyyy-mm-dd
2） 使用日期控件，尽量不是手工录入
3）如需要限制日期选择范围，则超出范围的日期应为灰色不可选状态。
'"=~$% 人％

1 ）输入区域输入特殊字符， 插入数据库时不出错或提示不允许输入特殊字符。 特殊字符包括：
16 / 13
¥ &#@等

英文输入不区分大小写，不可输入汉字、数字及特殊字符

只能输入 + - 0~9及功能键 （BackSpace 光标）

1）如果支持日韩文字，则要判断全角假名 / 半角假名
单行文本框 / 多行文本框
1） 长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标
在旁边。 建议单行文本框中当输入的字符超过一定长度时再输入无效； 对于多行文本框给出最大字 符数标识
附件
1）可正常添加符合格式的附件
2）附件可正常打开和保存，附件名较长时可正常操作
3）直接输入错误的附件地址，保存时应给出提示信息
4）附件打开 / 保存到本地时，文件名要显示原文件文件名
密码输入
1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的