原题目：界面设计方式（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锁定的状态表达示意

,

Usdt第三方支付接口

菜宝钱包（caibao.it）是使用TRC-20协议的Usdt第三方支付平台,Usdt收款平台、Usdt自动充提平台、usdt跑分平台。免费提供入金通道、Usdt钱包支付接口、Usdt自动充值接口、Usdt无需实名寄售回收。菜宝Usdt钱包一键生成Usdt钱包、一键调用API接口、一键无实名出售Usdt。

,

• 不使能

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

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

• 不能编辑

字段控件：被锁准时，称之为“不能编辑”，鼠标不能插入到字段控件内。没有被锁准时称之为“可编辑”，鼠标可以插入到字段控件内。字段控件在锁定状态时颜色也可以接纳与按钮控件一样的处置方式。

二、 新增按钮 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. 管控功效

一样平常来说，链接在查询按钮上的管控手段基本上就是查询权限的设定。好比当用户点击查询按钮时，判断用户是否具有查询权；若是有，再将具有查询权向下细分，如：

• 若是是公司级向导：可以查看的局限 = 全公司数据；
• 若是是部门级员工：可以查看的局限 = 本部门数据。

本文由 @李鸿君 原创公布于人人都是产物司理，未经许可，克制转载

ag区块链百家乐声明:该文看法仅代表作者自己，与www.allbetgame.us无关。转载请注明：usdt支付接口（www.caibao.it）：界面设计方式（10）：功效按钮设计（上）