淺析信息系統(tǒng)中控件在人機交互中的用戶體驗設計

李雪潔

（興業(yè)銀行總行信息科技部，上海 201201）

淺析信息系統(tǒng)中控件在人機交互中的用戶體驗設計

李雪潔

（興業(yè)銀行總行信息科技部，上海 201201）

信息系統(tǒng)中的人機交互設計是一門研究軟件系統(tǒng)與用戶之間交互關系的學問。用戶通過設計優(yōu)秀的人機交互界面與軟件系統(tǒng)進行交流，既可以順利完成本身業(yè)務所需，也達到良好的體驗目的。文章主要探討了人機交互中主要組成元素——控件在信息系統(tǒng)中的相關概念及設計原則，并舉例說明合理的控件設計在系統(tǒng)界面中的重要作用。

控件；人機交互；管理信息系統(tǒng)

Internet :www.artdesign.org.cn

控件是用戶可與之交互以輸入或操作數據的對象。每個控件都有其圖形及邏輯功能。管理信息系統(tǒng)界面中的控件設置是人機交互中必不可少的一部分?？丶怯脩艉秃笈_管理系統(tǒng)進行交流的主要對象。它具有可操作性和自創(chuàng)建性，是組建圖形用戶界面的主要構造模塊。下面是以按鈕類、列表類、容器類、顯示類四大組成部分闡述控件在軟件系統(tǒng)界面中的設計規(guī)范。

一、按鈕類

菜單

菜單：是向用戶直接展示的一組功能選項，用戶可以通過菜單的內容來了解其功能，并通過逐個點擊菜單項來執(zhí)行自己想要的功能。

1.在標題的設置上，盡量用簡潔詞組作為菜單按鈕導航標題。

2.下拉菜單延展開一般不要超過三層。三層以上的菜單會讓用戶增加厭煩情緒。

3.鼠標在菜單上移動時，移動到的菜單項要改變其顏色值，以指示鼠標當前懸停在哪個菜單項上。

4.帶有子菜單的選項一定要有表示對外展示的箭頭，鼠標停留在有箭頭菜單項上時，會出現下一級子菜單。

5.菜單項的順序安排要合理。將同一類菜單項組合在一起。

6.在橫向導航欄上，菜單項以重要性順序從左到右依此排列，而在下拉命令中，重要與非重要的的選項應從上至下依次排列。

7.如果菜單標題字數盡量精簡，盡量不要使用省略號。

8.標題字數最好接近，使菜單寬度保持一致。

9.一般情況下，菜單標題字統(tǒng)一采用左對齊。

單選框

單選框：是一種能夠被標記選中的按鈕狀態(tài)，具有自動互斥選擇性，提供給用戶只能一種單項選擇性。

1.同一系統(tǒng)上所用的單選框要大小相似，字體一致, 風格簡潔明了。

2.點擊頻率高的選項和主要功能應按從左到右的順序排列。

3.同一功能或任務的選項應放在一起，減少鼠標移動的距離。

4.如果單選框中的選項個數超過8個，考慮用下拉列表或分組框代替，它們更適合用戶體驗。

5.由于單選選項是一組相互排斥的選項，可以將單選選項置于一個分組框中，使選擇更為明確。

6.盡量使用豎向左邊對齊，這樣的單選按鈕更易于瀏覽并節(jié)省空間。

復選框

復選框：是一種可以被標記多選狀態(tài)的按鈕，讓用戶進行多項選擇。通常用于多選或者用于標記多種功能。

1.各復選框按選擇幾率的高低而從前至后排列。

2.復選框要有提示多項選擇的默認選項。

3.在同一性質結構下，同一組復選框的選擇往往可以通過點擊統(tǒng)一選項點來統(tǒng)一選擇。

4.避免一組復選框中選項個數超過8個。

5.如果選項數過多考慮用下拉列表代替，它占用的空間更少。

6.盡量采用豎向左對齊。

下拉列表框與復選框的不同使用狀態(tài)：

1.界面空間較小時要選擇下拉列表框而不選擇復選框。

2.選項數較少時使用復選框，相反使用下拉列表框。

二、列表類

下拉列表

下拉列表：是一種可折疊的列表，正常狀態(tài)為空白或默認選項。在用戶需要進行選擇時，點擊它能選擇想要的選項。

1.傳統(tǒng)式：下拉列表盡量不要過長，避免運用垂直滾動條，滾動條形式會存在上下內容不連貫性，增加用戶記憶負擔。

2.展開式：針對內容較多的下拉列表項建議使用展開式。這種方式可以方便用戶查找選擇，在視覺上具有一定的連貫性，在同一平面展開多項，給用戶一目了然的感覺。（圖1）

>圖1

