編輯導(dǎo)讀：界面作為系統(tǒng)的門面，它的設(shè)計直接影響到用戶的體驗。一個完整的界面設(shè)計需要有兩個層面：業(yè)務(wù)功能、應(yīng)用功能。本文作者從應(yīng)用功能的層面，說明軟件界面的構(gòu)成，包括概念、作用以及設(shè)計方法，希望對你有幫助。

一個完整的界面設(shè)計需要有兩個層面：業(yè)務(wù)功能、應(yīng)用功能。系列“面設(shè)計方法（一）”已經(jīng)從業(yè)務(wù)功能（活動、字典、看板和表單）層面介紹了4種功能的設(shè)計方法，它們的重點是如何完成不同類型的業(yè)務(wù)處理設(shè)計。

本系列“界面設(shè)計方法（二）”，從應(yīng)用功能層面說明軟件界面的構(gòu)成，包括概念、作用以及設(shè)計方法。“業(yè)務(wù)功能”相當(dāng)于功能的邏輯中核，提供了字段、數(shù)據(jù)源、計算邏輯、規(guī)則等；“應(yīng)用功能”相當(dāng)于功能的可外殼（面板），提供了可以操作菜單、工具條、按鈕、字段框等。前者偏業(yè)務(wù)、后者偏系統(tǒng)，兩者的結(jié)合構(gòu)成了一個可運行的業(yè)務(wù)功能。

再回顧一下從需求～設(shè)計各階段的工作目的和內(nèi)容，如圖1所示。

圖1 各階段的界面設(shè)計成果示意

1）需求調(diào)研階段，圖1（a、b）

將收集到的原始客戶需求（a）通過梳理、歸類、分析和確認(rèn)工作，完成了功能需求一覽（b），這個一覽的內(nèi)容就是系統(tǒng)要實現(xiàn)的功能對象，一覽資料中就包括了“業(yè)務(wù)原型”，這個業(yè)務(wù)原型可能是用戶提供的一張參考用實體表單（紙質(zhì)版、或電子表格版），它是后續(xù)設(shè)計、開發(fā)界面的依據(jù)。

2）業(yè)務(wù)設(shè)計階段，圖1（c）

針對功能需求的內(nèi)容，業(yè)務(wù)處理的目的、業(yè)務(wù)處理的規(guī)律等，將業(yè)務(wù)功能進行歸集、抽提，劃分出了4種業(yè)務(wù)功能（活動、字典、看板和表單），這一步從設(shè)計角度上將無限多的功能需求種類歸集到了有限的4種，這為業(yè)務(wù)功能的建模提供了依據(jù)，同時也為找到界面設(shè)計規(guī)律提供了幫助，提升了設(shè)計工作的效率、設(shè)計成果的復(fù)用性，減少了設(shè)計難度。

3）應(yīng)用設(shè)計階段，圖1（d）

最后一個階段，再從軟件實現(xiàn)的視角，將前述的4個業(yè)務(wù)功能進一步拆分、歸集，形成了所示的內(nèi)容（控件），此時這些界面用的控件已經(jīng)與業(yè)務(wù)沒有直接關(guān)系了。

可以得出如下的規(guī)律：不論設(shè)計什么業(yè)務(wù)功能，也不論它們采用了何種界面形式，界面都是由下述控件構(gòu)成的：工具欄、滾動條、按鈕（新增、查詢、保存……）、字段框（文本、下來、選擇……）等。因為這些控件中不含有業(yè)務(wù)含義，所以它們就具有了更加廣泛的通用性。

“界面設(shè)計方法（2）”系列博文將重點介紹界面的應(yīng)用設(shè)計部分，圖1（d）。完成了從a、b、c、d的工作，就完成了一個業(yè)務(wù)功能的界面設(shè)計全過程。

一、組件的概念

實際上一個業(yè)務(wù)功能并不是僅對應(yīng)一個界面，而是用一組界面完成的，這一組界面的集合體稱之為“組件”，在介紹界面的設(shè)計前先要引入“組件”的概念。

