編輯導(dǎo)語(yǔ)：在企業(yè)管理類型系統(tǒng)中，經(jīng)常采用卡式、列表、主細(xì)表、樹形、頁(yè)簽這五種PC端界面形式。本文作者以企業(yè)人資系統(tǒng)中“員工薄”界面設(shè)計(jì)為例，為我們介紹了卡式、列表、主細(xì)表、樹形、頁(yè)簽這五種界面形式各有什么設(shè)計(jì)特點(diǎn)。

企業(yè)管理類型系統(tǒng)采用的PC端界面形式常見的有5種 （卡式、列表、主細(xì)表、樹形、頁(yè)簽），以及以這5種形式為基礎(chǔ)的組合形式。

確定一個(gè)業(yè)務(wù)功能采用什么樣的界面形式表達(dá)的效果最佳，一般是綜合了客戶的業(yè)務(wù)需求、數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)數(shù)量、編輯權(quán)限等綜合判斷得出的。

界面是設(shè)計(jì)師展示自己能力最為重要的窗口，如何選擇、規(guī)劃、布局界面，直接關(guān)系到客戶滿意度的高低、產(chǎn)品客戶價(jià)值的大小，細(xì)致的設(shè)計(jì)、布置這個(gè)窗口需要有客戶業(yè)務(wù)知識(shí)、應(yīng)用設(shè)計(jì)知識(shí)、UI知識(shí)以及最好還能具有一定的軟件開發(fā)知識(shí)和背景。

不論采用哪一種界面形式，以下的界面選擇條件都可以作為參考：

1. 業(yè)務(wù)需求：如果原始需求是單據(jù)形式（發(fā)票、收據(jù)、出庫(kù)單等）的，可以選用卡式；如果原始需求是統(tǒng)計(jì)表形式就選用列表或主細(xì)表形式等；
2. 數(shù)據(jù)結(jié)構(gòu)：如果原始表單是簡(jiǎn)單的一覽表，就可以采用列表、或主細(xì)表形式；如果是由多級(jí)數(shù)據(jù)構(gòu)成的父子結(jié)構(gòu)，就需要采用樹形界面；
3. 數(shù)據(jù)數(shù)量：當(dāng)原始表單的數(shù)據(jù)量不大時(shí)，可以采用能將所有數(shù)據(jù)整合在一起的主細(xì)表形式；如果數(shù)據(jù)量大，就可以考慮分頁(yè)解決，如采用主表和細(xì)表分開、或是采用多頁(yè)簽的形式；
4. 編輯權(quán)限：如果權(quán)限要求非常的嚴(yán)格，最好將數(shù)據(jù)按照權(quán)限分成不同的界面處理（如頁(yè)簽形式），避免在一個(gè)界面設(shè)置過(guò)于復(fù)雜的權(quán)限，這會(huì)給未來(lái)的界面維護(hù)和變更帶來(lái)麻煩。

下面以企業(yè)的人資系統(tǒng)中的“員工薄”的界面設(shè)計(jì)為例，分別介紹上述5種界面形式的設(shè)計(jì)特點(diǎn)。

一、卡片式（卡式）

卡片式風(fēng)格的設(shè)計(jì)比較簡(jiǎn)單，它們大多用于表達(dá)單條、且沒(méi)有分級(jí)的數(shù)據(jù)類型，全部的數(shù)據(jù)只有一行。

對(duì)這樣的數(shù)據(jù)設(shè)計(jì)通常不會(huì)用表達(dá)多行的“表”形式表達(dá)，而是采用“卡片”的形式表達(dá)，如圖1（a），這就是卡片式界面形式的來(lái)由。

圖1 卡片式界面

1. 信息分區(qū)

卡片式界面設(shè)計(jì)時(shí)，為了易于快速地讀取信息，還可以將這些數(shù)據(jù)按照不同內(nèi)容劃分成若干的小區(qū)，每個(gè)區(qū)輸入不同的數(shù)據(jù)，并在不同的小區(qū)配上一個(gè)分類名稱，參見圖1（b）。

