企業(yè)管理類型系統(tǒng)采用的PC端界面形式常見的有5種 （卡式、列表、主細(xì)表、樹形、頁簽），以及以這5種形式為基礎(chǔ)的組合形式。確定一個業(yè)務(wù)功能采用什么樣的界面形式表達(dá)的效果最佳，一般是綜合了客戶的業(yè)務(wù)需求、數(shù)據(jù)結(jié)構(gòu)、數(shù)據(jù)數(shù)量、編輯權(quán)限等綜合判斷得出的。界面是設(shè)計師展示自己能力最為重要的窗口，如何選擇、規(guī)劃、布局界面，直接關(guān)系到客戶滿意度的高低、產(chǎn)品客戶價值的大小。細(xì)致的設(shè)計、布置這個窗口需要有客戶業(yè)務(wù)知識、應(yīng)用設(shè)計知識、UI知識以及最好還能具有一定的軟件開發(fā)知識和背景。

不論采用哪一種界面形式，以下的界面選擇條件都可以作為參考：
1）業(yè)務(wù)需求：如果原始需求是單據(jù)形式（發(fā)票、收據(jù)、出庫單等）的，可以選用卡式；如果原始需求是統(tǒng)計表形式就選用列表或主細(xì)表形式等。

2）數(shù)據(jù)結(jié)構(gòu)：如果原始表單是簡單的一覽表，就可以采用列表、或主細(xì)表形式；如果是由多級數(shù)據(jù)構(gòu)成的父子結(jié)構(gòu)，就需要采用樹形界面。

3）數(shù)據(jù)數(shù)量：當(dāng)原始表單的數(shù)據(jù)量不大時，可以采用能將所有數(shù)據(jù)整合在一起的主細(xì)表形式；如果數(shù)據(jù)量大，就可以考慮分頁解決，如采用主表和細(xì)表分開、或是采用多頁簽的形式。

4）編輯權(quán)限：如果權(quán)限要求非常的嚴(yán)格，最好將數(shù)據(jù)按照權(quán)限分成不同的界面處理（如頁簽形式），避免在一個界面設(shè)置過于復(fù)雜的權(quán)限，這會給未來的界面維護(hù)和變更帶來麻煩。

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

1. 卡片式（卡式）
卡片式風(fēng)格的設(shè)計比較簡單，它們大多用于表達(dá)單條、且沒有分級的數(shù)據(jù)類型，全部的數(shù)據(jù)只有一行。對這樣的數(shù)據(jù)設(shè)計通常不會用表達(dá)多行的“表”形式表達(dá)，而是采用“卡片”的形式表達(dá)，如圖1（a）。這就是卡片式界面形式的來由。

圖1 卡片式界面

1）信息分區(qū)
卡片式界面設(shè)計時，為了易于快速地讀取信息，還可以將這些數(shù)據(jù)按照不同內(nèi)容劃分成若干的小區(qū)，每個區(qū)輸入不同的數(shù)據(jù)，并在不同的小區(qū)配上一個分類名稱，參見圖1（b）。
員工薄的個人基本信息（不需要履歷部分信息）如：姓名、年齡、性別、民族、出生地、現(xiàn)住址、電話號碼、郵箱地址、個人愛好等，可以看出這些數(shù)據(jù)對一個人來說通常都是唯一的。

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

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

圖2 列表式界面

例，在表達(dá)個人的履歷時，可以用列表的形式，以第一列的“時間”為主線，按照時間順序顯示個人的履歷：教育履歷（小學(xué)、中學(xué)、大學(xué)等）、工作履歷（單位1、單位2等）等。 其他典型的應(yīng)用場景還有：收貨一覽表，出庫一覽表、課程計劃表等。

