系統界面的用戶設計系統界面設計規范 _經驗分享

界面整體設計
（一）設計模式
由于用戶（專業知識）、開發人員（計算機知識）之間存在著知識面不平衡性，而AGEIS是中國省域范圍內較早的農業地質信息管理系統，沒有太多的借鑒，用戶需求較模糊，用戶的界面設計就顯得極其重要。可利用面向對象技術和可視化編程技術，根據初步的需求分析和總體設計要求先確定各界面元素組成，然后利用界面元素構架各種界面，如登錄界面、主界面等。最后將這些界面構件納入系統功能的骨架，形成系統的界面原型（圖3-5）。這種原型界面法的思想是建立一個能夠反映用戶主要需求的原型，讓用戶實際看看未來系統的概貌，以便判斷哪些界面及功能是符合需要的，哪些功能還需要改進（鐘毅等，1996）。一旦當原型完善之后，利用數據庫應用對象和輔助對象，便可與數據庫的數據溝通，形成符合用戶要求的系統。
圖3-5 用戶界面設計模式
基于原型法的用戶界面設計關鍵是在比較短的時間內構造出相當接近最終目標的用戶界面，使用戶能及時地提出軟件功能修改意見，以免延誤改正時機和擴大錯誤。
（二）界面構成與布局
用戶界面是人機對話的工具，根據功能模塊的不同，可以分別采用菜單式、命令式或表格式的界面。但它與功能模塊一一對應，各模塊之間界面形式一致，相同功能要用相同的圖標顯示。
好的界面是好的程序的一個不可缺少的條件，好的界面并不需要很多復雜的花哨的東西。正相反，很多好的界面常常給人一種簡潔的感覺。如果界面中控件很多，那么控件布局的科學性、合理性就非常重要。AGEIS系統的界面整體上可分為登錄界面、主界面（圖形界面）兩大類，其布局設計如下。
（1）登錄界面
系統登錄界面主要有軟件名稱、軟件標志、單位名稱、單位標志、版本號、網址、聯系方式、版權聲明、用戶名、密碼，以及系統設置等信息。宜應具有象征性強、識別性高、視覺傳達效果好的圖形，可考慮使用動畫GIF格式的圖像，如圖3-6所示。
圖3-6 登錄界面布局示意圖
（2）主（圖形）界面
GIS圖形界面設計是面向對象的程序設計，采用事件驅動思想為每一個動作或事件指定一個且唯一的響應程序，基于“窗口—圖標—鼠標—彈出菜單”模型的圖形用戶界面（GUI）十分適合面向圖形的GIS系統。采用這種界面風格的GIS系統，不僅界面美觀、操作方面、規范，而且信息的表現方式更加直觀，效率更高。再加上引用了桌面模擬技術，使用戶對系統的學習和使用變得很容易。
在構建GIS圖形用戶界面時，應根據特定的功能要求，選擇最能體現系統特色的構件進行界面設計。AGEIS系統的主（圖形）界面將界面元素分成4類，即菜單條、工具條、泊塢窗口、業務區。主（圖形）界面應根據用戶的需求和主觀感受，將上述基本構件進行合理地組織和布局（圖3-7所示）。其中泊塢窗口是指可含有應用控件或工具的具有可停靠、入塢、出塢、關閉等功能的窗口，包括鷹眼窗口、圖層控制窗口、屬性窗口。業務區是指用戶用來顯示和操作業務要素的區域，主要包括文檔、二維、三維控件所在的區域。而菜單條主要包括子系統切換區和各子系統的菜單區，子系統切換區主要包括導航窗口（子系統）、地圖窗口（子系統）、三維窗口（子系統）、文檔窗口（子系統）、系統維護窗口（子系統）等。選擇不同子系統時，菜單區域、工具區域、狀態顯示區域、用戶業務區域及泊塢窗口就顯示與子系統相匹配的界面元素，實現不同子系統界面風格統一。
圖3-7 圖形界面布局示意圖