員工薄的個(gè)人基本信息（不需要履歷部分信息）如：姓名、年齡、性別、民族、出生地、現(xiàn)住址、電話號(hào)碼、郵箱地址、個(gè)人愛(ài)好等，可以看出這些數(shù)據(jù)對(duì)一個(gè)人來(lái)說(shuō)通常都是唯一的。

2. 輸入順序

另外，在設(shè)計(jì)時(shí)還要注意數(shù)據(jù)輸入的順序，通常輸入的順序是按照?qǐng)D1（c）所示的順序設(shè)定的，按鍵盤的回車鍵時(shí)按照上述順序自動(dòng)跳轉(zhuǎn)。因此在布置數(shù)據(jù)時(shí)，要注意數(shù)據(jù)所代表的業(yè)務(wù)邏輯，按照上述順序安排數(shù)據(jù)的字段框的位置以使其符合業(yè)務(wù)邏輯。

二、列表式

這類界面的名稱一般都稱為“xx一覽表”。列表式的界面形式通常用于一次展示多條數(shù)據(jù)的場(chǎng)景，每1行顯示1條數(shù)據(jù)，如圖2所示：

圖2 列表式界面

例：在表達(dá)個(gè)人的履歷時(shí)，可以用列表的形式，以第一列的“時(shí)間”為主線，按照時(shí)間順序顯示個(gè)人的履歷：教育履歷（小學(xué)、中學(xué)、大學(xué)等）、工作履歷（單位1、單位2等）等。

其他典型的應(yīng)用場(chǎng)景還有：收貨一覽表，出庫(kù)一覽表、課程計(jì)劃表等。

三、主細(xì)表式

當(dāng)表達(dá)的每一條數(shù)據(jù)都是由更細(xì)小的復(fù)數(shù)數(shù)據(jù)構(gòu)成時(shí)，就出現(xiàn)了數(shù)據(jù)的分級(jí)（父子結(jié)構(gòu)），此時(shí)就需要采用主細(xì)表的形式。

所謂的主細(xì)表就是以卡片式部分為主表（父）、在卡式區(qū)域的下面增加一個(gè)列表作為細(xì)表（子），主表顯示的是這條數(shù)據(jù)的共同信息（如：個(gè)人基本信息），細(xì)表表現(xiàn)的是同一條數(shù)據(jù)的詳細(xì)構(gòu)成（如：個(gè)人履歷信息）。

舉例：顯示某名員工的完整履歷信息，將卡式部分和列表部分的數(shù)據(jù)整合在一起。主細(xì)表式的結(jié)構(gòu)就是用“卡片式”+“列表式”形成的，參見圖3（a），其中的①、②和③分別表達(dá)了如下的信息：

圖3 主細(xì)表式界面

• ①主表區(qū)：?jiǎn)T工的基本信息，姓名、年齡、性別、出生地、住址，電話號(hào)碼等；
• ②細(xì)表區(qū)：按時(shí)間順列出該員工的履歷信息，小學(xué)、中學(xué)、大學(xué)，公司1、公司2等；
• ③功能區(qū)：這里的功能按鈕是用于操作細(xì)表的（操作主表的按鈕在上部的基本操作按鈕區(qū)內(nèi)）。

其他典型的主細(xì)表應(yīng)用場(chǎng)景有：發(fā)票、收據(jù)、出庫(kù)單、領(lǐng)料單等。

四、樹表式

前面的三種形式都是在界面上加載數(shù)據(jù)后就不變動(dòng)的情況，當(dāng)要在一個(gè)界面上通過(guò)切換顯示不同條的數(shù)據(jù)，且這些數(shù)據(jù)之間具有結(jié)構(gòu)化的關(guān)系時(shí)可以采用樹表的方式，即將主、細(xì)表區(qū)域的左側(cè)加入一個(gè)菜單欄用于在不同條數(shù)據(jù)之間進(jìn)行顯示切換。

