界面设计方法10功能按钮设计上.docx

界面设计方法10功能按钮设计上.docx

《界面设计方法10功能按钮设计上.docx》由会员分享，可在线阅读，更多相关《界面设计方法10功能按钮设计上.docx（11页珍藏版）》请在冰豆网上搜索。

界面设计方法10功能按钮设计上

界面设计方法（10）：

功能按钮设计（上）

编辑导语：

在界面中，功能按钮应该如何设计呢？

本文作者为我们进行了总结分析，在上篇中，主要介绍了“新增和查询”按钮，下篇则会着重介绍“修改、保存和提交”按钮。

对界面上功能按钮的设计，很多人认为：

这是技术问题，交给程序员就行了。

这个想法只对了一半，因其仅考虑了按钮做为“操作系统”的功能（如：

保存数据），而忽略了按钮作为承载“业务处理、管控控制”的重要（如：

标准检查）。

字段框用于输入数据，功能按钮则主要用于对业务标准的检查、管理规则的加载等作用。

按钮也是驱动数据交互、流程跳转、发起通知、结果检查等一系列操作工作的动力、抓手。

功能按钮的设计分为两篇，本篇介绍用于界面初始工作的“新增、查询”按钮，第二篇介绍用于中间处理和结束的“修改、保存、提交”按钮。

一、基本概念

1.基本功能与管控功能

按钮，作为界面操作的重要功能，被赋予的功能按照用途不同可以粗分为两个部分：

基本功能和管控功能，如图1所示。

图1基本功能与管理功能

1）基本功能见图1（a）

基本功能，指的是对界面的打开、关闭，对数据读取、复制、计算、删除、保存等的操作，这些功能就属于系统的操作功能，不论什么系统、不论放在什么组件上它的作用都是一样的，都是必不可少的。

本系列博文主要的目的是探讨有关业务、管理方面的设计，而前述的这些功能属于技术开发的范畴，所以在这里只是简单地介绍一下它们的基本功能，不做深入的探讨。

2）管控功能见图1（b）

管控功能，是在具有基本功能的按钮上链接了可以对业务标准、管理规则进行检查的功能，在点击按钮后，除去要执行基本功能的任务（读取、计算等）之外。

还要将界面上业务处理的结果与预设的管理规则进行对比，如有违反现象则给出相应的处理，处理的内容包括：

询问、提示、警告、终止、通知等，如何建立“业务标准”与“管理规则”之间的关系模型是设计师的重要工作。

3）两者的关系

因为按钮的基本功能不同，每次点击按钮后要处理的业务内容都不一样，因此将管理规则关联到按钮上，可以对不同业务处理阶段的成果进行相应的管理检查，点击按钮在处理业务的同时也起到了激活管理规则的作用。

基本功能和管控功能的工作顺序并非是分别进行的，而是相互有交叉的，如：

在没有管控功能的情况下，仅执行基本功能就可以了；在有管控功能的情况下，还要区分管控功能与基本功能哪一个先执行，如：

要确认业务数据正确后才能保存，则先要执行管控功能进行标准检查，合格后再执行保存功能（基础功能）；

要先得出计算结果然后在进行规则确认时，就先进行计算处理（基本功能），再启动管理规则对计算结果检查其正确与否（管控功能）。

下面重点介绍5种常见的功能按钮及它们各自具有基本功能和管控功能，见图2：

图2常见的5种功能按钮示意图

新增：

在界面上新增一条数据的功能

查询：

查询历史数据的功能

修改：

修改已完成数据的功能

保存：

保存输入的数据到数据库

提交：

完成业务处理后发出通知（包括：

走审批、转向下个流程节点）

按钮控件是系统控件中的一大类，按控件钮的设计会根据具体的业务处理场景有不同的做法，这里介绍的是一般做法，主要目的是给设计师一个基本概念和掌握基本的设计手法，实际设计时需要根据具体的场景具体设计。

2.锁定的概念

在按钮控件的设计中有个重要的概念就是状态的“锁定”，状态的锁定与按钮控件的设计有着密切的关系。

所谓“锁定”表达的是一种界面的状态，处于“锁定”状态时界面上的全部控件、或是部分控件就不能操作了。

按钮控件被锁定的原因有很多种，比如：