界面設計
界面是人與信息溝通的渠道，界面設計的目的是使這個渠道簡潔明了，使人能隨意地進行操作，并在這個過程中得到有效的幫助。而網頁界面設計的目的則是為了使網頁中的內容得到更好的體現，更加突出界面設計的主題性。盡管網站的頁面設計根據不同的系統功能要求，會體現出一定的個性化設計，但也要遵循一致性原則，即使網站整體保持色調、組件等元素的一致性（張帆等，2005；古大詒等，2000；劉永瞻，2002；吳瑜，2004）。由于系統涉及的頁面眾多，文中僅選取若干代表性的頁面進行設計說明，主要包括總體界面設計、國家風險界面設計、運輸風險界面設計與系統管理界面設計。
5.2.4.1 總體界面設計
該原型系統總體界面設計參考了Web界面設計的一系列基本原則，采用Sharepoint對整個系統界面進行合理的部署。主體界面主要包括：A區域為系統主題LOGO; B區域為功能導航欄；C區域為功能細分區；D區域為功能展示區；E區域為版權信息說明（圖5.20）。
圖5.20 系統總體界面
5.2.4.2 國家風險界面設計
國家風險展示界面的設計宗旨是：①全面準確、清晰地在GIS地圖上顯示世界各個區域或者國家的風險；②清晰、明確地顯示與我國在油氣和固體礦產資源進出口方面有密切往來國家的地理、歷史、民族宗教等基本信息，特別是油氣輸出敏感地區、國家的政治、經濟、地緣等風險信息，為用戶是否選擇其作為石油進口來源提供科學依據。
國家風險界面由兩部分組成。第一部分通過GIS調用世界地圖，在世界地圖上根據每個國家或者區域的風險大小，用不同的顏色來為每個國家或者區域著色，主要是采用了紅色和黃色兩種色系來表示風險。
第二部分為每個國家的信息展示，主要包括與我國在油氣和固體礦產資源進出口方面有密切往來的20幾個國家。第一部分頁面設計與主界面保持一致，第二部分重點介紹國家信息展示頁面，如圖5.21所示。風險信息的國家風險界面色系選擇了與整個系統相一致的藍色系，色彩清爽、干凈，給人以清新愉快的感覺。界面布局以塊狀分布為主，在有限的區域內井井有條地展示大量、豐富的信息。整個界面鏈接的邏輯思路清晰，用戶可從任何頁面方便地返回首頁，或者在各功能模塊間切換。
圖5.21 國家風險界面——國家信息頁面
此頁面設計，為用戶提供了最重要的油氣信息，將頁面中心分為3個區域，區域C是地圖展示區，在最醒目的區域E將以文字結合圖標的形式展示該國家的地理位置、油氣資源概況和數據來源說明；頁面的左下部（區域D）被設計為列表菜單，用戶可以根據自己不同需要選擇、查看相關信息；頁面最下方的區域F是版權信息展示位置。
國家風險界面在設計過程中嚴格貫徹了簡潔、美觀的設計思路和以用戶為中心的設計理念，較好地實現了美觀與實用的結合，達到設計初期制定的目標。
5.2.4.3 運輸風險界面設計
我國在進口油氣過程中有80%是靠水路運輸完成的。在海外油氣運輸過程中，必然涉及航線風險事故率、港口吞吐能力、海盜襲擊等因素的影響，因此在本系統中重點對運輸風險這一模塊進行了詳細的設計與開發。該界面設計，首先是以功能性為第一指導原則，以技術因素為主要考慮對象，以完成或實現必要的功能為目標。在整體界面風格上同主界面以及國家風險等其他幾個子模塊風險采取同一色系和界面框架設置。這樣，一方面可以使得大家能夠快速通過該系統界面挖掘有用信息；另一方面可以使得整體界面搭配合理、美觀。
運輸風險界面設計的思路主要是：首先，通過MapInfo軟件并運用GIS技術將運輸風險各底層指標數據進行可視化處理和展現，包括港口風險、航線風險、承運風險、海盜襲擊4個主要模塊。通過可視化處理后，針對具體港口等詳細信息進行單獨頁面展示；最后運用Flash技術對港口、航線、承運、海盜襲擊進行動畫展示。
進入運輸風險界面后，點擊其中某一子菜單風險查詢，即可得到如圖5.22所示的GIS風險專題圖界面。以航線風險為例，在右側主框架下，利用MapInfo和MapXtreme軟件對所有航線進行繪制，通過GIS技術實現航線的風險展示，主要分為以下4個版塊：在C區域內，采用樹形菜單，使得客戶可以直接選擇所需版塊；在D區域內，參考部分專業地理信息系統軟件，建立拖動條調整專題圖界面的大小，對整個界面顯示實現了有效補充；在E區域內，主要通過航線的顏色展示該航線的風險程度，航線的粗細表示該航線的承運能力，將后臺數據可視化展示，客戶可以根據圖示直觀地看出各個航線的相關風險信息，方便決策者依據信息作出決策；在F區域內，利用頻譜技術將航線的風險值由高到低通過圖例顯示，以方便客戶一目了然地看出每個航線的風險值高低；在右下方的G區域內，為了對GIS專題圖進行詳細了解，運用GIS軟件設置了相關輔助按鈕，包括放大、縮小、拖移等，以求實現更智能化操作。另外，在選擇國家底層風險值以及航線的風險值時，考慮整體界面風格的搭配，選取合適的色系，使得界面顯得柔和、美觀。
圖5.22 運輸風險中的航線風險GIS圖
5.2.4.4 系統管理界面設計
系統管理模塊在進行頁面設計時很好地體現了總體設計原則，系統管理在保持整體藍色調、系統默認字體，以及分欄框架結構設計，系統管理內部的各個子頁面之間也體現了系統風格以及交互行為的一致性。
國外油氣與固體礦產資源開發管理系統的系統管理模塊，主要面向后臺的系統管理員用戶，所以對于用戶的系統知識有著一定要求，比如后期的網站操作維護、數據庫更新等，都要求系統管理員能夠進行良好的網站維護操作（吳坤，2005）。因此，界面在設計過程中更具有專業面向性。針對系統管理模塊的典型頁面（國家數據管理頁面）進行具體介紹，如圖5.23所示。
圖5.23 國家數據－資源概況
國家數據頁面中，系統管理的基礎數據管理頁面設計，主要采用了基于模板技術的動態網頁設計，即利用模板頁技術以及AJAX技術，使得子頁面能夠繼承模板頁的主體界面。采用這一關鍵技術的優點是：當要對網頁的主體界面進行修改時，只要對模板頁進行變動即可，大大地簡化了網頁的維護工作。
主體頁面分3大功能區域：A區域是功能選擇區，包括兩處鏈接入口；B區域是事件觸發區，控制C區域內容展示；C區域是對象信息展示區。其他區域如系統LOGO、導航欄、版權信息等，與主界面設計保持一致。這樣的布局，以最適合操作、瀏覽的方式將文字放在頁面的不同位置，也體現了頁面觸發的邏輯流程。