定義：業(yè)務(wù)組件，是由控件構(gòu)成的可以獨立地執(zhí)行一個業(yè)務(wù)功能的系統(tǒng)模塊。（對應(yīng)業(yè)務(wù)功能的組件，稱之為：業(yè)務(wù)組件，或簡稱為：組件）

1個業(yè)務(wù)組件對應(yīng)1個業(yè)務(wù)功能（活動、字典、看板、表單）。界面，是組件的重要構(gòu)成部分，下面對組件的構(gòu)成進行詳細(xì)的介紹。

1. 組件的構(gòu)成

組件是由一組“窗體”構(gòu)成的，下面以圖2中的“本組件”為主體，說明組件和窗體之間的關(guān)系：

圖2 組件概念的示意圖

1 ) 本組件 – 主窗體①

原則上當(dāng)1個組件內(nèi)有幾個窗體時，其中只有1個是主窗體。主窗體顯示的是該組件的主要信息，是一個獨立組件的“臉面”，原則上打開這個組件時第一個彈出來的窗體應(yīng)該是主窗體，通常將組件的業(yè)務(wù)編號、各類操作按鈕等都置于主窗體上。

2 ) 本組件 – 子窗體②③

一個主窗體可以有多個子窗體，根據(jù)作用的不同子窗體還可以再分為兩類。

• 查詢用子窗體②：用于查詢通過這個主窗體輸入的歷史數(shù)據(jù)。
• 輔助用子窗體③：用于顯示主窗體的下級數(shù)據(jù)、或是分擔(dān)主窗體的數(shù)據(jù)處理工作等。

3 ) 公用組件④

本組件內(nèi)部的處理常常會需要一些外部組件的信息作為參考，比如：編制合同時可能需要參考預(yù)算的內(nèi)容，則可以通過連接外部的預(yù)算組件；編制預(yù)算時可能需要參考企業(yè)的規(guī)章制度，則此時可以連接企業(yè)知識庫組件等，這些外部組件只用來做參考所以稱之為公用組件。

4 ) 上、下游組件⑤⑥

另外，與本組件有數(shù)據(jù)關(guān)聯(lián)的外部組件之間在位置關(guān)系上做如下定義：

• 上游組件⑤：向本組件輸入數(shù)據(jù)的組件稱之為上游組件，上游組件所包含的數(shù)據(jù)、格式、規(guī)則等會影響到本組件；
• 下游組件⑥：接受本組件輸出數(shù)據(jù)的組件稱之為下游組件，本組件的數(shù)據(jù)、規(guī)格、規(guī)則等會影響到下游組件；

2. 窗體的構(gòu)成

理解了組件的概念和構(gòu)成后，打開組件，進入到組件的內(nèi)部介紹“窗體”的概念。

1 ) 窗體

窗體：主要由下述4類要素構(gòu)成：窗口、界面、控件、接口。

如何理解窗體的概念呢？下面用一個儀器箱做個比喻，參見圖3（a），窗體就如同安置在這個儀器箱前面的“儀表盤”，用戶通過操作儀表盤上的控件發(fā)出指令，指令經(jīng)過箱子中的邏輯層處理然后將要求傳遞到后面的數(shù)據(jù)層，數(shù)據(jù)層在按照邏輯層的要求將相應(yīng)的數(shù)據(jù)提出來經(jīng)過邏輯處理后再呈現(xiàn)到前面的“儀表盤”上，這就是窗體的概念和作用。

圖3 窗體與窗口的示意圖

2 ) 窗口

窗口是電腦屏幕上的一個矩形區(qū)域（窗體的外邊框）。

