基于Ｗｅｂ信息系統的ＷＵＩ設計

[摘 要] 本文闡述了WUI在Web信息系統中的重要性，論述了WUI設計的基本原則，并給出了輸入界面和輸出界面的的設計方法#65377;

[關鍵詞] Web;信息系統;WUI

[中圖分類號]F270.7;TP311[文獻標識碼]A[文章編號]1673-0194(2008)13-0084-02

一#65380;引 言

眾所周知，Windows 客戶端軟件的主界面模式是非常成功的，這種模式已經被世界上絕大多數的計算機用戶所接納#65377;所以在設計Web信息系統用戶界面時，人們會自然而然地參考Windows客戶端軟件的主界面的模式#65377;在Web信息系統中，客戶端與服務器之間的信息交換是通過超文本標記語言(HTML)和超文本傳輸協議(HTTP)實現的，對于用戶來說，看到的就是一個個的Web頁面，系統的人機交互就是通過Web頁進行的，在具有類似功能的多個軟件中，具有友好頁面的Web系統，對用戶來說將更具親和力和競爭力，直接影響Web系統的使用壽命和推廣程度，可以說，網絡用戶界面即WUI，對于用戶而言就是整個軟件系統，因此，在進行Web信息系統的WUI設計時，要從用戶的角度出發，使設計的界面具有簡潔性#65380;友好性#65380;方便性的特點#65377;

二#65380;WUI設計的原則

對于Web信息系統來說，它們采用的軟件技術是成熟的和相似的，而且大多數用戶對系統所使用的技術細節并不關心，用戶所關心的是功能是否符合需求，使用是否方便#65380;容易，界面是否美觀#65377;一個好的Web系統，其功能需要通過用戶界面來表現，用戶界面也一定要適合于軟件的功能#65377;Web信息系統通過WUI與用戶打交道，因此，WUI的設計是Web信息系統設計的關鍵工作之一#65377;下面就WUI設計的幾個原則進行闡述#65377;

1. 界面容易理解

如果用戶很難理解界面的意圖，那么使用起來肯定很費勁#65377;所以“容易理解”是“容易使用”的前提條件;用戶界面中的所有元素都不能出現錯誤文字，措詞必須“正確#65380;準確”，沒有令人費解的文字，所有的界面元素應當提供充分而必要的提示;文字信息和界面布局盡量和用戶群體的使用習慣相匹配;對于復雜的用戶界面而言，最好提供用戶向導或聯機幫助;一個系統的WUI應盡量保持風格一致，這樣可以減少用戶的記憶量，減少出錯幾率，并且可使用戶迅速積累操作經驗#65377;

2. 及時反饋操作信息

系統應提供信息反饋，交互系統的反饋是指用戶從計算機一方得到信息，表示計算機對用戶的動作所做的反應，如果系統沒有反饋，這將使用戶感到迷茫和不安，用戶就無法判斷他的操作是否為計算機所接受，是否正確，以及操作的效果是什么#65377;所以及時反饋信息很重要，至少要讓用戶心里有數，知道該任務處理得怎么樣了，有什么樣的結果#65377;

3. 防錯和出錯處理

用戶在使用軟件的過程中，不可避免地會出現一些錯誤的操作#65377;倘若用戶不小心輸入了錯誤的數據或者錯誤地刪除了有用的數據，而軟件傻乎乎地執行了，那么用戶肯定很惱火，以后就不敢放心地使用軟件#65377;因此，在設計用戶界面時必須考慮防錯處理，目的是讓用戶不必為避免犯錯誤而提心吊膽地操作，從而失去對系統的信任#65377;

常見的防錯處理措施有:提供對輸入數據進行校驗的功能;對于不同的用戶，其操作權限不同，設計時應根據用戶的角色，顯示和隱藏系統的某些功能，界面設計應具有一定的智能，使得界面能靈活地來滿足不同角色用戶的需求;執行破壞性操作之前，應當獲得用戶的確認;盡量提供undo功能，如果發生意外或錯誤，應當及時給出告警消息和錯誤消息，提醒用戶做出正確的處理#65377;

4. 界面設計要考慮系統的用戶群

一個軟件產品可能有許多類型的用戶，在設計用戶界面時應當盡可能多地了解用戶的使用習慣和水平，努力使用戶在操作軟件的時候感覺不到差異和麻煩#65377;如果不能使所有類型的用戶都感到滿意，那么重點滿足以下類型的用戶:“主流用戶”，“有影響力的用戶”#65377;在一個高校的信息系統中，學生#65380;教師#65380;管理人員是一個特定的用戶群，開發的Web信息系統一定要滿足系統的主流用戶，努力提升用戶群體對軟件產品的好感，要有效地收集用戶的使用反饋#65377;

