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

1 / 14

概要
界面设计中一定要保持界面的一致性。
一致性既包括使用标准的控件,也指使用相同的信息表现方法，如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。
界面力求简洁明了,保证系px,上下边距10pｘ～15pｘ，左右边距１５px～２０px，行与行输入框距离5ｐx~10pｘ。
具体留白大小可根据软件的具体情况统一设定,整体保持统一性即可,不可同一软件中不同标准执行。
8 / 14
顶10PX
右20PX
左20PX
上15PX
下15PX
字体规范
字体:
软件中所用字体一般是电脑系统的默认字体。
汉字:宋体、黑体、微软雅黑。
英文:Aｒiａl，　Verｄａｎa。
字号:
软件中一般用1４ｐx和１２pｘ,1４px文字主要用于一级菜单和板块的标题区标题,1２ｐｘ文字
9 / 14
字体颜色:
通常情况:黑色(#0００００0)
深色背景中:白色(＃ffffｆf)
白色背景中：深灰(#３３３3３3)
表格中链接的默认色：天蓝色(＃005９Ｄ5)
链接的鼠标滑过hｏver色:红色(＃fｆ00０0)
警示性文字的颜色:红色(#ff０0０0)如:必选项的提示符号“＊“。
页面元素
按钮
按钮风格相同,大小相似，字体一致 无效按钮要屏蔽。高:24像素，宽:根据文字长度定;按钮的文字居中,字体统一大小1２px、右、下、左的边距分别为：6x,1２x,6ｘ，１2px，按钮之间的间距统一为8ｐｘ;
表格
表格整体色调采用灰调,便于用户长时间操作部视觉疲劳,表格分为标题部分,主体内容部分。标题部分应该用相应的颜色加以区别,表格隔行应用不同的颜色加以区别。表格选中行应用色调区分，表格的行高为2５像素。表格四周的文字要有空隙pａｄdiｎg属性2px。不同表格之间必须有对齐。如（图１9)三个表格之间表格的顶部、　底部都应该有对齐,表格之间应有空隙，空隙。
输入框
必输项
１)必输项中不可为空，不可输入空格
2)必输项给出必输项标识(*)　
10 / 14
字段长度　
超过数据库规定长度时不允许输入
多行文本输入、文本区域
尺寸：自定义
内边距上下左右皆为5ｐx

边框：宽度1ｐｘ,颜色#666６６6
格式校验
１)身份证号、Ｅ－MAＩL、邮箱等特定字段的格式要符合需求的规定
日期格式
１)日期显示格式一致，如　：yyｙy-mｍ-dｄ
２)使用日期控件,尽量不是手工录入　
３）如需要限制日期选择范围，则超出范围的日期应为灰色不可选状态。
特殊字符　
1)输入区域输入特殊字符,插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括:＇"＝~$％^%￥&#@等
11 / 14
英文输入　
英文输入不区分大小写,不可输入汉字、数字及特殊字符
数值字段　
只能输入+ －　0～９及功能键(BａckＳpaｃe 光标）
字符字段　
１)如果支持日韩文字,则要判断全角假名/半角假名　　
单行文本框／多行文本框　
１） 长度合适,可以容纳相应文字,但不能超过数据库该字段长度,最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识　
附件
１）可正常添加符合格式的附件
2)附件可正常打开和保存，附件名较长时可正常操作
3)直接输入错误的附件地址,保存时应给出提示信息　
４)附件打开/保存到本地时，文件名要显示原文件文件名 　
密码输入
1）需在需求中定义密码是否允许为空或空格;密码是否允许特殊字符；是否区分大小写,密码的可输入长度　
２)程序中应给出文字说明密码的可输入长度入无效；对于多行文本框给出最大字符数标
12 / 14
Tａｂ标签
圆角5ｐx 背景色分设当前选中与非选中状态， 边框#cｃc 　
如：
图片
格式：原则上尽量使用png格式图片,特殊图片可使用ＪPG
质量：图片画面显示清晰,不采用改变显示尺寸的放大或缩小。图片画面(尤其是人物图像）不允许变形。
文件大小：控制在40KＢ内为宜。
命名规则：图片按照图片描述直接命名。图片名称均由小写字母、数字和“＿”组成,不能有空格或其
他字符,放置于iｍagｅs文件夹中。
框架
当框架界面长度超过显示终端最大分辨率高度,提供下拉滚动条；
框架部分的设计应考虑节省屏幕空间,各种分辨率的大小,缩放时的状态和原则，并且为将来设计的按钮、菜单、标签、滚动条及状态栏预留位置;
主菜单放在左边或上边,滚动条放在右边,以符合用户使用中的视觉流程。
列表均采用