系统界面的用户设计系统界面设计规范 _经验分享

界面整体设计
（一）设计模式
由于用户（专业知识）、开发人员（计算机知识）之间存在着知识面不平衡性，而AGEIS是中国省域范围内较早的农业地质信息管理系统，没有太多的借鉴，用户需求较模糊，用户的界面设计就显得极其重要。可利用面向对象技术和可视化编程技术，根据初步的需求分析和总体设计要求先确定各界面元素组成，然后利用界面元素构架各种界面，如登录界面、主界面等。最后将这些界面构件纳入系统功能的骨架，形成系统的界面原型（图3-5）。这种原型界面法的思想是建立一个能够反映用户主要需求的原型，让用户实际看看未来系统的概貌，以便判断哪些界面及功能是符合需要的，哪些功能还需要改进（钟毅等，1996）。一旦当原型完善之后，利用数据库应用对象和辅助对象，便可与数据库的数据沟通，形成符合用户要求的系统。
图3-5 用户界面设计模式
基于原型法的用户界面设计关键是在比较短的时间内构造出相当接近最终目标的用户界面，使用户能及时地提出软件功能修改意见，以免延误改正时机和扩大错误。
（二）界面构成与布局
用户界面是人机对话的工具，根据功能模块的不同，可以分别采用菜单式、命令式或表格式的界面。但它与功能模块一一对应，各模块之间界面形式一致，相同功能要用相同的图标显示。
好的界面是好的程序的一个不可缺少的条件，好的界面并不需要很多复杂的花哨的东西。正相反，很多好的界面常常给人一种简洁的感觉。如果界面中控件很多，那么控件布局的科学性、合理性就非常重要。AGEIS系统的界面整体上可分为登录界面、主界面（图形界面）两大类，其布局设计如下。
（1）登录界面
系统登录界面主要有软件名称、软件标志、单位名称、单位标志、版本号、网址、联系方式、版权声明、用户名、密码，以及系统设置等信息。宜应具有象征性强、识别性高、视觉传达效果好的图形，可考虑使用动画GIF格式的图像，如图3-6所示。
图3-6 登录界面布局示意图
（2）主（图形）界面
GIS图形界面设计是面向对象的程序设计，采用事件驱动思想为每一个动作或事件指定一个且唯一的响应程序，基于“窗口—图标—鼠标—弹出菜单”模型的图形用户界面（GUI）十分适合面向图形的GIS系统。采用这种界面风格的GIS系统，不仅界面美观、操作方面、规范，而且信息的表现方式更加直观，效率更高。再加上引用了桌面模拟技术，使用户对系统的学习和使用变得很容易。
在构建GIS图形用户界面时，应根据特定的功能要求，选择最能体现系统特色的构件进行界面设计。AGEIS系统的主（图形）界面将界面元素分成4类，即菜单条、工具条、泊坞窗口、业务区。主（图形）界面应根据用户的需求和主观感受，将上述基本构件进行合理地组织和布局（图3-7所示）。其中泊坞窗口是指可含有应用控件或工具的具有可停靠、入坞、出坞、关闭等功能的窗口，包括鹰眼窗口、图层控制窗口、属性窗口。业务区是指用户用来显示和操作业务要素的区域，主要包括文档、二维、三维控件所在的区域。而菜单条主要包括子系统切换区和各子系统的菜单区，子系统切换区主要包括导航窗口（子系统）、地图窗口（子系统）、三维窗口（子系统）、文档窗口（子系统）、系统维护窗口（子系统）等。选择不同子系统时，菜单区域、工具区域、状态显示区域、用户业务区域及泊坞窗口就显示与子系统相匹配的界面元素，实现不同子系统界面风格统一。
图3-7 图形界面布局示意图

