BS系統(tǒng)界面設(shè)計規(guī)范

1、B/S系統(tǒng)界面設(shè)計規(guī)范1 .引言界面美觀、操作易用性、維護成本低是評價B/S系統(tǒng)的關(guān)鍵。本規(guī)范參考了一些成熟產(chǎn)品科學的開發(fā)方法，將開發(fā)過程中的方式、規(guī)則等強行的約束。希望藉此來提高用戶操作感受，提升B/S產(chǎn)品的質(zhì)量。1.1. 編寫目的廣義的界面概念包含了除頁面布局設(shè)計之外，交互性的設(shè)計，及人體工程學方面的研究。本規(guī)范制訂的依據(jù)從廣義概念由發(fā)，總結(jié)以往項目的成敗經(jīng)驗，目的是從整體上 提升公司B/S類產(chǎn)品的質(zhì)量、開發(fā)效率。從以技術(shù)為中心發(fā)展為以客戶為中心，將 類似項目成功的 經(jīng)驗繼承和積累下來，將B/S 系統(tǒng)與C/S 系統(tǒng)開發(fā)過程上的區(qū)別降低到僅顯示控制的極小的層面。新的開發(fā)方式強調(diào)分層，規(guī)范由界

2、面設(shè)計人員做什么，服務(wù)器編程人員做什么， 這樣就把頁面和控制代碼兩個層面清晰的分開。1.2. 背景B/S 模式系統(tǒng)以其易部署、易擴展、能夠高度集成各種技術(shù)的特點，在公司產(chǎn)品線中占越來越大的比重，.Net、J2ee等技術(shù)的發(fā)展更是將 B/S 系統(tǒng)的開發(fā)和桌面應用程序開發(fā)的 工程方法統(tǒng)一起來，突由服務(wù)器端技術(shù)，這些變革要求界面設(shè)計人員和服務(wù)器端編程人員可以應用更加科學的方法合作，團隊的合作方式甚至決定了一個系統(tǒng)開發(fā)的成敗。目前公司較多的服務(wù)器端編程人員仍然處于“后ASP時代”的開發(fā)方式，表現(xiàn)為前臺頁面仍然與服務(wù)器代碼高度的關(guān)聯(lián)，帶來的后果是重復建設(shè)、高昂的維護成本或失去控制的項目，沒有充分的發(fā)揮由

3、集成開發(fā)工具的優(yōu)勢。在以往的開發(fā)方式下界面設(shè)計側(cè)重在靜態(tài)頁面的建設(shè)上，每個頁面作為一個獨立的模塊來處理， 在頁面交互中則是程序員根據(jù)自己的習慣來控制，程序?qū)€人的編程風格的依賴很強，這些在以往開發(fā) WEB站點的方式擴展到 B/S系統(tǒng)有時是不正確的，甚至是背道而 弛的，當然也不利于規(guī)?；膱F隊合作。1.3. 定義術(shù)語定義：效果圖：由界面設(shè)計人員設(shè)計的頁面效果圖，綜合了概要設(shè)計的業(yè)務(wù)需要和整個 站點的風格，它規(guī)定了頁面布局上的每個細節(jié)。容器：即HTML標記的嵌套結(jié)構(gòu)，如在表格 -> 行-> 單元格內(nèi)放置圖片，那么可以認 為單元格是放置圖片的容器。樣式表：即級聯(lián)式樣式表CSS,它是 W3

4、C機構(gòu)在HTML 標記語言上擴展的格式語言。非標準交互控件：是通過標準控件組合、擴展等方法以提高特定業(yè)務(wù)執(zhí)行效率而進行封 裝的控件，或概括為用戶根據(jù)以往的操作經(jīng)驗不能夠直接領(lǐng)會由操作方式的交互控件。2 .界面設(shè)計規(guī)范細則總體目標以規(guī)范作為基本原則, 個站點，模塊頁面與 系統(tǒng)在此框架內(nèi)進行合理的擴展和變化，將站點內(nèi)的每個模塊服從于整“高內(nèi)聚”的控制代碼緊密的結(jié)合在一起，同時對應于應用程序基于的架構(gòu)分析。2.1. 通用原則1界面色彩要求：計算機屏幕的發(fā)光成像和普通視覺成像有很大的不同，應該注意 這種差別作曲恰當?shù)纳蚀钆洹τ谛栌脩糸L時間使用的系統(tǒng)，應當使用戶在較長 時間使用后不至于過于感到視覺疲

