软件界面设计要求标准规范视觉部分.doc

软件界面设计规范_V1.0
1 概要
界面设计中一定要保持界面一致性。
一致性既涉及使用原则控件，也指使用相似信息体现办法，如在字体、标签风格、颜色、术语、显示错误信息等方面保证一致。
界面力求简洁明了，保证系统功能设计合理与明确，布局明确、交互操作合理、协调统一。功能要体现清晰，分类清晰有条理，避免过多控件嵌套导致视觉混乱；单一功能操作目明确，符合易用性原则，避免不必要信息显示而对顾客导致视觉干扰；力求操作简朴，简朴功能一步完毕，比较复杂功能三步之内，复杂功能操作使用操作向导来辅助客户完毕。
2 色调风格
2.1 色调：
软件界面设计中惯用主色调涉及：蓝色、红色、绿色、黑色
蓝色：运用行业较为广泛，如通讯、电子、房产、钢铁、生产管理等行业大某些以蓝色为主色调来设计软件。
红色：在政府单位运用比较多。
绿色：普通运用于教诲、医疗、农林等行业。
黑色：能源、石油、房地产行业有时候会用中性黑色作为主色调。

体现区：通惯用浅色，如：白色、淡灰、或者淡蓝之类，由于大面积文字信息在浅色上便于长时间阅读，不容易形成视觉疲劳。

2.2 风格：
软件界面风格普通比较简约。不同行业，使用环境不同稍有差别。
3 登录界面
基本元素：logo、系统名称、输入框、提交按钮。如下：

4 页面逻辑构造

软件界面普通是上面这样逻辑构造
首页：宏观预览各项设备管理数据，迅速访问盼望数据功能
功能页面：查看某一功能模块所有数据，查看某一对象各类有关数据
弹出页面：填写和提交表单，对功能中某一单项数据进行增长/删除/查询/修改/审核/打印/导出等功能操作。

5 页面基本属性
页面宽度：属性值为auto，最小值1024像素。默认状况下无横向滚动条。
注意：宽度、位置、边距为不可变数据
背景：页面整体为白色背景#FFFFFF 或者浅灰、浅蓝等，总之是非常接近白色颜色。
注：白色为惯用色值，对于特殊个性化页面可依照特殊规定变更色彩；背景色彩尽量少用饱和度高颜色， 减少顾客视觉疲劳；背景图片遵循原则尽量选取可复用图片，减少页面文献量
页面位置：居中
页面边距：上 0px；下 0px；左 0 px；右 0 px；
注意：有时候会专门设立一定数值边距，这时普通
与模块间间距相似，如上下左右都是5px。

6 导航菜单
常用软件导航菜单有：左侧树状菜单、左侧伸缩菜单、windows原则定制导航
6.1 左侧树状菜单
合用于多级构造庞大软件架构。

6.2 左侧手风琴式菜单
这种菜单合用于相对小规模软件架构，简朴舒服型。
规范
1）菜单深度普通不要超过两层
2） 导航如不是客户特别规定定制，均制成类似以上导航，其中默认辨别率为1024*768。

一级菜单：图标32px_32px，字体14px、不加粗、#000000；
二级菜单：图标20px_20px，字体12px、不加粗、#333333；

6.3 Windows原则定制导航

7 页面构造
7.1 基本构造：原则头、内容区、原则尾
头部和底部详细内容不同软件设立有所差别，如有些软件将菜单栏设在原则头里边，而有些软件则设立在内容区左侧，但在不同同步，有诸多地方是相似。这里咱们所说就是共性。
7.2 原则头
logo&系统名称 | 基本操作区 合用范畴：所有常规页面 尺寸：宽100% 高60px~80px
7.3 原则尾 
技术支持&版本状况 | 版权信息 合用范畴：所有常规页面 尺寸：宽100% 高30px~50px
7.4 内容区
版块元素之间间距为5px

8 窗口风格
窗口风格要注意体现一致性。
1）报错页面风格一致，最佳有统一报错页面
2）类似功能窗口打开风格要一致
3）相似功能在不同模块名称要一致
4）子窗体应尽量在显示在主窗体左上或居中放置
5）弹出式窗口尽量在不借助滚动条状况下显示所有内容
6）框边界要与背景有区别，边界要清晰。
7）弹出框文字要有对齐，当不同长度文字排版浮现对对齐不一致时候，上下文字必要统一右对齐， 输入框统一左对齐，如果文字对其空间不够，可考虑换行。

9 页面留白
无论是在页面中还是在弹出层中，内容距离上下左右边距都不能太近，这样有助于顾客浏览，给顾客浏览以喘息空间。如下图：
顶部留白10px~15px，上下边距10px~15px，左右边距15px~20px，行与行输入框距离5px~10px。
详细留白大小可依照软件详细状况统一设定，整体保持统一性即可，不可同一软件中不同原则执行。
顶10PX
右20PX
左20PX
上15PX
下15PX

