對界面上功能按鈕的設計，很多人認為：這是技術問題，交給程序員就行了。這個想法只對了一半，因其僅考慮了按鈕做為“操作系統(tǒng)”的功能（如：保存數(shù)據(jù)），而忽略了按鈕作為承載“業(yè)務處理、管控控制”的重要（如：標準檢查）。字段框用于輸入數(shù)據(jù)，功能按鈕則主要用于對業(yè)務標準的檢查、管理規(guī)則的加載等作用。按鈕也是驅動數(shù)據(jù)交互、流程跳轉、發(fā)起通知、結果檢查等一系列操作工作的動力、抓手。
功能按鈕的設計分為兩篇，本篇介紹用于界面初始工作的“新增、查詢”按鈕，第二篇介紹用于中間處理和結束的“修改、保存、提交”按鈕。

一、 基本概念

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

圖1 基本功能與管理功能

1 ) 基本功能 見圖1（a）
基本功能，指的是對界面的打開、關閉，對數(shù)據(jù)讀取、復制、計算、刪除、保存等的操作，這些功能就屬于系統(tǒng)的操作功能，不論什么系統(tǒng)、不論放在什么組件上它的作用都是一樣的，都是必不可少的。本系列博文主要的目的是探討有關業(yè)務、管理方面的設計，而前述的這些功能屬于技術開發(fā)的范疇，所以在這里只是簡單地介紹一下它們的基本功能，不做深入的探討。

2 ) 管控功能 見圖1（b）
管控功能，是在具有基本功能的按鈕上鏈接了可以對業(yè)務標準、管理規(guī)則進行檢查的功能，在點擊按鈕后，除去要執(zhí)行基本功能的任務（讀取、計算等）之外，還要將界面上業(yè)務處理的結果與預設的管理規(guī)則進行對比，如有違反現(xiàn)象則給出相應的處理，處理的內容包括：詢問、提示、警告、終止、通知等，如何建立“業(yè)務標準”與“管理規(guī)則”之間的關系模型是設計師的重要工作。

3 ) 兩者的關系
因為按鈕的基本功能不同，每次點擊按鈕后要處理的業(yè)務內容都不一樣，因此將管理規(guī)則關聯(lián)到按鈕上，可以對不同業(yè)務處理階段的成果進行相應的管理檢查，點擊按鈕在處理業(yè)務的同時也起到了激活管理規(guī)則的作用。
基本功能和管控功能的工作順序并非是分別進行的，而是相互有交叉的，如：
（1）在沒有管控功能的情況下，僅執(zhí)行基本功能就可以了。
（2）在有管控功能的情況下，還要區(qū)分管控功能與基本功能哪一個先執(zhí)行，如:
□要確認業(yè)務數(shù)據(jù)正確后才能保存，則先要執(zhí)行管控功能進行標準檢查，合格后再執(zhí)行保存功能（基礎功能）。
□要先得出計算結果然后在進行規(guī)則確認時，就先進行計算處理（基本功能），再啟動管理規(guī)則對計算結果檢查其正確與否（管控功能）。

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

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

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

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

2. 鎖定的概念
在按鈕控件的設計中有個重要的概念就是狀態(tài)的“鎖定”，狀態(tài)的鎖定與按鈕控件的設計有著密切的關系。所謂“鎖定”表達的是一種界面的狀態(tài)，處于“鎖定”狀態(tài)時界面上的全部控件、或是部分控件就不能操作了。按鈕控件被鎖定的原因有很多種，比如：該界面的內容已經通過了審批后就不能再編輯、或是操作的用戶沒有獲得編輯權限等。

1 ) 鎖定的目的
引入鎖定狀態(tài)的目的是什么呢？鎖定是一種對數(shù)據(jù)的保護方法，同時也是顯示管理規(guī)則生效的信號，如果系統(tǒng)沒有設計鎖定的功能，可能會發(fā)生下列的問題
□數(shù)據(jù)雖然已經通過了審批，但仍然可以修改，造成了審批無效的現(xiàn)象；
□已經過了時限約束（如財務）的數(shù)據(jù)再被修改后，造成統(tǒng)計結果不可信；
□下游組件不知道上游組件的數(shù)據(jù)處理是否完成、是否可以引用；等。
有了鎖定狀態(tài)的概念后，就可以對系統(tǒng)內容的運行按照預想的設計理念、管理規(guī)則進行精確的、有效的控制，實現(xiàn)大多數(shù)在“人-人”環(huán)境下無法實現(xiàn)的管理效果。