3.下拉列表兩種操作狀態(tài)：

1）在列表中點擊選項后，再點擊確認按鈕進行確認；

2） 點擊列表中的選項后直接進入鏈接頁面。

列表框

列表框：內容信息量大的選項清單。用戶可能用鼠標選擇其中一個或者幾個選項。

1.列表框最上端是標題欄，左側為導航標題欄。

2.使用列表框至少10行長度，少于10行的列表最好不要有滑塊。

3.對多選列表要提供 “全部選中”和“全部取消”命令設置，可以方便用戶進行快速選擇。

4.鼠標在列表框上移動時，劃過的列能夠相應被改變顏色或亮度，以表示鼠標當前選擇在哪個列表項上。

5.當出現滾動條的時候，可以通過鼠標操作滾動條來滾動列表的內容。

6.多列表格要用顏色間隔以便區(qū)分內容信息。

樹狀視圖

樹型視圖：是一種能夠充分展現層級關系的視圖結構，使用它可以一目了然地用父子結構表示復雜的層次關系，直觀簡潔。

1.最常用的顯示方式是在父節(jié)點中顯示（+）或（-）。用戶可以通過點擊該符號方便展開或收起父結點下的子節(jié)點。

2.在文檔管理系統(tǒng)中，可以根據系統(tǒng)特性在父或子節(jié)點上設計出具有文件形式的特有圖標，把圖標加到樹狀視圖中，這樣，就會使系統(tǒng)功能更易理解。

3.在樹狀結構顯示層級的同時，避免簡陋的單純結構圖，可以根據不同系統(tǒng)風格設計出其特有的界面形象。

三、容器類

對話框

對話框：是人機交流的一種方式，用戶通過對話框內放置不同控件的操作，完成特定的命令或任務。

1.同一軟件系統(tǒng)中對話框在界面中的設計風格應一致。

2.對話框應該在所有屏幕分辯率模式下都能夠正常顯示。

3.現有標準模式（1024×768）下顯示時，對話框內所需內容應適合該屏幕。并應該確保對話框在其他的屏幕分辯率模式也能夠正確顯示。

4.避免使用橫向滾動條的對話框。

5.如果對話框帶有大量內容，盡量豎向排列。

6.二級彈出對話框的設置，不要使用過多復雜的控件元素，使用戶容易與上一級混淆。

7.在同一對話框中，不同控件應該用適當方式加以區(qū)別。

區(qū)分方式：

1.不同顏色

2.空格

3.分組框等

4.分隔符

分組框

分組框：屬于界面設計中最簡單的控件容器，用于裝載一系列具有共性的相關控件。

1.分組框不應該過度使用，會引起界面視覺混亂。

2.通常情況下，分組框的線的設置高度為 1px 。

3.在分組框內部如果有多重結構，盡量不要鑲嵌，可以通過布局來展現控件之間的關系。

4.不要將控件用作分組框的主要標題。

5.下列情況可以把控件放入一個分組框里，而不需要對里邊的每一個控件進行一一的操作。

1）同時隱藏掉一批控件

2）一起移動一批控件

3）讓一批控件共同做某種動畫

編輯框

編輯框:相當于一個簡易的文本編輯器，用戶可以在編輯框中編輯需要的文本。

1.支持不同的文字顏色、不同的字體進行編輯。

2.不要限制圖片的尺寸，支持圖文混排的輸入和顯示。

3.不同的段落可以使用不同的內容對齊方式。

4.編輯框內容過多，建議使用垂直滾動條。盡量避免使用橫向滾動條。

5.對于輸入受限的情況，應使用特殊控件。通常情況對于日期和時間，使用日期和時間特定控件。

6.編輯框的寬度要匹配其內容，寬度的長短是對期望輸入的視覺傳達。

7.如果期望的輸入沒有特別限制，應選擇與其他編輯框或控件一致的寬度，保持界面整齊。

8.在進行數字輸入時，盡量采用特定數字編輯框用于數字輸入。

9.當用戶在數字字段中輸入非數字文本時，不同信息的顯示不要出錯。

選項卡

選項卡：多個頁面并行排列，每個頁面獨立成一個容器。頁面里邊可以擺放各種控件來完成不同的功能。用戶可以通過點擊頁面旁邊或上方的“選項卡”來切換不同頁面。

1.當需要節(jié)省頁面空間；緊湊布局；且組合的幾種信息之間具有關聯(lián)性時，一般選擇選項卡應用。

2.如果用戶需要對同一選項卡中不同頁面進行對比時，就不應該使用選項卡頁面。

3.各個標題應簡短明確。字數統(tǒng)一。以便在一行內容納盡可能多的標簽。

