方正方御防火墻UI設計 設計詳解

項目背景：	方正信息安全技術有限公司憑借每年的快速增長，已經成為信息安全業內的一匹黑馬。防火墻產品線是目前方正安全中實力最強的產品線，立項第三年就開始贏利，在IT領域里，技術和市場同時達到這兩個指標，十分罕見。 軟件部分由北京大學計算機所開發負責。在這次交給藍藍工作室之前，由一家廣告公司設計過1.0版，不滿意，這次升級為2.0版重新設計界面。
設計周期：	四個月。完成整個軟件的幾十個頁面設計、制作，加程序后的界面調整、建議。
客戶評價：	客戶及其客戶的普遍認同。,后續防蟲墻項目界面設計工作。（附設計前后效果對照）

定稿主頁：

見下圖

設計說明：

以圖標的方式使軟件界面更加友好，以色彩來標識重要內容，在視覺上給予更明確的引導。
圖片使用上考慮到系統負載，爭取使用最小的圖片單位重復利用，營造精致豐富的視覺內容。
右面內容可根據實際，增減。
第一個銀色方案，簡約精巧，有金屬質感，比較時尚。以灰色為主色調，藍色為輔助色，重要部分用彩色，突出主題更明確。
第二個藍色方案，結構與銀色方案相同，以藍色為主體，與方正其它軟件色調比較一致，比較傳統。
第三個綠色方案，以綠色為主體，綠色代表和平，安定，在形式上比較特別，更像一個桌面。
（目前，銀色和綠色方案，在我搜集到的相同安全產品中，還是比較特別的，銀色的沒有發現有類似產品，綠色的發現一家，大約剛推廣，且形式色調都不同。
聯想用的是藍色，maAcfee用紅色，藍色，瑞星是淡藍，中灰加桔紅，norton用了正紅、正綠、正黃,等等，其它安全產品以藍色據多。）

第一次提案的另兩個設計：

工作流程略述：

開發先用原型軟件設計所有頁面原型文件，保證了項目的進度和一致性。

首頁選中第一稿提案，但細節反復推敲非常認真。比如左邊導航條等，以客戶意見反復修改幾十次，客戶方十數人意見不能統一，一個月后，最終以設計者綜合意見、另提案定稿。

開發規范： 《FG39版本開發webui清單》：三層目錄結構、目錄名稱、網頁名稱；
《FG39版本開發需求規格說明書(討論稿)》：網頁說明；
“webui初版”目錄：網頁明細。
其中，提供的網頁名稱及導航目錄沖突處，均以《FG39版本開發webui清單》為準

 

確定的規范：

1. 頁面名稱：全部小寫，按模塊表意（模塊目錄作為文件名前綴，如《FG39版本開發webui清單》中示例）。
2. 控件命名：主要控件名稱命名要表意（form名、form內控件名稱、JavaScript程序引用的控件名稱）。同頁面的各個元素均不要重名。全部小寫加連字符、表意。如：obj_name、time_type等。
3. 內嵌程序：應該提供能力范圍內的所有內嵌程序（包括復制防蟲墻的已有腳本），并支持主流瀏覽器中的兼容性（IE、FireFox、Opera）。JavaScript格式：為了自動化測試程序能夠識別，應該遵循以下格式：
共十條，此處略。
3）javascript程序中使用[]作為下標運算，而不要使用()。如：document.forms["FormName"]，document.getElementsByName("inputName")[1]。
4）使用HTML的ID對象時，不要將之作為document的下屬對象變量名直接使用，否則Mozzila Firefox均不認。應該使用getElementById("idName")代替直接引用id對象。
更多的兼容性問題可以參看文檔《Javascript的IE和Firefox兼容性匯編》。
4. 頁面的titile定義成通用模塊，便于日后改動。
5. 所有路徑均使用絕對路徑。
6. 圖片會有頻繁改動或更新，所以要事先定義好所有的圖片名稱，日后改動只需要替換文件，不必重新改名。
7. 每個頁面都可以通過點擊所在菜單或tab進行自刷新，即添加自身的超鏈接。（防蟲墻的自刷新是我們自己手動改的，由于沒有事先定義css，所以引起tab頁面文字顏色的問題。）
8. 設計合適的三級菜單實現方法，不要沿用防蟲墻的導航文件方式，否則該文件非常難以控制和維護。
可以參考fortigate的導航欄實現。
9. 所有頁面的顯示和樣式均要兼容各種主流瀏覽器(IE、FireFox、Opera)。
10. 操作行為統一，既要支持鼠標行為又要支持鍵盤行為。如針對提交按鈕，回車和單擊的行為一致；針對select下拉選單，方向鍵選擇和單擊的行為一致；針對checkbox，space選擇和單擊的行為一致；等等。
11. 圖標問題：已有操作圖標可沿用防蟲墻，如對象添加、刪除、修改等；防蟲墻沒有的圖標則需要重新設計。

未接手之前的原界面： 競爭對手的相關界面：

收集了國內外聯想、McAfee/quickcleen、瑞星、賽門鐵客等十幾家相關軟件界面比較分析，此處略。