界面设计方法 (2) — 4.界面设计的原则与标准

前面介绍了5种基本的界面形式，如果从构成界面的要素（构件）层面看，实际上所有的界面都是一样的，因为它们都是由同样的控件构成的，只是控件的位置不同而已，因此就有必要对界面的布置进行统一的标准化，建立了界面布置的标准后设计效率会提升、同时也为界面设计资料的复用奠定了基础。
界面设计的标准化非常重要，因为界面是用户认知系统的窗口，这个标准实际上是构建“人-机-人”工作环境的标准之一，标准化的界面形式也可以减少用户的认知负担和培训成本。这里给出一些界面设计上的基本原则和标准供作参考。

按照从整体到局部的顺序，重点提出以下的几个界面设计时的原则与标准（不限于此）：
□界面布局对原则
□子窗体设置的原则
□字段控件的标准
□美工设计的原则。
这些原则/标准根据界面的使用场景不同、设计师的设计理念的不同等都会有所不同，需要根据具体情况具体分析设计，这些原则和标准仅供参考。

1. 界面布局的原则

1）整体布局
界面的布局是用户理解业务功能的重要手段，布局一定要以“业务导向”，布局的规范化、规律化可以培养用户逐渐地走向“无师自通”的方向，如：

(1) 同类界面的布局要统一，卡式、主细表、树形等同样格式要风格一致。

(2) 重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。关于界面重要信息的摆放位置请参看前面的博文。

(3) 界面上近似内容要放在相近处，如：加框以示区别、或拉大与其它内容区域的距离。

(4) 重视用户界面友好性，易于操作、易于查看，比如：
□常用按钮在鼠标移动最短的地方配置
□工具栏的左端配置界面操作开始的功能按钮、右端配置界面操作结束功能按钮等；

(5) 界面横向一次的显示信息量（标题个数）多少，要以完成一次操作不用或是少用横向滚动条为标准（纵向滚动条不限），因为频繁使用横向滚动条会使得用户看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的现象。

图1 布局原则

如图1所示，细表区的标题设置过多（A～J），致使大约有40%的信息在处在窗口外，用户不使用横向滚动条就看不到，如果这是一个频繁操作的动作，那么工作效率就会低下，这就是所谓的应用体验设计的不好，这种设计会极大地造成用户满意度的下降。解决的方法可以考虑采用分页表达的形式。

注：对具有自适应功能的界面也存在同样的原则，由于列数过多界面自适应后的字体太小看不清楚，为了看清楚必须要放大字体，结果还是要频繁地使用横向滚动条，所以适当减少列数是最有效的解决方法。

2）局部尺寸
要约定好界面上基本的控件距离、尺寸，参见图2，比如：
□窗口与控件之间的距离
□控件之间的间距，包括纵向的行间距、横向的字段框间距等。
□控件的高度。
□使用文字的字号大小，等。

图2 界面设计标准的制定

2. 子窗体设置原则
以组件的主界面为第一层界面，子窗体的层数最好控制在3层以内，也就是连续打开三个界面为限，参见图3。
□从菜单第一次打开的为主界面（父）。
□从主界面打开的第二层为子界面（子）
□从子界面打开的第三层为子界面的子界面（孙）等。

图3 子窗体的层数示意图

如果内容实在是比较多，最终弹出的子窗体要超过3层时，可以考虑另外再设置一个组件来分担处理的内容，不然子界面弹出过多，就会造成界面的混乱，会降低用户的操作效率。

3. 字段控件的标准
字段控件的表达格式根据内容不同而不同，字段控件由两个部分构成：标题栏和输入框，参见图4。

图4 字段控件的长度与数据位置

1 ) 标题栏的长度
标题的字数不要太多，因为标题长到如同一句话时就不容易记忆了，最佳字数在2～6个字之间（易于记忆与称呼的长度）。另外标题中的文字位置可以参考：有背景框时居中，没有时居左或居右，图4中的标题栏有背景色，所以采用了文字居中的形式。
注：这里的”标题栏名称“指的是”字段名称“，不是4个业务功能中的”表单名称“，后者可以按照实际的名称写，多少字都可以，不必要设置字数。

2 ) 输入框的长度
输入框的字段长度是不一定的，建议输入框的长度与字数相匹配不必统一，如图4（a）的式样，因为如果要统一长度就一定会以字数最多的字段为准，那么字数少的字段也用长输入框就不容易读取，而且输入框的长度一样时字段之间的辨识度就会降低，寻找某个字段的时间会增加，比如：图4（b）样式的“工程月数”字段只有2个单位的长度，如果采用和具有30个单位长度的“项目名称”一样长的输入框时，则“工程月数”就会因为标题与数据的距离太远而不容易读取（看不准），相比较而言，图4（a）样式中的“座机号码”、“邮政编号”、”工程月数“的输入框长度比较短，就比较容易寻找和识别。

