一個(gè)Web系統(tǒng)的界面設(shè)計(jì)和開(kāi)發(fā)

....Web工作流程（下圖，是整個(gè)開(kāi)發(fā)過(guò)程中與界面設(shè)計(jì)相關(guān)的主要流程工作）在需求分析階段，參與了對(duì)客戶(hù)的訪問(wèn)和調(diào)研；在概要設(shè)計(jì)階段，參與了部分系統(tǒng)設(shè)計(jì)分析工作；Demo在代碼開(kāi)發(fā)階段，參與了系統(tǒng)表現(xiàn)層的設(shè)計(jì)開(kāi)發(fā)。需求分析主要包括以下內(nèi)容·受眾用戶(hù)群調(diào)查·系統(tǒng)使用環(huán)境調(diào)查·受眾用戶(hù)使用習(xí)慣調(diào)查·用戶(hù)對(duì)舊版本軟件使用情況調(diào)查重要的需求來(lái)源之一。使用困難，不方便。還有其他具體調(diào)查反饋，如用戶(hù)基本不使用鼠標(biāo)右鍵，年齡較大的用戶(hù)難以看清密集的較小文字等等。界面設(shè)計(jì)原則統(tǒng)一。一般適用原則·直接點(diǎn)擊高于右鍵操作，文字表示高于圖標(biāo)示意，盡可能的符合用戶(hù)對(duì)類(lèi)似系統(tǒng)的識(shí)別習(xí)慣?！な髽?biāo)最短距離移動(dòng)原則等。·用戶(hù)導(dǎo)向原則：為了方便用戶(hù)盡快熟悉系統(tǒng)，簡(jiǎn)化操作，應(yīng)該盡可能的提供向?qū)再|(zhì)的操作流程?！?shí)時(shí)幫助原則：用戶(hù)需要能隨時(shí)響應(yīng)問(wèn)題的用戶(hù)幫助?！ぬ峁└呒?jí)自定義功能：為熟悉計(jì)算機(jī)及軟件系統(tǒng)的高級(jí)用戶(hù)設(shè)置自定義功能，可以對(duì)已經(jīng)確定的常規(guī)操義?！そ缑嫔室螅河?jì)算機(jī)屏幕的發(fā)光成像和普通視覺(jué)成像有很大的不同，應(yīng)該注意這種差別作出恰當(dāng)?shù)纳巛p松的淡彩為主配色，灰色系為主配色等等。切忌色彩過(guò)多，花哨艷麗，嚴(yán)重妨礙用戶(hù)視覺(jué)交互。·用；排版不宜過(guò)于密集，避免產(chǎn)生疲勞感。B/S構(gòu)架適用原則·頁(yè)面最?。河捎赪eb方便用戶(hù)體驗(yàn)?！て聊贿m應(yīng)：Web界面需要適應(yīng)不同用戶(hù)屏幕大小?！E版本差異帶來(lái)的客戶(hù)端不同效果?！ぷ钌俅怪睗L動(dòng)：盡可能減少垂直方向滾動(dòng)，盡可能不超過(guò)兩屏?！そ顾綕L動(dòng)：由于將導(dǎo)致非常惡劣的客戶(hù)體驗(yàn)，盡可能禁止瀏覽器水平滾動(dòng)操作。·避免隱藏（右鍵）本系統(tǒng)應(yīng)用原則·瘦客戶(hù)端要求：由于客戶(hù)應(yīng)用環(huán)境配置大多較低，除服務(wù)器可單獨(dú)配置較靈活外，應(yīng)該保證瘦客戶(hù)端，JSHTCIEXML/XSLT等等。·滾動(dòng)，應(yīng)盡可能獲取大的屏幕水平空間?！ぐ宓膶?dǎo)航來(lái)實(shí)現(xiàn)?！さ墓δ芏x到桌面面板，每次登錄即可直接使用，簡(jiǎn)化用戶(hù)操作?！?~3次操作，或者用戶(hù)可自定義操作記錄，方便以后使用。·滾動(dòng)，應(yīng)盡可能獲取大的屏幕水平空間。系統(tǒng)分析據(jù)這些原始需求功能，歸納整理分析，并針對(duì)用戶(hù)交互設(shè)計(jì)需要，提出意見(jiàn)，參與系統(tǒng)設(shè)計(jì)。其中包括對(duì)原始功能的分類(lèi)歸納，提出系統(tǒng)交互需要的新功能，對(duì)用戶(hù)功能實(shí)現(xiàn)的優(yōu)先級(jí)進(jìn)行定義等等。好系統(tǒng)規(guī)劃。另外，需要對(duì)整個(gè)系統(tǒng)中的常見(jiàn)功能有比較清晰的了解，歸納整個(gè)系統(tǒng)界面交互中常見(jiàn)的交互形式，例如在本系統(tǒng)中就包括列表、查詢(xún)、搜索、填寫(xiě)表單、項(xiàng)目分解、項(xiàng)目選擇、審批、報(bào)告等等；只有清晰的了解整個(gè)系統(tǒng)需求，才能較好的把握整個(gè)界面設(shè)計(jì)的統(tǒng)一性。當(dāng)然，這也和界面設(shè)計(jì)人員的經(jīng)驗(yàn)有很大關(guān)系。主界面設(shè)計(jì)到的目的，是盡可能使用戶(hù)僅通過(guò)首頁(yè)面板就可以完成所有常規(guī)任務(wù)。該主界面包含以下部分用戶(hù)信息區(qū)域顯示當(dāng)前用戶(hù)信息用戶(hù)導(dǎo)航區(qū)域用戶(hù)頁(yè)面導(dǎo)航，收藏功能可以將當(dāng)前功能頁(yè)面收藏到快捷功能面板用戶(hù)導(dǎo)航功能樹(shù)用戶(hù)頁(yè)面導(dǎo)航，收藏功能可以將當(dāng)前功能頁(yè)面收藏到快捷功能面板功能樹(shù)隱藏可水平擴(kuò)展頁(yè)面空間自己定義的功能頁(yè)面。該導(dǎo)航在首頁(yè)以面板形式出現(xiàn)，在其他頁(yè)面以下拉菜單形式出現(xiàn)。用戶(hù)自定義功能區(qū)域用戶(hù)可將相關(guān)查詢(xún)搜索等功能定義到首頁(yè)面板，例如：最新完成報(bào)告察看、報(bào)告搜索、檢驗(yàn)流程察看等等典型界面以下是系統(tǒng)中幾個(gè)比較典型的界面模型。樣式到排版方式、具體位置都要具備延續(xù)性，這樣才能使用戶(hù)盡快習(xí)慣整個(gè)系統(tǒng)操作。典型交互模式把交互方式盡可能設(shè)計(jì)的類(lèi)似，以方便用戶(hù)快速熟悉系統(tǒng)。3個(gè)系統(tǒng)中比較典型的交互模式，供大家參考。單項(xiàng)選擇多項(xiàng)選擇項(xiàng)目分解（GIF動(dòng)畫(huà)4楨）Demo開(kāi)發(fā)DemoDemo原型，主要作用是提供給合作客戶(hù)，在基本功能、系統(tǒng)組成和易用