信息時代企業后臺管理界面UI設計探析

李雪潔

摘 要：信息時代，企業后臺管理UI界面設計是軟件與用戶交互中最感官而直接的層面。界面如同人的面孔，具有吸引用戶的直接優勢。界面設計的好壞決定用戶對軟件的第一印象。良好的界面能夠引導用戶自己順利完成相應的操作，起到一定的向導作用，并給用戶帶來輕松愉悅的感受和成功的感覺。相反，由于界面設計的失敗讓用戶有挫敗感，再實用強大的功能都可能在用戶的畏懼與放棄中付之東流。本文從一個設計師的角度來探討企業后臺管理界面中的UI設計。

關鍵詞：UI設計 用戶體驗 向導式界面 控 件

檢 索：www.artdesign.org.cn

一 、界面UI設計概述

1. 元素一致性

根據企業現有的VI視覺設計規范，提取其具有相同含義的設計元素，可以應用到企業后臺管理軟件界面UI設計中。這樣不僅培養用戶在視覺感官上與企業VI系列設計保持一致，也可以在已熟悉的企業現有的設計基礎上快速掌握與了解系統用戶界面。各系統界面風格應保持一致。通過提供一種統一而又穩定的視覺感覺，使得用戶對界面熟悉而又可預測。

2. 簡單而美觀

視覺形象中簡潔、美觀、快樂和有趣味的形象為人的視覺所樂于接受。而在傳達信息過程中，強烈的、明確的和新穎的符號形式能夠加強傳達的效果。在進行UI界面設計時，設計師應綜合兩方面的因素，將信息傳達和視覺的享受融為一體，在實現界面實用功能基礎上提供具有審美趣味和價值的視覺傳達設計效果。

通常在界面設計中，擴大功能和保持簡單有時是相互矛盾的。一個有效的設計應該平衡這些目標。界面的簡潔是要讓用戶便于使用、便于了解、并能減少用戶操作錯誤的可能性。可以將界面設計元素以審美的角度減少到進行充分交流所需的最少量。在字體、顏色、圖標、按鈕、布局和對話框的設計上應簡單而醒目，設計時應盡量使用人們對自然的反映和語意，簡單與熟悉相互關聯，盡可能嘗試利用用戶已有的審美和知識閱歷。

3. 注重用戶體驗

用戶體驗關注的是用戶的行為習慣和心理感受，就是琢磨用戶怎么用軟件才覺得得心應手。要顧及用戶的使用感受。從心理學意義來說，可分為感覺（視覺、觸覺、聽覺等）和情感兩個層次。以人為中心，使系統功能明確，安排合理，讓用戶通過最少的判斷和最少的操作達到簡單使用和愉悅的目的，是企業在軟件開發過程中應著重思考的一個方面。

在界面中要盡可能使用用戶本身熟悉的語言，而不是開發設計者熟悉的語言。 因為在設計界面時要考慮人類大腦處理信息的限度，人類的短期記憶存在不穩定、有限的特征，24小時內平均存在25%的遺忘率。所以對用戶來說，瀏覽信息要比記憶更容易。用戶盡量通過已掌握的知識來使用界面，不應超出一般常識，想用戶所想，做用戶所做，盡量要按照用戶自己的方法理解和使用軟件系統。一個有序的界面能讓用戶輕松地使用，瀏覽者能自由地做出選擇，且所有選擇是可根據需求而改變的。

4. 擁有良好的直覺特征

用生活中熟悉的表象作為設計元素，給用戶任務提供直接而直觀的感覺。通過用戶利用他們已有的審美習慣與經驗，使得預測和熟悉系統界面表示的行為更加容易。界面設計支持用戶認知而不是記憶。用戶記起與一個熟悉的事物相關聯的意義要比他們記起一個特定命令的名稱要容易得多。

二、界面控件的視覺傳達設計

1. 窗體 窗口

目前企業后臺管理界面軟件設計默認的窗體大小標準為1024×768。由于用戶屏幕大小可能設置不一，且寬屏已日漸成顯示主流，1440×900、1280×1024也普遍存在。因此，在設計期間要考慮在不同顯示器下界面延展或伸拉的完整效果。一般有兩種措施來解決由于顯視屏大小的不同給版式設計帶來的不便：