3 ) 数据的位置
输入框内数据的位置，根据内容不同而不同，参见图4（a）。
□ ①文字型数据：靠框的左端布置，如：名称、说明文。
□②③数值型数据（长度固定）：居中布置，由于编号类数据长度是一定的，所以居中容易读取，如：电话号码，邮政编号、材料编号，这样做也容易与“文字类”和“数值类”数据进行区分。
□④⑤数值型数据（长度非标）：靠框的右端布置，如：金额、数量、长度。

4. 颜色与装饰的原则
这里介绍的界面设计中虽然不涉及到美工的内容，但是也希望作为设计师具有一些美学的意识，因为最终用户的满意度是个综合的指标，这个指标至少包括了下述内容：
□业务正确：来自于业务设计（需求分析、架构、功能、数据等）的成果，信息的分区等。
□易操作性：来自于功能应用设计的成果（界面、控件），推送机制等。
□性能良好：来自于技术开发测试等的成果。
□美观易读：来自于UI、美工设计，等。

因为企业管理系统不是宣传用的网站、电商平台，界面风格要具有以下的特点（仅供参考）
□界面的整体要做到简洁、明了，界面上的各种要素（控件）的摆放位置、颜色、是否使用3D形式都要思考，辅助的功能不要喧宾夺主。
□使用淡雅的色彩作为基调原色，不要大面积地使用原色，容易造成眼睛的疲劳。
□要给用户以安静的感受，不要用有炫酷和跳跃感的要素去分散用户的注意力（电商平台的界面希望不断地带给用户新的发现、惊喜）。

■小结：随着计算机技术的发展，计算机的使用领域和用途越来越广泛，界面风格也随之更加多样化，比如：互联网风格页面、物联网的界面，硬件技术的进步也影响界面风格的变化，比如：智能手机端、平板电脑端等，它们的设计内容、风格都有所不同，但是上述的基本理念、原则等还是适用的。

■本系列下一篇：界面设计的方法（2）— 5. 按钮的设计方法

界面设计的详细说明请参见《大话软件工程—需求分析与软件设计》一书。

界面设计方法 (2) — 4.界面设计的原则与标准相关推荐

VLSI 半定制设计方法与全定制设计方法【VLSI】
VLSI 半定制设计方法与全定制设计方法[VLSI] VLSI 半定制设计方法 1. standard cell 设计方法 Standard Cell library 设计方法与步骤特点 2. ...
界面设计方法(2) — 2.界面的布局
为了满足客户的需求,软件界面的表达形式千差万别.但与网站的界面形式(电子商务.政府政务.各类网站等)相比,作为企业管理(ERP)类系统的界面形式比较低调,由于需要长时间对着屏幕操作.观看.思考,因此要 ...
界面设计方法 (2) — 1. 界面与组件的概念
■ 一个完整的界面设计需要有两个层面:业务功能.应用功能.系列"面设计方法(一)"已经从业务功能(活动.字典.看板和表单)层面介绍了4种功能的设计方法,它们的重点是如何完成不同类型 ...
界面设计方法 (1) — 1.界面的概念与分类
在ERP类等企业管理类系统开发过程中,毫无疑问,对用户"界面"设计的工作量是最大的,界面是系统中支持用户输入.查看数据的业务功能,它们是用户现实工作在系统中的映射,是人机交互的窗口 ...
python测试用例设计方法_功能测试用例设计方法分享
本文首发于:行者AI 测试用例可以用来衡量一个项目测试质量,因此在平时的测试流程中,编写测试用例就是测试过程中很重要的一步,每一个测试工程师都需要并且非常熟练的编写测试用例,能在编写测试用例中尽可能的 ...
测试用例设计方法_黑盒测试——测试用例设计方法
黑盒测试也称为功能测试或数据驱动测试.通过软件的外部表现来发现其缺陷和错误.在测试时,把被测程序视为一个不能打开的盒子,在完全不考虑程序内部逻辑结构和内部特性的情况下进行.它是在已知产品所应具有的功 ...
系统架构设计方法-3-应用架构设计篇
应用架构设计工作内容工作内容-1-确定应用域输入(架构资产部分) 输出模板和示例工作内容-2-确定应用输入(架构资产部分) 输出模板和示例工作内容-3-确定应用模块输入(架构资产部分) ...
软件工程：结构化软件设计方法 VS 面向对象软件设计方法
一.基本概念 1.结构化方法结构化方法是一种传统的软件开发方法,它是由结构化分析.结构化设计和结构化程序设计三部分有机组合而成的. 基本思想:把一个复杂问题的求解过程分阶段进行,而且这种分解是自顶向 ...
Android用户界面的设计方法心得,android界面设计实验总结,.docx
android界面设计实验总结, 安卓实验报告班级: 学号: 姓名:xxxxxxxxx 实验一:Activity生命周期的测试一:实验目的掌握使用Eclipse开发Android应用开发程序的方 ...

界面设计方法 (2) — 4.界面设计的原则与标准

界面设计方法 (2) — 4.界面设计的原则与标准相关推荐

最新文章

热门文章