界面設(shè)計(jì)方法 (2) — 4.界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)

時(shí)間：2023-09-30 12:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-30 12:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

界面設(shè)計(jì)方法 (2) — 4.界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)：前面介紹了5種基本的界面形式，如果從構(gòu)成界面的要素（構(gòu)件）層面看，實(shí)際上所有的界面都是一樣的，因?yàn)樗鼈兌际怯赏瑯拥目丶?gòu)成的，只是控件的位置不同而已，因此就有必要對(duì)界面的布置進(jìn)行統(tǒng)一的標(biāo)準(zhǔn)化，建立了界面布置的標(biāo)準(zhǔn)后設(shè)計(jì)效率會(huì)提升、同時(shí)也為界面設(shè)計(jì)資料的復(fù)用奠定了基礎(chǔ)。

界面設(shè)計(jì)的標(biāo)準(zhǔn)化非常重要，因?yàn)榻缑媸怯脩?hù)認(rèn)知系統(tǒng)的窗口，這個(gè)標(biāo)準(zhǔn)實(shí)際上是構(gòu)建“人-機(jī)-人”工作環(huán)境的標(biāo)準(zhǔn)之一，標(biāo)準(zhǔn)化的界面形式也可以減少用戶(hù)的認(rèn)知負(fù)擔(dān)和培訓(xùn)成本。這里給出一些界面設(shè)計(jì)上的基本原則和標(biāo)準(zhǔn)供作參考。

按照從整體到局部的順序，重點(diǎn)提出以下的幾個(gè)界面設(shè)計(jì)時(shí)的原則與標(biāo)準(zhǔn)（不限于此）：

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

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




1. 界面布局的原則

1）整體布局

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

(1) 同類(lèi)界面的布局要統(tǒng)一，卡式、主細(xì)表、樹(shù)形等同樣格式要風(fēng)格一致。

(2) 重要信息放在界面的核心位置，如：左上方位置，次要信息放在其它位置。關(guān)于界面重要信息的擺放位置請(qǐng)參看前面的博文。

(3) 界面上近似內(nèi)容要放在相近處，如：加框以示區(qū)別、或拉大與其它內(nèi)容區(qū)域的距離。

(4) 重視用戶(hù)界面友好性，易于操作、易于查看，比如：

• 常用按鈕在鼠標(biāo)移動(dòng)最短的地方配置
• 工具欄的左端配置界面操作開(kāi)始的功能按鈕、右端配置界面操作結(jié)束功能按鈕等

(5) 界面橫向一次的顯示信息量（標(biāo)題個(gè)數(shù)）多少，要以完成一次操作不用或是少用橫向滾動(dòng)條為標(biāo)準(zhǔn)（縱向滾動(dòng)條不限），因?yàn)轭l繁使用橫向滾動(dòng)條會(huì)使得用戶(hù)看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現(xiàn)象。

圖1 布局原則

如圖1所示，細(xì)表區(qū)的標(biāo)題設(shè)置過(guò)多（A～J），致使大約有40%的信息在處在窗口外，用戶(hù)不使用橫向滾動(dòng)條就看不到，如果這是一個(gè)頻繁操作的動(dòng)作，那么工作效率就會(huì)低下，這就是所謂的應(yīng)用體驗(yàn)設(shè)計(jì)的不好，這種設(shè)計(jì)會(huì)極大地造成用戶(hù)滿(mǎn)意度的下降。解決的方法可以考慮采用分頁(yè)表達(dá)的形式。

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

2）局部尺寸

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

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

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




2. 子窗體設(shè)置原則

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

• 從菜單第一次打開(kāi)的為主界面（父）。
• 從主界面打開(kāi)的第二層為子界面（子）。
• 從子界面打開(kāi)的第三層為子界面的子界面（孫）等。

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

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




3. 字段控件的標(biāo)準(zhǔn)

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

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

1 ) 標(biāo)題欄的長(zhǎng)度

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

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

2 ) 輸入框的長(zhǎng)度

輸入框的字段長(zhǎng)度是不一定的，建議輸入框的長(zhǎng)度與字?jǐn)?shù)相匹配不必統(tǒng)一，如圖4（a）的式樣，因?yàn)槿绻y(tǒng)一長(zhǎng)度就一定會(huì)以字?jǐn)?shù)最多的字段為準(zhǔn)，那么字?jǐn)?shù)少的字段也用長(zhǎng)輸入框就不容易讀取，而且輸入框的長(zhǎng)度一樣時(shí)字段之間的辨識(shí)度就會(huì)降低，尋找某個(gè)字段的時(shí)間會(huì)增加，比如：圖4（b）樣式的“工程月數(shù)”字段只有2個(gè)單位的長(zhǎng)度，如果采用和具有30個(gè)單位長(zhǎng)度的“項(xiàng)目名稱(chēng)”一樣長(zhǎng)的輸入框時(shí)，則“工程月數(shù)”就會(huì)因?yàn)闃?biāo)題與數(shù)據(jù)的距離太遠(yuǎn)而不容易讀?。床粶?zhǔn)），相比較而言，圖4（a）樣式中的“座機(jī)號(hào)碼”、“郵政編號(hào)”、”工程月數(shù)“的輸入框長(zhǎng)度比較短，就比較容易尋找和識(shí)別。

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

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

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

4. 顏色與裝飾的原則

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

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

因?yàn)槠髽I(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺(tái)，界面風(fēng)格要具有以下的特點(diǎn)（僅供參考）

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

■ 小結(jié)：隨著計(jì)算機(jī)技術(shù)的發(fā)展，計(jì)算機(jī)的使用領(lǐng)域和用途越來(lái)越廣泛，界面風(fēng)格也隨之更加多樣化，比如：互聯(lián)網(wǎng)風(fēng)格頁(yè)面、物聯(lián)網(wǎng)的界面，硬件技術(shù)的進(jìn)步也影響界面風(fēng)格的變化，比如：智能手機(jī)端、平板電腦端等，它們的設(shè)計(jì)內(nèi)容、風(fēng)格都有所不同，但是上述的基本理念、原則等還是適用的。

■本系列

上一篇：界面設(shè)計(jì)方法 (2) — 3.卡式, 列表, 主細(xì)表, 樹(shù)形, 頁(yè)簽界面設(shè)計(jì)的方法

下一篇：界面設(shè)計(jì)方法（2）— 5.功能按鈕設(shè)計(jì)（新增,查詢(xún)）

界面設(shè)計(jì)的詳細(xì)說(shuō)明請(qǐng)參見(jiàn)《大話(huà)軟件工程—需求分析與軟件設(shè)計(jì)》一書(shū)。