用户界面设计规范Word格式.docx
《用户界面设计规范Word格式.docx》由会员分享，可在线阅读，更多相关《用户界面设计规范Word格式.docx（17页珍藏版）》请在冰豆网上搜索。
3.界面设计要点
3.1.用户界面适合软件功能（适用性）
用户界面的适合性是指界面与软件功能相融洽的程度。
软件功能是通过用户界面来展现的，所以用户界面必然要适合软件功能，这是最大体的要求，若是用户无法通过界面来利用软件，"
易用性"
根本就无从谈起。
"
用户界面适合于软件的功能"
提示界面设计者不要片面追求界面外观漂亮而致使脆而不坚。
3.2.容易理解
用户界面中的所有元素不能出现错误文字，也没有令人费解（二义性）的文字；
图标按钮的含义必然要直观明了，最好图标加文字说明，避免用户误解；
界面结构能够清楚地反映工作流程，以便用户循序渐进地操作；
3.3.及时反馈信息（提示信息）
当用户进行了某项操作后，系统能够及时给出处置信息，例如，当某项操作进行时刻较长，则应该提示"
*操作正在处置，请等待"
等信息。
3.4.防错处置
提供对数据进行校验功能；
对于在某些情形下不该该利用的菜单项、按钮应当将其"
灰掉"
（变成灰色，可见但不可用）；
执行破坏性的操作之前，应当提供"
用户确认对话框"
来进行确认；
3.5.合理的布局
界面的整体布局应当有必然的逻辑性，最好能够与工作流程吻合；
界面上的元素放置布局应当整齐清爽；
3.6.合理的色彩
同一界面不该利用过量数量的颜色，因为人们很难记住多种色彩；
应当按照对象的重要性来选择颜色，重要的对象应当利用夺目的色彩表示；
利用颜色时应当维持一致性；
3.7.风格一致和必要的个性化
在一个软件的用户界面中，同类的界面元素应当有相同的视觉和相同的操作方式。
例如命令按钮，要求所有的形状、色彩、对鼠标、键盘的响方式都是一致的；
同一软件的用户界面应当有必然程度的相似性。
风格一致的界面能够减少用户的记忆量、减少犯错概率、而且迅速积累操作经验。
3.8.最少操作步骤（最高效率）
界面的设计应当按照用户需要求，在最少的操作少完成工作，以便提高工作效率。
3.9.可复用
应当利用现成的界面组件，从而提高质量、提高开发效率和降低本钱。
界面组件应有以下内容组成：
（1）界面组件代码
（2）应用示例
（3）相关的文档
4.界面设计原则
用户界面的设计需要考虑以下原则（依照重要程度高底进行排列）。
4.1.以用户为中心原则
始终牢记软件是为用户服务的，界面是用户与系统交互的接口，所以设计的界面第一要取得用户的认可。
4.2.界面美观、合理、一致性原则
一个软件系统的所有界面应采用统一的布局和风格样式，比如：
对齐、颜色、大小等。
页面布局要求结构清楚、层次分明，页面元素不该过于拥堵，也不该过于空旷。
4.3.操作易用性原则
页面可具有很强的可操作性、符合用户操作适应，主要体此刻以下几个方面：
（1）简单易学。
（2）合理的错误避免和纠正，如查验、警告等。
（3）灵活性，如提供快捷键、数字键盘录入等。
4.4.帮忙引导性原则
帮忙是软件系统必不可少的内容，当用户不能进行操作时，要提供帮忙支持，正确的引导用户进行操作。
4.5.界面模板化、组件化原则
由于在软件系统中存在大量的页面，这些页面与页面有着一路特点的界面，页面之间存在着复杂的关联关系，为了快速开发和减少保护本钱，同时也为了维持界面一致性，界面应采用页面模板和复用组件来概念。
5.界面设计一般性规范
5.1.1.合理性细则
1）父窗口或主窗口的中心位置应该在屏幕对角线核心周围。
2）子窗口位置应该在主窗口的左上角或正中。
3）重要的命令按钮与利用较频繁的按钮要放在界面上注目的位置。
4）页面的尺寸要适合、界面元素不该放得太满，边界处需要留有必然的空间，也不可过于宽松，显得零乱。
5）界面元素需要一致的对齐方式，以避免良莠不齐的视觉效果。
6）同类的界面元素尽可能保侍大小一致，最少维持高度或宽度的致，逻辑相关的界面元素要就近放置，便于用户操作。
7）与正在进行的操作无关的按钮应该加以禁止（使其失去功能，但应显示）。
8）对可能造成数据无法恢复的操作必需提供确认操作对话框。
9）对运行进程中出现问题而引发错误的要有提示。
10）提示、警告、或错误说明应该清楚、明了、适当。
5.1.2.协调性细则
1）页面长宽接近黄金点比例，切忌长宽比例失调、或宽度超太长度。
2）按钮大小大体相近，忌用太长的名称，免得占用过量的界面位置。
3）避免空旷的界面上放置专门大的按钮。
4）放置完控件后界面不该有专门大的空缺位置。
5）字体的大小要与界面的大小比例协调,通常利用的字体中宋体12px较为美观。
6）前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。
常常利用颜色考虑利用Windows界面色调。
7）若是利用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺眼的颜色。
8）大型系统常常利用的主色有"
R225,G225,B225″、"
R239,G239,B239″、"
R192,G192,B192″等。
效果如图所示
9）界面风格要维持一致，字的大小、颜色、字体要相同，除非是需要艺术处置或有特殊要求的地方。
10）若是能给用户提供自概念界面风格则更好，由用户自己选择颜色、字体等。
5.1.3.易用性细则
1）常常利用按钮要支持快捷方式。
2）完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
3）按功能将界面划分局域块，并要有功能说明或题目。
4）界面要支持键盘自动阅读按钮功能，即按Tab键的自动切换功能。
5）界面上第一应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较夺目的位置
6）Tab键的顺序与控件排列顺序要一致，目前流行整体从上到下，同时行间从左到右的方式。
7）同一界面上的控件数量最好不要超过10-15个（不含LABEL控件），多于10--15个时能够考虑利用分页界面显示
8）分页界面要支持在页面间的快捷切换，常常利用组合快捷键Ctrl+Tab。
9）默许按钮要支持Enter键选操作，即按Enter后自动执行默许按钮对应操作。
10）可写控件检测到非法输入后应给出说明并能自动取得核心。
5.1.4.健壮性细则
1）最重要的是排除可能会使应用非正常中止的错误。
2）应当注意尽可能避免用户无心录入无效的数据。
3）对可能发生严峻后果的操作要有补救办法，便于回到原来的正确状态。
4）对一些特殊符号的输入、与系统利用的符号相冲突的字符等进行判断并阻止用户输入该字符。
特殊字符常有；
；
'
`'
：
["
{、\|}]+=）-（_*&
&
^%$#@！
~,.。
?
/还有空格
5）对错误操作最好支持可逆性处置，如取消系列操作。
6）在输入有效性字符之前应该阻止用户进行只有输入以后才可进行的操作。
7）对可能造成等待时刻较长的操作应该提供取消功能。
8）在读入用户所输入的信息时，按照需要选择是不是去掉前后空格。
9）有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处置。
6.界面布局规范（模板化）
1）每一个窗口都要利用相同的颜色搭配方案，例如转动条的颜色，活动窗口的题目的颜色等。
2）每一个窗口都应该遵守所在类别的一样的窗口模板。
6.1.软件主界面
软件主界面设计是用户界面设计中最重要也是最难的工作。
主要包括：
系统标识区、功能菜单区、内容及操作区、信息反馈区四个区域。
结构如下所示：
（1）系统标识区（如：
拓普税务管理信息系统2.0）当前用户打印/帮忙/退出
（2）功能菜单
（3）内容及操作区
（4）信息反馈区
各功能区尺寸
1）系统标识区：
高度为70px。
2）功能菜单区：
默许宽度200px，高，自动拉长。
3）业务操作区：
宽800px，高，自动拉长。
4）信息反馈区：
宽度，随屏幕的宽度，高度，30px。
各功能区说明
1）系统标识提示
界面元素有4项：
软件系统的图标和名称。
鼠标点击将弹出About对话框（用来讲明软件一些开发公司、版权，当前版本等软件信息）。
当前用户。
鼠标点击将弹出对话框，用户能够修改大体信息和密码。
帮忙。
鼠标点击将弹出帮忙窗口。
退出。
鼠标点击将退出到登岸页面。
2）功能菜单
放置功能树（具体请参考菜单树规范）
3）内容及操作区
系统主要的业务操作区域，规范参照具体的界面风格规范内容，这里不在描述。
4）信息反馈区
用户执行添加、修改、删除等操作后，信息反馈区将显示操作信息列表。
6.2.登录界面
登录界面是指用户输入用户名、密码等信息后进入系统的页面。
登录界面应具有以下特点：
1）艺术性：
此页面的设计要具有艺术性，结合软件业务、公司文化来设计。
2）友好性：
登录系统必需填写的信息、系统名称、开发公司等信息，和当用户无法进入系统时，应当能够指导用户进行补救办法。
6.3.信息录入界面
6.3.1.页面规格
页面宽度：
700px
信息组织：
每行放置4列，别离为：
域名称、输入项、域名称、输入项"
，对应的宽度为：
150px、200px、150px、200px"
若是表单项内容较长，录入项的宽度在198px以上的则应单独为一行（把后3列归并为一行），"
域名称、输入项"
，如家庭地址等信息。
对应的宽度为：
150px、550px、"
页面底色：
采用统一的底色
6.3.2.注意事项
1）应保证页面内容排列整齐、一致，忌出现不齐、内容或控件排列零乱的界面。
2）必填的录入项要有明确的视觉显示。
3）当页面信息内容较多时，可考虑信息分组，分组后要有明确的题目。
6.3.3.页面样本示例16.4.数据显示界面
6.4.1.页面规格：
宽度：
700px6.4.2.注意事项
1）重点围绕数据显示的要求，解决应该显示哪些数据
2）只显示必需的数据，与用户需求无直接关系的一概省略
6.4.3.页面样本示例
6.5.单一查询参数录入界面
特点：
提供一个或几个查询参数的录入的页面，信息量少，如各类查询参数录入页面等
6.5.1.页面规格
400px
页面高度：
不定，按照情形自动拉长
参数录入查询页面的信息比较少，所以很难充实、饱满页面，故采用：
每行放置列，格式为"
150px、250px"
6.6.查询结果界面
是以固定表格展现为主，其他信息为辅的页面、规则性很强，有固定的行、列，如查询结果页面、待管理信息页面等。
6.6.1.页面规格
采用统一的底色，颜色值推荐为：
#EFEFEF
布局如下：
查询参数录入区信息列表展示区（表头、表体、序号、选择框）分页菜单区操作按钮区
查询录入参数的设计
原则：
（1）忌设计过量的参数录入，以避免鹊巢鸠占。
（2）查询参数与查询参数的放置要合理、紧凑，合理利用页面空间。
操作按钮区
必需有"
全数选择"
、"
取消选择"
，然后才是和业务相关的按钮。
6.7.错误界面
用来展现系统错误信息和回退操作的界面。
6.7.1.页面规格
高度：
400px6.8.打印界面
6.8.1.页面规格
信息列表打印型页面是为打印服务的，所在应该按如实际报表需要设定页面的尺寸。
不同的报表尺寸规范如下：
A3尺寸：
长595px，宽842pxA4尺寸：
长842px，宽1190px6.9.对话框
对话框实际上是一种特殊的窗口，它有固定的风格，通常常利用于接收输入、显示输出及给出提示信息。
在咱们的系统中主要应用以下对话框：
6.9.1.警告提示对话框
只有确认键。
信息内容要有明确的含义。
警告对话框布局：
窗口题目关闭图标警告消息的一段文字肯定按钮
6.9.2.确认对话框
只有确认键和取消键。
多用于删除确认或其他操作确认等环境。
确认信息意义要明确，不能模棱两可。
采用系统标准的操作确认对话框。
对于确认对话框的默许键应为"
取消键"
确认对话框布局：
窗口题目关闭按钮图标确认消息的一段文字是（Y）否（N）
确认对话框示例
6.9.3.操作通知信息提示框
操作通知信息提示框的用途是及时告知用户"
谁在什么时侯做了什么情形"
，那个通知不需要用户进行确认，例如新增加了一个用户，删除一个用户等。
对话框上应显示"
*操作成功！
或"
*操作失败！
。
对于失败还要显示失败原因信息，且应指明如何做出补救。
只提供关闭按钮。
操作通知信息对话框布局：
窗口题目[关闭]图标通知消息的一段文字[关闭]
另外需要注意的是：
给出通知消息的最好办法不是弹出对话框，而是在专门的信息反馈区列出通知消息。
6.9.4.进度提示窗体
若是一些系统操作时刻比较长，应提供操作时刻进度提示。
例如：
报告生成等
只有取消键，当用户不进行等待时可进行取消?
状态提示显示位置?
页面布局：
窗口题目[关闭]图标正在处置什么事务….进度显示[关闭]
7.界面元素设计规范
7.1.1.文字
页面内的文字默许规则如下，在其他特殊情形下应另行说明。
字符集GBK或GB2312字体宋体大小12px颜色黑色
图标的含义表现的意义要明确，易于理解，避免二义性；
图标外观效果采用WindowXP效果
7.1.2.图标
7.1.3.常常利用键
系统应采用如下常常利用键：
常常利用键含义和功能↑、↓、←、→、PageDown、PageUp按系统规定利用Tab指不同区域的切换空格指弹出列表框F1显示帮忙信息F2F3回车按钮操作用回车键确认；
核心跳转到下一录入项；
Esc退出；
取消Ctrl+Insert在Grid中增加一条记录Ctrl+Delete在Grid中删除一条记录Ctrl+C复制Ctrl+V粘贴
7.1.4.树（Tree）
规范项要求命名要结合业务，尽可能用和业务相关的动宾短语，如：
辞退人员、录用人员等层次树的层次不能太深，以不超出4层为标准名称字数：
不该超过10个字分组菜单要按照业务进行分组，把业务相近的放在一个组内图片菜单组与菜单项前的图片要有区别，图片应放置在名称前边，高度要各菜单的字一样高，且要和文字的距离为5px激活提示当某一节点处于激活状态时，要有明确的提示效果示例
7.1.5.常常利用菜单
规范项要求命名要简练，符合语义，如：
显示待办、打印等字数不该超过4个图片要符合语义，形象，能够直观地代表所要完成的操作提示信息要有提示信息，当鼠标放到功能按钮时，要有执行操作的提示信息，说明具体的操作功能快捷键常常利用菜单要支持命令快捷方式对齐右对齐效果示例
7.1.6.页面题目（PageTitle）
概念：
能够描述页面功能的说明性文字，如：
录用国家公事员"
辞退人员"
规范项规范内容名称页面题目的名称与系统树节点项的名称维持一致位置页面的左上角,缩进20px字体宋体大小14px水平对齐左对齐图片为了页面美观，名称前应有图片；
所有页面采用统一的图片；
图片与名称之间距离为5px；
图片不该过大，以避免占用太多的页面空间；
效果示例
7.1.7.组名（GroupName）
当一个页面中出现较多的信息时，把所属范围相同或相近的信息放在一路，形成信息分组，这时咱们用组名来标识不同的信息分组。
规范项规范内容位置组开始的左上角对齐缩进20px，左对齐大小14px字体宋体效果示例
7.1.8.域名称（FieldName）
也能够称为标签，输入项的语义，如：
姓名、性别、年龄等。
规范项规范内容命名以业务语义来概念，文字内容应该明了位置输入项的左侧，缩进20px水平对齐左对齐垂直对齐居中字数限制最长8个汉字（极个别的可超过8个汉字）
7.1.9.单行文本框（SingleTextInput）
在页面顶用来接收或显示文本信息，又是以单行形式表现的录入框咱们称之为单行文本框。
规范项规范内容外观3D效果（仿真WindowXP），可编辑状态和不可编辑状态颜色应显示不同，建议不可编辑时"
宽度以实际录入需要肯定宽度，分两种情形：
一、默许情形为198px，如：
姓名，性别等
二、在表单型录入页面中，若是实际录入文字较长，需单独成为一行的文本输入域，宽度为550px，如：
籍贯、地址等
20px水平对齐左对齐垂直对齐中对齐内容水平对齐左对齐内容垂直对齐中对齐默许值按照业务需要设置默许值只读设置对于只读的文本框，应把内容文字灰掉，表示不可修改必填设置对于业务上必需填写的，文本框背景颜色应与其他文本框有所不同效果示例（普通）效果示例（必填）
7.1.10.日期框（DateInput）
是录入框的一种，但其内容是日期类型，所以咱们称之为日期框。
规范项规范内容外观3D效果（仿真WindowXP）宽度180px高度：
20px水平对齐左对齐垂直对齐中对齐日期格式其中年4位，月2位，日期2位。
日期的录入格式：
YYYY-MM-DD
日期的显示格式：
内容水平对齐左对齐内容垂直对齐中对齐录入方式能够激活日历面板返回日期值；
也能够录入日期默许值日期要有一个默许值，应按照业务需要设置，有的是当前日期，也可能是某一时刻日期。
只读设置对于只读的日期框，应把日期内容灰掉，表示不可修改必填设置对于业务上必需填写的，背景颜色应与一般有所不同日历面板激活图片放置于日期框右边，中间没有距离；
图片要形象，直观；
图片长为：
15px，高为：
20px；
效果示例7.1.11.数值框（NumberInput）
是录入框的一种，但其内容是数值类型，所以咱们称之为数值框。
所谓数值并非是数字形式展示的内容，如纳税人识别号、案件编号都不是数值，而类似金额、天数等则属于数值。
规范项规范内容外观3D效果（仿真WindowXP）宽度198px高度：
20px水平对齐左对齐垂直对齐中对齐数值格式采用"
千位记数"
格式显示，每三位用"
，"
分隔；
内容水平对齐右对齐内容垂直对齐中对齐只读设置对于只读的灰掉，表示不可修改必填设置对于业务上必需填写的，背景颜色应与一般不同效果示例
7.1.12.多行文本框（Textarea）
能够进行多行录入或显示的文本框，咱们称之为多行文本框。
不能因为特殊的多行文本输入框而影响整个页面的效果，不能引发位置错乱现象。
规范项规范内容外观3D宽度550px高度不该太高，可按照页面实际需要和美观效果来概念放置一般要单独占一行，除非有特殊需要水平对齐左对齐垂直对齐中对齐只读对于只读的灰掉，表示不可修改必填对于业务上必需填写的，背景颜色应与一般不同转动条3D效果，颜色与多行文本框一致，忌用反差较大的颜色回车键回车换行进行下一行录入，不进行核心转换效果示例
7.1.13.下拉框（Select）
规范项规范内容效果3D效果（仿真WindowXP）宽度下拉框的宽度要以"
显示完整性"
的重要程度，来别离概念，按照下拉框中最长列表项的字数肯定宽度，以15个汉字为标准,能够按以下规范进行。
1）字数小于等于15个汉字的：
宽度设为198px；
2）字数大于15的，宽度设为550px；
3）字数大于15小于等于18的，若是"
的程度比较低，则能够按
（1）执行；
字数大于15小于等于18的，若是"
的程度比较高，则能够按
（2）执行；
高度20px水平对齐左对齐垂直对齐中对齐下拉项目题目文字紧凑排列，之间不加空格下拉项目水平对齐左对齐只读对于只读的灰掉，表示不可修改必填对于业务上必需填写的，背景颜色应与一般不同字体默许设置效果示例
7.1.14.列表框（List）
同时显示两个或两个以上列表选项，供用户选择，支持纵向转动。
不能因为特殊的列表框而影响整个页面的效果，不能引发位置错乱现象
规范项规范内容外观3D效果（仿真WindowXP）宽度同下拉框水平对齐左对齐垂直对齐中对齐只读对于只读的灰掉，表示不可修改必填对于业务上必需填写的，背景颜色应与一般不同字体默许设置（不作另行设置）转动条3D效果，颜色与多行文本框一致，忌用反差较大的颜色效果示例
7.1.15.单选按钮（Radio）
选项标记为圆形按钮，选项之间是互斥的，只能选中一个。
规范项规范内容外观3D效果（仿真WindowXP）宽度20px高度20px选项题目文字紧凑排列，之间不加空格；
应该带有明白的文字解释；
避免两个单选按钮表示同一内容的两种状态（例如YES/NO）。
利用处景在表单录入型页面中，选项一般不该超过6个，若是需要更多不利用单选按扭，可转化为下拉框水平对齐左对齐垂直对齐中对齐默许置必需有一个选项是选中的放置在表单录入页面中，单独成行，集中水平放置；
在信自列表中应集中竖排放置效果示例
7.1.16.复选框（Checkbox）
选项标记为能够打勾的方框，选项之间没有互斥关系，能够选择一个或多个。
应
升级会员 