起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識界面設計方法 (8)：卡式、列表、主細表、樹形、頁簽
編輯導語：在企業管理類型系統中，經常采用卡式、列表、主細表、樹形、頁簽這五種PC端界面形式。本文作者以企業人資系統中“員工薄”界面設計為例，為我們介紹了卡式、列表、主細表、樹形、頁簽這五種界面形式各有什么設計特點。
企業管理類型系統采用的PC端界面形式常見的有5種 （卡式、列表、主細表、樹形、頁簽），以及以這5種形式為基礎的組合形式。
確定一個業務功能采用什么樣的界面形式表達的效果最佳，一般是綜合了客戶的業務需求、數據結構、數據數量、編輯權限等綜合判斷得出的。
界面是設計師展示自己能力最為重要的窗口，如何選擇、規劃、布局界面，直接關系到客戶滿意度的高低、產品客戶價值的大小，細致的設計、布置這個窗口需要有客戶業務知識、應用設計知識、UI知識以及最好還能具有一定的軟件開發知識和背景。
不論采用哪一種界面形式，以下的界面選擇條件都可以作為參考：
- 業務需求：如果原始需求是單據形式（發票、收據、出庫單等）的，可以選用卡式；如果原始需求是統計表形式就選用列表或主細表形式等；
- 數據結構：如果原始表單是簡單的一覽表，就可以采用列表、或主細表形式；如果是由多級數據構成的父子結構，就需要采用樹形界面；
- 數據數量：當原始表單的數據量不大時，可以采用能將所有數據整合在一起的主細表形式；如果數據量大，就可以考慮分頁解決，如采用主表和細表分開、或是采用多頁簽的形式；
- 編輯權限：如果權限要求非常的嚴格，最好將數據按照權限分成不同的界面處理（如頁簽形式），避免在一個界面設置過于復雜的權限，這會給未來的界面維護和變更帶來麻煩。
下面以企業的人資系統中的“員工薄”的界面設計為例，分別介紹上述5種界面形式的設計特點。
一、卡片式（卡式）
卡片式風格的設計比較簡單，它們大多用于表達單條、且沒有分級的數據類型，全部的數據只有一行。
對這樣的數據設計通常不會用表達多行的“表”形式表達，而是采用“卡片”的形式表達，如圖1（a），這就是卡片式界面形式的來由。
圖1 卡片式界面
1. 信息分區
卡片式界面設計時，為了易于快速地讀取信息，還可以將這些數據按照不同內容劃分成若干的小區，每個區輸入不同的數據，并在不同的小區配上一個分類名稱，參見圖1（b）。
員工薄的個人基本信息（不需要履歷部分信息）如：姓名、年齡、性別、民族、出生地、現住址、電話號碼、郵箱地址、個人愛好等，可以看出這些數據對一個人來說通常都是唯一的。
2. 輸入順序
另外，在設計時還要注意數據輸入的順序，通常輸入的順序是按照圖1（c）所示的順序設定的，按鍵盤的回車鍵時按照上述順序自動跳轉。因此在布置數據時，要注意數據所代表的業務邏輯，按照上述順序安排數據的字段框的位置以使其符合業務邏輯。
二、列表式
這類界面的名稱一般都稱為“xx一覽表”。列表式的界面形式通常用于一次展示多條數據的場景，每1行顯示1條數據，如圖2所示：
圖2 列表式界面
例：在表達個人的履歷時，可以用列表的形式，以第一列的“時間”為主線，按照時間順序顯示個人的履歷：教育履歷（小學、中學、大學等）、工作履歷（單位1、單位2等）等。
其他典型的應用場景還有：收貨一覽表，出庫一覽表、課程計劃表等。
三、主細表式
當表達的每一條數據都是由更細小的復數數據構成時，就出現了數據的分級（父子結構），此時就需要采用主細表的形式。
所謂的主細表就是以卡片式部分為主表（父）、在卡式區域的下面增加一個列表作為細表（子），主表顯示的是這條數據的共同信息（如：個人基本信息），細表表現的是同一條數據的詳細構成（如：個人履歷信息）。
舉例：顯示某名員工的完整履歷信息，將卡式部分和列表部分的數據整合在一起。主細表式的結構就是用“卡片式”+“列表式”形成的，參見圖3（a），其中的①、②和③分別表達了如下的信息：
圖3 主細表式界面
- ①主表區：員工的基本信息，姓名、年齡、性別、出生地、住址，電話號碼等；
- ②細表區：按時間順列出該員工的履歷信息，小學、中學、大學，公司1、公司2等；
- ③功能區：這里的功能按鈕是用于操作細表的（操作主表的按鈕在上部的基本操作按鈕區內）。
其他典型的主細表應用場景有：發票、收據、出庫單、領料單等。
四、樹表式
前面的三種形式都是在界面上加載數據后就不變動的情況，當要在一個界面上通過切換顯示不同條的數據，且這些數據之間具有結構化的關系時可以采用樹表的方式，即將主、細表區域的左側加入一個菜單欄用于在不同條數據之間進行顯示切換。
舉例，顯示一個企業的各部門、各部門員工以及員工信息，如圖4(a）所示：
圖4 樹表式界面
- ①菜單欄的部分顯示企業各部門、各部門的員工名稱；
- ②③的主細表部分，通過對菜單欄內部門、員工的切換可以顯示不同部門的每個員工的主要信息和詳細的履歷信息。
當然樹形式界面的右側不一定總是主細表形式，右側的上下也可以都是單純的列表，如圖4（b）所示，點擊菜單①，切換表1中的數據，點擊表1中的第一條數據“A1”，切換表2的數據。
五、頁簽式
樹表式界面表達形式也有不足，比如：利用圖4的樹形界面看完A員工的信息后，在菜單中切換到B員工后，界面在顯示B員工信息的同時將原有A員工的信息消除了。
如果再想看A員工的信息時還要將B員工的信息去掉重新加載A員工的信息，當要做A、B員工的對比分析時這個操作就很費時間。
頁簽的表達方式就可以很容易地解決這個問題，嚴格地說，頁簽式不是一個獨立的界面表達形式，它是同時顯示若干條信息的界面形式，它允許在一個窗口內可以同時顯示和保留多條信息（=多員工的信息），這里舉兩個例子說明頁簽界面形式的用法。
1. 用法1
在員工薄界面上順次打開員工張興初、李一凡和林曉青三人的信息，見圖5，此時界面上同時保留了三個頁簽：
- 在界面上同時保留了員工張興初、李一凡和林曉青三人的信息，分屬于不同的頁簽；
- 此時界面上雖然只顯示了李一凡的信息，沒有顯示其他二人的信息，但其他二人的信息都保留在他們各自的頁簽中，隨時都可以在三個人的信息之間進行切換，切換時不需要重新加載，大幅度地提升了輸入/查看的效率。
圖5 頁簽式界面（用法1）
2. 用法2
用法1是將三人份的信息同時保留和展示在界面上，與用法1相反，用法2是利用頁簽的形式將原本為一人份的信息按照不同內容拆成n個部分，然后由不同的頁簽分別來顯示，參見圖6，這種拆分顯示的好處在于：
圖6 頁簽式界面（用法2，局部）
原來需要一次下載完全部的數據才能顯示，改成分為n次下載，縮短了下載時間；
- 點擊到那個頁簽時，下載那個頁簽部分的數據，提升了顯示速度；
- 顯示用的面積增大了n倍，可以從容地對界面進行布局，提升了用戶的體驗價值；
- 在權限設置上比較容易，不同查看權限的人可以點擊不同的頁簽。
此時界面顯示李一凡的信息被分為了三個頁簽，將原本在一個細表的信息分成三個細表分別在不同的頁簽內顯示：基本信息、學校履歷以及工作履歷。
每個頁簽的內部采用什么樣的風格設計都可以，比如：卡片式、列表式、主細表式等，這種方式極大地提升了設計的靈活度。
可以看出這幾個界面形式展示的數據條數是不同的，按照展示數據量大小的排序如下：頁簽式 ＞ 樹形式 ＞ 主細表式 ＞ 列表式 ＞ 卡片式。
本文由 @李鴻君 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協議
非常感謝