起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識界面設計方法（7）：界面的布局
編輯導語：在軟件設計中，界面布局設計也是很重要的一項，不同類型的平臺在界面布局上也有很大的不一樣；本文是筆者的系列文章之界面布局，詳細介紹了在界面設計中布局的重要性以及方法，我們一起來學習一下。
為了滿足客戶的需求，軟件界面的表達形式千差萬別；但與網站的界面形式（電子商務、政府政務、各類網站等）相比，作為企業管理（ERP）類系統的界面形式比較低調；由于需要長時間對著屏幕操作、觀看、思考，因此要設計得比較沉穩、簡潔，布局的規律性強，表達形式也不需要過于炫耀、跳躍、刺激。
這里介紹幾種最為常見和常用的PC端界面形式：卡片式、列表式、主細表式、樹形式和頁簽式，以及這些界面形式對應的設計原則；這幾種形式基本上可以滿足大部分客戶業務處理的需求，如有不同之處，本文中的設計原則也可以作為參考之用。
前面介紹了界面、控件（菜單、工具欄、按鈕、字段框等）的概念，界面布局是界面設計的重要工作之一，布局就是在規定的界面范圍內考慮如何布置這些控件可以獲得最佳的效果（易觀看、易輸入、易查閱等操作）。
一、 界面區域的劃分
在電腦屏幕上做界面的設計時，為了溝通和理解的方便，同時也是為了使設計結果符合人體工程學的基本要求，對界面的定位坐標和區域劃分做出如下的約定（這個約定與技術設計和編碼開發的約定是一致的），參見圖1。
圖1 界面區域劃分的基本原則
1）坐標原點的設定
通常會將電腦屏幕的左上角定為坐標原點（XY軸的交叉點0），因此，界面的內容擴展或是面積增大時都是由左向右、由上向下進行延伸。
2）區域的劃分
根據配置控件的使用目的不同，將界面分成兩個大的區域：功能區域和作業區域。
- 功能區域：通常放在界面的四周，主要布置導航欄、工具欄、主菜單等。
- 作業區域：通常放在界面的中間部分，或是偏右下方的區域，這個區域是業務數據處理的核心區域，主要用來布置各類數據顯示的窗口、字段框等。
二、 功能區域的規劃
除去業務字段控件布置的區域以外都是功能區域，功能區域的設計要點參見圖2：
圖2 功能區域的設計原則
1）導航欄區域
導航欄區域，通?？梢苑謩e在欄的左右兩側顯示兩類信息（不限于此），比如：
- 左端：顯示本界面/本組件的打開路徑，系統名稱>子系統名稱>模塊名稱>本組件名稱。
- 右端：顯示本組件的用戶所屬的部門、姓名、登錄日期等信息。
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 協議
- 目前還沒評論，等你發揮！
