5.2.4.1總體接口設計
原型系統的整體界面設計參考了壹系列Web界面設計的基本原則，利用Sharepoint對整個系統界面進行合理部署。主界面主要包括:A區是系統主題LOGOB區是功能導航欄；C區是功能細分區；d區是功能顯示區；e區是版權信息的描述(圖5.20)。
圖5.20系統總體界面
5.2.4.2國家風險界面設計
國家風險展示界面的設計目的是:①在GIS地圖上全面、準確、清晰地展示世界各地區或國家的風險；(2)清晰明了地展示與中國在油氣和固體礦產資源進出口方面有密切聯系的國家的地理、歷史、民族、宗教等基本信息，特別是油氣出口敏感地區和國家的政治、經濟、地理風險信息，為用戶選擇其作為石油進口來源提供科學依據。
國家風險界面由兩部分組成。第壹部分通過GIS調用世界地圖，根據世界地圖上每個國家或地區的風險用不同的顏色給每個國家或地區著色，主要用紅色和黃色兩種顏色體系來表示風險。
第二部分是各個國家的信息展示，主要包括與中國在油氣、固體礦產資源進出口方面有密切聯系的20多個國家。第壹部分頁面設計與主界面壹致，第二部分側重於國家信息展示頁面，如圖5.21所示。風險信息國家風險界面顏色體系為藍色，與整個體系壹致。顏色清爽幹凈，給人清新愉悅的感覺。界面布局以分塊為主，大量豐富的信息有序地展示在有限的區域內。整個界面鏈接的邏輯思路清晰，用戶可以很容易地從任何頁面返回到首頁或者在功能模塊之間切換。
圖5.21國家風險界面-國家信息頁面
該頁面的設計為用戶提供了最重要的石油和天然氣信息。頁面的中心分為三個區域。區域C是地圖顯示區域。在最醒目的E區，將以文字結合圖標的形式展示國家的地理位置、油氣資源概況和數據源描述。頁面左下方(D區)設計為列表菜單，用戶可以根據自己的不同需求選擇和查看相關信息。頁面底部的區域f是顯示版權信息的地方。
在設計過程中，國險界面嚴格貫徹簡潔美觀的設計思想和以用戶為中心的設計理念，做到了美觀與實用的結合，達到了最初設計時設定的目標。
5.2.4.3交通風險界面設計
在中國進口油氣的過程中，80%是通過水路運輸完成的。在海外油氣運輸過程中，必然會涉及到航線風險事故率、港口吞吐量、海盜襲擊等因素的影響，因此在本系統中對運輸風險模塊進行了詳細的設計和開發。界面設計，首先以功能性為第壹指導原則，以技術因素為主要考慮對象，以完成或實現必要的功能為目的。在整體界面風格上，采用了與主界面相同的色系和界面框架設置，以及國別風險等其他幾個子模塊。這樣，壹方面可以通過系統界面快速挖掘有用的信息；另壹方面可以讓整體界面合理美觀。
運輸風險界面設計的主要思路是:首先，利用MapInfo軟件和GIS技術將運輸風險各底層指標的數據進行可視化展示，包括港口風險、航線風險、承運人風險和海盜攻擊四個主要模塊。可視化後，具體端口等詳細信息會單獨頁面顯示；最後，Flash技術被用來制作港口、航線、航母和海盜襲擊的動畫。
進入運輸風險界面後，點擊其中壹個風險查詢子菜單，得到如圖5.22所示的GIS風險專題圖界面。以路線風險為例，在右側主框架下，利用MapInfo和MapXtreme軟件繪制所有路線，利用GIS技術展示路線的風險，主要分為以下四個板塊:在C區，采用樹形菜單，客戶可以直接選擇需要的板塊；在D區，參考壹些專業的GIS軟件，建立拖動條來調整專題地圖界面的大小，有效的補充了整個界面的顯示。在E區，路線的危險程度主要通過路線的顏色來顯示，路線的粗細表示路線的承載能力。後臺數據可視化顯示，客戶可以根據圖表直觀地看到每條路線的相關風險信息，方便決策者根據信息進行決策；F區采用頻譜技術，通過圖例從高到低顯示每條路線的風險值，讓客戶對每條路線的風險值壹目了然。在右下方的G區，為了詳細了解GIS專題地圖，利用GIS軟件設置了相關的輔助按鈕，包括放大、縮小、拖動等，以實現更加智能的操作。另外，在選擇國家的風險值和航空公司的風險值時，要考慮整體的界面風格，選擇合適的色系，使界面柔和美觀。
圖5.22運輸風險中路線風險的GIS地圖
5.2.4.4系統管理界面設計
系統管理模塊在設計頁面時很好的體現了整體設計原則。系統管理維護整體藍色調，系統默認字體，列框結構設計。系統管理中的子頁面也反映了系統風格和交互行為的壹致性。
國外油氣固體礦產資源開發管理系統的系統管理模塊主要面向後臺系統管理員用戶，所以對用戶的系統知識有壹定的要求，比如後期網站運維、數據庫更新等。，這就要求系統管理員維護好網站(吳坤，2005)。所以界面在設計過程中更加專業。詳細介紹了系統管理模塊的典型頁面(全國數據管理頁面)，如圖5.23所示。
圖5.23國家數據資源概覽
在國家數據頁面中，系統管理的基礎數據管理頁面設計主要采用基於模板技術的動態網頁設計，即使用模板頁面技術和AJAX技術，使子頁面繼承模板頁面的主界面。采用這種關鍵技術的好處是，當要修改網頁主界面時，只需修改模板頁面即可，大大簡化了網頁的維護。
主頁面分為三個功能區:A區是功能選擇區，包括兩個鏈接入口；B區是事件觸發區，控制C區的內容顯示；區域C是對象信息顯示區域。其他區域，如系統LOGO、導航欄、版權信息等，與主界面設計保持壹致。這種布局將文本以最適合操作和瀏覽的方式放在頁面的不同位置，也體現了頁面觸發的邏輯流程。