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

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

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

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

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

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

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

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

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

9、適應(yīng)高分辨率情況使用表格寬度等參數(shù)使用百分比方式自動(dòng)適應(yīng)；23對(duì)程序設(shè)計(jì)及編碼的要求1表格作為控件物理上包含的容器和內(nèi)部包含的控件之間的屬性定制互不影響，即實(shí)現(xiàn)其無(wú)關(guān) 性，這樣才能完整的保證頁(yè)面的基本結(jié)構(gòu)在局部修改時(shí)不發(fā)生變化。2力求樣式表實(shí)現(xiàn)頁(yè)面格式全部控制，廢棄如vfont、vbackcol。,等內(nèi)嵌標(biāo)記，實(shí)例化坐標(biāo)位置的vdiv標(biāo)記、頁(yè)面中控制布局的標(biāo)記修飾含style屬性的內(nèi)嵌樣式修飾，便于使用第三方頁(yè)面維護(hù)工具修改頁(yè)面。3頁(yè)面基本HTML及服務(wù)器端控件擴(kuò)展標(biāo)記等均保持代碼干凈整潔，便于檢查和控制；4含有復(fù)雜嵌套結(jié)構(gòu)的，vtr,vtd標(biāo)記在行間留白及結(jié)構(gòu)的縮進(jìn)，便于今后的維護(hù)。5非數(shù)據(jù)

10、操作使用客戶(hù)端腳本實(shí)現(xiàn)，減少非必要的服務(wù)器WEB服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器負(fù) 載；2.4. 交互設(shè)計(jì)a）控件控制1第三方服務(wù)器端控件的使用要保證具有廣泛兼容性和安全性，且具有完備的接口指定外觀(guān)屬 性和交互方式。2復(fù)雜的應(yīng)用程序中非標(biāo)準(zhǔn)交互控件給出詳細(xì)的操作方法的提示。3頁(yè)面中盡量使用統(tǒng)一的導(dǎo)航類(lèi)型，如使用基于點(diǎn)擊“圖形”的鏈接、“文字”的鏈接或文字圖形混合其中一種方式。舉例：4頁(yè)面按鈕作為基本交互控件，提倡使用有鼠標(biāo)響應(yīng)狀態(tài)變化和禁用狀態(tài)的BUTTON按鈕，除特殊界面需要，不提倡使用圖形按鈕，而且保證同一應(yīng)用程序內(nèi)只使用一種外觀(guān)的按鈕。5拖放的服務(wù)器端控件在頁(yè)面表格Table里在執(zhí)行過(guò)程中不能破壞頁(yè)

11、面原布局。如.NET中CANLENDAF控件建議在彈出的子窗體內(nèi)獨(dú)立使用。6包含數(shù)據(jù)的表格使用中沒(méi)有數(shù)據(jù)的情況有文字標(biāo)注無(wú)*數(shù)據(jù)口，表頭字段名用區(qū)別于數(shù)據(jù)行的格式顯示。7分欄目的主題名稱(chēng)使用用戶(hù)容易理解的，以用戶(hù)第一人稱(chēng)角度的命名方式，減少生硬的稱(chēng)謂 給用戶(hù)帶來(lái)的不友好感。8 B/S應(yīng)用程序允許含有類(lèi)似拖放操作的非標(biāo)準(zhǔn)交互控件，但是需增加操作的說(shuō)明。b）表單控制1頁(yè)面內(nèi)部有必要的前后文幫助信息，將頁(yè)面主要任務(wù)目標(biāo)、注意事項(xiàng)等描述在表單前申明， 便于用戶(hù)及時(shí)獲得導(dǎo)引。2頁(yè)面在交互控制中添加完整的狀態(tài)控制，操作中灰顯特定組合的控件來(lái)實(shí)現(xiàn)用戶(hù)的準(zhǔn)確操 作，及時(shí)的刷新表單中遺留的數(shù)據(jù)。3表單內(nèi)任務(wù)無(wú)關(guān)

12、的信息、較少使用的選項(xiàng)等可以通過(guò)DHTML技術(shù)、服務(wù)器端控件的隱藏等 減少用戶(hù)操作中的干擾因素。4表單內(nèi)在特定的字段域附近給出必填信息提示，并用醒目顏色標(biāo)注，提醒用戶(hù)注意，驗(yàn)證的錯(cuò) 誤提示要給出準(zhǔn)確恰當(dāng)?shù)闹笇?dǎo)；為提高用戶(hù)填寫(xiě)的效率，建議使用客戶(hù)端驗(yàn)證；復(fù)雜邏輯的驗(yàn)證使 用服務(wù)器端驗(yàn)證。5信息顯示過(guò)濾可能出現(xiàn)的用戶(hù)不能識(shí)別的HTML特殊字符。6表單中用戶(hù)在交互過(guò)程中保證用戶(hù)方便的切換編輯、瀏覽狀態(tài)，方便用戶(hù)用最快的速度獲取 需要的信息，提高操作效率。7經(jīng)常使用的工具按鈕（如新增、編輯等功能按鈕）保證在頁(yè)面經(jīng)單向拖曳瀏覽后，不需來(lái)回 拖曳滑竿即可操作；長(zhǎng)頁(yè)面可以考慮頁(yè)首、頁(yè)尾均放置工具按鈕。8主詳

