系统界面标准及规范.

Web应用界面设计规范（Design Spe cification for Web UI）主讲人：ARay目录：一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化，开发编码人员相互之间开发更轻松，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。

减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。

②产品设计通过规范的方式来达到以用户为中心的目的。

二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天：早晨起来，发现闹钟没有按原先设定响起来。

一边烧水，一边穿衣服，临走前去喝水却发现水还没有烧开。

到了地铁站，发现公交卡没有钱了。

无奈之下只能去排队买票。

排了3趟地铁，终于到公司了，但是你却迟到了。

结果：尽管你已经非常努力，但是你还是迟到了。

那么，让我们看看这一连串的倒霉事，是什么让我们如此狼狈？②什么是用户体验用户体验（user experience）是以用户为中心的设计中最重要的一个部分，强调的是过程，是软件对用户行为产生的反应与用户期待值要尽可能的一致。

糟糕的用户界面表现：表现一：过分使用各种奇形怪状、五颜六色的控件。

表现二：界面元素比例失调。

比如按钮巨大无比，其尺寸甚至超过显示重要内容的文本框的界面。

表现三：界面元素凌乱。

比如说，按钮和文本框摆放地点随意，该对齐的控件对不齐。

表现四：违背使用习惯。

你按F1，它没有弹出帮助，却执行了一件绝对出乎你意料的动作。

表现五：消息框信息含糊、混乱。

比如软件弹出一个消息框。

把原本“确定”和“取消”写成为“是”和“否”，让用户不知道什么意思。

表现六：还有一种糟糕的用户界面，乍一看很厉害，实际上完全是缺乏规划的结果。

这种软件本身的确提供了比较复杂的功能，但对于哪些是常用功能，哪些是很少用到的高级功能，缺乏评估。

2. 详细原则

2.3. 较快的响应速度 保持界面能很快对用户操作作出反应。在提交操作上时候，统一使用显示处理进度条，提 示不要切换窗口,在自动跳转未成功时应显示具体信息。
2. 详细原则

2.4. 简洁美观 界面应该很简单、易于学习、并且易于使用，它还必须提供对应用程序的所有功能的访问；美观是应用 程序界面的重要部分，可视属性提供了非常好的印象，并传达特定对象的交互行为的重要线索。
2. 详细原则

2.2. 清楚一致的设计 一致允许用户将已有的知识传递到新的任务中，更快地学习新事物，并将更多的注意力集 中在任务上。这是因为他们不必花时间来尝试记住交互中的不同。通过提供一种稳定的感 觉，一致使得界面熟悉而又可预测。一致在界面的所有方面都是很重要的，包括命令的名 称、信息的可视表示，操作行为，以及元素在屏幕和窗口内部的放置。
5.
界面传递
父窗体与弹出 窗口。
1.
页面内容过少；对该页面进行操作时，父级页面不可操做；页面功能是按流程操作， 针对某个功能需额外进行设置；如上情况请使用弹出页。
2. 3.
当子窗体的任何操作影响了父窗体的数据时，子窗体关闭返回必须更新父窗体的数据。 弹出页内容少则不加最大化、最小化按扭。弹出窗口最大化后有意义则可加最大化按 扭。弹出窗口最小化后放在页面右下角。
9.
提示信息超过三条时应该将其分成独立的区域。
3. 界面通用规范
序号 4 名称 提示框 简述 对信息返回的 提示展现方式 1. 规范要求 对于频繁操作的功能，不要使用alert提示，使用div提示，停顿几秒钟(自定义几秒)后 自动消失；如添加主宾栏…。类似下图： 成一个统一的调用。停顿时间默认为2秒钟，可自己定义 2. 3. 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会 当前操作完成后，如果有必要请给予用户下一步操作的“入口链接”。举例：系统表 式维护完毕，应提供“维护年度表式入口”，方便用户快捷操作。 ，此处应封装

《智能控制系统界面设计方案》一、项目背景随着科技的不断进步，智能控制系统在各个领域的应用越来越广泛。

智能控制系统界面作为用户与系统交互的重要窗口，其设计的合理性和易用性直接影响着用户的体验和系统的效能。

本项目旨在为[具体项目名称]设计一套高效、美观、易用的智能控制系统界面，以满足项目的实际需求，提高系统的智能化水平和管理效率。

二、设计标准1. 用户体验至上- 界面设计应简洁明了，易于操作。

避免过多的复杂元素和繁琐的操作流程，让用户能够快速上手。

- 色彩搭配应协调舒适，避免使用过于刺眼或暗淡的颜色。

同时，要考虑到不同用户群体的喜好和需求。

- 图标和文字应清晰可辨，大小适中。

避免使用过小的字体或模糊不清的图标，影响用户的阅读和识别。

2. 功能完善- 界面应具备完整的功能模块，包括但不限于系统监控、设备控制、参数设置、报警提示等。

- 各个功能模块之间应相互独立，又能够方便地进行切换和调用。

同时，要保证功能的稳定性和可靠性。

3. 响应速度快- 界面的响应速度应迅速，避免出现卡顿或延迟的情况。

特别是在进行设备控制和参数调整等操作时，要保证实时性和准确性。

- 优化界面的加载速度，减少用户的等待时间。

可以采用缓存技术、异步加载等方式提高界面的性能。

4. 兼容性强- 界面应兼容不同的操作系统和设备，包括但不限于Windows、Mac、iOS、Android 等。

- 要考虑到不同设备的屏幕尺寸和分辨率，确保界面在各种设备上都能够正常显示和操作。

5. 安全性高- 界面应具备严格的安全机制，包括用户认证、权限管理、数据加密等。

确保系统的安全性和数据的保密性。

- 对用户的操作进行严格的校验和审核，避免出现误操作或恶意攻击的情况。

三、施工步骤1. 需求分析- 与项目相关人员进行沟通，了解项目的具体需求和功能要求。

包括系统的控制对象、控制方式、监控参数等。

- 对用户群体进行调研，了解用户的使用习惯和需求偏好。

包括用户的操作水平、审美观念、功能需求等。

UI设计标准说明书修订历史记录日期版本说明作者1前言1.1文档简介本文档是对整个系统界面设计风格进展描述，和用户交互的最终界面在"详细设计说明书"中设计和解释。

1.2系统定义用户界面：又称人机界面，实现用户与计算机之间得通信，以控制计算机或进展用户和计算机之间得数据传送得系统部件。

GUI：即图形用户界面，一种可视化得用户界面，它使用图形界面代替正文界面。

1.3编写目的统一图形界面标准，为开发人员提供统一的标准，为用户提供统一显示效果、统一操作方式的界面，便于用户识别与使用。

2界面设计准则 Rules2.1引言 Introduction在界面设计中应该保持界面的一致性。

一致性既包括使用标准的控件，也指使用一样的信息表现方法，如在字体、风格、颜色、术语、提示信息等方面确保一致。

2.2主要内容 Content2.2.1显示信息一致性原则坚持图形用户界面〔GUI〕设计原则，界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。

明确用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。

界面设计必须经过最终确认才能完成。

2.2.2布局合理化原则应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。

在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab的顺序是先从上至下，再从左至右。

一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，位置也应放在窗口上较醒目的位置。

布局力求简洁、有序、易于操作。

2.2.3鼠标与键盘一致性原则尽量遵循可不用鼠标的原则：应用中的功能只用键盘也应当可以完成，即设计的应用中还应参加一些必要的按钮和菜单项。

但是，许多鼠标的操作，如双击、拖动对象等，并不能简单地用键盘来模拟即可实现，此类操作可适当增加操作按钮。