该界面的内容已经通过了审批后就不能再编辑、或是操作的用户没有获得编辑权限等。

1）锁定的目的

引入锁定状态的目的是什么呢？

锁定是一种对数据的保护方法，同时也是显示管理规则生效的信号，如果系统没有设计锁定的功能，可能会发生下列的问题：

数据虽然已经通过了审批，但仍然可以修改，造成了审批无效的现象；

已经过了时限约束（如财务）的数据再被修改后，造成统计结果不可信；

下游组件不知道上游组件的数据处理是否完成、是否可以引用等。

有了锁定状态的概念后，就可以对系统内容的运行按照预想的设计理念、管理规则进行精确的、有效的控制，实现大多数在“人-人”环境下无法实现的管理效果。

2）锁定的条件

这里介绍3种常见的锁定方法作为设计参考：

规则锁定、时限锁定和引用锁定。

界面内的处理结果一旦满足了预先设定的锁定条件时，系统就会自动地启动锁定机制让界面上相关的控件（包括字段、按钮）不能继续操作，锁定机制如图3所示。

通常是利用“提交按钮”来激活该界面上的锁定功能，点击了提交按钮，就等于是声明本组件的处理工作完成，可以进行下一步的工作了。

图3锁定机制的三种类型

规则锁定参见图3①：

在点击了“提交”按钮后，启动链接在提交按钮上的各类管理规则的检查，一旦全部通过了管理规则的检查后，就让全界面或是界面上的部分控件进入锁定状态。

时限锁定参见图3②：

按照系统中预先设定好的时间限制条件，一旦到了时间点就自动地启动锁定机制，就让全界面或是界面上的部分控件进入锁定状态。

引用锁定参见图3③：

组件内没有设置规则锁定和时限锁定的功能，但是进行了如下的约定：

一旦本组件内的数据被下游组件所引用，则本组件自动锁定，处理内容同规则锁定一样。

其中引用有两种情况：

一是“本组件的数据被复制”；二是“本组件的数据被参照”。

3）锁定的方法

锁定界面的方法可以分为两种，即：

全部锁定和局部锁定。

全部锁定：

即界面上全部用于编辑的控件都不能使用（与编辑无关的功能可以继续使用，如：

查询）。

也可以通过锁定“保存按钮”的方式达到对界面功能全锁的目的，因为对界面上数据的任何变更，如果最后不经过保存就不能生效。

局部锁定：

仅对部分控件进行锁定，其余控件还可以继续使用，比如：

仅对界面上含有关键数据的字段锁定（如：

金额等），而不对含有诸如地址、电话类辅助数据的字段进行锁定。

4）锁定与解锁的状态

锁定后的控件表达形态通常有以下两种，参见图4：

图4锁定的状态表达示意

按钮控件：

通常将处于被锁定状态的控件颜色用灰色表示，按钮控件处于可使用的状态时称之为“使能”，处于不能使用的状态时称之为“不使能”，在使能状态时将鼠标置于控件上会呈现出“手形”，可以点击。

而处于不使能状态时则呈现为“箭头”，此时控件被点击也不反应。

字段控件：

被锁定时，称之为“不可编辑”，鼠标不能插入到字段控件内。

没有被锁定时称之为“可编辑”，鼠标可以插入到字段控件内。

字段控件在锁定状态时颜色也可以采用与按钮控件一样的处理方式。

二、新增按钮

1.功能作用

点击新增按钮是一个界面开始记录新数据的第一个操作，其作用是在界面为记录下一条新的数据而作的准备工作，包括：

清空界面数据、导入上游数据、获取界面的业务编号等。

按下新增按钮是记录一条新数据的第一步，要将操作开始前需要检查的管理规则都要链接在这个按钮上，为记录新数据预先准备出一个全空白的、正确的初始状态。

2.基本功能

按下新增按钮后，系统会进行如下的准备（设计不同，处理顺序会有差异）：

清空界面上所有字段内的数据，呈现一个完全空白的界面环境；

判断是否有上游导入的数据，如果有，则自动导入或是弹出上游数据的选择窗口；

获取本次新增数据的业务编号（只限于有自动发号功能的界面设计）。

注：

业务编号的发布方式

