一個Web系統的介面設計和開發.1

作者：linnchord

早在中國IT業方興未艾之時，電腦應用系統主要以功能實現為主，幾乎沒有介面設計這個概念。時至今日，隨著電腦和網路的不斷普及，社會資訊化程度日益加深，使用者和市場的不斷成熟，人們已經不僅僅滿足於“夠用”，而是更加強調“好用”“易用”；因此，不論是普通終端使用者的個人軟體，還是公司專屬應用程式的大型系統，介面設計在系統構建中都成為了一個非常重要的方面。

但是，（至少在中國）由於IT業發展滯後、市場還不夠成熟等原因，在絕大多數企業中，介面設計在軟體系統開發中還沒有獲得與之重要性相匹配的一席之地，並且在企業運作和協調中也沒有形成成熟的模式和解決方案，如何做好介面設計和開發，仍然是大家不斷研究探討的一個問題。

我寫這篇文章，主要內容是我參加一個面向質檢行業的Web系統介面設計和開發工作的過程，包括其間的一些構思和想法；其目的，就是希望能和大家一起探討一下這個問題，希望能供大家參考，起到拋磚引玉的作用。

另外，作者同時承擔了系統開發和介面設計工作，所以，雖然這是一篇討論介面設計的文章，作者也盡量把文章限制在介面設計範圍內，但也有可能包含一些開發和系統設計的內容，請大家辨析清楚，歡迎指正。

1.工作流程

，是整個開發過程中與介面設計相關的主要流程工作。

從最初需求分析開始，我就加入項目，自始自終參加整個開發過程。

在需求分析階段，參與了對客戶的訪問和調研；
在概要設計階段，參與了部分系統設計分析工作；
在詳細設計階段，完成了整個系統介面設計和Demo製作，並提交使用者反饋；
在代碼開發階段，參與了系統資料表現層的設計開發。

2.需求分析

在需求分析階段，主要針對介面互動相關問題，對使用者進行若干調研。

主要包括以下內容

·受眾使用者群調查
·系統使用環境調查
·受眾使用者使用習慣調查
·使用者對舊版本軟體使用方式調查

這一階段，由於成本原因，我並沒有直接存取客戶進行調查。工作主要是提出某些具體問題，由需求調研人員，以問卷或口頭問答方式，對客戶進行調研。另外，公司經驗豐富的客服人員和市場人員，也是非常重要的需求來源之一。

本系統的客戶群主要為國家省市下屬質檢單位，最終受眾年齡從年輕到較高齡都有。對於普通國家機關人員，一般對電腦系統和網路不夠熟悉，電腦環境一般，甚至比較差，少有配置優良的環境。在這種環境下，使用者對電腦使用一般沒有使用傾向，大多更適應手工操作。對本系統的前代使用，最主要意見是使用困難，不方便。

還有其他具體調查反饋，如使用者基本不使用滑鼠右鍵，年齡較大的使用者難以看清密集的較小文字等等。

3.介面設計原則

在概要設計階段，根據需求階段的調研結果，我整理了系統介面設計的基本原則。因為在代碼開發階段，很多時候介面的具體製作是由開發人員直接寫代碼，因此必須確定一定的原則和規範，以保證系統介面的統一。

一般適用原則

·簡單明了原則：使用者的操作要儘可能以最直接最形象最易於理解的方式呈現在使用者面前。對操作介面，直接點擊高於右鍵操作，文字表示高於表徵圖示意，儘可能的符合使用者對類似系統的識別習慣。

·方便使用原則：符合使用者習慣為方便使用的第一原則。其它還包括，實現目標功能的最少運算元原則，滑鼠最短距離移動原則等。

·使用者導向原則：為了方便使用者儘快熟悉系統，簡化操作，應該儘可能的提供嚮導性質的操作流程。

·即時協助原則：使用者需要能隨時響應問題的使用者協助。

