UI設(shè)計(jì),軟件UI界面設(shè)計(jì),軟件界面設(shè)計(jì),藍(lán)藍(lán)設(shè)計(jì)

方正方御防火墻UI設(shè)計(jì) 設(shè)計(jì)詳解

項(xiàng)目背景：	方正信息安全技術(shù)有限公司憑借每年的快速增長(zhǎng)，已經(jīng)成為信息安全業(yè)內(nèi)的一匹黑馬。防火墻產(chǎn)品線是目前方正安全中實(shí)力最強(qiáng)的產(chǎn)品線，立項(xiàng)第三年就開(kāi)始贏利，在IT領(lǐng)域里，技術(shù)和市場(chǎng)同時(shí)達(dá)到這兩個(gè)指標(biāo)，十分罕見(jiàn)。 軟件部分由北京大學(xué)計(jì)算機(jī)所開(kāi)發(fā)負(fù)責(zé)。在這次交給藍(lán)藍(lán)工作室之前，由一家廣告公司設(shè)計(jì)過(guò)1.0版，不滿意，這次升級(jí)為2.0版重新設(shè)計(jì)界面。
設(shè)計(jì)周期：	四個(gè)月。完成整個(gè)軟件的幾十個(gè)頁(yè)面設(shè)計(jì)、制作，加程序后的界面調(diào)整、建議。
客戶評(píng)價(jià)：	客戶及其客戶的普遍認(rèn)同。,后續(xù)防蟲(chóng)墻項(xiàng)目界面設(shè)計(jì)工作。（附設(shè)計(jì)前后效果對(duì)照）

定稿主頁(yè)：

見(jiàn)下圖

設(shè)計(jì)說(shuō)明：

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

第一次提案的另兩個(gè)設(shè)計(jì)：

工作流程略述：

開(kāi)發(fā)先用原型軟件設(shè)計(jì)所有頁(yè)面原型文件，保證了項(xiàng)目的進(jìn)度和一致性。

首頁(yè)選中第一稿提案，但細(xì)節(jié)反復(fù)推敲非常認(rèn)真。比如左邊導(dǎo)航條等，以客戶意見(jiàn)反復(fù)修改幾十次，客戶方十?dāng)?shù)人意見(jiàn)不能統(tǒng)一，一個(gè)月后，最終以設(shè)計(jì)者綜合意見(jiàn)、另提案定稿。

開(kāi)發(fā)規(guī)范： 《FG39版本開(kāi)發(fā)webui清單》：三層目錄結(jié)構(gòu)、目錄名稱、網(wǎng)頁(yè)名稱；
《FG39版本開(kāi)發(fā)需求規(guī)格說(shuō)明書(shū)(討論稿)》：網(wǎng)頁(yè)說(shuō)明；
“webui初版”目錄：網(wǎng)頁(yè)明細(xì)。
其中，提供的網(wǎng)頁(yè)名稱及導(dǎo)航目錄沖突處，均以《FG39版本開(kāi)發(fā)webui清單》為準(zhǔn)

 

確定的規(guī)范：

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

未接手之前的原界面： 競(jìng)爭(zhēng)對(duì)手的相關(guān)界面：

收集了國(guó)內(nèi)外聯(lián)想、McAfee/quickcleen、瑞星、賽門(mén)鐵客等十幾家相關(guān)軟件界面比較分析，此處略。