編輯導(dǎo)語：前幾篇文章中，我們已經(jīng)了解到了許多關(guān)于界面設(shè)計的相關(guān)知識。今天這篇文章讓我們回歸一下界面設(shè)計本身，談一談其設(shè)計原則與標(biāo)準(zhǔn)，希望對你有幫助。

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

因此就有必要對界面的布置進(jìn)行統(tǒng)一的標(biāo)準(zhǔn)化，建立了界面布置的標(biāo)準(zhǔn)后設(shè)計效率會提升、同時也為界面設(shè)計資料的復(fù)用奠定了基礎(chǔ)。

界面設(shè)計的標(biāo)準(zhǔn)化非常重要，因為界面是用戶認(rèn)知系統(tǒng)的窗口，這個標(biāo)準(zhǔn)實際上是構(gòu)建“人-機(jī)-人”工作環(huán)境的標(biāo)準(zhǔn)之一，標(biāo)準(zhǔn)化的界面形式也可以減少用戶的認(rèn)知負(fù)擔(dān)和培訓(xùn)成本。

這里給出一些界面設(shè)計上的基本原則和標(biāo)準(zhǔn)供作參考，按照從整體到局部的順序，重點提出以下的幾個界面設(shè)計時的原則與標(biāo)準(zhǔn)（不限于此）：

• 界面布局對原則
• 子窗體設(shè)置的原則
• 字段控件的標(biāo)準(zhǔn)
• 美工設(shè)計的原則

這些原則/標(biāo)準(zhǔn)根據(jù)界面的使用場景不同、設(shè)計師的設(shè)計理念的不同等都會有所不同，需要根據(jù)具體情況具體分析設(shè)計，這些原則和標(biāo)準(zhǔn)僅供參考。

一、界面布局的原則

1. 整體布局

界面的布局是用戶理解業(yè)務(wù)功能的重要手段，布局一定要以“業(yè)務(wù)導(dǎo)向”，布局的規(guī)范化、規(guī)律化可以培養(yǎng)用戶逐漸地走向“無師自通”的方向，如：

1. 同類界面的布局要統(tǒng)一，卡式、主細(xì)表、樹形等同樣格式要風(fēng)格一致；
2. 重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。關(guān)于界面重要信息的擺放位置請參看前面的博文；
3. 界面上近似內(nèi)容要放在相近處，如：加框以示區(qū)別、或拉大與其它內(nèi)容區(qū)域的距離；
4. 重視用戶界面友好性，易于操作、易于查看，比如：常用按鈕在鼠標(biāo)移動最短的地方配置。工具欄的左端配置界面操作開始的功能按鈕、右端配置界面操作結(jié)束功能按鈕等；
5. 界面橫向一次的顯示信息量（標(biāo)題個數(shù)）多少，要以完成一次操作不用或是少用橫向滾動條為標(biāo)準(zhǔn)（縱向滾動條不限），因為頻繁使用橫向滾動條會使得用戶看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現(xiàn)象。

圖1 布局原則

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

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

注：對具有自適應(yīng)功能的界面也存在同樣的原則，由于列數(shù)過多界面自適應(yīng)后的字體太小看不清楚，為了看清楚必須要放大字體，結(jié)果還是要頻繁地使用橫向滾動條，所以適當(dāng)減少列數(shù)是最有效的解決方法。

2. 局部尺寸

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

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

圖2 界面設(shè)計標(biāo)準(zhǔn)的制定

二、子窗體設(shè)置原則

以組件的主界面為第一層界面，子窗體的層數(shù)最好控制在3層以內(nèi)，也就是連續(xù)打開三個界面為限，參見圖3：

• 從菜單第一次打開的為主界面（父）
• 從主界面打開的第二層為子界面（子）
• 從子界面打開的第三層為子界面的子界面（孫）等

圖3 子窗體的層數(shù)示意圖

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

三、字段控件的標(biāo)準(zhǔn)

字段控件的表達(dá)格式根據(jù)內(nèi)容不同而不同，字段控件由兩個部分構(gòu)成：標(biāo)題欄和輸入框，參見圖4：

圖4 字段控件的長度與數(shù)據(jù)位置

1. 標(biāo)題欄的長度

標(biāo)題的字?jǐn)?shù)不要太多，因為標(biāo)題長到如同一句話時就不容易記憶了，最佳字?jǐn)?shù)在2～6個字之間（易于記憶與稱呼的長度）；另外標(biāo)題中的文字位置可以參考：有背景框時居中，沒有時居左或居右，圖4中的標(biāo)題欄有背景色，所以采用了文字居中的形式。

注：這里的”標(biāo)題欄名稱“指的是”字段名稱“，不是4個業(yè)務(wù)功能中的”表單名稱“，后者可以按照實際的名稱寫，多少字都可以，不必要設(shè)置字?jǐn)?shù)。

2. 輸入框的長度

輸入框的字段長度是不一定的，建議輸入框的長度與字?jǐn)?shù)相匹配不必統(tǒng)一，如圖4（a）的式樣，因為如果要統(tǒng)一長度就一定會以字?jǐn)?shù)最多的字段為準(zhǔn)，那么字?jǐn)?shù)少的字段也用長輸入框就不容易讀取，而且輸入框的長度一樣時字段之間的辨識度就會降低，尋找某個字段的時間會增加。

比如：圖4（b）樣式的“工程月數(shù)”字段只有2個單位的長度，如果采用和具有30個單位長度的“項目名稱”一樣長的輸入框時，則“工程月數(shù)”就會因為標(biāo)題與數(shù)據(jù)的距離太遠(yuǎn)而不容易讀取（看不準(zhǔn)）。

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

3. 數(shù)據(jù)的位置

輸入框內(nèi)數(shù)據(jù)的位置，根據(jù)內(nèi)容不同而不同，參見圖4（a）：

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

四、顏色與裝飾的原則

這里介紹的界面設(shè)計中雖然不涉及到美工的內(nèi)容，但是也希望作為設(shè)計師具有一些美學(xué)的意識，因為最終用戶的滿意度是個綜合的指標(biāo)，這個指標(biāo)至少包括了下述內(nèi)容：

• 業(yè)務(wù)正確：來自于業(yè)務(wù)設(shè)計（需求分析、架構(gòu)、功能、數(shù)據(jù)等）的成果，信息的分區(qū)等；
• 易操作性：來自于功能應(yīng)用設(shè)計的成果（界面、控件），推送機(jī)制等；
• 性能良好：來自于技術(shù)開發(fā)測試等的成果；
• 美觀易讀：來自于UI、美工設(shè)計等。

因為企業(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺，界面風(fēng)格要具有以下的特點（僅供參考）：

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

五、小結(jié)

隨著計算機(jī)技術(shù)的發(fā)展，計算機(jī)的使用領(lǐng)域和用途越來越廣泛，界面風(fēng)格也隨之更加多樣化。

比如：互聯(lián)網(wǎng)風(fēng)格頁面、物聯(lián)網(wǎng)的界面，硬件技術(shù)的進(jìn)步也影響界面風(fēng)格的變化；比如：智能手機(jī)端、平板電腦端等，它們的設(shè)計內(nèi)容、風(fēng)格都有所不同，但是上述的基本理念、原則等還是適用的。

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

題圖來自 Unsplash，基于 CC0 協(xié)議

蘭亭妙微(www.alimai.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan