B端產品的資訊框架設計

引言：

B端產品都有哪些經典的介面和元件？
B端產品的工作臺該如何設計？
為什麼說好的工作臺能大幅度提升使用者體驗？
B端產品該不該做搜尋功能？
B端互動設計應該追求創新麼？
自研系統和商業化產品在人機介面設計上的區別是什麼？

土豆：“終於來到了互動設計部分！”

大可：“是不是都有點迫不及待了？”

土豆：“是啊！”

大可：“這一章，我們會把B端產品的所有頁面元件，按照功能形態歸類，逐一介紹，一次講清楚B端產品設計背後的典型頁面！”

土豆：“那會不會很多啊！”

大可：“並不算多。B端產品的核心介面，是圍繞著資料的增刪改查來設計的，順著著這個思路，就可以把經典介面分門別類梳理清楚，只要理解了這些介面設計的特點，在自己的產品設計工作中，就會遊刃有餘！”

土豆：“那讓我們快開始吧！”

01 B端產品的整體介面組成

軟體產品設計的核心架構是MVC模型，M是資料底層，C是業務邏輯，V是檢視層，介面設計，探討的就是檢視層的內容。

檢視層包括了軟體圖形介面設計（GUI，Graphic User Interface）中的頁面、元件和控制元件。

頁面：是元件與控制元件的容器，例如列表頁、報表業；

元件：實現了一定顆粒度的能力封裝，可複用的控制元件組合，例如訊息元件、公告元件；

控制元件：人機介面中的基本元素和物件，例如文字框、按鈕、單選框。

從軟體工程的角度來講，B端產品的本質，就是對資料的增刪改查操作，圍繞增刪改查，一個B端產品的經典的組成結構是類似的。圖7-1從軟體功能元件的角度，呈現了MVC架構下一款業務型B端軟體的經典構成。

圖71 一個B端產品典型的功能元件構成

模型層包括了資料物件編輯器，對於商業軟體，一般要具備動態調整自定義資料物件的能力；

業務邏輯層包括了流程編輯器以及預置的標準版業務邏輯，同樣，商業軟體需要具備靈活的業務流程定製能力，而自研系統的業務流程一般是寫死的程式碼邏輯。

除此以外標準B端軟體還要有配製管理、API介面與管理的能力。

針對這套軟體組成結構的具體講解，大家可以參考《決勝B端》，本書中，具體關注檢視層的梳理和設計。

一款典型的B端產品，在檢視層，或者叫應用層，需要具備以下經典頁面與元件。

選單導航佈局

選單編排和導航結構，是一款產品進行GUI設計時首先要考慮的問題。

首頁和工作臺

首頁和工作臺，是使用者登入系統後看到的第一個頁面，也是B端產品中最重要的頁面，設計好壞，直接決定了產品的易用性。

全域性元件

全域性元件，是現代軟體設計，經過多年實踐積累後的沉澱下來的經典元件，具體包括：日程、待辦、訊息、公告、全域性搜尋等。

資料物件處理頁面

圍繞資料的增刪改查，涉及到以下典型介面：表單頁（增資料、改資料）、列表頁（查多條資料、刪資料）、詳情頁（查單條資料）。

資料統計分析頁面

資料經過處理後，需要做各種統計分析，經典的資料統計呈現方式有二維表、彙總表、各種柱狀圖、餅圖等，這也是報表引擎和BI兩類產品關心的頁面功能。

本章將分別介紹以上頁面、元件的經典設計。

02 導航佈局設計

在產品從無到有的建設中，首先要確定導航方式和框架結構，其中有兩個基本要素很重要，第一個是關於內建多標籤頁，第二個是導航選單的排版方式。

所謂內建多標籤頁，是指在系統內部具備多標籤頁的互動形態，即開啟新的頁面和選單時，會在系統框架內部開啟一個新頁籤。如圖7-2所示，某雲ERP採用了內建多標籤頁的橫排導航方式。

圖72 內建多標籤頁的橫排導航

雖然現在的瀏覽器本身都支援瀏覽器級別的多標籤頁，但在某些場景下，例如需要並行同時處理多個工作任務的時候，系統級別的多標籤頁設計是很有必要的，比如類似於客服業務的作業場景，操作人員有可能需要在多個頁面來回切換進行操作和處理，並且由於其工作本身也容易被打斷，因此係統預設提供多標籤頁就很有必要。

