展开全文

图1 布局原则

如图1所示，细表区的标题设置过多（A～J），致使大约有40%的信息在处在窗口外，用户不使用横向滚动条就看不到。

如果这是一个频繁操作的动作，那么工作效率就会低下，这就是所谓的应用体验设计的不好，这种设计会极大地造成用户满意度的下降。解决的方法可以考虑采用分页表达的形式。

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

2. 局部尺寸

要约定好界面上基本的控件距离、尺寸，参见图2，比如：

• 窗口与控件之间的距离；
• 控件之间的间距，包括纵向的行间距、横向的字段框间距等；
• 控件的高度；
• 使用文字的字号大小等。

图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）— 按钮的设计方法

本文由 @李鸿君 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议