系統的用戶界面設計應遵循什么風格
“Material”中文譯為“材料”，它代表著物質的組成成分，如果放在手機系統設計中，這個詞會讓人很容易的聯想到手機系統的界面風格設計，比如擬物和扁平風格。不過此次谷歌的Materialdesign并不是一種系統界面設計風格，Materialdesign其實是單純一種設計語言，它包含了系統界面風格、交互、UI等，此外對于谷歌來說，Materialdesign還有著非常偉大的使命，那就是打造一個橫跨所有設備的統一的設計語言，像是手機、桌面端、可穿戴設備等今天就請大家跟隨這小編的腳步，來看看這次谷歌全新設計理念Materialdesign 。系統界面風格“鮮明、形象、深思熟慮”，Materialdesign此次的界面風格設計用這幾個詞語來形容是再合適不過了。Materialdesign為安卓提供了新的視覺語言，在基本元素的處理上，借鑒了傳統的印刷設計、字體版式、網格系統、空間、比例、配色、圖像使用。在這些設計基礎上下功夫，從而能夠構建出視覺層級、視覺意義以及視覺聚焦。精心選擇色彩、圖像、選擇合乎比例的字體、留白，力求構建出鮮明、形象的用戶界面，使得新的系統界面是如此的漂亮。而在色彩的選擇上Materialdesign的原則是“大膽、圖形化、有意義” 。在MaterialDesign中，UI配色提倡一種主色，一種互補色。在區域較大部分的色彩采用主色的500色調，區域較小的部分例如狀態欄采用深一點的色調。如此巧妙的色彩搭配使得應用看起來非常的大膽、充滿色彩感，凸顯內容。Materialdesign對于界面的排版非常的重視。眾所周知，好的排版會讓界面看起來非常的清爽，不會有雜亂無章的感覺，而要將排版做好，“基線”絕對是必不可少的一樣東西。谷歌官方文檔《MaterialDesign排版邊距》中就有提到基線的擺放位置，由下圖中我們可以看出，MaterialDesign將第一基線放在距離邊界16dp的地方，與文本項對齊的第二基線被擺放到距離左邊界72dp的地方，這種對齊規則讓界面看起來清爽、具有印刷設計的閱讀節奏感。讓用戶得以快速閱讀信息，比較符合格式塔原則。整體來說，Materialdesign為安卓帶來一次改革，系統的界面風格和布局都有了很大的改變，安卓系統自身的風格也漸漸顯露雛形。終于不會在有人說安卓原生系統難看了。令人愉悅的交互設計Materialdesign的交互設計上采用的是響應式交互，這樣的交互設計能把一個應用從簡單展現用戶所請求的信息，提升至能與用戶產生更強烈、更具體化交互的工具。接下來我們選擇幾個簡單的動態圖，來看下Materialdesign獨特的交互設計。
系統界面的用戶設計
良好的用戶界面是保證系統正常運行的一個重要因素。系統默認界面采用 Windows 的設計風格，界面直觀、對用戶透明，用戶接觸軟件后對界面上對應的功能一目了然，不需要過多培訓就可以方便使用本應用系統。人機交互涉及多層次用戶，如煤礦集團領導、煤礦領導、區隊管理人員，設計者按照不同的用戶需求設計出多種界面變體，分別適應于不同的用戶，如: 煤與瓦斯突出歷史資料是否自動播放。進入系統界面，用戶可以按 “所見即所得”的方式進行界面定制，通過圖層設置對話框來設置圖層的可見狀態、可選擇狀態、自動標注狀態，配置地圖的背景色，選擇是否支持鼠標滾動功能 ( 張明清等，2005)。