5、勞為宜。例如輕松的淡彩為主配色，灰色系為主 配色等等。切忌色彩過多，花哨艷麗，嚴重妨礙用戶視覺交互。2界面平面版式要求：系統(tǒng)樣式排版整齊劃一，盡可能劃分不同的功能區(qū)域于固定位置，固定的格式，方便用戶導航使用；排版不宜過于密集，保留一定的“留白”區(qū)域，減輕查看時的視覺疲勞。3數(shù)據(jù)顯示集中原則：各種列表在頁面中往往是傳遞信息的核心，盡量集中的表現(xiàn) 由來，并提供必要的關(guān)聯(lián)數(shù)據(jù)、表等恰當?shù)慕M織起來，并且在視覺上使用戶很容易 察覺數(shù)據(jù)之間的關(guān)系，并方便查看、編輯等；冗長拖沓的數(shù)據(jù)組織形式可能給用戶 帶來非常低的維護效率。4主次分明原則：頁面中同時分布較多欄目的情況下，按照頁面（Flow ）的伸展方向，即

6、由上到下，有左到右，根據(jù)瀏覽的方向，重要的內(nèi)容應該在左邊最易注意的位置，導航等置于頁面頭部固定位置。使導航等重要內(nèi)容始終處于用戶的視野（Sight ）之中.頁面右邊一般是一些當前頁面主要操作的擴展、選項等內(nèi)容。5變化（對比）原則：在頁面主體內(nèi)容部分往往有很多文本信息，它是需要用戶 認真閱讀的部分，只在文本字體、色彩上增加格式的變化，如加粗、下劃線、行 前導符、鏈接文本的不同狀態(tài)定義（linkhovervisited ）等，就可以將冗長的文檔、表格等組織 的很有條理；冗長的內(nèi)容”層次 ”就有了變化，更容易辯識（Readable）；在美學角度增加了相臨部分間的對比。6頁面留白：頁面留白同時也是一種

7、增加可讀Readable ）的方式。在文字區(qū)域防止用戶讀完一行無法定位下一行的位置的麻煩，在整體布局上，它可以減輕用戶的視覺疲勞。7即時響應原則：每一個交互動作應該能夠馬上看到操作的結(jié)果，并且用色彩、文字粗細、閃爍、彈由、頁面布局的明顯變化等突生方式告知用戶。8鼠標最短距離移動原則：交互按鈕控件等根據(jù)執(zhí)行前后關(guān)系及表單中狀態(tài)的控 制等合理的組織起來。2.2. 顯示（版式）設(shè)計1 .頁面布局基于表格 Table建立完全符合設(shè)計效果圖。2 .文字容易閱讀。行間距、字體大小等通過樣式表統(tǒng)一控制。3 .頁面鏈接根據(jù)不同功能、不同狀態(tài)用不同顏色、狀態(tài)標志，增加頁面層次。4 .基于表格 Talbe 的布局

8、（Layerout ）控制，便于控制實現(xiàn)不同分辨率下的適應，和頁 面上下方向的自動擴展；表格作為控件“容器”規(guī)范外觀和規(guī)格，不同頁面中的行列分布基本一致。5 .使用樣式表修飾頁面表格 Table,如表格單元格、背景，表格內(nèi)字體等，方便今后對于 整個站點的維護和擴展。6 .頁面分組頁面查詢區(qū)域、數(shù)據(jù)列表、詳細信息、編輯區(qū)域等根據(jù)不同功能分組， 所在區(qū)域主題（Title ）標注該區(qū)域的名稱，類似功能頁面間布局保持一致。7 .建立數(shù)據(jù)表格關(guān)系包含數(shù)據(jù)的表格使用戶在視覺上理解相互間關(guān)系，如序列、父子表等。8 .頁面留白頁面有明顯留白區(qū)域，且不同群組之間距離保持一致。9 .分辨率適應頁面布局以保證在低分

