編輯導語：前幾篇文章中，我們已經瞭解到了許多關於界面設計的相關知識。今天這篇文章讓我們迴歸一下界面設計本身，談一談其設計原則與標準，希望對你有幫助。

前面介紹了5種基本的界面形式，如果從構成界面的要素（構件）層面看，實際上所有的界面都是一樣的，因爲它們都是由同樣的控件構成的，只是控件的位置不同而已。

因此就有必要對界面的佈置進行統一的標準化，建立了界面佈置的標準後設計效率會提升、同時也爲界面設計資料的複用奠定了基礎。

界面設計的標準化非常重要，因爲界面是用戶認知系統的窗口，這個標準實際上是構建“人-機-人”工作環境的標準之一，標準化的界面形式也可以減少用戶的認知負擔和培訓成本。

這裏給出一些界面設計上的基本原則和標準供作參考，按照從整體到局部的順序，重點提出以下的幾個界面設計時的原則與標準（不限於此）：

界面佈局對原則子窗體設置的原則字段控件的標準美工設計的原則這些原則/標準根據界面的使用場景不同、設計師的設計理念的不同等都會有所不同，需要根據具體情況具體分析設計，這些原則和標準僅供參考。

一、界面佈局的原則

1. 整體佈局

界面的佈局是用戶理解業務功能的重要手段，佈局一定要以“業務導向”，佈局的規範化、規律化可以培養用戶逐漸地走向“無師自通”的方向，如：

同類界面的佈局要統一，卡式、主細表、樹形等同樣格式要風格一致；重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。關於界面重要信息的擺放位置請參看前面的博文；界面上近似內容要放在相近處，如：加框以示區別、或拉大與其它內容區域的距離；重視用戶界面友好性，易於操作、易於查看，比如：常用按鈕在鼠標移動最短的地方配置。工具欄的左端配置界面操作開始的功能按鈕、右端配置界面操作結束功能按鈕等；界面橫向一次的顯示信息量（標題個數）多少，要以完成一次操作不用或是少用橫向滾動條爲標準（縱向滾動條不限），因爲頻繁使用橫向滾動條會使得用戶看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現象。

圖1 佈局原則

如圖1所示，細表區的標題設置過多（A～J），致使大約有40%的信息在處在窗口外，用戶不使用橫向滾動條就看不到。

如果這是一個頻繁操作的動作，那麼工作效率就會低下，這就是所謂的應用體驗設計的不好，這種設計會極大地造成用戶滿意度的下降。解決的方法可以考慮採用分頁表達的形式。

注：對具有自適應功能的界面也存在同樣的原則，由於列數過多界面自適應後的字體太小看不清楚，爲了看清楚必須要放大字體，結果還是要頻繁地使用橫向滾動條，所以適當減少列數是最有效的解決方法。

2. 局部尺寸

要約定好界面上基本的控件距離、尺寸，參見圖2，比如：

窗口與控件之間的距離；控件之間的間距，包括縱向的行間距、橫向的字段框間距等；控件的高度；使用文字的字號大小等。

圖2 界面設計標準的制定

二、子窗體設置原則

以組件的主界面爲第一層界面，子窗體的層數最好控制在3層以內，也就是連續打開三個界面爲限，參見圖3：

從菜單第一次打開的爲主界面（父）從主界面打開的第二層爲子界面（子）從子界面打開的第三層爲子界面的子界面（孫）等圖3 子窗體的層數示意圖

如果內容實在是比較多，最終彈出的子窗體要超過3層時，可以考慮另外再設置一個組件來分擔處理的內容，不然子界面彈出過多，就會造成界面的混亂，會降低用戶的操作效率。

三、字段控件的標準

字段控件的表達格式根據內容不同而不同，字段控件由兩個部分構成：標題欄和輸入框，參見圖4：

圖4 字段控件的長度與數據位置

1. 標題欄的長度

標題的字數不要太多，因爲標題長到如同一句話時就不容易記憶了，最佳字數在2～6個字之間（易於記憶與稱呼的長度）；另外標題中的文字位置可以參考：有背景框時居中，沒有時居左或居右，圖4中的標題欄有背景色，所以採用了文字居中的形式。

注：這裏的”標題欄名稱“指的是”字段名稱“，不是4個業務功能中的”表單名稱“，後者可以按照實際的名稱寫，多少字都可以，不必要設置字數。

2. 輸入框的長度

輸入框的字段長度是不一定的，建議輸入框的長度與字數相匹配不必統一，如圖4（a）的式樣，因爲如果要統一長度就一定會以字數最多的字段爲準，那麼字數少的字段也用長輸入框就不容易讀取，而且輸入框的長度一樣時字段之間的辨識度就會降低，尋找某個字段的時間會增加。

比如：圖4（b）樣式的“工程月數”字段只有2個單位的長度，如果採用和具有30個單位長度的“項目名稱”一樣長的輸入框時，則“工程月數”就會因爲標題與數據的距離太遠而不容易讀取（看不準）。

相比較而言，圖4（a）樣式中的“座機號碼”、“郵政編號”、”工程月數“的輸入框長度比較短，就比較容易尋找和識別。

3. 數據的位置

輸入框內數據的位置，根據內容不同而不同，參見圖4（a）：

①文字型數據：靠框的左端佈置，如：名稱、說明文；②③數值型數據（長度固定）：居中佈置，由於編號類數據長度是一定的，所以居中容易讀取，如：電話號碼，郵政編號、材料編號，這樣做也容易與“文字類”和“數值類”數據進行區分；④⑤數值型數據（長度非標）：靠框的右端佈置，如：金額、數量、長度。

四、顏色與裝飾的原則

這裏介紹的界面設計中雖然不涉及到美工的內容，但是也希望作爲設計師具有一些美學的意識，因爲最終用戶的滿意度是個綜合的指標，這個指標至少包括了下述內容：

業務正確：來自於業務設計（需求分析、架構、功能、數據等）的成果，信息的分區等；易操作性：來自於功能應用設計的成果（界面、控件），推送機制等；性能良好：來自於技術開發測試等的成果；美觀易讀：來自於UI、美工設計等。因爲企業管理系統不是宣傳用的網站、電商平臺，界面風格要具有以下的特點（僅供參考）：

界面的整體要做到簡潔、明瞭，界面上的各種要素（控件）的擺放位置、顏色、是否使用3D形式都要思考，輔助的功能不要喧賓奪主；使用淡雅的色彩作爲基調原色，不要大面積地使用原色，容易造成眼睛的疲勞；要給用戶以安靜的感受，不要用有炫酷和跳躍感的要素去分散用戶的注意力（電商平臺的界面希望不斷地帶給用戶新的發現、驚喜）。

五、小結

隨着計算機技術的發展，計算機的使用領域和用途越來越廣泛，界面風格也隨之更加多樣化。

比如：互聯網風格頁面、物聯網的界面，硬件技術的進步也影響界面風格的變化；比如：智能手機端、平板電腦端等，它們的設計內容、風格都有所不同，但是上述的基本理念、原則等還是適用的。

本系列下一篇：界面設計的方法（10）— 按鈕的設計方法

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

題圖來自 Unsplash，基於 CC0 協議