2 ) 鎖定的條件
這里介紹3種常見的鎖定方法作為設計參考：規(guī)則鎖定、時限鎖定和引用鎖定。界面內的處理結果一旦滿足了預先設定的鎖定條件時，系統(tǒng)就會自動地啟動鎖定機制讓界面上相關的控件（包括字段、按鈕）不能繼續(xù)操作，鎖定機制如圖3所示。
通常是利用“提交按鈕”來激活該界面上的鎖定功能，點擊了提交按鈕，就等于是聲明本組件的處理工作完成，可以進行下一步的工作了。

圖3 鎖定機制的三種類型

（1）規(guī)則鎖定 參見圖3①
在點擊了“提交”按鈕后，啟動鏈接在提交按鈕上的各類管理規(guī)則的檢查，一旦全部通過了管理規(guī)則的檢查后，就讓全界面或是界面上的部分控件進入鎖定狀態(tài)。

（2）時限鎖定 參見圖3②
按照系統(tǒng)中預先設定好的時間限制條件，一旦到了時間點就自動地啟動鎖定機制，就讓全界面或是界面上的部分控件進入鎖定狀態(tài)。

（3）引用鎖定 參見圖3③
組件內沒有設置規(guī)則鎖定和時限鎖定的功能，但是進行了如下的約定：一旦本組件內的數(shù)據(jù)被下游組件所引用，則本組件自動鎖定，處理內容同規(guī)則鎖定一樣。其中引用有兩種情況：
□一是“本組件的數(shù)據(jù)被復制”。
□二是“本組件的數(shù)據(jù)被參照”。

3 ) 鎖定的方法
鎖定界面的方法可以分為兩種，即：全部鎖定和局部鎖定。
（1）全部鎖定
即界面上全部用于編輯的控件都不能使用（與編輯無關的功能可以繼續(xù)使用，如：查詢）。也可以通過鎖定“保存按鈕”的方式達到對界面功能全鎖的目的，因為對界面上數(shù)據(jù)的任何變更，如果最后不經過保存就不能生效。

（2）局部鎖定
僅對部分控件進行鎖定，其余控件還可以繼續(xù)使用，比如：僅對界面上含有關鍵數(shù)據(jù)的字段鎖定（如：金額等），而不對含有諸如地址、電話類輔助數(shù)據(jù)的字段進行鎖定。

4 ) 鎖定與解鎖的狀態(tài)
鎖定后的控件表達形態(tài)通常有以下兩種，參見圖4.

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

（1）不使能
按鈕控件：通常將處于被鎖定狀態(tài)的控件顏色用灰色表示，按鈕控件處于可使用的狀態(tài)時稱之為“使能”，處于不能使用的狀態(tài)時稱之為“不使能”，在使能狀態(tài)時將鼠標置于控件上會呈現(xiàn)出“手形”，可以點擊。而處于不使能狀態(tài)時則呈現(xiàn)為“箭頭”，此時控件被點擊也不反應。

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

二、 新增按鈕

1. 功能作用
點擊新增按鈕是一個界面開始記錄新數(shù)據(jù)的第一個操作，其作用是在界面為記錄下一條新的數(shù)據(jù)而作的準備工作，包括：清空界面數(shù)據(jù)、導入上游數(shù)據(jù)、獲取界面的業(yè)務編號等。按下新增按鈕是記錄一條新數(shù)據(jù)的第一步，要將操作開始前需要檢查的管理規(guī)則都要鏈接在這個按鈕上，為記錄新數(shù)據(jù)預先準備出一個全空白的、正確的初始狀態(tài)。