界面设计
界面是人与信息沟通的渠道，界面设计的目的是使这个渠道简洁明了，使人能随意地进行操作，并在这个过程中得到有效的帮助。而网页界面设计的目的则是为了使网页中的内容得到更好的体现，更加突出界面设计的主题性。尽管网站的页面设计根据不同的系统功能要求，会体现出一定的个性化设计，但也要遵循一致性原则，即使网站整体保持色调、组件等元素的一致性（张帆等，2005；古大诒等，2000；刘永瞻，2002；吴瑜，2004）。由于系统涉及的页面众多，文中仅选取若干代表性的页面进行设计说明，主要包括总体界面设计、国家风险界面设计、运输风险界面设计与系统管理界面设计。
5.2.4.1 总体界面设计
该原型系统总体界面设计参考了Web界面设计的一系列基本原则，采用Sharepoint对整个系统界面进行合理的部署。主体界面主要包括：A区域为系统主题LOGO; B区域为功能导航栏；C区域为功能细分区；D区域为功能展示区；E区域为版权信息说明（图5.20）。
图5.20 系统总体界面
5.2.4.2 国家风险界面设计
国家风险展示界面的设计宗旨是：①全面准确、清晰地在GIS地图上显示世界各个区域或者国家的风险；②清晰、明确地显示与我国在油气和固体矿产资源进出口方面有密切往来国家的地理、历史、民族宗教等基本信息，特别是油气输出敏感地区、国家的政治、经济、地缘等风险信息，为用户是否选择其作为石油进口来源提供科学依据。
国家风险界面由两部分组成。第一部分通过GIS调用世界地图，在世界地图上根据每个国家或者区域的风险大小，用不同的颜色来为每个国家或者区域着色，主要是采用了红色和黄色两种色系来表示风险。
第二部分为每个国家的信息展示，主要包括与我国在油气和固体矿产资源进出口方面有密切往来的20几个国家。第一部分页面设计与主界面保持一致，第二部分重点介绍国家信息展示页面，如图5.21所示。风险信息的国家风险界面色系选择了与整个系统相一致的蓝色系，色彩清爽、干净，给人以清新愉快的感觉。界面布局以块状分布为主，在有限的区域内井井有条地展示大量、丰富的信息。整个界面链接的逻辑思路清晰，用户可从任何页面方便地返回首页，或者在各功能模块间切换。
图5.21 国家风险界面——国家信息页面
此页面设计，为用户提供了最重要的油气信息，将页面中心分为3个区域，区域C是地图展示区，在最醒目的区域E将以文字结合图标的形式展示该国家的地理位置、油气资源概况和数据来源说明；页面的左下部（区域D）被设计为列表菜单，用户可以根据自己不同需要选择、查看相关信息；页面最下方的区域F是版权信息展示位置。
国家风险界面在设计过程中严格贯彻了简洁、美观的设计思路和以用户为中心的设计理念，较好地实现了美观与实用的结合，达到设计初期制定的目标。
5.2.4.3 运输风险界面设计
我国在进口油气过程中有80%是靠水路运输完成的。在海外油气运输过程中，必然涉及航线风险事故率、港口吞吐能力、海盗袭击等因素的影响，因此在本系统中重点对运输风险这一模块进行了详细的设计与开发。该界面设计，首先是以功能性为第一指导原则，以技术因素为主要考虑对象，以完成或实现必要的功能为目标。在整体界面风格上同主界面以及国家风险等其他几个子模块风险采取同一色系和界面框架设置。这样，一方面可以使得大家能够快速通过该系统界面挖掘有用信息；另一方面可以使得整体界面搭配合理、美观。
运输风险界面设计的思路主要是：首先，通过MapInfo软件并运用GIS技术将运输风险各底层指标数据进行可视化处理和展现，包括港口风险、航线风险、承运风险、海盗袭击4个主要模块。通过可视化处理后，针对具体港口等详细信息进行单独页面展示；最后运用Flash技术对港口、航线、承运、海盗袭击进行动画展示。
进入运输风险界面后，点击其中某一子菜单风险查询，即可得到如图5.22所示的GIS风险专题图界面。以航线风险为例，在右侧主框架下，利用MapInfo和MapXtreme软件对所有航线进行绘制，通过GIS技术实现航线的风险展示，主要分为以下4个版块：在C区域内，采用树形菜单，使得客户可以直接选择所需版块；在D区域内，参考部分专业地理信息系统软件，建立拖动条调整专题图界面的大小，对整个界面显示实现了有效补充；在E区域内，主要通过航线的颜色展示该航线的风险程度，航线的粗细表示该航线的承运能力，将后台数据可视化展示，客户可以根据图示直观地看出各个航线的相关风险信息，方便决策者依据信息作出决策；在F区域内，利用频谱技术将航线的风险值由高到低通过图例显示，以方便客户一目了然地看出每个航线的风险值高低；在右下方的G区域内，为了对GIS专题图进行详细了解，运用GIS软件设置了相关辅助按钮，包括放大、缩小、拖移等，以求实现更智能化操作。另外，在选择国家底层风险值以及航线的风险值时，考虑整体界面风格的搭配，选取合适的色系，使得界面显得柔和、美观。
图5.22 运输风险中的航线风险GIS图
5.2.4.4 系统管理界面设计
系统管理模块在进行页面设计时很好地体现了总体设计原则，系统管理在保持整体蓝色调、系统默认字体，以及分栏框架结构设计，系统管理内部的各个子页面之间也体现了系统风格以及交互行为的一致性。
国外油气与固体矿产资源开发管理系统的系统管理模块，主要面向后台的系统管理员用户，所以对于用户的系统知识有着一定要求，比如后期的网站操作维护、数据库更新等，都要求系统管理员能够进行良好的网站维护操作（吴坤，2005）。因此，界面在设计过程中更具有专业面向性。针对系统管理模块的典型页面（国家数据管理页面）进行具体介绍，如图5.23所示。
图5.23 国家数据－资源概况
国家数据页面中，系统管理的基础数据管理页面设计，主要采用了基于模板技术的动态网页设计，即利用模板页技术以及AJAX技术，使得子页面能够继承模板页的主体界面。采用这一关键技术的优点是：当要对网页的主体界面进行修改时，只要对模板页进行变动即可，大大地简化了网页的维护工作。
主体页面分3大功能区域：A区域是功能选择区，包括两处链接入口；B区域是事件触发区，控制C区域内容展示；C区域是对象信息展示区。其他区域如系统LOGO、导航栏、版权信息等，与主界面设计保持一致。这样的布局，以最适合操作、浏览的方式将文字放在页面的不同位置，也体现了页面触发的逻辑流程。

