編輯導(dǎo)語(yǔ)：在上篇文章中，作者從數(shù)據(jù)分類、業(yè)務(wù)功能分類以及界面分類這三個(gè)方面，為我們?cè)敿?xì)地說(shuō)明了界面設(shè)計(jì)方法。而在本篇文章中，作者又圍繞界面中活動(dòng)功能的設(shè)計(jì)，為我們展開(kāi)了分析，看看如何夠通過(guò)功能設(shè)計(jì)，提升客戶的工作效率、為業(yè)務(wù)正確處理把好關(guān)、解決客戶的難、關(guān)、痛點(diǎn)問(wèn)題甚至為客戶帶來(lái)效益。

前文已介紹過(guò)了，業(yè)務(wù)功能分為4大類，其中“活動(dòng)功能”是界面設(shè)計(jì)中工作量最大的部分，每個(gè)活動(dòng)功能都是客戶一個(gè)/類實(shí)際工作在系統(tǒng)中的映射，客戶對(duì)包括對(duì)業(yè)務(wù)處理、管理控制方面的需求、優(yōu)化、改善等期望等大都包含在活動(dòng)功能的設(shè)計(jì)中。

因此，活動(dòng)功能設(shè)計(jì)的優(yōu)劣直接關(guān)系到整個(gè)系統(tǒng)的最終效果。

活動(dòng)功能的設(shè)計(jì)并不簡(jiǎn)單，設(shè)計(jì)結(jié)果不但要能做滿足客戶方面的業(yè)務(wù)需求、管理需求以及易操作需求等，還要滿足軟件商方面的結(jié)構(gòu)化、易確認(rèn)、易開(kāi)發(fā)、易復(fù)用等要求。

活動(dòng)功能設(shè)計(jì)：是將構(gòu)成功能的界面格式、控件定義、數(shù)據(jù)結(jié)構(gòu)、操作方法以及相關(guān)規(guī)則整合在一起的設(shè)計(jì)過(guò)程。

一、活動(dòng)功能的概念

• 活動(dòng)：指的是客戶的實(shí)際工作、行為（注：業(yè)務(wù)流程上的節(jié)點(diǎn)必須是活動(dòng)）；
• 活動(dòng)功能：除用于維護(hù)企業(yè)基礎(chǔ)數(shù)據(jù)的“字典功能”外，凡用于輸入過(guò)程數(shù)據(jù)的功能都屬于活動(dòng)功能，對(duì)活動(dòng)功能有以下的特點(diǎn)（以下簡(jiǎn)稱為：活動(dòng)）。

1. 粒度

對(duì)一個(gè)活動(dòng)大小的劃分參考原則是，這個(gè)活動(dòng)可以：

• 完成一個(gè)獨(dú)立的、明確的業(yè)務(wù)目標(biāo)；
• 劃分的大小有利于用戶的崗位分工安排；
• 在滿足用戶業(yè)務(wù)需求的同時(shí)，也符合系統(tǒng)設(shè)計(jì)規(guī)則、運(yùn)行效率等方面的要求等。

一個(gè)活動(dòng)的內(nèi)容多少是由客戶的工作習(xí)慣與系統(tǒng)處理效率之間的平衡關(guān)系決定的，最終的決定需要與用戶進(jìn)行商量決定。

2. 功能

活動(dòng)具有的處理功能主要由兩個(gè)部分構(gòu)成：業(yè)務(wù)處理功能和管理處理功能。

• 業(yè)務(wù)處理：指對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行輸入、計(jì)算、查看、展示等的功能；
• 管理處理：指對(duì)業(yè)務(wù)處理過(guò)程中加載的管理規(guī)則，這些規(guī)則可以保證數(shù)據(jù)合乎標(biāo)準(zhǔn)。

3. 作用

• 對(duì)數(shù)據(jù)的輸入，以及包括增加、刪除、改變、查詢等的操作功能；
• 客戶業(yè)務(wù)優(yōu)化的重要對(duì)象之一（另一個(gè)是流程優(yōu)化），良好的設(shè)計(jì)結(jié)果可以帶來(lái)用戶工作效率的提升，同時(shí)活動(dòng)也是設(shè)置管理規(guī)則的主要載體，用戶與設(shè)計(jì)師的想法大多數(shù)都要落實(shí)在活動(dòng)的界面上。

