楠木軒

界面設計方法(2):活動功能的設計

由 司馬盼香 發佈於 科技

編輯導語:在上篇文章中,作者從數據分類、業務功能分類以及界面分類這三個方面,為我們詳細地説明了界面設計方法。而在本篇文章中,作者又圍繞界面中活動功能的設計,為我們展開了分析,看看如何夠通過功能設計,提升客户的工作效率、為業務正確處理把好關、解決客户的難、關、痛點問題甚至為客户帶來效益。

前文已介紹過了,業務功能分為4大類,其中“活動功能”是界面設計中工作量最大的部分,每個活動功能都是客户一個/類實際工作在系統中的映射,客户對包括對業務處理、管理控制方面的需求、優化、改善等期望等大都包含在活動功能的設計中。

因此,活動功能設計的優劣直接關係到整個系統的最終效果。

活動功能的設計並不簡單,設計結果不但要能做滿足客户方面的業務需求、管理需求以及易操作需求等,還要滿足軟件商方面的結構化、易確認、易開發、易複用等要求。

活動功能設計:是將構成功能的界面格式、控件定義、數據結構、操作方法以及相關規則整合在一起的設計過程。

一、活動功能的概念
  • 活動:指的是客户的實際工作、行為(注:業務流程上的節點必須是活動);
  • 活動功能:除用於維護企業基礎數據的“字典功能”外,凡用於輸入過程數據的功能都屬於活動功能,對活動功能有以下的特點(以下簡稱為:活動)。
1. 粒度

對一個活動大小的劃分參考原則是,這個活動可以:

  • 完成一個獨立的、明確的業務目標;
  • 劃分的大小有利於用户的崗位分工安排;
  • 在滿足用户業務需求的同時,也符合系統設計規則、運行效率等方面的要求等。

一個活動的內容多少是由客户的工作習慣與系統處理效率之間的平衡關係決定的,最終的決定需要與用户進行商量決定。

2. 功能

活動具有的處理功能主要由兩個部分構成:業務處理功能和管理處理功能。

  • 業務處理:指對業務數據進行輸入、計算、查看、展示等的功能;
  • 管理處理:指對業務處理過程中加載的管理規則,這些規則可以保證數據合乎標準。
3. 作用
  • 對數據的輸入,以及包括增加、刪除、改變、查詢等的操作功能;
  • 客户業務優化的重要對象之一(另一個是流程優化),良好的設計結果可以帶來用户工作效率的提升,同時活動也是設置管理規則的主要載體,用户與設計師的想法大多數都要落實在活動的界面上。

作為窗口式的界面形式,完成一個活動需要兩個部分的設計:業務設計、應用設計,下面分別説明這兩種設計的內容。

二、業務設計

業務設計是從客户業務處理的視角進行的設計,這個設計的重點在如何將現實的工作反映到界面上來,這是活動設計的核心工作。這個部分設計又可以分為兩個層面進行,一是對業務處理層面的設計、二是管理層面的設計。

關鍵點:此時不要考慮界面的實現方法。

1. 業務處理層面的設計

業務層面的設計,參考包括客户原始的實體表單格式(或全新設計),進行如下工作:

  • 業務處理目標的確定、業務內容的規劃;
  • 界面選型(卡片式、主細表式、樹形表式等)、字段的佈局等;
  • 確定數據定義、數據標準、數據來源、數據算式等。
2. 管理層面的設計

為了保證正確地輸入數據,需要對數據輸入過程加載相關的規則進行監控,這些規則來自於企業的管理規章制度、財務規則、生產的工藝工法要求等(注:數據庫規則不算管理要求)。

只有加入了這些管理規則,這個系統才能稱之為:管理系統。

3. 業務設計,必須站在用户視角進行

對活動的業務設計要點就是要從“業務”視角看界面,因為用户對系統的認知主要來自於界面,而界面的核心內容是業務數據。

因此,界面設計的優劣就直接體現了設計師對用户工作的理解,設計師要把這個界面當做與用户進行對話的“窗口”,設計時要不斷地與“窗口後的角色”進行對話,如圖1所示。

圖1 業務設計與用户的關係

1)對話用户(參見圖1-①本功能用户)

  • 用户要用功能2完成什麼業務內容?
  • 用户要向他的領導②提供什麼信息?
  • 本功能2與上游功能1、下游功能3之間的數據是什麼關係?
  • 用户①、與上游用户③和下游用户④之間的制約關係(數據層面、管理層面)?等。

圖2 業務設計的主要內容

2)對話領導(參見圖1-②用户的領導)

  • 功能2的工作標準什麼?已有的業務數據是否滿足要求?
  • 為確保①用户的數據輸入正確,需要什麼樣的管理規則來做保證措施?等。

圖3 管理設計的主要內容

4. “功能”與“任務”的區別

可以從圖2和圖3中看出,業務設計與管理設計關注的重點完全不同。