系统的用户界面设计应遵循什么风格
“Material”中文译为“材料”，它代表着物质的组成成分，如果放在手机系统设计中，这个词会让人很容易的联想到手机系统的界面风格设计，比如拟物和扁平风格。不过此次谷歌的Materialdesign并不是一种系统界面设计风格，Materialdesign其实是单纯一种设计语言，它包含了系统界面风格、交互、UI等，此外对于谷歌来说，Materialdesign还有着非常伟大的使命，那就是打造一个横跨所有设备的统一的设计语言，像是手机、桌面端、可穿戴设备等今天就请大家跟随这小编的脚步，来看看这次谷歌全新设计理念Materialdesign 。系统界面风格“鲜明、形象、深思熟虑”，Materialdesign此次的界面风格设计用这几个词语来形容是再合适不过了。Materialdesign为安卓提供了新的视觉语言，在基本元素的处理上，借鉴了传统的印刷设计、字体版式、网格系统、空间、比例、配色、图像使用。在这些设计基础上下功夫，从而能够构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，使得新的系统界面是如此的漂亮。而在色彩的选择上Materialdesign的原则是“大胆、图形化、有意义” 。在MaterialDesign中，UI配色提倡一种主色，一种互补色。在区域较大部分的色彩采用主色的500色调，区域较小的部分例如状态栏采用深一点的色调。如此巧妙的色彩搭配使得应用看起来非常的大胆、充满色彩感，凸显内容。Materialdesign对于界面的排版非常的重视。众所周知，好的排版会让界面看起来非常的清爽，不会有杂乱无章的感觉，而要将排版做好，“基线”绝对是必不可少的一样东西。谷歌官方文档《MaterialDesign排版边距》中就有提到基线的摆放位置，由下图中我们可以看出，MaterialDesign将第一基线放在距离边界16dp的地方，与文本项对齐的第二基线被摆放到距离左边界72dp的地方，这种对齐规则让界面看起来清爽、具有印刷设计的阅读节奏感。让用户得以快速阅读信息，比较符合格式塔原则。整体来说，Materialdesign为安卓带来一次改革，系统的界面风格和布局都有了很大的改变，安卓系统自身的风格也渐渐显露雏形。终于不会在有人说安卓原生系统难看了。令人愉悦的交互设计Materialdesign的交互设计上采用的是响应式交互，这样的交互设计能把一个应用从简单展现用户所请求的信息，提升至能与用户产生更强烈、更具体化交互的工具。接下来我们选择几个简单的动态图，来看下Materialdesign独特的交互设计。
系统界面的用户设计
良好的用户界面是保证系统正常运行的一个重要因素。系统默认界面采用 Windows 的设计风格，界面直观、对用户透明，用户接触软件后对界面上对应的功能一目了然，不需要过多培训就可以方便使用本应用系统。人机交互涉及多层次用户，如煤矿集团领导、煤矿领导、区队管理人员，设计者按照不同的用户需求设计出多种界面变体，分别适应于不同的用户，如: 煤与瓦斯突出历史资料是否自动播放。进入系统界面，用户可以按 “所见即所得”的方式进行界面定制，通过图层设置对话框来设置图层的可见状态、可选择状态、自动标注状态，配置地图的背景色，选择是否支持鼠标滚动功能 ( 张明清等，2005)。

