起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識界面設計方法（6）：界面與組件的概念
編輯導讀：界面作為系統的門面，它的設計直接影響到用戶的體驗。一個完整的界面設計需要有兩個層面：業務功能、應用功能。本文作者從應用功能的層面，說明軟件界面的構成，包括概念、作用以及設計方法，希望對你有幫助。
一個完整的界面設計需要有兩個層面：業務功能、應用功能。系列“面設計方法（一）”已經從業務功能（活動、字典、看板和表單）層面介紹了4種功能的設計方法，它們的重點是如何完成不同類型的業務處理設計。
本系列“界面設計方法（二）”，從應用功能層面說明軟件界面的構成，包括概念、作用以及設計方法。“業務功能”相當于功能的邏輯中核，提供了字段、數據源、計算邏輯、規則等；“應用功能”相當于功能的可外殼（面板），提供了可以操作菜單、工具條、按鈕、字段框等。前者偏業務、后者偏系統，兩者的結合構成了一個可運行的業務功能。
再回顧一下從需求～設計各階段的工作目的和內容，如圖1所示。
圖1 各階段的界面設計成果示意
1）需求調研階段，圖1（a、b）
將收集到的原始客戶需求（a）通過梳理、歸類、分析和確認工作，完成了功能需求一覽（b），這個一覽的內容就是系統要實現的功能對象，一覽資料中就包括了“業務原型”，這個業務原型可能是用戶提供的一張參考用實體表單（紙質版、或電子表格版），它是后續設計、開發界面的依據。
2）業務設計階段，圖1（c）
針對功能需求的內容，業務處理的目的、業務處理的規律等，將業務功能進行歸集、抽提，劃分出了4種業務功能（活動、字典、看板和表單），這一步從設計角度上將無限多的功能需求種類歸集到了有限的4種，這為業務功能的建模提供了依據，同時也為找到界面設計規律提供了幫助，提升了設計工作的效率、設計成果的復用性，減少了設計難度。
3）應用設計階段，圖1（d）
最后一個階段，再從軟件實現的視角，將前述的4個業務功能進一步拆分、歸集，形成了所示的內容（控件），此時這些界面用的控件已經與業務沒有直接關系了。
可以得出如下的規律：不論設計什么業務功能，也不論它們采用了何種界面形式，界面都是由下述控件構成的：工具欄、滾動條、按鈕（新增、查詢、保存……）、字段框（文本、下來、選擇……）等。因為這些控件中不含有業務含義，所以它們就具有了更加廣泛的通用性。
“界面設計方法（2）”系列博文將重點介紹界面的應用設計部分，圖1（d）。完成了從a、b、c、d的工作，就完成了一個業務功能的界面設計全過程。
一、組件的概念
實際上一個業務功能并不是僅對應一個界面，而是用一組界面完成的，這一組界面的集合體稱之為“組件”，在介紹界面的設計前先要引入“組件”的概念。
定義：業務組件，是由控件構成的可以獨立地執行一個業務功能的系統模塊。（對應業務功能的組件，稱之為：業務組件，或簡稱為：組件）
1個業務組件對應1個業務功能（活動、字典、看板、表單）。界面，是組件的重要構成部分，下面對組件的構成進行詳細的介紹。
1. 組件的構成
組件是由一組“窗體”構成的，下面以圖2中的“本組件”為主體，說明組件和窗體之間的關系：
圖2 組件概念的示意圖
1 ) 本組件 – 主窗體①
原則上當1個組件內有幾個窗體時，其中只有1個是主窗體。主窗體顯示的是該組件的主要信息，是一個獨立組件的“臉面”，原則上打開這個組件時第一個彈出來的窗體應該是主窗體，通常將組件的業務編號、各類操作按鈕等都置于主窗體上。
2 ) 本組件 – 子窗體②③
一個主窗體可以有多個子窗體，根據作用的不同子窗體還可以再分為兩類。
- 查詢用子窗體②：用于查詢通過這個主窗體輸入的歷史數據。
- 輔助用子窗體③：用于顯示主窗體的下級數據、或是分擔主窗體的數據處理工作等。
3 ) 公用組件④
本組件內部的處理常常會需要一些外部組件的信息作為參考，比如：編制合同時可能需要參考預算的內容，則可以通過連接外部的預算組件；編制預算時可能需要參考企業的規章制度，則此時可以連接企業知識庫組件等，這些外部組件只用來做參考所以稱之為公用組件。
4 ) 上、下游組件⑤⑥
另外，與本組件有數據關聯的外部組件之間在位置關系上做如下定義：
- 上游組件⑤：向本組件輸入數據的組件稱之為上游組件，上游組件所包含的數據、格式、規則等會影響到本組件；
- 下游組件⑥：接受本組件輸出數據的組件稱之為下游組件，本組件的數據、規格、規則等會影響到下游組件；
2. 窗體的構成
理解了組件的概念和構成后，打開組件，進入到組件的內部介紹“窗體”的概念。
1 ) 窗體
窗體：主要由下述4類要素構成：窗口、界面、控件、接口。
如何理解窗體的概念呢？下面用一個儀器箱做個比喻，參見圖3（a），窗體就如同安置在這個儀器箱前面的“儀表盤”，用戶通過操作儀表盤上的控件發出指令，指令經過箱子中的邏輯層處理然后將要求傳遞到后面的數據層，數據層在按照邏輯層的要求將相應的數據提出來經過邏輯處理后再呈現到前面的“儀表盤”上，這就是窗體的概念和作用。
圖3 窗體與窗口的示意圖
2 ) 窗口
窗口是電腦屏幕上的一個矩形區域（窗體的外邊框）。
關于窗體/窗口的劃分方法，應用設計與技術設計是有所不同的，參見圖3，按照技術設計的定義在這個窗體上顯示了4個窗口（每個窗口對應1個應用程序），但是這種劃分對應用設計來說沒有意義，因為應用設計按照是1個業務組件對應1個業務功能的單位進行設計的，分成若干個窗口后在理解業務和設計時其含義就不完整了。因此，為保持應用設計與業務設計的一致性，將圖3的整體稱之為“1個窗體，且只有1個窗口”，這樣的約定對后續技術設計承接應用設計的成果時不會產生任何影響。
3 ) 界面
窗體清楚之后，下面介紹窗體中的“界面”的概念。
用窗口框圍起來的中間部分稱之為界面，界面上布置有各類的控件，包括：菜單、導航欄、工具條、滾動條、按鈕控件、字段控件等?？梢钥闯?，所有設計的成果最終都要集中到界面的上，界面上布置內容的多少、布局的合理性等都直接地影響著用戶的滿意度，因為用戶只能從界面上布置的要素來體驗“人-機-人”環境設計的優劣。
所謂的“界面設計”指的就是對窗口中這個范圍內布置控件的設計工作。
4 ) 控件
理解了界面的概念后，最后再介紹構成界面的最小單位“控件”。
控件是指布置在界面上的各類要素，包括：
- 用于其它作用的操控控件，如：門戶上的菜單樹、導航欄、滾動條等。
- 用于數據操作的按鈕控件，如：新增、刪除、保存、查詢、提交等。
- 用于數據輸入的字段控件，如：列表框、輸入框（文本、下拉、選擇…）。
窗體/窗口、界面和控件三者的關系如圖4所示。
圖4 窗體/窗口、界面和控件三者的關系示意
3. 業務組件與業務功能的異同
前面已經介紹了業務功能和業務組件的概念，這兩者的關系就相當于是在“業務功能”上包裝了一個具有操作功能和接口的 “業務組件”外殼。
1個業務功能對應1個組件，業務功能具有的能力最終是需要由業務組件來落實的。業務功能與業務組件對比有如下特點
- 業務功能：是業務設計中可以獨立完成1個業務目標的最小單元；
- 業務組件：是應用設計中可以獨立支持1個業務功能的最小單元；
二、組件的接口模型
前面介紹了組件內部的構成，下面介紹組件對外部的接口。組件的接口繪制在組件主窗體外框上，下面以窗體為對象建立一個窗體模型，通過這個模型理解組件與外部的接口和信息的交流，此時關注點不在界面上，而在窗體上。如圖5所示，這是一個處理“工程預算”的業務功能。
圖5 組件的接口示意圖
1. 接口的分類
將設置在”工程預算”窗體上具有的功能按照使用目的分成三種類型，稱之為IPO，各個字母代表分別代表的含義是
- I：Input，數據的輸入
- P：Process，數據的處理
- O：Output，數據的輸出
1 ) 數據的輸入(I) / 輸出(O)
- 輸入：從上游導入數據，包括從上游組件選取、接受上游推送的數據、及從數據庫選取數據；
- 輸出：向下游推送數據，包括向下游組件或向公用數據庫的推送；
2 ) 數據的處理（P）
用接口的方式將各類操作界面數據的功能與窗體進行關聯，關聯后這些功能可以支持處理窗體內部的數據，從功能的作用上可以將它們分為三個類型：
- 操作功能：這類功能包括了所有對該窗體內數據進行操作的按鈕，比如新增、保存、提交…等，這些接口的后面可以連接各種不同的管控檢查。
- 鏈接組件：這類功能可以鏈接支持主窗體處理的公用組件、數據庫等?？梢酝ㄟ^主窗體上的業務編碼、或是其他屬性，直接將相關的數據呈現在本組件的界面上。
- 鏈接設備：這類功能可以連接移動設備、打印機等。
2. 接口與外部功能的關系
有了上述的“工程預算”窗口功能模型，下面將窗口上的功能通過接口與外部系統關聯起來形成了一個完整的窗體接口模型，參見圖6。
圖6 組件接口模型示意圖
通過這個示意模型，從應用設計的視角上對一個組件的窗體與外部都有哪些關聯有了一個基本的認知，有了這個模型作參考，需要哪些功能就接入相關的控件和支持數據/規則，不需要時就可以從接口上分離。由此也可以理解了按照工程化的方法進行軟件設計的方式：先設計小零件 → 由小零件組裝成1個功能控件 → 連接到接口上，以此類推地，逐步地完成整個信息系統的設計。
3. 接口與外部數據的關系
下面再將“工程預算”引用的外部數據源進行關聯，參見圖7，它是一個“工程預算”窗體實際的數據規劃設計圖，可以看出這個編制預算的功能是需要連接很多的數據（包括基礎數據）、操作功能（控件）做支持才能完成。
圖7 組件接口規劃（預算編制）
這個示意圖就顯示了一個完整的業務處理功能，其在應用設計時不是被做成了一個固化的整體功能模塊，而是用接口連接完成這個業務處理所需要的控件和數據，這樣的設計方式可以保證該組件在實際的運行過程中不論發生什么樣的變化，都可以通過接口的連接與分離快速地響應需求，這就是通常所說的模塊化設計和模塊化運用的效果。
小結：
界面設計，是組件設計的核心部分，這個設計是通過在界面上表達業務功能、應用功能，并通過這兩者的完美結合給用戶帶來信息化價值。
擴展說明：
為什么要將界面設計拆分、組合呢？因為通過將調研的功能需求進行拆分，形成4個標準業務功能，再將功能拆分為不同的控件，讓控件的組合形成窗體、窗體的組合形成組件等一系列的標準化作業，這就為采用“少代碼、無代碼”的配置開發方式奠定了基礎。
可以看出，這樣的工作不是一般的需求工程師可以完成的，也不是純粹的程序員可以做到的，一定是具有一定的業務知識、抽提建模能力的、同時具有技術開發背景的工程師才能完成的。
本文由 @李鴻君 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協議
- 目前還沒評論，等你發揮！