如果业务编号是自动发布的，为了避免由于多人同时按下新增按钮（并发）而造成业务编号的重复，业务编号是在第一次按下保存按钮后才会取得。

因此在按下新增按钮后、到第一次按下保存按钮之前的期间内，界面不会显示出新增加的业务编号。

3.管控功能

新增按钮的主要管控规则是判断：

此时组件所处的“状态”是否符合可以进行新增记录的条件，当判断为符合时才会呈现空白的界面，新增条件与下述管理功能相关（不限于此）：

1）状态1：

用户的权限

判断正在操作的用户是否具有使用新增按钮的权限，用户的权限也有两种分类：

只读权限：

即该用户可以阅读数据、但没有按下新增按钮的权利；

编辑权限：

不但有阅读权限、还具有编辑权限（=可以按下新增按钮并进行新增的操作）。

2）状态2：

管理规则

判断新增时是否有上游数据可供导入？

如果有，再判断该数据是否处于可导入状态？

上游数据是否满足管理规则，可用上游组件的“提交”状态来表达：

如上游数据处于提交完成状态，则可以导入；否则不可（参见“提交”按钮说明）；

如上游数据处于未提交状态，则可以不显示数据的选择框，或是弹出提示栏显示：

“xx正在编制中，不能引用”。

影响新增条件的因素有很多，需要根据具体的情况做具体的分析和设计。

三、查询按钮

1.功能作用

查询按钮，用于对该界面输入的历史数据进行查看，查询通常是通过单个的关键词、或是一组查询条件来对数据库所存数据的进行寻找，将对应的数据展示在界面上。

查询功能不同于新增、保存类的功能，它不仅仅是程序员写SQL语句的纯编码工作，它首先是一个重要的业务操作工作，因为查询是用户频繁使用的功能，所以设计师要站在用户的视角，思考如何设计才能支持用户快速查询的需求。

2.基本功能

系统中几乎每个组件中都含有查询按钮，查询的方式有也有很多，这里举三个最为常用的查询方式：

精确查询、范围查询、模糊查询。

1）精准查询

利用每个业务功能都具有的业务编号进行查询，比如：

合同编号、材料编号、员工编号等，只要找到与待查询编号一致的1条数据显示出来就可以了，条形码、二维码等也都属于精准查询。

业务编号通常是数据表的“主键”，一般来说，已知特定的编号时就采用精准查询方式，界面设计中左上角的输入框就是用于输入业务编号进行精准查询用的。

【案例】如图5的编号框不为空（编号=123456），则按下“查询”按钮→进行精准查询，找到对应编号=123456的数据后在界面上显示它。

图5查询功能与业务编号

2）范围查询

用查询条件确定一定的数据范围，比如：

时间段、所属部门、产品分类等，按照这个条件进行查询。

这些条件通常是数据表的行、或列的标题。

一般来说，需要一组符合查询条件的数据时采用这个查询方式。

【案例】在图5编号框为空的状态，按下查询按钮，弹出“查询条件设定”窗口，如图6所示，设定查询范围，按下查询按钮进行查询，将数据表中的符合条件的数据全部用列表的形式显示出来。

图6查询按钮-查询条件的设定

3）模糊查询

模糊查询时，输入关键字、或关键词，寻找包含有相同字和词的数据记录,不论这些字和词是不是行或列的标题，只要有就都列出来。

一般来说，用方法1和方法2都查不到的数据，可以采用这种方式。

【举例】在图4的编号栏中输入模糊字、或词，按下查询按钮，进行模糊查询，找到包含有这些字、词的数据条后，用列表的形式全部显示出来。

注：

“相同字”与“同义词”

这里查询时不能返回仅包含有“同义字、同义词”的数据，比如：

关键词=建材，查询后返回的数据中必须包含有“建材”二字，而不能返回只包含有属于建材范畴的同义词，如“水泥、木材、钢材”等。

3.管控功能

一般来说，链接在查询按钮上的管控手段基本上就是查询权限的设定。

比如当用户点击查询按钮时，判断用户是否具有查询权；如果有，再将具有查询权向下细分，如：

如果是公司级领导：

可以查看的范围=全公司数据；

如果是部门级员工：

可以查看的范围=本部门数据。