·提供進階自訂功能：為熟悉電腦及軟體系統的進階使用者佈建自訂功能，可以對已經確定的常規操作以及系統的方方面面進行符合自身習慣的自訂設定。包括常規操作、介面排版、介面樣式等種種自訂。

·介面色彩要求：電腦螢幕的發光成像和普通視覺成像有很大的不同，應該注意這種差別作出恰當的色彩搭配。對於需使用者長時間使用的系統，應當使使用者在較長時間使用後不至於過於感到視覺疲勞為宜。例如輕鬆的淡彩為主配色，灰色係為主配色等等。切忌色彩過多，花哨豔麗，嚴重妨礙使用者視覺互動。

·介面平面版式要求：系統樣式排版整齊劃一，儘可能劃分不同的功能區域於固定位置，方便使用者導航使用；排版不宜過於密集，避免產生疲勞感。

B/S構架適用原則

·頁面最小：由於Web的網路特性，儘可能減小單頁面載入量，降低圖片檔案大小和數量，加快載入速度，方便使用者體驗。

·螢幕適應：Web介面需要適應不同使用者螢幕大小。

·瀏覽器安全色：需要適應不同瀏覽器瀏覽效果，雖然目前可不考慮不同瀏覽器差別，但仍需考慮IE瀏覽器版本差異帶來的用戶端不同效果。

·最少垂直滾動：儘可能減少垂直方向滾動，儘可能不超過兩屏。

·禁止水平滾動：由於將導致非常惡劣的客戶體驗，儘可能禁止瀏覽器水平滾動操作。

·避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合使用者體驗習慣，儘可能避免。

本系統應用原則

·瘦用戶端要求：由於客戶應用環境配置大多較低，除伺服器可單獨配置較靈活外，應該保證瘦用戶端，使使用者容易使用。例如盡量不要使用複雜的JS指令碼和HTC組件，不要在用戶端使用IE整合XML/XSLT等等。

·大資料量表格的水平擴充要求：本系統中存在大資料量的列表，需要較大的互動介面支援，為避免水平滾動，應儘可能擷取大的螢幕水平空間。

·案頭面板導航簡化操作：為了實現方便簡捷的使用者操作，應該保證使用者絕大多數操作可通過首頁案頭面板的導航來實現。

·使用者自適應定義：提供較多的可訂製功能，尤其對案頭面板提供強大的定製功能；使使用者能夠將最常用的功能定義到案頭面板，每次登入即可直接使用，簡化使用者操作。

·使用者常用操作記錄定義：對某些需定義操作的功能如查詢、搜尋等，提供系統自動記憶和客戶定製功能，系統可自動記憶使用者前1~3次操作，或者使用者可自訂動作記錄，方便以後使用。

·大資料量表格的水平擴充要求：本系統中存在大資料量的列表，需要較大的互動介面支援，為避免水平滾動，應儘可能擷取大的螢幕水平空間。

4.系統分析

在概要設計過程中，介面設計人員需要瀏覽需求分析報告，瞭解使用者的工作流程，和整個系統功能，再根據這些原始需求功能，歸納整理分析，並針對使用者互動設計需要，提出意見，參與系統設計。

其中包括對原始功能的分類歸納，提出系統互動需要的新功能，對使用者功能實現的優先順序進行定義等等。

例如，提出使用者自訂快捷面板功能，常用操作自動記錄功能等，需要在概要設計時儘早提出，以方便作好系統規劃。

另外，需要對整個系統中的常見功能有比較清晰的瞭解，歸納整個系統介面互動中常見的互動形式，例如在本系統中就包括列表、查詢、搜尋、填寫表單、項目分解、項目選擇、審批、報告等等；只有清晰的瞭解整個系統需求，才能較好的把握整個介面設計的統一性。當然，這也和介面設計人員的經驗有很大關係。

後篇還有5小節，包括

·主介面設計
·典型介面
·典型互動模式
·Demo開發
·結語