系统详细设计包括哪些内容
系统详细设计包括以下内容：
1、系统结构设计及子系统划分
划分系统功能模块或子系统（如果有或者有必要，特别是大型的软件系统）。
2、系统功能模块详细设计
按结构化设计方法，在系统功能逐层分解的基础上，对系统各功能模块或子系统进行设计。此为详细设计的主要部分之一。
3、系统界面详细设计
系统界面说明应用系统软件的各种接口。整个系统的其他接口（如系统硬件接口、通讯接口等）在相应的部分说明。
4、外部界面设计
根据系统界面划分进行系统外部界面设计，对系统的所有外部接口（包括功能和数据接口）进行设计。
5、内部界面设计
设计系统内部各功能模块间的调用关系和数据接口。
6、用户界面设计
规定人机界面的内容、界面风格、调用方式等，包括所谓的表单设计、报表设计和用户需要的打印输出等设计。
扩展资料：
系统详细设计内容：

用层次图描述系统的总体结构、功能分解及各个模块之间的相互调用关系和信息交互，用IPO图或其他方法描述各模块完成的功能。
以上建议采用HIPO图进行功能分解与模块描述，更高的要求建议采用IDEF0方法进行功能模型设计。
详细设计应用系统的各个构成模块完成的功能及其相互之间的关系。
用IPO或结构图描述各模块的组成结构、算法、模块间的接口关系，以及需求、功能和模块三者之间的交叉参照关系。
每个模块的描述说明可参照以下格式：
模块编号：
模块名称：
输入：
处理：
算法描述：
输出：
其中处理和算法描述部分主要采用伪码或具体的程序语言完成。
对详细设计更高的要求建议用IDEF0图进行各功能模块的设计。
如果对软件需进行二次开发（包括功能扩展、功能改造、用户界面改造等），则相应的设计工作应该设立子课题完成。
参考资料：百度百科 ------ 系统设计