作為窗口式的界面形式，完成一個(gè)活動(dòng)需要兩個(gè)部分的設(shè)計(jì)：業(yè)務(wù)設(shè)計(jì)、應(yīng)用設(shè)計(jì)，下面分別說(shuō)明這兩種設(shè)計(jì)的內(nèi)容。

二、業(yè)務(wù)設(shè)計(jì)

業(yè)務(wù)設(shè)計(jì)是從客戶業(yè)務(wù)處理的視角進(jìn)行的設(shè)計(jì)，這個(gè)設(shè)計(jì)的重點(diǎn)在如何將現(xiàn)實(shí)的工作反映到界面上來(lái)，這是活動(dòng)設(shè)計(jì)的核心工作。這個(gè)部分設(shè)計(jì)又可以分為兩個(gè)層面進(jìn)行，一是對(duì)業(yè)務(wù)處理層面的設(shè)計(jì)、二是管理層面的設(shè)計(jì)。

關(guān)鍵點(diǎn)：此時(shí)不要考慮界面的實(shí)現(xiàn)方法。

1. 業(yè)務(wù)處理層面的設(shè)計(jì)

業(yè)務(wù)層面的設(shè)計(jì)，參考包括客戶原始的實(shí)體表單格式（或全新設(shè)計(jì)），進(jìn)行如下工作：

• 業(yè)務(wù)處理目標(biāo)的確定、業(yè)務(wù)內(nèi)容的規(guī)劃；
• 界面選型（卡片式、主細(xì)表式、樹(shù)形表式等）、字段的布局等；
• 確定數(shù)據(jù)定義、數(shù)據(jù)標(biāo)準(zhǔn)、數(shù)據(jù)來(lái)源、數(shù)據(jù)算式等。

2. 管理層面的設(shè)計(jì)

為了保證正確地輸入數(shù)據(jù)，需要對(duì)數(shù)據(jù)輸入過(guò)程加載相關(guān)的規(guī)則進(jìn)行監(jiān)控，這些規(guī)則來(lái)自于企業(yè)的管理規(guī)章制度、財(cái)務(wù)規(guī)則、生產(chǎn)的工藝工法要求等（注：數(shù)據(jù)庫(kù)規(guī)則不算管理要求）。

只有加入了這些管理規(guī)則，這個(gè)系統(tǒng)才能稱之為：管理系統(tǒng)。

3. 業(yè)務(wù)設(shè)計(jì)，必須站在用戶視角進(jìn)行

對(duì)活動(dòng)的業(yè)務(wù)設(shè)計(jì)要點(diǎn)就是要從“業(yè)務(wù)”視角看界面，因?yàn)橛脩魧?duì)系統(tǒng)的認(rèn)知主要來(lái)自于界面，而界面的核心內(nèi)容是業(yè)務(wù)數(shù)據(jù)。

因此，界面設(shè)計(jì)的優(yōu)劣就直接體現(xiàn)了設(shè)計(jì)師對(duì)用戶工作的理解，設(shè)計(jì)師要把這個(gè)界面當(dāng)做與用戶進(jìn)行對(duì)話的“窗口”，設(shè)計(jì)時(shí)要不斷地與“窗口后的角色”進(jìn)行對(duì)話，如圖1所示。

圖1 業(yè)務(wù)設(shè)計(jì)與用戶的關(guān)系

1）對(duì)話用戶（參見(jiàn)圖1-①本功能用戶）

• 用戶要用功能2完成什么業(yè)務(wù)內(nèi)容？
• 用戶要向他的領(lǐng)導(dǎo)②提供什么信息？
• 本功能2與上游功能1、下游功能3之間的數(shù)據(jù)是什么關(guān)系？
• 用戶①、與上游用戶③和下游用戶④之間的制約關(guān)系（數(shù)據(jù)層面、管理層面）？等。

圖2 業(yè)務(wù)設(shè)計(jì)的主要內(nèi)容

2）對(duì)話領(lǐng)導(dǎo)(參見(jiàn)圖1-②用戶的領(lǐng)導(dǎo))

• 功能2的工作標(biāo)準(zhǔn)什么？已有的業(yè)務(wù)數(shù)據(jù)是否滿足要求？
• 為確保①用戶的數(shù)據(jù)輸入正確，需要什么樣的管理規(guī)則來(lái)做保證措施？等。

圖3 管理設(shè)計(jì)的主要內(nèi)容

4. “功能”與“任務(wù)”的區(qū)別

