起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識界面設計方法（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. 管控功能
一般來說，鏈接在查詢按鈕上的管控手段基本上就是查詢權限的設定。比如當用戶點擊查詢按鈕時，判斷用戶是否具有查詢權；如果有，再將具有查詢權向下細分，如：
- 如果是公司級領導：可以查看的范圍 = 全公司數據；
- 如果是部門級員工：可以查看的范圍 = 本部門數據。
本文由 @李鴻君 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