1）將背景做適當延伸設計。以適應不同的版式效果。經過設計的背景使頁面在高屏幕分辯率時仍具有一定的完整性 。

2）應用界面自適應技術，當版式寬度大于1024像素時，頁面內容會自動伸縮，充滿整個版面。頁面的伸縮并不改變圖文自身的大小，只影響其文字、背景面積的排布。

2. 布局和間距

在不同顯示分辨率下，常常會出現控件被伸拉變形的狀態。這種情況下，最好采用百分比的形式進行頁面布局，按比例設計可以適用于任何分辨率下的布局排列。界面設計中版式分割要接近黃金點比例，使得整體界面寬度跟較長的那部分區域比為約等于1： 0.618。保持頁面的視覺平衡。避免擁擠和對空間的浪費，應合理地利用空間。不要讓布局本身成為突出的UI元素，保持視覺簡潔。避免控件與數據的過分集中而導致的視覺疲勞和判斷錯誤。如果在多個頁面中存在類似的控件，應該盡量使得它們在各個頁面中出現的位置/大小一致。盡量讓窗體中顯示大部分常用功能。

3. 圖標、圖片

在后臺界面設計中，圖標、圖片的色調和風格要保持一致，不同界面中的同一功能應使用同樣的圖標或圖片來展示。圖標風格大致分為：簡約或精致，平面或立體，古典或現代，寫實或卡通，單色或多彩，絢麗或柔和，抽象或具體，有框或無框。無論做任何風格的圖標，與系統軟件整體設計協調一致是第一位的。通常企業軟件系統的UI圖標設計應以該行業性質為背景，滿足UI設計“用戶研究，交互設計，視覺設計，可用性測試”四個重要階段。

圖標的尺寸常有以下幾種：16×16，24×24，32×32，48×48，64×64，128×128，256×256；圖標的常用格式有以下幾種：

1）PNG：無損壓縮格式，支持透明，兼顧圖像質量和文件大小。但是請注意，PNG格式在網頁中，IE6.0或者之前的所有版本不支持透明和半透明，可加入代碼解決；

2）GIF：網頁圖片常用格式，支持透明，優點是壓縮的文件小，支持GIF動畫。缺點是不支持半透明，顏色數最多只能顯示256種顏色，透明圖標的邊緣會有鋸齒。要解決此問題，必須在存成此格式時候，添加相同背景色的雜邊；

3）JPG：有損壓縮，優點是文件小，圖像顏色豐富。缺點是不支持透明和半透明；

4）ICO：WINDOWS系統的圖標文件格式，支持多通道透明，支持32位真彩色。

4. 顏色

UI界面設計中整體色彩搭配要融為一體，起提示作用的部分要清楚醒目。不要強迫用戶使用自己不喜歡的顏色，可以開發讓用戶自己修改界面的顏色的功能。可以增加程序對色盲用戶的可訪問性，使程序可運行在單色顯示器上。確保在文本和背景色之間存在良好的對比。

一般情況下，界面元素可以使用中間色調，在256色模式下使用中間色調可以避免視覺上的刺激，適合長時間停留閱覽。界面設計中，活動對象的色彩應該鮮明；而非活動對象的色彩應該暗淡。企業常用搭配的灰色系色調有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。但灰色背景的元素在界面上會讓人感覺到不可編輯性，所以不能大面積使用。

5. 文字

UI設計中文字是作為占據界面設計中重要比率的元素，它的字體、大小、顏色和排布對軟件界面整體設計十分重要。文字主要包括標題、信息、正文、鏈接等幾種主要形式。標題是內容的簡概說明，一般比較醒目、優先編排。標題文字的字體和大小可以根據當前界面設計內容及整體布局來定。正文信息內容里，文字以中號，黑色或中性色系有利于閱讀為基本原則。不可修改的字段，一般使用灰色文字顯示。鏈接文字以醒目顯示，以便與一般內容文字區分。鼠標劃過鏈接文字的顏色會改變。文字與背景色搭配應合理協調，反差不宜太大，少用刺目、強烈色調。盡量使用純文本，而不是文字形式的圖片，圖片要遠遠大于純文本，影響頁面顯示速度。

三、人機交互中的用戶體驗