可以從圖2和圖3中看出，業(yè)務(wù)設(shè)計(jì)與管理設(shè)計(jì)關(guān)注的重點(diǎn)完全不同。

對(duì)一個(gè)活動(dòng)，是僅僅把它當(dāng)用于“輸入數(shù)據(jù)的界面功能”？還是將其看成為“要完成的工作任務(wù)” ？這就看設(shè)計(jì)師具有什么樣的設(shè)計(jì)理念了，如果是前者，那么關(guān)注點(diǎn)放在字段的數(shù)量、定義就可以了。

如果是后者，則在關(guān)注字段數(shù)量、定義的同時(shí)，還要關(guān)注是否對(duì)業(yè)務(wù)進(jìn)行了優(yōu)化？工作效率有無(wú)提升？管理規(guī)則上有無(wú)漏洞？等，這些都沒(méi)有問(wèn)題時(shí)，才能確定字段和定義是否滿足要求。

三、應(yīng)用設(shè)計(jì)

完成了前面的業(yè)務(wù)設(shè)計(jì)內(nèi)容，應(yīng)用設(shè)計(jì)的重點(diǎn)就不在業(yè)務(wù)內(nèi)容了（參見(jiàn)圖4的核心部分“業(yè)務(wù)處理區(qū)域”），而是要考慮如何構(gòu)建一個(gè)“人-機(jī)-人”的工作環(huán)境，讓用戶工作得舒服、操作容易、處理效率高、智能化。

應(yīng)用設(shè)計(jì)相當(dāng)于為前述的業(yè)務(wù)設(shè)計(jì)成果外包上一層“可操作的功能”，用戶是通過(guò)這些功能來(lái)完成對(duì)業(yè)務(wù)數(shù)據(jù)的查看、輸入、控制等操作工作。

應(yīng)用設(shè)計(jì)包括了菜單欄、工具欄、滾動(dòng)條、按鈕（增刪改查等）、上傳/下載、其他鏈接等。

圖4 界面的應(yīng)用設(shè)計(jì)內(nèi)容

可以看出，業(yè)務(wù)設(shè)計(jì)的重點(diǎn)（圖2、3）與應(yīng)用設(shè)計(jì)的重點(diǎn)（圖4）的內(nèi)容完全不同。

應(yīng)用設(shè)計(jì)的重點(diǎn)是從“應(yīng)用”視角對(duì)“功能”進(jìn)行設(shè)計(jì)，也就是將業(yè)務(wù)設(shè)計(jì)的功能內(nèi)容轉(zhuǎn)換成為用系統(tǒng)的構(gòu)件進(jìn)行表達(dá)，可以說(shuō)系統(tǒng)的客戶價(jià)值大小，用戶是通過(guò)應(yīng)用設(shè)計(jì)成果感受到的，因此應(yīng)用設(shè)計(jì)的結(jié)果優(yōu)劣直接關(guān)系到客戶的滿意度。

• 注1：UI設(shè)計(jì)、美工設(shè)計(jì)等，都是應(yīng)用設(shè)計(jì)中的一部分；
• 注2：在實(shí)際進(jìn)行軟件設(shè)計(jì)時(shí)，業(yè)務(wù)設(shè)計(jì)和應(yīng)用設(shè)計(jì)的內(nèi)容可以“合二為一”一氣呵成地完成，但是在學(xué)習(xí)界面設(shè)計(jì)方法時(shí)，這兩個(gè)部分應(yīng)該分開(kāi)理解、掌握。

四、設(shè)計(jì)結(jié)果驗(yàn)證

對(duì)上述的設(shè)計(jì)結(jié)果必須要進(jìn)行驗(yàn)證，驗(yàn)證方法有兩個(gè)：業(yè)務(wù)驗(yàn)證和應(yīng)用驗(yàn)證。

圖5 驗(yàn)證的用例

1. 業(yè)務(wù)驗(yàn)證 – 編寫業(yè)務(wù)用例

業(yè)務(wù)用例，是利用業(yè)務(wù)數(shù)據(jù)編寫出一個(gè)相當(dāng)于數(shù)據(jù)的故事腳本，這個(gè)用例中使用的數(shù)據(jù)可以將全部需要驗(yàn)證的活動(dòng)功能關(guān)聯(lián)在一起，然后按照實(shí)際運(yùn)行的流程進(jìn)行推演，如圖6所示，業(yè)務(wù)用例中的數(shù)據(jù)要從“合同”流向“交付”（業(yè)務(wù)流程），同時(shí)還要包括相應(yīng)的管理規(guī)則（審批流程）。

