編輯導(dǎo)語：在界面中，功能按鈕應(yīng)該如何設(shè)計呢？本文作者為我們進(jìn)行了總結(jié)分析，在上篇中，主要介紹了“新增和查詢”按鈕，下篇則會著重介紹“修改、保存和提交”按鈕。

對界面上功能按鈕的設(shè)計，很多人認(rèn)為：這是技術(shù)問題，交給程序員就行了。這個想法只對了一半，因其僅考慮了按鈕做為“操作系統(tǒng)”的功能（如：保存數(shù)據(jù)），而忽略了按鈕作為承載“業(yè)務(wù)處理、管控控制”的重要（如：標(biāo)準(zhǔn)檢查）。

字段框用于輸入數(shù)據(jù)，功能按鈕則主要用于對業(yè)務(wù)標(biāo)準(zhǔn)的檢查、管理規(guī)則的加載等作用。按鈕也是驅(qū)動數(shù)據(jù)交互、流程跳轉(zhuǎn)、發(fā)起通知、結(jié)果檢查等一系列操作工作的動力、抓手。

功能按鈕的設(shè)計分為兩篇，本篇介紹用于界面初始工作的“新增、查詢”按鈕，第二篇介紹用于中間處理和結(jié)束的“修改、保存、提交”按鈕。

一、 基本概念

1. 基本功能與管控功能

按鈕，作為界面操作的重要功能，被賦予的功能按照用途不同可以粗分為兩個部分：基本功能和管控功能，如圖1所示。

圖1 基本功能與管理功能

1 ) 基本功能 見圖1（a）

基本功能，指的是對界面的打開、關(guān)閉，對數(shù)據(jù)讀取、復(fù)制、計算、刪除、保存等的操作，這些功能就屬于系統(tǒng)的操作功能，不論什么系統(tǒng)、不論放在什么組件上它的作用都是一樣的，都是必不可少的。

本系列博文主要的目的是探討有關(guān)業(yè)務(wù)、管理方面的設(shè)計，而前述的這些功能屬于技術(shù)開發(fā)的范疇，所以在這里只是簡單地介紹一下它們的基本功能，不做深入的探討。

2 ) 管控功能 見圖1（b）

管控功能，是在具有基本功能的按鈕上鏈接了可以對業(yè)務(wù)標(biāo)準(zhǔn)、管理規(guī)則進(jìn)行檢查的功能，在點擊按鈕后，除去要執(zhí)行基本功能的任務(wù)（讀取、計算等）之外。

還要將界面上業(yè)務(wù)處理的結(jié)果與預(yù)設(shè)的管理規(guī)則進(jìn)行對比，如有違反現(xiàn)象則給出相應(yīng)的處理，處理的內(nèi)容包括：詢問、提示、警告、終止、通知等，如何建立“業(yè)務(wù)標(biāo)準(zhǔn)”與“管理規(guī)則”之間的關(guān)系模型是設(shè)計師的重要工作。

3 ) 兩者的關(guān)系

因為按鈕的基本功能不同，每次點擊按鈕后要處理的業(yè)務(wù)內(nèi)容都不一樣，因此將管理規(guī)則關(guān)聯(lián)到按鈕上，可以對不同業(yè)務(wù)處理階段的成果進(jìn)行相應(yīng)的管理檢查，點擊按鈕在處理業(yè)務(wù)的同時也起到了激活管理規(guī)則的作用。

基本功能和管控功能的工作順序并非是分別進(jìn)行的，而是相互有交叉的，如：

在沒有管控功能的情況下，僅執(zhí)行基本功能就可以了；在有管控功能的情況下，還要區(qū)分管控功能與基本功能哪一個先執(zhí)行，如：

• 要確認(rèn)業(yè)務(wù)數(shù)據(jù)正確后才能保存，則先要執(zhí)行管控功能進(jìn)行標(biāo)準(zhǔn)檢查，合格后再執(zhí)行保存功能（基礎(chǔ)功能）；
• 要先得出計算結(jié)果然后在進(jìn)行規(guī)則確認(rèn)時，就先進(jìn)行計算處理（基本功能），再啟動管理規(guī)則對計算結(jié)果檢查其正確與否（管控功能）。

下面重點介紹5種常見的功能按鈕及它們各自具有基本功能和管控功能，見圖2：

圖2 常見的5種功能按鈕示意圖