系統詳細設計包括哪些內容
系統詳細設計包括以下內容：
1、系統結構設計及子系統劃分
劃分系統功能模塊或子系統（如果有或者有必要，特別是大型的軟件系統）。
2、系統功能模塊詳細設計
按結構化設計方法，在系統功能逐層分解的基礎上，對系統各功能模塊或子系統進行設計。此為詳細設計的主要部分之一。
3、系統界面詳細設計
系統界面說明應用系統軟件的各種接口。整個系統的其他接口（如系統硬件接口、通訊接口等）在相應的部分說明。
4、外部界面設計
根據系統界面劃分進行系統外部界面設計，對系統的所有外部接口（包括功能和數據接口）進行設計。
5、內部界面設計
設計系統內部各功能模塊間的調用關系和數據接口。
6、用戶界面設計
規定人機界面的內容、界面風格、調用方式等，包括所謂的表單設計、報表設計和用戶需要的打印輸出等設計。
擴展資料：
系統詳細設計內容：

用層次圖描述系統的總體結構、功能分解及各個模塊之間的相互調用關系和信息交互，用IPO圖或其他方法描述各模塊完成的功能。
以上建議采用HIPO圖進行功能分解與模塊描述，更高的要求建議采用IDEF0方法進行功能模型設計。
詳細設計應用系統的各個構成模塊完成的功能及其相互之間的關系。
用IPO或結構圖描述各模塊的組成結構、算法、模塊間的接口關系，以及需求、功能和模塊三者之間的交叉參照關系。
每個模塊的描述說明可參照以下格式：
模塊編號：
模塊名稱：
輸入：
處理：
算法描述：
輸出：
其中處理和算法描述部分主要采用偽碼或具體的程序語言完成。
對詳細設計更高的要求建議用IDEF0圖進行各功能模塊的設計。
如果對軟件需進行二次開發（包括功能擴展、功能改造、用戶界面改造等），則相應的設計工作應該設立子課題完成。
參考資料：百度百科 ------ 系統設計