人機交互是一門研究系統與用戶之間的交互關系的學問。人機交互界面通常是指用戶可見的部分。用戶通過人機交互界面與系統交流，并進行操作。下面以控件為例說明人機交互中用戶體驗的應用。

1. 按 鈕

按鈕：用于響應用戶的點擊操作，并在用戶點擊之后告知程序，從而去執行某種功能。常用按鈕包括像“確定”、“取消”、“關閉”和“幫助”等命令按鈕。同一系統中按鈕大小應基本相近，名稱不要太長，免得占用過多的界面位置，給閱讀帶來不便。

對于含有按鈕的對話框不應該支持縮放，避免在窗口縮小時遮住右上方常用按鈕。要將常用按鈕與對話框主體分開，這種分開使常用按鈕更易于查找和識別。如果頁面內容較多，需要垂直滾動條時，同等功能的按鈕應保持在內容頂部或底部始終呈現，方便用戶隨時看到。

排列在底部的常用按鈕右對齊，通常依照按鈕的使用頻率及重要程度從左到右依次排列，這樣適合用戶的閱讀習慣。當只有一個常用按鈕時，一般將其居中放置。避免使用多行或多列的命令按鈕，多行或多列的命令按鈕對用戶來說會產生煩躁情緒，并易混淆，在點擊時容易產生錯誤。

2. 列表視圖

列表視圖：系統數據庫中的列表視圖是一個虛擬表，其內容由查詢定義。列表視圖包含一系列帶有名稱的行和列數據。行和列的數據來自定義視圖的查詢所引用的表，并且在引用視圖時動態生成。列表視圖至少15行，少于15行的列表視圖不要有滑塊，不需要滾動條。那些被經常使用的查詢可以被定義為常規默認，從而使用戶不必為以后的操作每次指定全部的條件。

通過視圖，用戶只能查詢和修改他們所能見到的數據。數據庫中的其它數據則既看不見也取不到。數據庫授權命令可以使每個用戶對數據庫的檢索限制在特定的數據庫對象上，但不能授權在數據庫特定行和特定的列上。在列表可排序時采用可單擊的表頭，可單擊的表頭只應用于排序。

3. 消息框

消息框：用于在必要的時候彈出來給用戶一個明確的提示，通常由“提示信息+確認”按鈕組成。可分成警告框、確認框和提示框三種。

1）警告框：用于確保用戶可以得到某些信息。當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。

2）確認框：用于使用戶可以驗證或者接受某些信息。當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。

3）提示框：用于提示用戶在進入頁面前輸入某個值。當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。

區分消息框的類型，采用帶“確定”按鈕的信息消息框向用戶提供有警告的信息。采用帶“是”、“否”，以及“確定”、“取消”按鈕的確認框在繼續進行前需要用戶輸入的情形下予以確認。采用危急提示框可以通知用戶進行工作前需要修改一個錯誤。避免不必要的消息框，不要用出錯消息來報告正常行為，而應該用來報告不正常或不期望的結果。不要對很容易恢復的操作進行確認。問用戶問題時，采用“是”和“否”按鈕代替“確定”和“取消”按鈕，這樣使問題易于理解。確保消息框選項按鈕與文本一致，例如：不要用“是”和“否”為非提問消息的響應。

同樣，不要使用多個效果相同的選項按鈕。例如，除非有不同的操作結果，否則不要同時提供“否”和“取消”按鈕。“否”按鈕意味執行操作，而“取消”應該取消操作。在消息框彈出時會自動選擇默認按鈕，應將最安全的或最常用的選項作為默認按鈕。

結 語

在上述方面談到了企業后臺管理界面UI設計中涉及到的幾個方面。雖然企業UI界面設計屬于IT后臺展示部分，大多數系統或平臺只是企業內部員工使用，但在開發建設軟件系統的同時，在其強大的使用功能基礎上，再加上專業的界面設計，舒適的用戶體驗，那么，軟件系統對內將充分體現企業形象，提高部門影響力與凝聚力，讓員工在使用過程中心情愉悅，集中精力的投入到工作中，提高工作效率。

對外將體現在企業文化團隊建設上，部門的形象展示上。通過加強企業UI形象設計，才會讓企業在同行業中占有更重要的地位，更好的展示企業的良好面貌與綜合實力。