關(guān)于窗體/窗口的劃分方法，應(yīng)用設(shè)計與技術(shù)設(shè)計是有所不同的，參見圖3，按照技術(shù)設(shè)計的定義在這個窗體上顯示了4個窗口（每個窗口對應(yīng)1個應(yīng)用程序），但是這種劃分對應(yīng)用設(shè)計來說沒有意義，因為應(yīng)用設(shè)計按照是1個業(yè)務(wù)組件對應(yīng)1個業(yè)務(wù)功能的單位進行設(shè)計的，分成若干個窗口后在理解業(yè)務(wù)和設(shè)計時其含義就不完整了。因此，為保持應(yīng)用設(shè)計與業(yè)務(wù)設(shè)計的一致性，將圖3的整體稱之為“1個窗體，且只有1個窗口”，這樣的約定對后續(xù)技術(shù)設(shè)計承接應(yīng)用設(shè)計的成果時不會產(chǎn)生任何影響。

3 ) 界面

窗體清楚之后，下面介紹窗體中的“界面”的概念。

用窗口框圍起來的中間部分稱之為界面，界面上布置有各類的控件，包括：菜單、導(dǎo)航欄、工具條、滾動條、按鈕控件、字段控件等?？梢钥闯觯性O(shè)計的成果最終都要集中到界面的上，界面上布置內(nèi)容的多少、布局的合理性等都直接地影響著用戶的滿意度，因為用戶只能從界面上布置的要素來體驗“人-機-人”環(huán)境設(shè)計的優(yōu)劣。

所謂的“界面設(shè)計”指的就是對窗口中這個范圍內(nèi)布置控件的設(shè)計工作。

4 ) 控件

理解了界面的概念后，最后再介紹構(gòu)成界面的最小單位“控件”。

控件是指布置在界面上的各類要素，包括：

• 用于其它作用的操控控件，如：門戶上的菜單樹、導(dǎo)航欄、滾動條等。
• 用于數(shù)據(jù)操作的按鈕控件，如：新增、刪除、保存、查詢、提交等。
• 用于數(shù)據(jù)輸入的字段控件，如：列表框、輸入框（文本、下拉、選擇…）。

窗體/窗口、界面和控件三者的關(guān)系如圖4所示。

圖4 窗體/窗口、界面和控件三者的關(guān)系示意

3. 業(yè)務(wù)組件與業(yè)務(wù)功能的異同

前面已經(jīng)介紹了業(yè)務(wù)功能和業(yè)務(wù)組件的概念，這兩者的關(guān)系就相當(dāng)于是在“業(yè)務(wù)功能”上包裝了一個具有操作功能和接口的 “業(yè)務(wù)組件”外殼。

1個業(yè)務(wù)功能對應(yīng)1個組件，業(yè)務(wù)功能具有的能力最終是需要由業(yè)務(wù)組件來落實的。業(yè)務(wù)功能與業(yè)務(wù)組件對比有如下特點

• 業(yè)務(wù)功能：是業(yè)務(wù)設(shè)計中可以獨立完成1個業(yè)務(wù)目標(biāo)的最小單元；
• 業(yè)務(wù)組件：是應(yīng)用設(shè)計中可以獨立支持1個業(yè)務(wù)功能的最小單元；

二、組件的接口模型

前面介紹了組件內(nèi)部的構(gòu)成，下面介紹組件對外部的接口。組件的接口繪制在組件主窗體外框上，下面以窗體為對象建立一個窗體模型，通過這個模型理解組件與外部的接口和信息的交流，此時關(guān)注點不在界面上，而在窗體上。如圖5所示，這是一個處理“工程預(yù)算”的業(yè)務(wù)功能。

圖5 組件的接口示意圖

1. 接口的分類

將設(shè)置在”工程預(yù)算”窗體上具有的功能按照使用目的分成三種類型，稱之為IPO，各個字母代表分別代表的含義是

• I：Input，數(shù)據(jù)的輸入
• P：Process，數(shù)據(jù)的處理
• O：Output，數(shù)據(jù)的輸出

1 ) 數(shù)據(jù)的輸入(I) / 輸出(O)

• 輸入：從上游導(dǎo)入數(shù)據(jù)，包括從上游組件選取、接受上游推送的數(shù)據(jù)、及從數(shù)據(jù)庫選取數(shù)據(jù)；
• 輸出：向下游推送數(shù)據(jù)，包括向下游組件或向公用數(shù)據(jù)庫的推送；