2. 基本功能
按下新增按鈕后，系統(tǒng)會進行如下的準備（設計不同，處理順序會有差異）
□清空界面上所有字段內的數(shù)據(jù)，呈現(xiàn)一個完全空白的界面環(huán)境。
□判斷是否有上游導入的數(shù)據(jù)，如果有，則自動導入或是彈出上游數(shù)據(jù)的選擇窗口。
□獲取本次新增數(shù)據(jù)的業(yè)務編號（只限于有自動發(fā)號功能的界面設計）。

注：業(yè)務編號的發(fā)布方式
如果業(yè)務編號是自動發(fā)布的，為了避免由于多人同時按下新增按鈕（并發(fā)）而造成業(yè)務編號的重復，業(yè)務編號是在第一次按下保存按鈕后才會取得。因此在按下新增按鈕后、到第一次按下保存按鈕之前的期間內，界面不會顯示出新增加的業(yè)務編號。

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

1 ) 狀態(tài)1：用戶的權限
判斷正在操作的用戶是否具有使用新增按鈕的權限，用戶的權限也有兩種分類：
□只讀權限：即該用戶可以閱讀數(shù)據(jù)、但沒有按下新增按鈕的權利。
□編輯權限：不但有閱讀權限、還具有編輯權限（=可以按下新增按鈕并進行新增的操作）。

2 ) 狀態(tài)2：管理規(guī)則
判斷新增時是否有上游數(shù)據(jù)可供導入？如果有，再判斷該數(shù)據(jù)是否處于可導入狀態(tài)？上游數(shù)據(jù)是否滿足管理規(guī)則，可用上游組件的“提交”狀態(tài)來表達
□如上游數(shù)據(jù)處于提交完成狀態(tài)，則可以導入；否則不可（參見“提交”按鈕說明）
□如上游數(shù)據(jù)處于未提交狀態(tài)，則可以不顯示數(shù)據(jù)的選擇框，或是彈出提示欄顯示：“xx正在編制中，不能引用”；
影響新增條件的因素有很多，需要根據(jù)具體的情況做具體的分析和設計。

三、 查詢按鈕

1. 功能作用
查詢按鈕，用于對該界面輸入的歷史數(shù)據(jù)進行查看，查詢通常是通過單個的關鍵詞、或是一組查詢條件來對數(shù)據(jù)庫所存數(shù)據(jù)的進行尋找，將對應的數(shù)據(jù)展示在界面上。
查詢功能不同于新增、保存類的功能，它不僅僅是程序員寫SQL語句的純編碼工作，它首先是一個重要的業(yè)務操作工作，因為查詢是用戶頻繁使用的功能，所以設計師要站在用戶的視角，思考如何設計才能支持用戶快速查詢的需求。

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

1 ) 精準查詢
利用每個業(yè)務功能都具有的業(yè)務編號進行查詢，比如：合同編號、材料編號、員工編號等，只要找到與待查詢編號一致的1條數(shù)據(jù)顯示出來就可以了。條形碼、二維碼等也都屬于精準查詢。
業(yè)務編號通常是數(shù)據(jù)表的“主鍵”。一般來說，已知特定的編號時就采用精準查詢方式，界面設計中左上角的輸入框就是用于輸入業(yè)務編號進行精準查詢用的。

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

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

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

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

圖6 查詢按鈕-查詢條件的設定

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

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

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

3. 管控功能
一般來說，鏈接在查詢按鈕上的管控手段基本上就是查詢權限的設定。比如當用戶點擊查詢按鈕時，判斷
1）用戶是否具有查詢權；
2）如果有，再將具有查詢權向下細分，如
□如果是公司級領導：可以查看的范圍 = 全公司數(shù)據(jù)；
□如果是部門級員工：可以查看的范圍 = 本部門數(shù)據(jù)；

■ 本系列下一篇博文：界面設計方法（2） — 6. 操作按鈕設計（修改, 保存, 提交）

關于按鈕設計的詳細說明請參見《大話軟件工程—需求分析與軟件設計》一書。

總結

以上是生活随笔為你收集整理的界面设计方法（2）— 5.功能按钮设计（新增,查询）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。