界面設計規格(7)：界面的佈局

為了滿足客户的需求，軟件界面的表達形式千差萬別；但與網站的界面形式（電子商務、政府政務、各類網站等）相比，作為企業管理（ERP）類系統的界面形式比較低調；由於需要長時間對着屏幕操作、觀看、思考，因此要設計得比較沉穩、簡潔，佈局的規律性強，表達形式也不需要過於炫耀、跳躍、刺激。

這裏介紹幾種最為常見和常用的PC端界面形式：卡片式、列表式、主細表式、樹形式和頁籤式，以及這些界面形式對應的設計原則；這幾種形式基本上可以滿足大部分客户業務處理的需求，如有不同之處，本文中的設計原則也可以作為參考之用。

前面介紹了界面、控件（菜單、工具欄、按鈕、字段框等）的概念，界面佈局是界面設計的重要工作之一，佈局就是在規定的界面範圍內考慮如何佈置這些控件可以獲得最佳的效果（易觀看、易輸入、易查閲等操作）。

一、 界面區域的劃分

在電腦屏幕上做界面的設計時，為了溝通和理解的方便，同時也是為了使設計結果符合人體工程學的基本要求，對界面的定位座標和區域劃分做出如下的約定（這個約定與技術設計和編碼開發的約定是一致的），參見圖1。

圖1 界面區域劃分的基本原則

1）座標原點的設定

通常會將電腦屏幕的左上角定為座標原點（XY軸的交叉點0），因此，界面的內容擴展或是面積增大時都是由左向右、由上向下進行延伸。

2）區域的劃分

根據配置控件的使用目的不同，將界面分成兩個大的區域：功能區域和作業區域。

• 功能區域：通常放在界面的四周，主要佈置導航欄、工具欄、主菜單等。
• 作業區域：通常放在界面的中間部分，或是偏右下方的區域，這個區域是業務數據處理的核心區域，主要用來佈置各類數據顯示的窗口、字段框等。

二、 功能區域的規劃

除去業務字段控件佈置的區域以外都是功能區域，功能區域的設計要點參見圖2：

圖2 功能區域的設計原則

1）導航欄區域

導航欄區域，通常可以分別在欄的左右兩側顯示兩類信息（不限於此），比如：

• 左端：顯示本界面/本組件的打開路徑，系統名稱>子系統名稱>模塊名稱>本組件名稱。
• 右端：顯示本組件的用户所屬的部門、姓名、登錄日期等信息。

2）工具欄區域（上）— 基本操作按鈕區

這個區域用來佈置基本操作按鈕，一般放在導航欄與作業區域之間；所謂的基本操作按鈕，指的是用來對本界面上屬於主表區內數據進行操作的功能，對於細表區內數據的操作按鈕通常佈置在距離細表區的最近處（上邊或是下邊）。

工具欄的左右兩側是最為容易查找的位置，所以要將使用最為頻繁的、重要的功能按鈕佈置在兩側，其餘的佈置在中間，佈置在兩側的按鈕遵循如下的原則：左端佈置本界面處理開始的功能（入口）、右端佈置本界面處理完成的功能（出口）。

佈置參考如下：

• ①左端：佈置打開窗口後首先要操作的按鈕，比如：查詢、新增等；通常基本功能區左邊的第一個位置為“業務編號”，它是用於輸入查詢的數據“主鍵”；
• ②右端：佈置本界面關閉前需要操作的按鈕，比如：保存、提交、關閉等；
• ③中間：佈置其它的通用按鈕、或是個性化的功能按鈕；

3）工具欄區域（下）— 它窗體調用按鈕區

當界面的上端工具的按鈕過多不好安排時，可以將一部分按鈕安排在界面的下端，比如：主要用來調用其它組件、功能的按鈕，佈置的原則如下（僅供參考）：