• 新增：在界面上新增一條數(shù)據(jù)的功能
• 查詢：查詢歷史數(shù)據(jù)的功能
• 修改：修改已完成數(shù)據(jù)的功能
• 保存：保存輸入的數(shù)據(jù)到數(shù)據(jù)庫
• 提交：完成業(yè)務(wù)處理后發(fā)出通知（包括：走審批、轉(zhuǎn)向下個流程節(jié)點）

按鈕控件是系統(tǒng)控件中的一大類，按控件鈕的設(shè)計會根據(jù)具體的業(yè)務(wù)處理場景有不同的做法，這里介紹的是一般做法，主要目的是給設(shè)計師一個基本概念和掌握基本的設(shè)計手法，實際設(shè)計時需要根據(jù)具體的場景具體設(shè)計。

2. 鎖定的概念

在按鈕控件的設(shè)計中有個重要的概念就是狀態(tài)的“鎖定”，狀態(tài)的鎖定與按鈕控件的設(shè)計有著密切的關(guān)系。所謂“鎖定”表達(dá)的是一種界面的狀態(tài)，處于“鎖定”狀態(tài)時界面上的全部控件、或是部分控件就不能操作了。

按鈕控件被鎖定的原因有很多種，比如：該界面的內(nèi)容已經(jīng)通過了審批后就不能再編輯、或是操作的用戶沒有獲得編輯權(quán)限等。

1 ) 鎖定的目的

引入鎖定狀態(tài)的目的是什么呢？鎖定是一種對數(shù)據(jù)的保護(hù)方法，同時也是顯示管理規(guī)則生效的信號，如果系統(tǒng)沒有設(shè)計鎖定的功能，可能會發(fā)生下列的問題：

• 數(shù)據(jù)雖然已經(jīng)通過了審批，但仍然可以修改，造成了審批無效的現(xiàn)象；
• 已經(jīng)過了時限約束（如財務(wù)）的數(shù)據(jù)再被修改后，造成統(tǒng)計結(jié)果不可信；
• 下游組件不知道上游組件的數(shù)據(jù)處理是否完成、是否可以引用等。

有了鎖定狀態(tài)的概念后，就可以對系統(tǒng)內(nèi)容的運行按照預(yù)想的設(shè)計理念、管理規(guī)則進(jìn)行精確的、有效的控制，實現(xiàn)大多數(shù)在“人-人”環(huán)境下無法實現(xiàn)的管理效果。

2 ) 鎖定的條件

這里介紹3種常見的鎖定方法作為設(shè)計參考：規(guī)則鎖定、時限鎖定和引用鎖定。界面內(nèi)的處理結(jié)果一旦滿足了預(yù)先設(shè)定的鎖定條件時，系統(tǒng)就會自動地啟動鎖定機制讓界面上相關(guān)的控件（包括字段、按鈕）不能繼續(xù)操作，鎖定機制如圖3所示。

通常是利用“提交按鈕”來激活該界面上的鎖定功能，點擊了提交按鈕，就等于是聲明本組件的處理工作完成，可以進(jìn)行下一步的工作了。

圖3 鎖定機制的三種類型

• 規(guī)則鎖定 參見圖3①：在點擊了“提交”按鈕后，啟動鏈接在提交按鈕上的各類管理規(guī)則的檢查，一旦全部通過了管理規(guī)則的檢查后，就讓全界面或是界面上的部分控件進(jìn)入鎖定狀態(tài)。
• 時限鎖定 參見圖3②：按照系統(tǒng)中預(yù)先設(shè)定好的時間限制條件，一旦到了時間點就自動地啟動鎖定機制，就讓全界面或是界面上的部分控件進(jìn)入鎖定狀態(tài)。
• 引用鎖定 參見圖3③：組件內(nèi)沒有設(shè)置規(guī)則鎖定和時限鎖定的功能，但是進(jìn)行了如下的約定：一旦本組件內(nèi)的數(shù)據(jù)被下游組件所引用，則本組件自動鎖定，處理內(nèi)容同規(guī)則鎖定一樣。其中引用有兩種情況：一是“本組件的數(shù)據(jù)被復(fù)制”；二是“本組件的數(shù)據(jù)被參照”。

3 ) 鎖定的方法

鎖定界面的方法可以分為兩種，即：全部鎖定和局部鎖定。

• 全部鎖定：即界面上全部用于編輯的控件都不能使用（與編輯無關(guān)的功能可以繼續(xù)使用，如：查詢）。也可以通過鎖定“保存按鈕”的方式達(dá)到對界面功能全鎖的目的，因為對界面上數(shù)據(jù)的任何變更，如果最后不經(jīng)過保存就不能生效。
• 局部鎖定：僅對部分控件進(jìn)行鎖定，其余控件還可以繼續(xù)使用，比如：僅對界面上含有關(guān)鍵數(shù)據(jù)的字段鎖定（如：金額等），而不對含有諸如地址、電話類輔助數(shù)據(jù)的字段進(jìn)行鎖定。