系统用户界面设计的原则有哪些
界面设计原则总的来说可以概括成界面在用户的掌控之中、保持界面的一致性和减少用户记忆的负担这三大点，下面就给大家具体介绍一下界面设计原则。(一)界面设计原则(1)用户原则。人机界面设计首先要确立用户类型。划分类型可以从不同的角度，视实际情况而定。确定类型后要针对其特点预测他们对不同界面的反应。这就要从多方面设计分析。(2)信息最小量原则。人机界面设计要尽量减少用户记忆负担，采用有助于记忆的设计方案。(3)帮助和提示原则。要对用户的*作命令作出反应，帮助用户处理问题。系统要设计有恢复出错现场的能力，在系统内部处理工作要有提示，尽量把主动权让给用户。(4)媒体最佳组合原则。多媒体界面的成功并不在于仅向用户提供丰富的媒体，而应在相关理论指导下，注意处理好各种媒体间的关系，恰当选用。(详见媒体的选择)(二)界面分析与规范在人机界面设计中，首先应进行界面设计分析，进行用户特性分析，用户任务分析，记录用户有关系统的概念、术语，这项工作可与多媒体应用系统分析结合进行，囊括于用户分析报告里。(三)人机界面的类型任务设计之后，要决定界面类型。目前有多种人机界面设计类型，各有不同的品质和性能，下图进行了详细的描述。创造性地使用多媒体环境，将会使应用程序功能大大增强。要做到这一点，需从如下两方面考虑：(1)媒体的功能：没有任何一种媒体在所有场合都是最优的，每种媒体都有其各自擅长的特定范围，各种媒体功能参考如下：①文本：在表现概念和刻划细节时可用表现。②图形：擅长表达思想轮廓及蕴含与大量数值数据内的趋向性信息，在空间信息方面有较大优势。③动画：可用来突出整个事物，特别适于表现静态图形无法表现的动作信息。④视频影像：适于表现其它媒体所难以表现的来自真实生活的事件和情景。⑤语音：能使对话信息突出，特别是在于影像，动画集合时能传递大量的信息。⑥姿态与动作：在与别的媒体结合时具有较强的信息引用能力，可以在相关信息之间建立起时间、空间以及逻辑上的联系。(2)媒体选择的结合与互补：脚本设计可根据内容需要分配表达的媒体，这里要特别注意媒体间的结合与区别。提出几条原则如下：①人们在问题求解过程中的不同阶段对信息媒体有不同需要。一般在最初的探索阶段采用能提供具体信息的媒体如语音、图像等，而在最后的分析阶段多采用描述抽象概念的文本媒体。而一些直观的信息(图形、图像等)介于两者之间，适于综合阶段。②媒体种类对空间信息的传递并没有明显的影响，各种媒体各有所长。③媒体结合是多媒体设计中需要研究的新课题。媒体之间可以互相支持，也会互相干扰。多种媒体应密切相关，扣紧一个表现主题，而不应把不相关的媒体内容拼凑在一起。④目前，媒体结合在技术上主要通过在一个窗口中提供多种媒体的信息片段(空间结合)和对声音、语音、录相等随时间变化的动态媒体加以同步实现(时间序列组合).⑤媒体资源并非愈多愈好，如何在语义层上将各种媒体很好的，结合以更有效地传递信息，是要很好地探索的研究课题，也是应用系统人机界面设计的关键问题。(四)界面设计原则中的用户心理学认知心理学，从广义上来说，就是关于认识的心理学。人类认识客观事物，主要就是通过感觉、知觉、注意、记忆、思维想象等来进行，因此，凡是研究人的认识心理过程的，都属于认识心理学。实际上，我们这里所指的认知心理学是指纯粹采用信息加工观点来研究认知心理学过程的心理学，也就是运用信息论以及计算机的类比、模拟、验证等方法来研究的的知识是如何获得、如何存贮、如何交换、如何取使用的。所以，我们这里所指的现代认知心理学实质是信息加工心理学。一般地，人们将信息加工心理学又称为狭义的认知心理学。1.认知过程看和听的过程构成知觉，图像和声音作为刺激的特征被接收并以抽象的方式被编码，把输入和记忆中的信息进行对比得出对刺激的解释，这一过程就是认知。人体信息处理器包括感官，短期记忆、长期记忆及与其相联系的动作处理器和认知处理器。每种知觉均有一个对应的短期存储器和处理器，人体信息模型总体框图如左图4.3.1所示。其中认知处理器执行的工作就是我们通常所说的思维。思维的结果或被存储起来，或送至动作处理器控制行动。2.认知心理学(1)现代认知心理学的核心：现代认知心理学的理论实质，就是以计算机信息加工的观点来研究人的心理学活动，把人脑看作是一种如同计算机的信息加工系统。(2)现代认知心理学两个关键的重要概念：现代认知心理学的学说内容集中体现在两个关键的重要概念上。现代认知心理学的一个重要的中心概念，就是“信息” 。在某种程度上说，抽掉了“信息”的概念，认知心理学的理论也就会散架解体，难以存在。现代认知心理学的另一个重要的中心概念，就是“信息加工系统” 。信息加工系统的理论，是现代认知心理学理论的主体。(3)现代认知心理学的研究方法：现代认知心理学的研究方法有实验法、观察法(包括自我观察法)以及计算机模拟法等。3.人机交互设计遵循的认知原则根据用户心理学和认知科学，提出了如下基本原则指导人机界面交互设计。(1)一致性原则。即从任务、信息的表达、界面控制*作等方面与用户理解熟悉的模式尽量保持一致。(2)兼容性。在用户期望和界面设计的现实之间要兼容，要基于用户以前的经验。(3)适应性。用户应处于控制地位，因此界面应在多方面适应用户。(4)指导性。界面设计应通过任务提示和反馈信息来指导用户，做到“以用户为中心” 。(5)结构性。界面设计应是结构化的，以减少复杂度。(6)经济性。界面设计要用最少的支持用户所必须步骤来实现。在界面设计原则指导下，提出以下几点针对界面设计与屏幕设计的参考：(1)由具体到抽象。即首先通过多媒体界面给用户提供具体的对象。然后从具体对象、内容中让学习者归纳出抽象的概念或原理，或用模拟系统来引导出抽象的原理。(2)由可视化的内容显示不可见的内容。尽可能利用数字、图解、动画、色彩等清晰爽目的对象显示原理、公式或抽象的概念。(3)由模拟引导创新。突出人机交互，尽量启发用户的积极思维和参与，并激起用户的学习和创造欲望。(4)合理运用再认与再忆，减少用户短期记忆的负担。所谓再认就是从系统给定的几个可能答案中要用户选择一个正确的或最好的。再忆即要求用户输入正确的答案或关键字。(5)考虑用户的个别差异，使用用户语言。以上五点具体体现了“由易而难，逐步强化。”这一源于认知心理学的原则。上文介绍的界面设计原则应该让大家心中对界面设计原则有了一定的认识，当然，因为界面设计是复杂的需要多学科参与的，心理学、语言学、设计学等学科都在里面占有重要作用。而用户界面是与程序交流的唯一方式，为了给用户提供最便捷的服务，界面设计原则是一定要遵守的。
【系统界面的用户设计系统界面设计规范】关于系统界面设计和系统界面设计规范的内容就分享到这儿！更多实用知识经验，尽在 www.hubeilong.com

系统界面的用户设计 系统界面设计规范

系统界面的用户设计系统界面设计规范