9、辨率800*600下的正確顯示為前提， 適應高分辨率情況使用表格寬度等參數(shù)使用百分比方式自動適應；2.3. 對程序設(shè)計及編碼的要求1表格作為控件物理上包含的容器和內(nèi)部包含的控件之間的屬性定制互不影響，即 實現(xiàn)其無關(guān)性，這樣才能完整的保證頁面的基本結(jié)構(gòu)在局部修改時不發(fā)生變化。2力求樣式表實現(xiàn)頁面格式全部控制，廢棄如 <font> 、<backcolor>等內(nèi)嵌標記，實例化坐標位置的<div> 標記、頁面中控制布局的標記修飾含style 屬性的內(nèi)嵌樣式修飾，便于使用第三方頁面維護工具修改頁面。3頁面基本HTML及服務(wù)器端控件擴展標記等均保持代碼干凈整潔，便于檢查

10、和控制； 含有復雜嵌套結(jié)構(gòu)4的,<tr>,<td>標記在行間留白及結(jié)構(gòu)的縮進，便于今后的維護。,數(shù)據(jù)操作使用客戶端腳本實現(xiàn)，減少非必要的服務(wù)WEB服務(wù)器、數(shù)據(jù)庫服務(wù)負載；2.4. 交互設(shè)計a）控件控制1第三方服務(wù)器端控件的使用要保證具有廣泛兼容性和安全性，且具有完備的接口 指定外觀屬性和交互方式。2復雜的應用程序中非標準交互控件給由詳細的操作方法的提示。3頁面中盡量使用統(tǒng)一的導航類型，如使用基于點擊“圖形”的鏈接、 “文字”的鏈接或文字圖形混合其中一種方式。舉例：4頁面按鈕作為基本交互控件，提倡使用有鼠標響應狀態(tài)變化和禁用狀態(tài)的BUTTON 按鈕，除特殊界面需要，不提倡

11、使用圖形按鈕，而且保證同一應用程序內(nèi)只使用一 種外觀的按鈕。5拖放的服務(wù)器端控件在頁面表格Table里在執(zhí)行過程中不能破壞頁面原布局。.NET,如1CANLENDAR 控件建議在彈出的子窗體內(nèi)獨立使用。6包含數(shù)據(jù)的表格使用中沒有數(shù)據(jù)的情況有文字標無數(shù) ，表頭字段名用區(qū)別于數(shù)注* 據(jù)據(jù)行的格式顯示。7分欄目的主題名稱使用用戶容易理解的，以用戶第一人稱角度的命名方式，減少 生硬的稱謂給用戶帶來的不友好感。8 B/S 應用程序允許含有類似拖放操作的非標準交互控件，但是需增加操作的說明。 b）表單控制1頁面內(nèi)部有必要的前后文幫助信息，將頁面主要任務(wù)目標、注意事項等描述在表 單前申明，便于用戶及時獲得導

12、引。2頁面在交互控制中添加完整的狀態(tài)控制，操作中灰顯特定組合的控件來實現(xiàn)用戶 的準確操作，及時的刷新表單中遺留的數(shù)據(jù)。3表單內(nèi)任務(wù)無關(guān)的信息、較少使用的選項等可以通過DHTML 技術(shù)、服務(wù)器端控件的隱藏等減少用戶操作中的干擾因素。4表單內(nèi)在特定的字段域附近給由必填信息提示，并用醒目顏色標注，提醒用戶注 意，驗證的錯誤提示要給由準確恰當?shù)闹笇В粸樘岣哂脩籼顚懙男?，建議使用客戶端驗證；復雜邏輯的驗證使用服務(wù)器端驗證。5信息顯示過濾可能由現(xiàn)的用戶不能識別的HTML特殊字符。6表單中用戶在交互過程中保證用戶方便的切換編輯、瀏覽狀態(tài)，方便用戶用最快 的速度獲取需要的信息，提高操作效率。7經(jīng)常使用的工具

