李雪潔

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

關(guān)鍵詞：UI設(shè)計(jì) 用戶體驗(yàn) 向?qū)浇缑?控 件

檢 索：www.artdesign.org.cn

一 、界面UI設(shè)計(jì)概述

1. 元素一致性

根據(jù)企業(yè)現(xiàn)有的VI視覺設(shè)計(jì)規(guī)范，提取其具有相同含義的設(shè)計(jì)元素，可以應(yīng)用到企業(yè)后臺管理軟件界面UI設(shè)計(jì)中。這樣不僅培養(yǎng)用戶在視覺感官上與企業(yè)VI系列設(shè)計(jì)保持一致，也可以在已熟悉的企業(yè)現(xiàn)有的設(shè)計(jì)基礎(chǔ)上快速掌握與了解系統(tǒng)用戶界面。各系統(tǒng)界面風(fēng)格應(yīng)保持一致。通過提供一種統(tǒng)一而又穩(wěn)定的視覺感覺，使得用戶對界面熟悉而又可預(yù)測。

2. 簡單而美觀

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

通常在界面設(shè)計(jì)中，擴(kuò)大功能和保持簡單有時(shí)是相互矛盾的。一個(gè)有效的設(shè)計(jì)應(yīng)該平衡這些目標(biāo)。界面的簡潔是要讓用戶便于使用、便于了解、并能減少用戶操作錯(cuò)誤的可能性?？梢詫⒔缑嬖O(shè)計(jì)元素以審美的角度減少到進(jìn)行充分交流所需的最少量。在字體、顏色、圖標(biāo)、按鈕、布局和對話框的設(shè)計(jì)上應(yīng)簡單而醒目，設(shè)計(jì)時(shí)應(yīng)盡量使用人們對自然的反映和語意，簡單與熟悉相互關(guān)聯(lián)，盡可能嘗試?yán)糜脩粢延械膶徝篮椭R閱歷。

3. 注重用戶體驗(yàn)

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

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

4. 擁有良好的直覺特征

用生活中熟悉的表象作為設(shè)計(jì)元素，給用戶任務(wù)提供直接而直觀的感覺。通過用戶利用他們已有的審美習(xí)慣與經(jīng)驗(yàn)，使得預(yù)測和熟悉系統(tǒng)界面表示的行為更加容易。界面設(shè)計(jì)支持用戶認(rèn)知而不是記憶。用戶記起與一個(gè)熟悉的事物相關(guān)聯(lián)的意義要比他們記起一個(gè)特定命令的名稱要容易得多。

二、界面控件的視覺傳達(dá)設(shè)計(jì)

1. 窗體 窗口

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

1）將背景做適當(dāng)延伸設(shè)計(jì)。以適應(yīng)不同的版式效果。經(jīng)過設(shè)計(jì)的背景使頁面在高屏幕分辯率時(shí)仍具有一定的完整性 。

2）應(yīng)用界面自適應(yīng)技術(shù)，當(dāng)版式寬度大于1024像素時(shí)，頁面內(nèi)容會自動(dòng)伸縮，充滿整個(gè)版面。頁面的伸縮并不改變圖文自身的大小，只影響其文字、背景面積的排布。

2. 布局和間距

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

3. 圖標(biāo)、圖片

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

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

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

2）GIF：網(wǎng)頁圖片常用格式，支持透明，優(yōu)點(diǎn)是壓縮的文件小，支持GIF動(dòng)畫。缺點(diǎn)是不支持半透明，顏色數(shù)最多只能顯示256種顏色，透明圖標(biāo)的邊緣會有鋸齒。要解決此問題，必須在存成此格式時(shí)候，添加相同背景色的雜邊；

3）JPG：有損壓縮，優(yōu)點(diǎn)是文件小，圖像顏色豐富。缺點(diǎn)是不支持透明和半透明；

4）ICO：WINDOWS系統(tǒng)的圖標(biāo)文件格式，支持多通道透明，支持32位真彩色。

4. 顏色

UI界面設(shè)計(jì)中整體色彩搭配要融為一體，起提示作用的部分要清楚醒目。不要強(qiáng)迫用戶使用自己不喜歡的顏色，可以開發(fā)讓用戶自己修改界面的顏色的功能?？梢栽黾映绦?qū)ιび脩舻目稍L問性，使程序可運(yùn)行在單色顯示器上。確保在文本和背景色之間存在良好的對比。

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

5. 文字

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

三、人機(jī)交互中的用戶體驗(yàn)

人機(jī)交互是一門研究系統(tǒng)與用戶之間的交互關(guān)系的學(xué)問。人機(jī)交互界面通常是指用戶可見的部分。用戶通過人機(jī)交互界面與系統(tǒng)交流，并進(jìn)行操作。下面以控件為例說明人機(jī)交互中用戶體驗(yàn)的應(yīng)用。

1. 按 鈕

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

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

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

2. 列表視圖

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

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

3. 消息框

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

1）警告框：用于確保用戶可以得到某些信息。當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作。

2）確認(rèn)框：用于使用戶可以驗(yàn)證或者接受某些信息。當(dāng)確認(rèn)框出現(xiàn)后，用戶需要點(diǎn)擊確定或者取消按鈕才能繼續(xù)進(jìn)行操作。

3）提示框：用于提示用戶在進(jìn)入頁面前輸入某個(gè)值。當(dāng)提示框出現(xiàn)后，用戶需要輸入某個(gè)值，然后點(diǎn)擊確認(rèn)或取消按鈕才能繼續(xù)操縱。

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

同樣，不要使用多個(gè)效果相同的選項(xiàng)按鈕。例如，除非有不同的操作結(jié)果，否則不要同時(shí)提供“否”和“取消”按鈕?！胺瘛卑粹o意味執(zhí)行操作，而“取消”應(yīng)該取消操作。在消息框彈出時(shí)會自動(dòng)選擇默認(rèn)按鈕，應(yīng)將最安全的或最常用的選項(xiàng)作為默認(rèn)按鈕。

結(jié) 語

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

對外將體現(xiàn)在企業(yè)文化團(tuán)隊(duì)建設(shè)上，部門的形象展示上。通過加強(qiáng)企業(yè)UI形象設(shè)計(jì)，才會讓企業(yè)在同行業(yè)中占有更重要的地位，更好的展示企業(yè)的良好面貌與綜合實(shí)力。