舉例，顯示一個(gè)企業(yè)的各部門、各部門員工以及員工信息，如圖4(a）所示：

圖4 樹表式界面

• ①菜單欄的部分顯示企業(yè)各部門、各部門的員工名稱；
• ②③的主細(xì)表部分，通過(guò)對(duì)菜單欄內(nèi)部門、員工的切換可以顯示不同部門的每個(gè)員工的主要信息和詳細(xì)的履歷信息。

當(dāng)然樹形式界面的右側(cè)不一定總是主細(xì)表形式，右側(cè)的上下也可以都是單純的列表，如圖4（b）所示，點(diǎn)擊菜單①，切換表1中的數(shù)據(jù)，點(diǎn)擊表1中的第一條數(shù)據(jù)“A1”，切換表2的數(shù)據(jù)。

五、頁(yè)簽式

樹表式界面表達(dá)形式也有不足，比如：利用圖4的樹形界面看完A員工的信息后，在菜單中切換到B員工后，界面在顯示B員工信息的同時(shí)將原有A員工的信息消除了。

如果再想看A員工的信息時(shí)還要將B員工的信息去掉重新加載A員工的信息，當(dāng)要做A、B員工的對(duì)比分析時(shí)這個(gè)操作就很費(fèi)時(shí)間。

頁(yè)簽的表達(dá)方式就可以很容易地解決這個(gè)問(wèn)題，嚴(yán)格地說(shuō)，頁(yè)簽式不是一個(gè)獨(dú)立的界面表達(dá)形式，它是同時(shí)顯示若干條信息的界面形式，它允許在一個(gè)窗口內(nèi)可以同時(shí)顯示和保留多條信息（=多員工的信息），這里舉兩個(gè)例子說(shuō)明頁(yè)簽界面形式的用法。

1. 用法1

在員工薄界面上順次打開員工張興初、李一凡和林曉青三人的信息，見圖5，此時(shí)界面上同時(shí)保留了三個(gè)頁(yè)簽：

• 在界面上同時(shí)保留了員工張興初、李一凡和林曉青三人的信息，分屬于不同的頁(yè)簽；
• 此時(shí)界面上雖然只顯示了李一凡的信息，沒(méi)有顯示其他二人的信息，但其他二人的信息都保留在他們各自的頁(yè)簽中，隨時(shí)都可以在三個(gè)人的信息之間進(jìn)行切換，切換時(shí)不需要重新加載，大幅度地提升了輸入/查看的效率。

圖5 頁(yè)簽式界面（用法1）

2. 用法2

用法1是將三人份的信息同時(shí)保留和展示在界面上，與用法1相反，用法2是利用頁(yè)簽的形式將原本為一人份的信息按照不同內(nèi)容拆成n個(gè)部分，然后由不同的頁(yè)簽分別來(lái)顯示，參見圖6，這種拆分顯示的好處在于：

圖6 頁(yè)簽式界面（用法2，局部）

原來(lái)需要一次下載完全部的數(shù)據(jù)才能顯示，改成分為n次下載，縮短了下載時(shí)間；

• 點(diǎn)擊到那個(gè)頁(yè)簽時(shí)，下載那個(gè)頁(yè)簽部分的數(shù)據(jù)，提升了顯示速度；
• 顯示用的面積增大了n倍，可以從容地對(duì)界面進(jìn)行布局，提升了用戶的體驗(yàn)價(jià)值；
• 在權(quán)限設(shè)置上比較容易，不同查看權(quán)限的人可以點(diǎn)擊不同的頁(yè)簽。

此時(shí)界面顯示李一凡的信息被分為了三個(gè)頁(yè)簽，將原本在一個(gè)細(xì)表的信息分成三個(gè)細(xì)表分別在不同的頁(yè)簽內(nèi)顯示：基本信息、學(xué)校履歷以及工作履歷。

每個(gè)頁(yè)簽的內(nèi)部采用什么樣的風(fēng)格設(shè)計(jì)都可以，比如：卡片式、列表式、主細(xì)表式等，這種方式極大地提升了設(shè)計(jì)的靈活度。

可以看出這幾個(gè)界面形式展示的數(shù)據(jù)條數(shù)是不同的，按照展示數(shù)據(jù)量大小的排序如下：頁(yè)簽式 ＞ 樹形式 ＞ 主細(xì)表式 ＞ 列表式 ＞ 卡片式。

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

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