10 字体规范
10.1 字体：
软件中所用字体普通是电脑系统默认字体。
中文：宋体、黑体、微软雅黑。
英文：Arial，Verdana。
10.2 字号：
软件中普通用14px和12px，14px文字重要用于一级菜单和板块标题区标题，12px文字
10.3 字体颜色：
普通状况：黑色（#000000）
深色背景中：白色（#ffffff）
白色背景中：深灰（#333333）
表格中链接默认色：天蓝色（#0059D5）
链接鼠标滑过hover色：红色（#ff0000）
警示性文字颜色：红色（#ff0000）如：必选项提示符号“*“。
11 页面元素
11.1 按钮
按钮风格相似，大小相似，字体一致 无效按钮要屏蔽。高：24像素，宽：依照文字长度定；按钮文字居中，字体统一大小12px、右、下、左边距分别为：6x,12x,6x,12px，按钮之间间距统一为8px；
11.2 表格
表格整体色调采用灰调，便于顾客长时间操作部视觉疲劳，表格分为标题某些，主体内容某些。标题某些应当用相应颜色加以区别，表格隔行应用不同颜色加以区别。表格选中行应用色调区别，表格行高为25像素。表格四周文字要有空隙padding属性2px。不同表格之间必要有对齐。如（图19）三个表格之间表格顶部、底部都应当有对齐，表格之间应有空隙，空隙。
11.3 输入框
11.3.1 必输项
1）必输项中不可为空，不可输入空格
2）必输项给出必输项标记（*）

11.3.2 字段长度
超过数据库规定长度时不容许输入

11.3.3 多行文本输入、文本区域
尺寸：自定义
内边距上下左右皆为5px
行距为1.5em
边框：宽度1px，颜色#666666

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

11.3.5 日期格式
1）日期显示格式一致，如 ：yyyy-mm-dd
2）使用日期控件，尽量不是手工录入
3）如需要限制日期选取范畴，则超过范畴日期应为灰色不可选状态。

11.3.6 特殊字符
1）输入区域输入特殊字符，插入数据库时不出错或提示不容许输入特殊字符。特殊字符涉及：'"=~$%^%￥&#@等

11.3.7 英文输入
英文输入不区别大小写，不可输入中文、数字及特殊字符

11.3.8 数值字段
只能输入+ - 0~9及功能键(BackSpace 光标)

11.3.9 字符字段
1）如果支持日韩文字，则要判断全角假名/半角假名
单行文本框/多行文本框
1) 长度适当，可以容纳相应文字，但不能超过数据库该字段长度，最佳将可以输入最大字符数标在旁边。建议单行文本框中当输入字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标记
11.4 附件
1）可正常添加符合格式附件
2）附件可正常打开和保存，附件名较长时可正常操作
3）直接输入错误附件地址，保存时应给出提示信息
4）附件打开/保存到本地时，文献名要显示原文献文献名

11.5 密码输入
1）需在需求中定义密码与否容许为空或空格；密码与否容许特殊字符；与否区别大小写，密码可输入长度
2）程序中应给出文字阐明密码可输入长度入无效；对于多行文本框给出最大字符数标
11.6 Tab标签
圆角5px 背景色分设当前选中与非选中状态， 边框#ccc
如：
11.7 图片
格式：原则上尽量使用png格式图片，特殊图片可使用JPG
质量：图片画面显示清晰，不采用变化显示尺寸放大或缩小。图片画面（特别是人物图像）不容许变形。
文献大小：控制在40KB内为宜。
命名规则：图片按照图片描述直接命名。图片名称均由小写字母、数字和“_”构成，不能有空格或其
她字符，放置于images文献夹中。
11.8 框架
当框架界面长度超过显示终端最大辨别率高度，提供下拉滚动条；
框架某些设计应考虑节约屏幕空间，各种辨别率大小，缩放时状态和原则，并且为将来设计按钮、菜单、标签、滚动条及状态栏预留位置；
主菜单放在左边或上边，滚动条放在右边，以符合顾客使用中视觉流程。
列表均采用表格或框架呈现，默认状况下尽量不浮现横向滚动。

12 顾客界面行为
12.1 鼠标
1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；
12.2 系统响应时间
系统响应时间应当适中，响应时间过长，顾客就会感到不安和沮丧，而响应时间过快也会影响到顾客操作节奏，并也许导致错误。因而在系统响应时间上坚持如下原则：
响应时间长度界面设计：
1）0-5秒鼠标显示成为沙漏；
2）5秒以上显示解决窗口，或显示进度条；
3）一种长时间解决完毕时应予以完毕警告信息。

12.3 光标定位
1）打开新增（修改）页面时，光标初始定位在第一种待输入文本区
2）因输入不对的提示顾客重新输入时，光标默认focus在出错输入区，并高亮全选该错误输入
3）若必输项未填写完毕就提交，应给出阐明信息并能自动获得焦点
4）可写控件检测到非法输入后应给出阐明并能自动获得焦点

12.4 TAB键
1）界面支持键盘自动浏览按钮功能。即TAB自动切换功能
2）Tab键顺序与控件排列顺序要一致，普通状况下总体从上到下，同步行间从左到右方式