4 ) 鎖定與解鎖的狀態(tài)

鎖定后的控件表達(dá)形態(tài)通常有以下兩種，參見圖4：

圖4鎖定的狀態(tài)表達(dá)示意

• 不使能

按鈕控件：通常將處于被鎖定狀態(tài)的控件顏色用灰色表示，按鈕控件處于可使用的狀態(tài)時稱之為“使能”，處于不能使用的狀態(tài)時稱之為“不使能”，在使能狀態(tài)時將鼠標(biāo)置于控件上會呈現(xiàn)出“手形”，可以點擊。

而處于不使能狀態(tài)時則呈現(xiàn)為“箭頭”，此時控件被點擊也不反應(yīng)。

• 不可編輯

字段控件：被鎖定時，稱之為“不可編輯”，鼠標(biāo)不能插入到字段控件內(nèi)。沒有被鎖定時稱之為“可編輯”，鼠標(biāo)可以插入到字段控件內(nèi)。字段控件在鎖定狀態(tài)時顏色也可以采用與按鈕控件一樣的處理方式。

二、 新增按鈕

1. 功能作用

點擊新增按鈕是一個界面開始記錄新數(shù)據(jù)的第一個操作，其作用是在界面為記錄下一條新的數(shù)據(jù)而作的準(zhǔn)備工作，包括：清空界面數(shù)據(jù)、導(dǎo)入上游數(shù)據(jù)、獲取界面的業(yè)務(wù)編號等。

按下新增按鈕是記錄一條新數(shù)據(jù)的第一步，要將操作開始前需要檢查的管理規(guī)則都要鏈接在這個按鈕上，為記錄新數(shù)據(jù)預(yù)先準(zhǔn)備出一個全空白的、正確的初始狀態(tài)。

2. 基本功能

按下新增按鈕后，系統(tǒng)會進(jìn)行如下的準(zhǔn)備（設(shè)計不同，處理順序會有差異）：

• 清空界面上所有字段內(nèi)的數(shù)據(jù)，呈現(xiàn)一個完全空白的界面環(huán)境；
• 判斷是否有上游導(dǎo)入的數(shù)據(jù)，如果有，則自動導(dǎo)入或是彈出上游數(shù)據(jù)的選擇窗口；
• 獲取本次新增數(shù)據(jù)的業(yè)務(wù)編號（只限于有自動發(fā)號功能的界面設(shè)計）。

注：業(yè)務(wù)編號的發(fā)布方式

如果業(yè)務(wù)編號是自動發(fā)布的，為了避免由于多人同時按下新增按鈕（并發(fā)）而造成業(yè)務(wù)編號的重復(fù)，業(yè)務(wù)編號是在第一次按下保存按鈕后才會取得。

因此在按下新增按鈕后、到第一次按下保存按鈕之前的期間內(nèi)，界面不會顯示出新增加的業(yè)務(wù)編號。

3. 管控功能

新增按鈕的主要管控規(guī)則是判斷：此時組件所處的“狀態(tài)”是否符合可以進(jìn)行新增記錄的條件，當(dāng)判斷為符合時才會呈現(xiàn)空白的界面，新增條件與下述管理功能相關(guān)（不限于此）：

1 ) 狀態(tài)1：用戶的權(quán)限

判斷正在操作的用戶是否具有使用新增按鈕的權(quán)限，用戶的權(quán)限也有兩種分類：

• 只讀權(quán)限：即該用戶可以閱讀數(shù)據(jù)、但沒有按下新增按鈕的權(quán)利；
• 編輯權(quán)限：不但有閱讀權(quán)限、還具有編輯權(quán)限（=可以按下新增按鈕并進(jìn)行新增的操作）。

2 ) 狀態(tài)2：管理規(guī)則

判斷新增時是否有上游數(shù)據(jù)可供導(dǎo)入？如果有，再判斷該數(shù)據(jù)是否處于可導(dǎo)入狀態(tài)？上游數(shù)據(jù)是否滿足管理規(guī)則，可用上游組件的“提交”狀態(tài)來表達(dá)：

