国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

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

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

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

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

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

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

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

一、組件的概念

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

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

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

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

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

圖2 組件概念的示意圖

1 ) 本組件 – 主窗體①

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

2 ) 本組件 – 子窗體②③

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

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

3 ) 公用組件④

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

4 ) 上、下游組件⑤⑥

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

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

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

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

1 ) 窗體

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

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

圖3 窗體與窗口的示意圖

2 ) 窗口

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

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

3 ) 界面

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

用窗口框圍起來(lái)的中間部分稱之為界面，界面上布置有各類的控件，包括：菜單、導(dǎo)航欄、工具條、滾動(dòng)條、按鈕控件、字段控件等?？梢钥闯?，所有設(shè)計(jì)的成果最終都要集中到界面的上，界面上布置內(nèi)容的多少、布局的合理性等都直接地影響著用戶的滿意度，因?yàn)橛脩糁荒軓慕缑嫔喜贾玫囊貋?lái)體驗(yàn)“人-機(jī)-人”環(huán)境設(shè)計(jì)的優(yōu)劣。

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

4 ) 控件

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

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

• 用于其它作用的操控控件，如：門(mén)戶上的菜單樹(shù)、導(dǎo)航欄、滾動(dòng)條等。
• 用于數(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ù)功能”上包裝了一個(gè)具有操作功能和接口的 “業(yè)務(wù)組件”外殼。

1個(gè)業(yè)務(wù)功能對(duì)應(yīng)1個(gè)組件，業(yè)務(wù)功能具有的能力最終是需要由業(yè)務(wù)組件來(lái)落實(shí)的。業(yè)務(wù)功能與業(yè)務(wù)組件對(duì)比有如下特點(diǎn)

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

二、組件的接口模型

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

圖5 組件的接口示意圖

1. 接口的分類

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

• 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ù)庫(kù)選取數(shù)據(jù)；
• 輸出：向下游推送數(shù)據(jù)，包括向下游組件或向公用數(shù)據(jù)庫(kù)的推送；

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

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

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

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

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

圖6 組件接口模型示意圖

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

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

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

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

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

小結(jié)：

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

擴(kuò)展說(shuō)明：

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

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

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

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