4.在同一排標簽中，當點擊其中一項標簽時，應以不同顏色加以區(qū)分。

5.在一般的選項卡中，保持標簽只在一行內顯示。如果分為多級，容易讓用戶誤以為是其子級。

6.切換各內容標簽，時間相同，保持一致，不要有延遲。

7.不要使用滾動條，給用戶產生額外負擔。

8.如果使用圖標加文字會更容易讓用戶識別。

四、顯示類

文本

文本：用于記載和儲存文字信息。

1.在文本編輯與輸入中避免不必要的縮寫詞，不易理解。

2.驗證碼輸入中，一般英文輸入不區(qū)分大小寫。

3.句號、逗號、問號，破折號等盡量采用簡單的標點符號來顯示。

4.在同一界面中，標題類與內容類的字體，字號要統(tǒng)一。

5.日期格式

1）日期或其他規(guī)范類控件顯示格式要一致。

2）特殊控件如日期控件等不采取手工錄入，用選擇形式。

6.輸入特殊字符時，如有錯誤，要有提示顯示。

7.密碼輸入要有相關提示：密碼是否允許特殊字符；是否區(qū)分大小寫及密碼的可輸入長度。

8.有必要時規(guī)定輸入字符長度。

9.輸入文本盡量使用左對齊。

10.如果輸入字符較長的情況下，可以設置文字編輯框。

11.保持文字內容清楚。簡單明確；避免使用冗長的文字用于用戶反饋。

12.對于重要信息的文字內容使用下列兩種形式：

1）可以設置防止復制

2）在文字上印有附帶版權的logo

懸浮提示

懸浮提示: 在界面所傳達的信息中，當用戶鼠標停留在內容上或在輸入一段錯誤信息時，系統(tǒng)為了幫助用戶更明確其內容含義，會自動浮現出一段解釋說明該內容的文字。

1.一般狀態(tài)下不顯示出來，在必要說明情況下。提示信息應簡明扼要，避免過長。

2.提示信息應該與正文加以區(qū)分，可以用字體或顏色辨別。

3.鼠標移開后默認提示信息將自動消失。

4.在錯誤的判斷下，避免只有縮寫詞，應該盡量解釋到底是什么出了錯。

5.在出錯消息文字中表達要簡短、清楚、具體，說明重點。

進度條

>圖2

>圖3

>圖4

>圖5

進度條：用于顯示某種事情的進展情況。常用圖例如下：

1.進度條通常被用于加載事情的進度顯示，可以用橫向進度，也可以用其他創(chuàng)意形式代替。

2.通常情況下，是從左向右延伸，表示進度的速度及當前完成狀態(tài)。

3.但可以根據實際需要，任意選擇進度條的增長方向。

4.在其他輕松氣氛下的網站或APP上，可以制作圖案或者動效，讓它們自動跟隨進度增長。

5.可以設置一定的取值范圍，讓進度條根據取值自動更換填充內容的顏色。

滾動條

滾動條：使界面內容在水平或垂直方向滾動，以便在有限的空間內盡量多的放置內容。

1.滾動條的長度及占整個框架比要根據顯示信息量的多少來設置，以利于用戶了解顯示信息的位置和整體內容的多少。

2.盡量避免水平滾動條。橫向字數伸拉過長，會影響用戶閱讀積極性。

解決方式：1）加寬窗口、減小文本的寬度。

2）使文本自動換行。

3.可以改變傳統(tǒng)模式，根據實際情況設計出最符合界面的精確指示。

結 語

上述方面談到了管理信息系統(tǒng)中幾類控件的設計規(guī)范與原則。以按鈕類、列表類、容器類、顯示類為舉例，逐條列舉出軟件系統(tǒng)的一些基本規(guī)律及設計過程中的注意事項。如果系統(tǒng)界面控件能在其強大的使用功能基礎上，再加上專業(yè)的規(guī)范設計，舒適的用戶體驗，那么，在控件對于后臺管理系統(tǒng)的操作性及可視化上，都會發(fā)揮出更多的功能與作用，讓整個信息系統(tǒng)在實際操作中更具有良好的用戶體驗性?！?/p>

The Analysis of User Experience Design of Controls in Information System

LI Xue-jie
(China Industrial Bank co.,Ltd. Information & Technology Dept.,Shanghai 201201,China )

Human-computer interaction design in information system is a science of studying interactions between software systems and users. Users communicate with software systems through the well-designed user interfaces in order to accomplish tasks and get good experiences. This article discusses the definitions and design principles about the controls in information systems, which is the main component in human-computer interaction, and introduces examples of how well-designed controls contributing to user interfaces.

control; Human-computer interaction; management information system

G202

A

1008-2832（2017）01-0092-03

檢 索:www.artdesign.org.cn