13、細(xì)表及父子表關(guān)系的查看方式使用聯(lián)動(dòng)式導(dǎo)航到下級(jí)數(shù)據(jù)，即點(diǎn)選主項(xiàng)目或父項(xiàng)目記錄 時(shí)系統(tǒng)自動(dòng)查詢(xún)并顯示出關(guān)聯(lián)的詳細(xì)信息、子表數(shù)據(jù)，無(wú)需點(diǎn)選任何按鈕。c）窗體控制1 .使用具有廣泛兼容性的j*ascript控制客戶(hù)端交互和簡(jiǎn)單導(dǎo)航，除服務(wù)器控件部分自動(dòng)擴(kuò) 展到客戶(hù)端的Jscript外，程序員手動(dòng)控制腳本不推薦使用Jscript和VBscript。2 .操作過(guò)程中有清晰分界的子任務(wù)使用彈出窗體實(shí)現(xiàn)，保證完成后向主任務(wù)窗體返回必要的結(jié) 果，及時(shí)刷新主任務(wù)窗體，使用戶(hù)看到操作完成的結(jié)果，并且通過(guò)控件獲取焦點(diǎn)等措施突出顯示該 結(jié)果。3 .彈出窗體的頁(yè)面主題、欄目標(biāo)題（Title ）等資料與關(guān)聯(lián)的父窗體保持上

14、下文一致，方便用戶(hù) 理解并做出處理策略。4 .采用框架結(jié)構(gòu)的應(yīng)用程序，要充分考慮不同分辨率下的自動(dòng)擴(kuò)展，不同框架之間同步通訊及 時(shí)，方便用戶(hù)快速切換目標(biāo)導(dǎo)航，觀(guān)察數(shù)據(jù)之間的關(guān)系等。5 .窗口主題顯示標(biāo)志用戶(hù)當(dāng)前所在模塊或子系統(tǒng)名稱(chēng)，子任務(wù)窗體主題使用“動(dòng)詞+名詞”的語(yǔ)法結(jié)構(gòu)指明用戶(hù)當(dāng)前的任務(wù)；25輸入設(shè)計(jì)1 高效率的輸入方式，特定的字段內(nèi)容的輸入方式選用使用效率最高，不容易發(fā)生錯(cuò)誤的方 式。如錄入日期使用用戶(hù)點(diǎn)選彈出的日歷控件，并無(wú)須干預(yù)的自動(dòng)返回正確的格式。2 方便的獲取到必要的信息，無(wú)須用戶(hù)記憶中間結(jié)果。3 表單格式盡量保持業(yè)務(wù)原始票據(jù)的格式或字段排列順序，方便用戶(hù)的集中錄入過(guò)程。4 表單

15、字段左對(duì)齊。5 輸入控件的寬度基本符合數(shù)據(jù)庫(kù)能夠容納的寬度，暗示系統(tǒng)能夠接受的字符容量。2.6. 提示信息1 .錯(cuò)誤操作的提示信息使用非專(zhuān)業(yè)的、易理解的名詞告知用戶(hù)。2 .以第二人稱(chēng)“你”或“您”稱(chēng)呼用戶(hù)，強(qiáng)調(diào)用戶(hù)的主導(dǎo)能力。3 .對(duì)用戶(hù)寬容的語(yǔ)氣。4 .嚴(yán)重的警告信息使用彈出信息框提示，不嚴(yán)重的在頁(yè)面前后文處直接輸出，彈出不宜太頻繁 的使用。5 .可能對(duì)系統(tǒng)導(dǎo)致破壞性的操作要給出警告信息和用戶(hù)確認(rèn)（ Confirm ）按鈕，用戶(hù)可 以取消操作，防止意外的錯(cuò)誤操作造成損失。6 .復(fù)雜步驟在完成后給出完成成功的提示。2.7. 出錯(cuò)處理及出錯(cuò)畫(huà)面的轉(zhuǎn)向1 .系統(tǒng)的內(nèi)部狀態(tài)變化對(duì)于用戶(hù)有較大影響的情況，給出用戶(hù)明顯的解決方案提示，或給出自動(dòng) 的導(dǎo)