導航選單的排版方式是另一個框架層面的關鍵要素。一般來講，典型的排版方式包括橫排排版、豎排排版，以及橫豎混合排版。橫排排版常見於官網、企業辦公門戶，除此之外已經很少見了，豎排排版已經成為主流選擇。如圖7-3所示的某電商商城後臺的截圖就展示了無標籤頁的豎排導航。

圖73 無標籤頁的豎排導航

多標籤頁和無標籤頁，以及橫豎排導航之間究竟有什麼優劣勢呢？我們在表7-1中做了一個對比，以便大家直觀地理解。

表71 幾種排版特徵的對比

以上探討的是PC版本的框架互動方案，對於移動端場景，UI框架一般採取底部導航選單的方式，我們不再贅述。

03 選單介面的設計

功能模組是軟體能力的抽象描述，但使用者不容易理解和應用；選單是對功能模組的二次編排，透過某種更易於使用者理解的分類方式，將功能結構重新展現。在第五章我們介紹了選單分組的幾種方法，也講到了選單本質，是幫助使用者按照一個熟悉的邏輯尋找功能的路徑，在設計了選單分類的資訊架構之後，我們要設計選單的視覺呈現方案。

不論是橫排導航，還是豎排導航，都要考慮一級選單展開後的選單呈現方式，一般有兩種典型方案。

層疊式選單（Cascading Menu）

層疊選單將子選單收攏，需要使用者進行互動，例如指向或點選父選單，才會展開子選單。這種互動方式曾經是主流方案，在CS架構的視窗程式中也很常見，例如Office軟體套件。

層疊選單需要使用者進行多次互動，略顯麻煩，在企業軟體領域，已經慢慢被棄用；然而這種互動方式也有適合應用的場景，例如針對微互動比較多的工具型軟體，Word、Powerpoint，依然保留了需要點選才能展開選單的特性（尤其是下拉選單，Drop Down Menu），這樣做可以避免使用者頻繁互動中的誤觸誤碰帶來的干擾。

圖7-4是一個典型的層疊選單設計，滑鼠指向父級選單後，會展開子選單。

圖74 需要互動的層疊式選單

平鋪選單（Flat Menu）

平鋪選單，是將所有選單項平鋪在選單頁面中，讓使用者一眼看清所有內容。平鋪選單的好處是減少使用者互動，直觀方便；缺點是內容過多，可能會對使用者檢索資訊時帶來干擾。透過良好的視覺設計可以一定程度解決這個問題。

平鋪選單已經成為大多數企業軟體PC版本設計的首選。圖7-5和圖7-6，是兩款ERP軟體PC版本的平鋪選單設計效果。

圖75 某ERP的平鋪式選單1

圖76 某ERP的平鋪式選單2

平鋪模式的選單，可以進行創意設計，提高易用性。如圖7-7是某WMS軟體，在“出庫”一級選單下，將相關的二級選單，按照簡易流程圖的方式進行分類呈現，讓人一目瞭然，很容易找到流程中相關功能的位置。

圖77 用流程圖的方式呈現平鋪式二級選單

04 首頁的設計

首頁是使用者登入系統後看到的第一個頁面，如果設計得當，能極大地最佳化使用者體驗。例如，傳統B端軟體典型的問題是操作複雜，需要來回在不同頁面跳轉，對於不熟悉系統的新手，很容易被搞崩潰。但是，這些問題都可以透過設計優雅的首頁來解決，因為作為一線作業人員，工作的重點無非是處理各種待處理事務，如果在首頁中能夠把所有需要處理的工作合理呈現，實際上並不需要使用者自己去跳轉各個頁面做操作。

我們設計首頁，可以從兩類場景出發進行分別設計，一類是管理人員的系統首頁，一類是執行人員的系統首頁。

針對管理人員的首頁設計

管理人員每天的工作是什麼？最重要的就是盯緊並跟蹤當天的關鍵資料指標，及時發現運作中出現的異常，排查問題，產生管理動作，執行並跟蹤。

對於管理人員，首頁中一般包括快捷選單、公告、訊息、待辦，以及大量的即時資料儀表盤。相比其他型別的使用者，管理人員使用系統的時間更少，因此一個能夠快速、直接解決問題的首頁就顯得非常重要，如圖7-8。