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

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

以圖標的方式使軟件界面更加友好,以色彩來標識重要內(nèi)容,在視覺上給予更明確的引導(dǎo)。
圖片使用上考慮到系統(tǒng)負載,爭取使用最小的圖片單位重復(fù)利用,營造精致豐富的視覺內(nèi)容。
右面內(nèi)容可根據(jù)實際,增減。

第一個銀色方案,簡約精巧,有金屬質(zhì)感,比較時尚。以灰色為主色調(diào),藍色為輔助色,重要部分用彩色,突出主題更明確。
第二個藍色方案,結(jié)構(gòu)與銀色方案相同,以藍色為主體,與方正其它軟件色調(diào)比較一致,比較傳統(tǒng)。
第三個綠色方案,以綠色為主體,綠色代表和平,安定,在形式上比較特別,更像一個桌面。
(目前,銀色和綠色方案,在我搜集到的相同安全產(chǎn)品中,還是比較特別的,銀色的沒有發(fā)現(xiàn)有類似產(chǎn)品,綠色的發(fā)現(xiàn)一家,大約剛推廣,且形式色調(diào)都不同。
聯(lián)想用的是藍色,maAcfee用紅色,藍色,瑞星是淡藍,中灰加桔紅,norton用了正紅、正綠、正黃,等等,其它安全產(chǎn)品以藍色據(jù)多。)

第一次提案的另兩個設(shè)計:

方正方御防火墻UI設(shè)計提案 工作流程略述:

開發(fā)先用原型軟件設(shè)計所有頁面原型文件,保證了項目的進度和一致性。


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

開發(fā)規(guī)范: 《FG39版本開發(fā)webui清單》:三層目錄結(jié)構(gòu)、目錄名稱、網(wǎng)頁名稱;
《FG39版本開發(fā)需求規(guī)格說明書(討論稿)》:網(wǎng)頁說明;
“webui初版”目錄:網(wǎng)頁明細。
其中,提供的網(wǎng)頁名稱及導(dǎo)航目錄沖突處,均以《FG39版本開發(fā)webui清單》為準

 

確定的規(guī)范:

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

未接手之前的原界面: 未接手之前的原界面: 競爭對手的相關(guān)界面:

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

400-608-6026

案例解析

ImageInfo 遙感處理軟件 設(shè)計一覽

CASM ImageInfo系統(tǒng)是在國家高技術(shù)研究發(fā)展計劃(863計劃)-遙感數(shù)據(jù)處理平臺與應(yīng)用(2002AA133010)項目支持下,由中國測繪科學(xué)研究院研制開發(fā)的一套具有我國自主知識產(chǎn)權(quán)的定量化智能化遙感數(shù)據(jù)處理軟件。藍藍設(shè)計為其設(shè)計logo、宣傳頁、產(chǎn)品手冊、包裝設(shè)計、網(wǎng)站。

設(shè)計周期:二年。

設(shè)計觀點

讀李永詮設(shè)計錄有感

如果創(chuàng)作是以“潛意識”之表層思考作為概念是十分危險的。它有如露出水面之冰山,可見及垂手可得,但也只屬冰山一角。深度及獨特的概念是要往下追尋的。露出之冰峰,雖然容易覓得,自己的作品從其中認識及肯定自己的水準.....

設(shè)計每日一貼

年底回顧總結(jié)!聊聊扁平化風(fēng)潮的起與思


在設(shè)計領(lǐng)域沒有一成不變的規(guī)范??吹礁魑辉O(shè)計師如此熱忱地投入極簡化用戶界面的設(shè)計令人歡欣鼓舞。但是,探索扁平化設(shè)計是否就意味著絕不使用漸變和陰影?當(dāng)然不是。事實上,我近期看到的幾個很有意思的作品一方面以巧妙的方式呈現(xiàn)出了內(nèi)容,另一方面也保證了交互的直觀易懂,從而實現(xiàn)了扁平化和尺寸直接的平衡。
        在這個互聯(lián)互通、信息豐裕、功能豐富的數(shù)字時代,最簡化設(shè)計廣泛的復(fù)興讓人眼前一亮。這自然不會是無所不能的解決方案(沒有任何一種風(fēng)格能做到無所不能),但只要經(jīng)過深思熟慮和恰當(dāng)?shù)膽?yīng)用,其能夠?qū)崿F(xiàn)既好用,有舒適的數(shù)字體驗。


掃一掃,關(guān)注藍藍設(shè)計
Copy right 2007-2018 北京蘭亭妙微科技有限公司版權(quán)所有 軟件界面設(shè)計,UI設(shè)計公司-北京藍藍設(shè)計服務(wù)熱線:400-608-6026 郵箱:weibaobei@163.com