• ④子窗體按鈕：佈置在作業區域的左下端，設置用來打開本組件附屬子窗體的按鈕，比如：詳細計算用的窗體、上傳資料用的窗體等；
• ⑤公用窗體按鈕：佈置在作業區域的右下端，設置用來調用外部組件窗體的按鈕，比如：與本組件業務有相關關係的組件、企業知識庫、參考模板等；

4）菜單欄區域⑥

通常設置在界面的最左側，所謂的“菜單”就是一個樹形結構體，結構的節點上是按照父子的關係佈置了以下要素的名稱：系統、子系統、模塊和組件，通過菜單欄內可以找到系統中所有的功能，菜單的結構關係是參考下面的兩個架構圖設計而成的。

注：這個菜單指的是系統整體的功能菜單，不是某個業務功能內的數據結構，如果是後者，則包含在業務區域內，在此不顯示。

5）作業區域的規劃

作業區域是佈置業務功能設計成果的位置，一般將作業區域劃分為主次區域，參見圖1。

• 主要區域：界面的左上角為“主”，重要信息在此顯示，如：業務編號、客户名稱、合同總金額、工程期日等；
• 次要區域：界面的右下角為“次”，次要的或是輔助類信息在此顯示，如：備註信息、來自於其它組件的參考信息等；

設計時要注意功能區域與作業區域面積的比例關係，作業區域面積佔全屏幕總面積的比例越大，一次顯示的信息量就越多，用户的體驗就越好，反之就會比較差，如圖3所示。

圖3 功能區域作業區域的比例

比如：缺乏經驗的設計師會將屏幕的30～50%用於功能區域的佈置（菜單、工具欄等），由於作業界區域小，所以用户的操作體驗非常差；因此，為了擴大作業區域的有效面積可以採用收起菜單欄和工具欄的方法。

但當一次要顯示的內容非常多的時候，最好還是另外彈出一個專用的子窗口，將主窗體的部分處理內容用專用的窗體顯示為好，這樣操作面積增大，用户體驗就會相應地變好了。

另外，比例上雖然沒有大問題，但是作業區域內顯示的細表行數太少，也不利於用户的輸入、查看，此時最好將作業區域的內容放到一個單獨地界面上去顯示為佳。

三、 作業區的分類（原型形式分類）

1）原型形式

作業區域的範圍內就是通常所説的“界面原型”，這個原型常見的形式有5種：卡片式、列表式、主細表式、樹表式和頁籤式，參見圖4（各個界面形式的設計原則參見下一節“界面原型的設計”）。

圖4 界面原型的形式分類

2）原型形式的選擇

不同的數據結構需要採用不同界面形式，採用哪種形式最佳由設計師參考業務內容、以及未來的應用方法（實際系統的界面）綜合考慮決定；收集到原始實體表單與業務原型的界面可以不是一一對應的關係；比如：根據客户提供的“採購合同”原始表單，界面原型的設計可有兩種表達形式，選取那種形式合適取決於用户與業務設計師的溝通，參見圖5。

圖5 原型的選擇方法示意

• 設計方式一：如果表單的數據較少，則可以將主表和細表合為一體，見圖5（b），此時界面原型與原始表單的形式基本上是一致的；
• 設計方式二：如果表單的數據較多，則可以將主表與細表分為兩張，見圖5（c），界面1用來表達原始表單的主表數據部分、界面2用來表達原始表單的細表數據部分。

在實際的界面設計時有幾點設計原則要注意：

• 儘量不要採用切換的方式，在一個界面上佈置複數不同表單的數據輸入，這樣界面的邏輯非常複雜，不利於後面對界面的維護；
• 在不影響用户的工作分配情況下，儘量採用將複雜的原始表單拆開，用幾個相對簡單的界面來支持數據的輸入，然後用看板、表單等功能將這些數據組合起來。這樣的設計有利於日後的界面維護。

本系列下一篇：界面設計方法（8）：卡式、列表、主細表、樹表和頁籤

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

題圖來自 Unsplash，基於 CC0 協議