3. 主細(xì)表式
當(dāng)表達(dá)的每一條數(shù)據(jù)都是由更細(xì)小的復(fù)數(shù)數(shù)據(jù)構(gòu)成時，就出現(xiàn)了數(shù)據(jù)的分級（父子結(jié)構(gòu)），此時就需要采用主細(xì)表的形式，所謂的主細(xì)表就是以卡片式部分為主表（父）、在卡式區(qū)域的下面增加一個列表作為細(xì)表（子），主表顯示的是這條數(shù)據(jù)的共同信息（如：個人基本信息），細(xì)表表現(xiàn)的是同一條數(shù)據(jù)的詳細(xì)構(gòu)成（如：個人履歷信息）。舉例：顯示某名員工的完整履歷信息，將卡式部分和列表部分的數(shù)據(jù)整合在一起。主細(xì)表式的結(jié)構(gòu)就是用“卡片式”+“列表式”形成的，參見圖3（a），其中的①、②和③分別表達(dá)了如下的信息：

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

①主表區(qū)：員工的基本信息，姓名、年齡、性別、出生地、住址，電話號碼等。
②細(xì)表區(qū)：按時間順列出該員工的履歷信息，小學(xué)、中學(xué)、大學(xué)，公司1、公司2等。
③功能區(qū)：這里的功能按鈕是用于操作細(xì)表的（操作主表的按鈕在上部的基本操作按鈕區(qū)內(nèi)）。
其他典型的主細(xì)表應(yīng)用場景有：發(fā)票，收據(jù)、出庫單、領(lǐng)料單等。

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

圖4 樹表式界面

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

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

5. 頁簽式
樹表式界面表達(dá)形式也有不足，比如：利用圖4的樹形界面看完A員工的信息后，在菜單中切換到B員工后，界面在顯示B員工信息的同時將原有A員工的信息消除了，如果再想看A員工的信息時還要將B員工的信息去掉重新加載A員工的信息，當(dāng)要做A、B員工的對比分析時這個操作就很費時間。頁簽的表達(dá)方式就可以很容易地解決這個問題，嚴(yán)格地說，頁簽式不是一個獨立的界面表達(dá)形式，它是同時顯示若干條信息的界面形式，它允許在一個窗口內(nèi)可以同時顯示和保留多條信息（=多員工的信息），這里舉兩個例子說明頁簽界面形式的用法。

【用法1】在員工薄界面上順次打開員工張興初、李一凡和林曉青三人的信息，見圖5，此時界面上同時保留了三個頁簽：
□在界面上同時保留了員工張興初、李一凡和林曉青三人的信息，分屬于不同的頁簽；
□此時界面上雖然只顯示了李一凡的信息，沒有顯示其他二人的信息，但其他二人的信息都保留在他們各自的頁簽中，隨時都可以在三個人的信息之間進(jìn)行切換，切換時不需要重新加載，大幅度地提升了輸入/查看的效率。

圖5 頁簽式界面（用法1）

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

圖6 頁簽式界面（用法2，局部）

□原來需要一次下載完全部的數(shù)據(jù)才能顯示，改成分為n次下載，縮短了下載時間；
□點擊到那個頁簽時，下載那個頁簽部分的數(shù)據(jù)，提升了顯示速度。
□顯示用的面積增大了n倍，可以從容地對界面進(jìn)行布局，提升了用戶的體驗價值。
□在權(quán)限設(shè)置上比較容易，不同查看權(quán)限的人可以點擊不同的頁簽。

此時界面顯示李一凡的信息被分為了三個頁簽，將原本在一個細(xì)表的信息分成三個細(xì)表分別在不同的頁簽內(nèi)顯示：基本信息、學(xué)校履歷以及工作履歷。
每個頁簽的內(nèi)部采用什么樣的風(fēng)格設(shè)計都可以，比如：卡片式、列表式、主細(xì)表式等，這種方式極大地提升了設(shè)計的靈活度。

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

■ 本系列下一篇：界面設(shè)計方法 (2) — 4. 界面的標(biāo)準(zhǔn)

界面設(shè)計的詳細(xì)說明請參見《大話軟件工程—需求分析與軟件設(shè)計》一書。

總結(jié)

以上是生活随笔為你收集整理的界面设计方法 (2) — 3.卡式, 列表, 主细表, 树形, 页签的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。