原标题：界面设计方法（10）：功能按钮设计（上）

编辑导语：在界面中，功能按钮应该如何设计呢？本文作者为我们进行了总结分析，在上篇中，主要介绍了“新增和查询”按钮，下篇则会着重介绍“修改、保存和提交”按钮。 6park.com
编辑导语：在界面中，功能按钮应该如何设计呢？本文作者为我们进行了总结分析，在上篇中，主要介绍了“新增和查询”按钮，下篇则会着重介绍“修改、保存和提交”按钮。 6park.com

对界面上功能按钮的设计，很多人认为：这是技术问题，交给程序员就行了。这个想法只对了一半，因其仅考虑了按钮做为“操作系统”的功能（如：保存数据），而忽略了按钮作为承载“业务处理、管控控制”的重要（如：标准检查）。 6park.com
字段框用于输入数据，功能按钮则主要用于对业务标准的检查、管理规则的加载等作用。按钮也是驱动数据交互、流程跳转、发起通知、结果检查等一系列操作工作的动力、抓手。 6park.com
功能按钮的设计分为两篇，本篇介绍用于界面初始工作的“新增、查询”按钮，第二篇介绍用于中间处理和结束的“修改、保存、提交”按钮。 6park.com
一、 基本概念 1. 基本功能与管控功能  6park.com
按钮，作为界面操作的重要功能，被赋予的功能按照用途不同可以粗分为两个部分：基本功能和管控功能，如图1所示。 6park.com

图1 基本功能与管理功能 6park.com
1 ) 基本功能 见图1（a） 6park.com
基本功能，指的是对界面的打开、关闭，对数据读取、复制、计算、删除、保存等的操作，这些功能就属于系统的操作功能，不论什么系统、不论放在什么组件上它的作用都是一样的，都是必不可少的。 6park.com
本系列博文主要的目的是探讨有关业务、管理方面的设计，而前述的这些功能属于技术开发的范畴，所以在这里只是简单地介绍一下它们的基本功能，不做深入的探讨。 6park.com
2 ) 管控功能 见图1（b） 6park.com
管控功能，是在具有基本功能的按钮上链接了可以对业务标准、管理规则进行检查的功能，在点击按钮后，除去要执行基本功能的任务（读取、计算等）之外。 6park.com
还要将界面上业务处理的结果与预设的管理规则进行对比，如有违反现象则给出相应的处理，处理的内容包括：询问、提示、警告、终止、通知等，如何建立“业务标准”与“管理规则”之间的关系模型是设计师的重要工作。 6park.com
3 ) 两者的关系 6park.com
因为按钮的基本功能不同，每次点击按钮后要处理的业务内容都不一样，因此将管理规则关联到按钮上，可以对不同业务处理阶段的成果进行相应的管理检查，点击按钮在处理业务的同时也起到了激活管理规则的作用。 6park.com
基本功能和管控功能的工作顺序并非是分别进行的，而是相互有交叉的，如： 6park.com
在没有管控功能的情况下，仅执行基本功能就可以了；在有管控功能的情况下，还要区分管控功能与基本功能哪一个先执行，如： 6park.com
下面重点介绍5种常见的功能按钮及它们各自具有基本功能和管控功能，见图2： 6park.com

图2 常见的5种功能按钮示意图 6park.com
按钮控件是系统控件中的一大类，按控件钮的设计会根据具体的业务处理场景有不同的做法，这里介绍的是一般做法，主要目的是给设计师一个基本概念和掌握基本的设计手法，实际设计时需要根据具体的场景具体设计。 6park.com
2. 锁定的概念  6park.com
在按钮控件的设计中有个重要的概念就是状态的“锁定”，状态的锁定与按钮控件的设计有着密切的关系。所谓“锁定”表达的是一种界面的状态，处于“锁定”状态时界面上的全部控件、或是部分控件就不能操作了。 6park.com
按钮控件被锁定的原因有很多种，比如：该界面的内容已经通过了审批后就不能再编辑、或是操作的用户没有获得编辑权限等。 6park.com
1 ) 锁定的目的 6park.com
引入锁定状态的目的是什么呢？锁定是一种对数据的保护方法，同时也是显示管理规则生效的信号，如果系统没有设计锁定的功能，可能会发生下列的问题： 6park.com
有了锁定状态的概念后，就可以对系统内容的运行按照预想的设计理念、管理规则进行精确的、有效的控制，实现大多数在“人-人”环境下无法实现的管理效果。 6park.com
2 ) 锁定的条件 6park.com
这里介绍3种常见的锁定方法作为设计参考：规则锁定、时限锁定和引用锁定。界面内的处理结果一旦满足了预先设定的锁定条件时，系统就会自动地启动锁定机制让界面上相关的控件（包括字段、按钮）不能继续操作，锁定机制如图3所示。 6park.com
通常是利用“提交按钮”来激活该界面上的锁定功能，点击了提交按钮，就等于是声明本组件的处理工作完成，可以进行下一步的工作了。 6park.com

图3 锁定机制的三种类型 6park.com
3 ) 锁定的方法 6park.com
锁定界面的方法可以分为两种，即：全部锁定和局部锁定。 6park.com
4 ) 锁定与解锁的状态 6park.com
锁定后的控件表达形态通常有以下两种，参见图4： 6park.com