13、按鈕（如新增、編輯等功能按鈕）保證在頁面經(jīng)單向拖曳瀏覽后， 不需來回拖曳滑竿即可操作；長頁面可以考慮頁首、頁尾均放置工具按鈕。8主詳細表及父子表關(guān)系的查看方式使用聯(lián)動式導航到下級數(shù)據(jù)，即點選主項目或 父項目記錄時系統(tǒng)自動查詢并顯示由關(guān)聯(lián)的詳細信息、子表數(shù)據(jù)，無需點選任何按 鈕。c）窗體控制1,使用具有廣泛兼容性的j*ascript控制客戶端交互和簡單導航，除服務(wù)器控件部分自動擴展到客戶端的Jscript外，程序員手動控制腳本不推薦使用Jscript 和。VBscript2 .操作過程中有清晰分界的子任務(wù)使用彈生窗體實現(xiàn)，保證完成后向主任務(wù)窗體返 回必要的結(jié)果，及時刷新主任務(wù)窗體，使用戶看到操作

14、完成的結(jié)果，并且通過控件獲 取焦點等措施突生顯示該結(jié)果。3 .彈由窗體的頁面主題、欄目標題（ Title ）等資料與關(guān)聯(lián)的父窗體保持上下文一致， 方便用戶理解并做由處理策略。4 .采用框架結(jié)構(gòu)的應用程序，要充分考慮不同分辨率下的自動擴展，不同框架之間 同步通訊及時，方便用戶快速切換目標導航，觀察數(shù)據(jù)之間的關(guān)系等。5 .窗口主題顯示標志用戶當前所在模塊或子系統(tǒng)名稱，子任務(wù)窗體主題使用“動詞+名詞的語法結(jié)構(gòu)指明用戶當前的任務(wù)；2.5. 輸入設(shè)計1 .高效率的輸入方式，特定的字段內(nèi)容的輸入方式選用使用效率最高，不容易發(fā)生 錯誤的方式。如錄入日期使用用戶點選彈由的日歷控件，并無須干預的自動返回正確的格

15、式。2 .方便的獲取到必要的信息，無須用戶記憶中間結(jié)果。3 .表單格式盡量保持業(yè)務(wù)原始票據(jù)的格式或字段排列順序，方便用戶的集中錄入過程。4 .表單字段左對齊。5 .輸入控件的寬度基本符合數(shù)據(jù)庫能夠容納的寬度，暗示系統(tǒng)能夠接受的字符容量。2.6. 提示信息5.1. 錯誤操作的提示信息使用非專業(yè)的、易理解的名詞告知用戶。5.2. 以第二人稱“你”或“您”稱呼用戶，強調(diào)用戶的主導能力。5.3. 對用戶寬容的語氣。5.4. 嚴重的警告信息使用彈由信息框提示，不嚴重的在頁面前后文處直接輸由，彈由不宜太頻繁的使用。5.5. 可能對系統(tǒng)導致破壞性的操作要給由警告信息和用戶確認（Confirm ）按鈕，用戶可

16、以取消操作，防止意外的錯誤操作造成損失。6.復雜步驟在完成后給由完成成功的提示。2.7. 由錯處理及由錯畫面的轉(zhuǎn)向1 .系統(tǒng)的內(nèi)部狀態(tài)變化對于用戶有較大影響的情況，給由用戶明顯的解決方案提示， 或給由自動的導航，使用戶快速的恢復工作狀態(tài)。2 .例如用戶SESSION 過期，用戶無法進行操作時，系統(tǒng)自動跳轉(zhuǎn)至登錄界面。3,提供應用程序級錯誤截獲，在不可預見的情況下仍給用戶告知當前情況。4.提供頁面間自動導航控制Flow Controler,以更寬容的方式接受用戶操作，協(xié)助用戶處理復雜的交互任務(wù)。3 .小結(jié)以上小結(jié)著重從交互方面將易忽略的部分給予規(guī)范，在用戶操作過程中每一個操作即時的看到操作的結(jié)果， 這也就符合了即時響應原則的要求，降低了用戶交互操作的復雜度，提高了效率。4 .展望基于以