界面设计方法 (9）：界面设计的原则与标准
前面介绍了5种基本的界面形式，如果从构成界面的要素（构件）层面看，实际上所有的界面都是一样的，因为它们都是由同样的控件构成的，只是控件的位置不同而已。
因此就有必要对界面的布置进行统一的标准化，建立了界面布置的标准后设计效率会提升、同时也为界面设计资料的复用奠定了基础。
界面设计的标准化非常重要，因为界面是用户认知系统的窗口，这个标准实际上是构建“人-机-人”工作环境的标准之一，标准化的界面形式也可以减少用户的认知负担和培训成本。
这里给出一些界面设计上的基本原则和标准供作参考，按照从整体到局部的顺序，重点提出以下的几个界面设计时的原则与标准（不限于此）：
- 界面布局对原则
- 子窗体设置的原则
- 字段控件的标准
- 美工设计的原则
这些原则/标准根据界面的使用场景不同、设计师的设计理念的不同等都会有所不同，需要根据具体情况具体分析设计，这些原则和标准仅供参考。
一、界面布局的原则
1. 整体布局
界面的布局是用户理解业务功能的重要手段，布局一定要以“业务导向”，布局的规范化、规律化可以培养用户逐渐地走向“无师自通”的方向，如：
- 同类界面的布局要统一，卡式、主细表、树形等同样格式要风格一致；
- 重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。关于界面重要信息的摆放位置请参看前面的博文；
- 界面上近似内容要放在相近处，如：加框以示区别、或拉大与其它内容区域的距离；
- 重视用户界面友好性，易于操作、易于查看，比如：常用按钮在鼠标移动最短的地方配置。工具栏的左端配置界面操作开始的功能按钮、右端配置界面操作结束功能按钮等；
- 界面横向一次的显示信息量（标题个数）多少，要以完成一次操作不用或是少用横向滚动条为标准（纵向滚动条不限），因为频繁使用横向滚动条会使得用户看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的现象。
图2 界面设计标准的制定
二、子窗体设置原则
以组件的主界面为第一层界面，子窗体的层数最好控制在3层以内，也就是连续打开三个界面为限，参见图3：
- 从菜单第一次打开的为主界面（父）
- 从主界面打开的第二层为子界面（子）
- 从子界面打开的第三层为子界面的子界面（孙）等
图3 子窗体的层数示意图
如果内容实在是比较多，最终弹出的子窗体要超过3层时，可以考虑另外再设置一个组件来分担处理的内容，不然子界面弹出过多，就会造成界面的混乱，会降低用户的操作效率。
三、字段控件的标准
字段控件的表达格式根据内容不同而不同，字段控件由两个部分构成：标题栏和输入框，参见图4：
图4 字段控件的长度与数据位置
1. 标题栏的长度
标题的字数不要太多，因为标题长到如同一句话时就不容易记忆了，最佳字数在2～6个字之间（易于记忆与称呼的长度）；另外标题中的文字位置可以参考：有背景框时居中，没有时居左或居右，图4中的标题栏有背景色，所以采用了文字居中的形式。
注：这里的”标题栏名称“指的是”字段名称“，不是4个业务功能中的”表单名称“，后者可以按照实际的名称写，多少字都可以，不必要设置字数。
2. 输入框的长度
输入框的字段长度是不一定的，建议输入框的长度与字数相匹配不必统一，如图4（a）的式样，因为如果要统一长度就一定会以字数最多的字段为准，那么字数少的字段也用长输入框就不容易读取，而且输入框的长度一样时字段之间的辨识度就会降低，寻找某个字段的时间会增加。
比如：图4（b）样式的“工程月数”字段只有2个单位的长度，如果采用和具有30个单位长度的“项目名称”一样长的输入框时，则“工程月数”就会因为标题与数据的距离太远而不容易读取（看不准）。
相比较而言，图4（a）样式中的“座机号码”、“邮政编号”、”工程月数“的输入框长度比较短，就比较容易寻找和识别。
3. 数据的位置
输入框内数据的位置，根据内容不同而不同，参见图4（a）：
- ①文字型数据：靠框的左端布置，如：名称、说明文；
- ②③数值型数据（长度固定）：居中布置，由于编号类数据长度是一定的，所以居中容易读取，如：电话号码，邮政编号、材料编号，这样做也容易与“文字类”和“数值类”数据进行区分；
- ④⑤数值型数据（长度非标）：靠框的右端布置，如：金额、数量、长度。
四、颜色与装饰的原则
这里介绍的界面设计中虽然不涉及到美工的内容，但是也希望作为设计师具有一些美学的意识，因为最终用户的满意度是个综合的指标，这个指标至少包括了下述内容：
- 业务正确：来自于业务设计（需求分析、架构、功能、数据等）的成果，信息的分区等；
- 易操作性：来自于功能应用设计的成果（界面、控件），推送机制等；
- 性能良好：来自于技术开发测试等的成果；
- 美观易读：来自于UI、美工设计等。
因为企业管理系统不是宣传用的网站、电商平台，界面风格要具有以下的特点（仅供参考）：
- 界面的整体要做到简洁、明了，界面上的各种要素（控件）的摆放位置、颜色、是否使用3D形式都要思考，辅助的功能不要喧宾夺主；
- 使用淡雅的色彩作为基调原色，不要大面积地使用原色，容易造成眼睛的疲劳；
- 要给用户以安静的感受，不要用有炫酷和跳跃感的要素去分散用户的注意力（电商平台的界面希望不断地带给用户新的发现、惊喜）。
五、小结
随着计算机技术的发展，计算机的使用领域和用途越来越广泛，界面风格也随之更加多样化。
比如：互联网风格页面、物联网的界面，硬件技术的进步也影响界面风格的变化；比如：智能手机端、平板电脑端等，它们的设计内容、风格都有所不同，但是上述的基本理念、原则等还是适用的。
本系列下一篇：界面设计的方法（10）— 按钮的设计方法
本文作者 @李鸿君
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