對一個活動,是僅僅把它當用於“輸入數據的界面功能”?還是將其看成為“要完成的工作任務” ?這就看設計師具有什麼樣的設計理念了,如果是前者,那麼關注點放在字段的數量、定義就可以了。

如果是後者,則在關注字段數量、定義的同時,還要關注是否對業務進行了優化?工作效率有無提升?管理規則上有無漏洞?等,這些都沒有問題時,才能確定字段和定義是否滿足要求。

三、應用設計

完成了前面的業務設計內容,應用設計的重點就不在業務內容了(參見圖4的核心部分“業務處理區域”),而是要考慮如何構建一個“人-機-人”的工作環境,讓用户工作得舒服、操作容易、處理效率高、智能化。

應用設計相當於為前述的業務設計成果外包上一層“可操作的功能”,用户是通過這些功能來完成對業務數據的查看、輸入、控制等操作工作。

應用設計包括了菜單欄、工具欄、滾動條、按鈕(增刪改查等)、上傳/下載、其他鏈接等。

圖4 界面的應用設計內容

可以看出,業務設計的重點(圖2、3)與應用設計的重點(圖4)的內容完全不同。

應用設計的重點是從“應用”視角對“功能”進行設計,也就是將業務設計的功能內容轉換成為用系統的構件進行表達,可以説系統的客户價值大小,用户是通過應用設計成果感受到的,因此應用設計的結果優劣直接關係到客户的滿意度。

  • 注1:UI設計、美工設計等,都是應用設計中的一部分;
  • 注2:在實際進行軟件設計時,業務設計和應用設計的內容可以“合二為一”一氣呵成地完成,但是在學習界面設計方法時,這兩個部分應該分開理解、掌握。
四、設計結果驗證

對上述的設計結果必須要進行驗證,驗證方法有兩個:業務驗證和應用驗證。

圖5 驗證的用例

1. 業務驗證 – 編寫業務用例

業務用例,是利用業務數據編寫出一個相當於數據的故事腳本,這個用例中使用的數據可以將全部需要驗證的活動功能關聯在一起,然後按照實際運行的流程進行推演,如圖6所示,業務用例中的數據要從“合同”流向“交付”(業務流程),同時還要包括相應的管理規則(審批流程)。

2. 應用驗證 – 編寫應用用例

應用用例,是在業務驗證的基礎上,對操作的過程進行檢驗,包括:按照流程和角色進行多人協同,操作過程是否易用、輸入是否智能化、處理是否會有死循環、系統通知、警告、終止等如何發起生效等。

注3:這裏談到的業務用例和應用用例,與開發完成後檢驗時使用的測試用例不同。

  • 業務/應用用例:是以用户的實際業務處理流程為依據設計,不但有業務數據、管理規則的檢查,還要有多功能之間的推送、流轉是否順暢的檢查。關注點不是“編碼bug”的有無;
  • 測試用例:重點檢查功能是否正確、有無編碼bug等。不是從“業務、管理、操作性”方面的測試。
五、記錄模板

掌握了設計的方法後,最後要説明一下記錄方法,對界面設計結果的記錄形式非常重要,傳統上採用長篇文字進行描述的記錄形式比較多。

我提倡採用結構化、標準化的記錄形式,也就是用工程化的記錄形式(如同製造業、建築業的設計相似),這種形式客户容易理解、確認,程序員容易理解、開發。

下面推薦用一組模板記錄設計內容的形式,由於模板4個為一組,因此也稱之為“設計4件套”,4個模板分別記錄瞭如下內容:

  • 模板1—界面原型:給出界面業務內容的佈局、字段的位置;
  • 模板2—控件定義:用表格方式記錄所有字段的名稱、字段內容、相關規則等;
  • 模板3—規則説明:用文章體的方式對該原型內的複雜規則進行詳細的説明;
  • 模板4—邏輯圖形:用圖形方式表達該功能內用文字難以説明的複雜邏輯關係。

圖6 設計結果的記錄模板(設計4件套)

順便説一句,利用這種方式記錄非常容易開發出一套軟件設計輔助記錄系統,這也是結構化記錄格式帶來的優勢。

六、小結

可能不少人都有這樣的想法:活動功能用的界面設計最為常見,沒有什麼難的地方、也沒有什麼技術含量,只不過是把客户需要的字段排列出來就可以了,從“技術實現”的視角看可能的確如此。

但是如果從“客户價值”的視角看就不同了,這裏要考驗設計師的是:是否能夠通過功能設計,提升客户的工作效率?為業務正確處理把好關?能否解決客户的難、關、痛點問題?甚至為客户帶來效益?這才是活動功能設計的真正意義所在!

本系列的下一篇:界面設計方法(3):字典功能的設計

相關閲讀:《界面設計方法(1):界面的概念與分類》

本文由 @李鴻君 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議