2 ) 數(shù)據(jù)的處理（P）

用接口的方式將各類操作界面數(shù)據(jù)的功能與窗體進行關(guān)聯(lián)，關(guān)聯(lián)后這些功能可以支持處理窗體內(nèi)部的數(shù)據(jù)，從功能的作用上可以將它們分為三個類型：

• 操作功能：這類功能包括了所有對該窗體內(nèi)數(shù)據(jù)進行操作的按鈕，比如新增、保存、提交…等，這些接口的后面可以連接各種不同的管控檢查。
• 鏈接組件：這類功能可以鏈接支持主窗體處理的公用組件、數(shù)據(jù)庫等?？梢酝ㄟ^主窗體上的業(yè)務(wù)編碼、或是其他屬性，直接將相關(guān)的數(shù)據(jù)呈現(xiàn)在本組件的界面上。
• 鏈接設(shè)備：這類功能可以連接移動設(shè)備、打印機等。

2. 接口與外部功能的關(guān)系

有了上述的“工程預(yù)算”窗口功能模型，下面將窗口上的功能通過接口與外部系統(tǒng)關(guān)聯(lián)起來形成了一個完整的窗體接口模型，參見圖6。

圖6 組件接口模型示意圖

通過這個示意模型，從應(yīng)用設(shè)計的視角上對一個組件的窗體與外部都有哪些關(guān)聯(lián)有了一個基本的認(rèn)知，有了這個模型作參考，需要哪些功能就接入相關(guān)的控件和支持?jǐn)?shù)據(jù)/規(guī)則，不需要時就可以從接口上分離。由此也可以理解了按照工程化的方法進行軟件設(shè)計的方式：先設(shè)計小零件 → 由小零件組裝成1個功能控件 → 連接到接口上，以此類推地，逐步地完成整個信息系統(tǒng)的設(shè)計。

3. 接口與外部數(shù)據(jù)的關(guān)系

下面再將“工程預(yù)算”引用的外部數(shù)據(jù)源進行關(guān)聯(lián)，參見圖7，它是一個“工程預(yù)算”窗體實際的數(shù)據(jù)規(guī)劃設(shè)計圖，可以看出這個編制預(yù)算的功能是需要連接很多的數(shù)據(jù)（包括基礎(chǔ)數(shù)據(jù)）、操作功能（控件）做支持才能完成。

圖7 組件接口規(guī)劃（預(yù)算編制）

這個示意圖就顯示了一個完整的業(yè)務(wù)處理功能，其在應(yīng)用設(shè)計時不是被做成了一個固化的整體功能模塊，而是用接口連接完成這個業(yè)務(wù)處理所需要的控件和數(shù)據(jù)，這樣的設(shè)計方式可以保證該組件在實際的運行過程中不論發(fā)生什么樣的變化，都可以通過接口的連接與分離快速地響應(yīng)需求，這就是通常所說的模塊化設(shè)計和模塊化運用的效果。

小結(jié)：

界面設(shè)計，是組件設(shè)計的核心部分，這個設(shè)計是通過在界面上表達業(yè)務(wù)功能、應(yīng)用功能，并通過這兩者的完美結(jié)合給用戶帶來信息化價值。

擴展說明：

為什么要將界面設(shè)計拆分、組合呢？因為通過將調(diào)研的功能需求進行拆分，形成4個標(biāo)準(zhǔn)業(yè)務(wù)功能，再將功能拆分為不同的控件，讓控件的組合形成窗體、窗體的組合形成組件等一系列的標(biāo)準(zhǔn)化作業(yè)，這就為采用“少代碼、無代碼”的配置開發(fā)方式奠定了基礎(chǔ)。

可以看出，這樣的工作不是一般的需求工程師可以完成的，也不是純粹的程序員可以做到的，一定是具有一定的業(yè)務(wù)知識、抽提建模能力的、同時具有技術(shù)開發(fā)背景的工程師才能完成的。

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

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