• 如上游數(shù)據(jù)處于提交完成狀態(tài)，則可以導(dǎo)入；否則不可（參見“提交”按鈕說明）；
• 如上游數(shù)據(jù)處于未提交狀態(tài)，則可以不顯示數(shù)據(jù)的選擇框，或是彈出提示欄顯示：“xx正在編制中，不能引用”。

影響新增條件的因素有很多，需要根據(jù)具體的情況做具體的分析和設(shè)計。

三、 查詢按鈕

1. 功能作用

查詢按鈕，用于對該界面輸入的歷史數(shù)據(jù)進(jìn)行查看，查詢通常是通過單個的關(guān)鍵詞、或是一組查詢條件來對數(shù)據(jù)庫所存數(shù)據(jù)的進(jìn)行尋找，將對應(yīng)的數(shù)據(jù)展示在界面上。

查詢功能不同于新增、保存類的功能，它不僅僅是程序員寫SQL語句的純編碼工作，它首先是一個重要的業(yè)務(wù)操作工作，因為查詢是用戶頻繁使用的功能，所以設(shè)計師要站在用戶的視角，思考如何設(shè)計才能支持用戶快速查詢的需求。

2. 基本功能

系統(tǒng)中幾乎每個組件中都含有查詢按鈕，查詢的方式有也有很多，這里舉三個最為常用的查詢方式：精確查詢、范圍查詢、模糊查詢。

1 ) 精準(zhǔn)查詢

利用每個業(yè)務(wù)功能都具有的業(yè)務(wù)編號進(jìn)行查詢，比如：合同編號、材料編號、員工編號等，只要找到與待查詢編號一致的1條數(shù)據(jù)顯示出來就可以了，條形碼、二維碼等也都屬于精準(zhǔn)查詢。

業(yè)務(wù)編號通常是數(shù)據(jù)表的“主鍵”，一般來說，已知特定的編號時就采用精準(zhǔn)查詢方式，界面設(shè)計中左上角的輸入框就是用于輸入業(yè)務(wù)編號進(jìn)行精準(zhǔn)查詢用的。

【案例】如圖5的編號框不為空（編號=123456），則按下“查詢”按鈕→進(jìn)行精準(zhǔn)查詢，找到對應(yīng)編號=123456的數(shù)據(jù)后在界面上顯示它。

圖5 查詢功能與業(yè)務(wù)編號

2 ) 范圍查詢

用查詢條件確定一定的數(shù)據(jù)范圍，比如：時間段、所屬部門、產(chǎn)品分類等，按照這個條件進(jìn)行查詢。這些條件通常是數(shù)據(jù)表的行、或列的標(biāo)題。一般來說，需要一組符合查詢條件的數(shù)據(jù)時采用這個查詢方式。

【案例】在圖5編號框為空的狀態(tài)，按下查詢按鈕，彈出“查詢條件設(shè)定”窗口，如圖6所示，設(shè)定查詢范圍，按下查詢按鈕進(jìn)行查詢，將數(shù)據(jù)表中的符合條件的數(shù)據(jù)全部用列表的形式顯示出來。

圖6 查詢按鈕-查詢條件的設(shè)定

3 ) 模糊查詢

模糊查詢時，輸入關(guān)鍵字、或關(guān)鍵詞，尋找包含有相同字和詞的數(shù)據(jù)記錄,不論這些字和詞是不是行或列的標(biāo)題，只要有就都列出來。一般來說，用方法1和方法2都查不到的數(shù)據(jù)，可以采用這種方式。

【舉例】在圖4的編號欄中輸入模糊字、或詞，按下查詢按鈕，進(jìn)行模糊查詢，找到包含有這些字、詞的數(shù)據(jù)條后，用列表的形式全部顯示出來。

注：“相同字”與“同義詞”

這里查詢時不能返回僅包含有“同義字、同義詞”的數(shù)據(jù)，比如：關(guān)鍵詞=建材，查詢后返回的數(shù)據(jù)中必須包含有“建材”二字，而不能返回只包含有屬于建材范疇的同義詞，如“水泥、木材、鋼材”等。

3. 管控功能

一般來說，鏈接在查詢按鈕上的管控手段基本上就是查詢權(quán)限的設(shè)定。比如當(dāng)用戶點擊查詢按鈕時，判斷用戶是否具有查詢權(quán)；如果有，再將具有查詢權(quán)向下細(xì)分，如：

• 如果是公司級領(lǐng)導(dǎo)：可以查看的范圍 = 全公司數(shù)據(jù)；
• 如果是部門級員工：可以查看的范圍 = 本部門數(shù)據(jù)。

本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自?Unsplash，基于 CC0 協(xié)議