5. 最少操作步驟#65380;最高效率

設計用戶界面時應當盡可能地替用戶著想，用戶應當用最少的操作步驟完成某項操作任務，獲得最高的使用效率#65377;要設計一個高效的用戶操作界面，必須深入分析系統的業務流程#65380;用戶使用習慣，盡管減少一個操作步驟而完成任務所節省的時間微乎其微，但是用戶的感覺反差卻很強烈，所以，業界流傳“多一個步驟，流失10%的用戶”的說法#65377;此外，如果要連續進行多次操作，而且每次操作要輸入的信息基本相同，只需改變部分內容，提高輸入效率，設計時要能夠保留提交前的頁面#65377;

三#65380;WUI設計方法

WUI是由一個個的Web頁組成的，要設計一個友好的Web頁面，不僅必須熟練使用一種頁面編輯工具如dreamweaver進行合理的布局，保證界面的總體布局應當有一定的邏輯性，頁面上的界面元素的布局應當整齊清爽，而且還需要掌握一些界面色彩的設計原則，能熟練使用一種圖形編輯工具如photoshop，保持界面的色彩合理，重點突出#65377;一個Web系統的WUI又分為輸入界面和輸出界面兩種，這兩種界面的設計除了遵循上述的設計原則外，具體的設計方法還有區別，下面就談談這兩種界面的設計方法#65377;

1. 輸入界面的設計

在Web信息系統中，輸入界面是用戶用來向系統輸入數據的頁面，它是系統的重要組成部分，它常占用戶大部分使用時間，因此使用方便是輸入界面設計最重要#65380;最基本的目標，設計時要盡可能簡化用戶工作，使得用戶可以有效地進行數據輸入并且擁有幫助功能#65377;在輸入數據時可以用鼠標輕松選擇，從而減少了鍵盤輸入的出錯率，減少用戶的輸入量#65377;當輸入的信息之間有關聯時，可使用SELECT控件的onChange事件，通過選擇第一個SELECT中的某項，來相應地動態創建第二個SELECT中的OPTION對象，使用下拉列表連動來提高輸入速度，使用下拉列表來避免文本輸入框的輸入錯誤，避免從大量的數據中選擇輸入;使用自動填入已輸入過的內容或需重復輸入的內容來減少輸入量，提高輸入速度#65377;

2. 輸出界面的設計

交互界面中除了輸入界面外還有輸出界面，提交了輸入的數據后，系統必須有輸出界面來反饋系統的執行結果，可以明確告訴用戶，當前的操作結果和進度#65377;系統反饋信息的方式可以是多種多樣的，如文字#65380;圖形#65380;聲音#65380;文字頁面#65380;表格等，絕大多數的反饋信息就是輸出Web頁面#65377;

對于一般的輸出頁面，在頁面設計語言中有兩種實現方式:一種是在彈出的新頁面中反饋信息，另一種是在原窗口刷新頁面，即用新的頁面覆蓋老頁面，這兩種方式各有優缺點，分別可以應用到不同的場合#65377;彈出新頁面的主要優點是在操作對話窗口時看得到背后的內容，有利于增強記憶和理解，可以返回到提交前的界面繼續操作;原窗口刷新頁面的主要優點是頁面空間通常比彈出窗口的大，可以在對話頁面中顯示豐富的內容;遞交數據后，顯示從服務器端返回的信息很方便，可以直接插入到原頁面中，不會有煩人的窗口閃動，但原窗口刷新的主要缺點是由于新頁面覆蓋了老頁面，不利于記憶和理解#65377;對于消息框一類的反饋頁面，開發工具提供了現成的界面標準件，實現起來很容易#65377;此外輸出界面的設計還應考慮到不同用戶#65380;不同場合的輸出的需求，不能千篇一律，輸出的內容可以根據要求定制，輸出的方式可以是表格#65380;文字#65380;圖形等多種形式#65377;

四#65380;結 論

WUI是基于Web信息系統的關鍵工作之一，在WUI設計時一定要注意其設計的原則和方法，堅持“以人為中心”的設計理念，充分考慮人的因素，使設計的頁面布局合理，符合邏輯和工作流程，操作方式符合大眾用戶的習慣#65377;

主要參考文獻

[1] 林銳，唐勇，石志強. Web軟件用戶界面設計指南[M]. 北京:電子工業出版社，2005.

[2] 單蓉. 淺談軟件的用戶界面設計[J]. 渭南師范學院學報，2005，20(S1).

[3] [美]R J Torres. 用戶界面設計與開發精解[M]. 北京:清華大學出版社，2002.

[4] 周俐麟，陳專紅. 用JavaScript改進Web課件中的用戶界面設計[J]. 湖南理工學院學報，2005，18(1).