系統用戶界面設計的原則有哪些
界面設計原則總的來說可以概括成界面在用戶的掌控之中、保持界面的一致性和減少用戶記憶的負擔這三大點，下面就給大家具體介紹一下界面設計原則。(一)界面設計原則(1)用戶原則。人機界面設計首先要確立用戶類型。劃分類型可以從不同的角度，視實際情況而定。確定類型后要針對其特點預測他們對不同界面的反應。這就要從多方面設計分析。(2)信息最小量原則。人機界面設計要盡量減少用戶記憶負擔，采用有助于記憶的設計方案。(3)幫助和提示原則。要對用戶的*作命令作出反應，幫助用戶處理問題。系統要設計有恢復出錯現場的能力，在系統內部處理工作要有提示，盡量把主動權讓給用戶。(4)媒體最佳組合原則。多媒體界面的成功并不在于僅向用戶提供豐富的媒體，而應在相關理論指導下，注意處理好各種媒體間的關系，恰當選用。(詳見媒體的選擇)(二)界面分析與規范在人機界面設計中，首先應進行界面設計分析，進行用戶特性分析，用戶任務分析，記錄用戶有關系統的概念、術語，這項工作可與多媒體應用系統分析結合進行，囊括于用戶分析報告里。(三)人機界面的類型任務設計之后，要決定界面類型。目前有多種人機界面設計類型，各有不同的品質和性能，下圖進行了詳細的描述。創造性地使用多媒體環境，將會使應用程序功能大大增強。要做到這一點，需從如下兩方面考慮：(1)媒體的功能：沒有任何一種媒體在所有場合都是最優的，每種媒體都有其各自擅長的特定范圍，各種媒體功能參考如下：①文本：在表現概念和刻劃細節時可用表現。②圖形：擅長表達思想輪廓及蘊含與大量數值數據內的趨向性信息，在空間信息方面有較大優勢。③動畫：可用來突出整個事物，特別適于表現靜態圖形無法表現的動作信息。④視頻影像：適于表現其它媒體所難以表現的來自真實生活的事件和情景。⑤語音：能使對話信息突出，特別是在于影像，動畫集合時能傳遞大量的信息。⑥姿態與動作：在與別的媒體結合時具有較強的信息引用能力，可以在相關信息之間建立起時間、空間以及邏輯上的聯系。(2)媒體選擇的結合與互補：腳本設計可根據內容需要分配表達的媒體，這里要特別注意媒體間的結合與區別。提出幾條原則如下：①人們在問題求解過程中的不同階段對信息媒體有不同需要。一般在最初的探索階段采用能提供具體信息的媒體如語音、圖像等，而在最后的分析階段多采用描述抽象概念的文本媒體。而一些直觀的信息(圖形、圖像等)介于兩者之間，適于綜合階段。②媒體種類對空間信息的傳遞并沒有明顯的影響，各種媒體各有所長。③媒體結合是多媒體設計中需要研究的新課題。媒體之間可以互相支持，也會互相干擾。多種媒體應密切相關，扣緊一個表現主題，而不應把不相關的媒體內容拼湊在一起。④目前，媒體結合在技術上主要通過在一個窗口中提供多種媒體的信息片段(空間結合)和對聲音、語音、錄相等隨時間變化的動態媒體加以同步實現(時間序列組合).⑤媒體資源并非愈多愈好，如何在語義層上將各種媒體很好的，結合以更有效地傳遞信息，是要很好地探索的研究課題，也是應用系統人機界面設計的關鍵問題。(四)界面設計原則中的用戶心理學認知心理學，從廣義上來說，就是關于認識的心理學。人類認識客觀事物，主要就是通過感覺、知覺、注意、記憶、思維想象等來進行，因此，凡是研究人的認識心理過程的，都屬于認識心理學。實際上，我們這里所指的認知心理學是指純粹采用信息加工觀點來研究認知心理學過程的心理學，也就是運用信息論以及計算機的類比、模擬、驗證等方法來研究的的知識是如何獲得、如何存貯、如何交換、如何取使用的。所以，我們這里所指的現代認知心理學實質是信息加工心理學。一般地，人們將信息加工心理學又稱為狹義的認知心理學。1.認知過程看和聽的過程構成知覺，圖像和聲音作為刺激的特征被接收并以抽象的方式被編碼，把輸入和記憶中的信息進行對比得出對刺激的解釋，這一過程就是認知。人體信息處理器包括感官，短期記憶、長期記憶及與其相聯系的動作處理器和認知處理器。每種知覺均有一個對應的短期存儲器和處理器，人體信息模型總體框圖如左圖4.3.1所示。其中認知處理器執行的工作就是我們通常所說的思維。思維的結果或被存儲起來，或送至動作處理器控制行動。2.認知心理學(1)現代認知心理學的核心：現代認知心理學的理論實質，就是以計算機信息加工的觀點來研究人的心理學活動，把人腦看作是一種如同計算機的信息加工系統。(2)現代認知心理學兩個關鍵的重要概念：現代認知心理學的學說內容集中體現在兩個關鍵的重要概念上。現代認知心理學的一個重要的中心概念，就是“信息” 。在某種程度上說，抽掉了“信息”的概念，認知心理學的理論也就會散架解體，難以存在。現代認知心理學的另一個重要的中心概念，就是“信息加工系統” 。信息加工系統的理論，是現代認知心理學理論的主體。(3)現代認知心理學的研究方法：現代認知心理學的研究方法有實驗法、觀察法(包括自我觀察法)以及計算機模擬法等。3.人機交互設計遵循的認知原則根據用戶心理學和認知科學，提出了如下基本原則指導人機界面交互設計。(1)一致性原則。即從任務、信息的表達、界面控制*作等方面與用戶理解熟悉的模式盡量保持一致。(2)兼容性。在用戶期望和界面設計的現實之間要兼容，要基于用戶以前的經驗。(3)適應性。用戶應處于控制地位，因此界面應在多方面適應用戶。(4)指導性。界面設計應通過任務提示和反饋信息來指導用戶，做到“以用戶為中心” 。(5)結構性。界面設計應是結構化的，以減少復雜度。(6)經濟性。界面設計要用最少的支持用戶所必須步驟來實現。在界面設計原則指導下，提出以下幾點針對界面設計與屏幕設計的參考：(1)由具體到抽象。即首先通過多媒體界面給用戶提供具體的對象。然后從具體對象、內容中讓學習者歸納出抽象的概念或原理，或用模擬系統來引導出抽象的原理。(2)由可視化的內容顯示不可見的內容。盡可能利用數字、圖解、動畫、色彩等清晰爽目的對象顯示原理、公式或抽象的概念。(3)由模擬引導創新。突出人機交互，盡量啟發用戶的積極思維和參與，并激起用戶的學習和創造欲望。(4)合理運用再認與再憶，減少用戶短期記憶的負擔。所謂再認就是從系統給定的幾個可能答案中要用戶選擇一個正確的或最好的。再憶即要求用戶輸入正確的答案或關鍵字。(5)考慮用戶的個別差異，使用用戶語言。以上五點具體體現了“由易而難，逐步強化。”這一源于認知心理學的原則。上文介紹的界面設計原則應該讓大家心中對界面設計原則有了一定的認識，當然，因為界面設計是復雜的需要多學科參與的，心理學、語言學、設計學等學科都在里面占有重要作用。而用戶界面是與程序交流的唯一方式，為了給用戶提供最便捷的服務，界面設計原則是一定要遵守的。
【系統界面的用戶設計系統界面設計規范】關于系統界面設計和系統界面設計規范的內容就分享到這兒！更多實用知識經驗，盡在 m.apearl.cn

系統界面的用戶設計 系統界面設計規范

系統界面的用戶設計系統界面設計規范