2. 應(yīng)用驗(yàn)證 – 編寫應(yīng)用用例

應(yīng)用用例，是在業(yè)務(wù)驗(yàn)證的基礎(chǔ)上，對(duì)操作的過(guò)程進(jìn)行檢驗(yàn)，包括：按照流程和角色進(jìn)行多人協(xié)同，操作過(guò)程是否易用、輸入是否智能化、處理是否會(huì)有死循環(huán)、系統(tǒng)通知、警告、終止等如何發(fā)起生效等。

注3：這里談到的業(yè)務(wù)用例和應(yīng)用用例，與開(kāi)發(fā)完成后檢驗(yàn)時(shí)使用的測(cè)試用例不同。

• 業(yè)務(wù)/應(yīng)用用例：是以用戶的實(shí)際業(yè)務(wù)處理流程為依據(jù)設(shè)計(jì)，不但有業(yè)務(wù)數(shù)據(jù)、管理規(guī)則的檢查，還要有多功能之間的推送、流轉(zhuǎn)是否順暢的檢查。關(guān)注點(diǎn)不是“編碼bug”的有無(wú)；
• 測(cè)試用例：重點(diǎn)檢查功能是否正確、有無(wú)編碼bug等。不是從“業(yè)務(wù)、管理、操作性”方面的測(cè)試。

五、記錄模板

掌握了設(shè)計(jì)的方法后，最后要說(shuō)明一下記錄方法，對(duì)界面設(shè)計(jì)結(jié)果的記錄形式非常重要，傳統(tǒng)上采用長(zhǎng)篇文字進(jìn)行描述的記錄形式比較多。

我提倡采用結(jié)構(gòu)化、標(biāo)準(zhǔn)化的記錄形式，也就是用工程化的記錄形式（如同制造業(yè)、建筑業(yè)的設(shè)計(jì)相似），這種形式客戶容易理解、確認(rèn)，程序員容易理解、開(kāi)發(fā)。

下面推薦用一組模板記錄設(shè)計(jì)內(nèi)容的形式，由于模板4個(gè)為一組，因此也稱之為“設(shè)計(jì)4件套”，4個(gè)模板分別記錄了如下內(nèi)容：

• 模板1—界面原型：給出界面業(yè)務(wù)內(nèi)容的布局、字段的位置；
• 模板2—控件定義：用表格方式記錄所有字段的名稱、字段內(nèi)容、相關(guān)規(guī)則等；
• 模板3—規(guī)則說(shuō)明：用文章體的方式對(duì)該原型內(nèi)的復(fù)雜規(guī)則進(jìn)行詳細(xì)的說(shuō)明；
• 模板4—邏輯圖形：用圖形方式表達(dá)該功能內(nèi)用文字難以說(shuō)明的復(fù)雜邏輯關(guān)系。

圖6 設(shè)計(jì)結(jié)果的記錄模板（設(shè)計(jì)4件套）

順便說(shuō)一句，利用這種方式記錄非常容易開(kāi)發(fā)出一套軟件設(shè)計(jì)輔助記錄系統(tǒng)，這也是結(jié)構(gòu)化記錄格式帶來(lái)的優(yōu)勢(shì)。

六、小結(jié)

可能不少人都有這樣的想法：活動(dòng)功能用的界面設(shè)計(jì)最為常見(jiàn)，沒(méi)有什么難的地方、也沒(méi)有什么技術(shù)含量，只不過(guò)是把客戶需要的字段排列出來(lái)就可以了，從“技術(shù)實(shí)現(xiàn)”的視角看可能的確如此。

但是如果從“客戶價(jià)值”的視角看就不同了，這里要考驗(yàn)設(shè)計(jì)師的是：是否能夠通過(guò)功能設(shè)計(jì)，提升客戶的工作效率？為業(yè)務(wù)正確處理把好關(guān)？能否解決客戶的難、關(guān)、痛點(diǎn)問(wèn)題？甚至為客戶帶來(lái)效益？這才是活動(dòng)功能設(shè)計(jì)的真正意義所在！

本系列的下一篇：界面設(shè)計(jì)方法（3）：字典功能的設(shè)計(jì)

相關(guān)閱讀：《界面設(shè)計(jì)方法（1）：界面的概念與分類》

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

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