图4锁定的状态表达示意 6park.com
按钮控件：通常将处于被锁定状态的控件颜色用灰色表示，按钮控件处于可使用的状态时称之为“使能”，处于不能使用的状态时称之为“不使能”，在使能状态时将鼠标置于控件上会呈现出“手形”，可以点击。 6park.com
而处于不使能状态时则呈现为“箭头”，此时控件被点击也不反应。 6park.com
字段控件：被锁定时，称之为“不可编辑”，鼠标不能插入到字段控件内。没有被锁定时称之为“可编辑”，鼠标可以插入到字段控件内。字段控件在锁定状态时颜色也可以采用与按钮控件一样的处理方式。 6park.com
二、 新增按钮 1. 功能作用  6park.com
点击新增按钮是一个界面开始记录新数据的第一个操作，其作用是在界面为记录下一条新的数据而作的准备工作，包括：清空界面数据、导入上游数据、获取界面的业务编号等。 6park.com
按下新增按钮是记录一条新数据的第一步，要将操作开始前需要检查的管理规则都要链接在这个按钮上，为记录新数据预先准备出一个全空白的、正确的初始状态。 6park.com
2. 基本功能  6park.com
按下新增按钮后，系统会进行如下的准备（设计不同，处理顺序会有差异）： 6park.com
注：业务编号的发布方式 6park.com
如果业务编号是自动发布的，为了避免由于多人同时按下新增按钮（并发）而造成业务编号的重复，业务编号是在第一次按下保存按钮后才会取得。 6park.com
因此在按下新增按钮后、到第一次按下保存按钮之前的期间内，界面不会显示出新增加的业务编号。 6park.com
3. 管控功能  6park.com
新增按钮的主要管控规则是判断：此时组件所处的“状态”是否符合可以进行新增记录的条件，当判断为符合时才会呈现空白的界面，新增条件与下述管理功能相关（不限于此）： 6park.com
1 ) 状态1：用户的权限 6park.com
判断正在操作的用户是否具有使用新增按钮的权限，用户的权限也有两种分类： 6park.com
2 ) 状态2：管理规则 6park.com
判断新增时是否有上游数据可供导入？如果有，再判断该数据是否处于可导入状态？上游数据是否满足管理规则，可用上游组件的“提交”状态来表达： 6park.com
影响新增条件的因素有很多，需要根据具体的情况做具体的分析和设计。 6park.com
三、 查询按钮 1. 功能作用  6park.com
查询按钮，用于对该界面输入的历史数据进行查看，查询通常是通过单个的关键词、或是一组查询条件来对数据库所存数据的进行寻找，将对应的数据展示在界面上。 6park.com
查询功能不同于新增、保存类的功能，它不仅仅是程序员写SQL语句的纯编码工作，它首先是一个重要的业务操作工作，因为查询是用户频繁使用的功能，所以设计师要站在用户的视角，思考如何设计才能支持用户快速查询的需求。 6park.com
2. 基本功能  6park.com
系统中几乎每个组件中都含有查询按钮，查询的方式有也有很多，这里举三个最为常用的查询方式：精确查询、范围查询、模糊查询。 6park.com
1 ) 精准查询 6park.com
利用每个业务功能都具有的业务编号进行查询，比如：合同编号、材料编号、员工编号等，只要找到与待查询编号一致的1条数据显示出来就可以了，条形码、二维码等也都属于精准查询。 6park.com
业务编号通常是数据表的“主键”，一般来说，已知特定的编号时就采用精准查询方式，界面设计中左上角的输入框就是用于输入业务编号进行精准查询用的。 6park.com
【案例】如图5的编号框不为空（编号=123456），则按下“查询”按钮→进行精准查询，找到对应编号=123456的数据后在界面上显示它。 6park.com

图5 查询功能与业务编号 6park.com
2 ) 范围查询 6park.com
用查询条件确定一定的数据范围，比如：时间段、所属部门、产品分类等，按照这个条件进行查询。这些条件通常是数据表的行、或列的标题。一般来说，需要一组符合查询条件的数据时采用这个查询方式。 6park.com
【案例】在图5编号框为空的状态，按下查询按钮，弹出“查询条件设定”窗口，如图6所示，设定查询范围，按下查询按钮进行查询，将数据表中的符合条件的数据全部用列表的形式显示出来。 6park.com

图6 查询按钮-查询条件的设定 6park.com
3 ) 模糊查询 6park.com
模糊查询时，输入关键字、或关键词，寻找包含有相同字和词的数据记录,不论这些字和词是不是行或列的标题，只要有就都列出来。一般来说，用方法1和方法2都查不到的数据，可以采用这种方式。 6park.com
【举例】在图4的编号栏中输入模糊字、或词，按下查询按钮，进行模糊查询，找到包含有这些字、词的数据条后，用列表的形式全部显示出来。 6park.com
注：“相同字”与“同义词” 6park.com
这里查询时不能返回仅包含有“同义字、同义词”的数据，比如：关键词=建材，查询后返回的数据中必须包含有“建材”二字，而不能返回只包含有属于建材范畴的同义词，如“水泥、木材、钢材”等。 6park.com
3. 管控功能  6park.com
一般来说，链接在查询按钮上的管控手段基本上就是查询权限的设定。比如当用户点击查询按钮时，判断用户是否具有查询权；如果有，再将具有查询权向下细分，如： 6park.com
本文由 @李鸿君 原创发布于人人都是产品经理，未经许可，禁止转载 6park.com
题图来自 Unsplash，基于 CC0 协议