B/S系統(tǒng)界面設(shè)計(jì)規(guī)范1.引言

界面美觀、操作易用性、維護(hù)成本低是評(píng)價(jià)B/S系統(tǒng)關(guān)鍵。本規(guī)范參考了部分成熟產(chǎn)

品科學(xué)開發(fā)方法，將開發(fā)過程中方法、規(guī)則等強(qiáng)行約束。期望藉此來提升用戶操作感

受，提升B/S產(chǎn)品質(zhì)量。

1.1.編寫目標(biāo)

廣義界面概念包含了除頁(yè)面布局設(shè)計(jì)之外，交互性設(shè)計(jì)，及人體工程學(xué)方面研究。

本規(guī)范制訂依據(jù)從廣義概念出發(fā)，總結(jié)以往項(xiàng)目標(biāo)成敗經(jīng)驗(yàn)，目標(biāo)是從整體上提升企業(yè)

B/S類產(chǎn)品質(zhì)量、開發(fā)效率。從以技術(shù)為中心發(fā)展為以用戶為中心，將類似項(xiàng)目成功經(jīng)

驗(yàn)繼承和積累下來，將B/S系統(tǒng)和C/S系統(tǒng)開發(fā)過程上區(qū)分降低到僅顯示控制極小層

面。

新開發(fā)方法強(qiáng)調(diào)分層，規(guī)范出界面設(shè)計(jì)人員做什么，服務(wù)器編程人員做什么，這么就

把頁(yè)面和控制代碼兩個(gè)層面清楚分開。

1.2.背景

B/S模式系統(tǒng)以其易布署、易擴(kuò)展、能夠高度集成多種技術(shù)特點(diǎn)，在企業(yè)產(chǎn)品線中占

越來越大比重，.Net、J2ee等技術(shù)發(fā)展更是將B/S系統(tǒng)開發(fā)和桌面應(yīng)用程序開發(fā)工

程方法統(tǒng)一起來，突出服務(wù)器端技術(shù)，這些變革要求界面設(shè)計(jì)人員和服務(wù)器端編程人員能夠

應(yīng)用愈加科學(xué)方法合作，團(tuán)體合作方法甚至決定了一個(gè)系統(tǒng)開發(fā)成敗。

現(xiàn)在企業(yè)較多服務(wù)器端編程人員仍然處于“后ASP時(shí)代”開發(fā)方法，表現(xiàn)為前臺(tái)

頁(yè)面仍然和服務(wù)器代碼高度關(guān)聯(lián)，帶來后果是反復(fù)建設(shè)、高昂維護(hù)成本或失去控制

項(xiàng)目，沒有充足發(fā)揮出集成開發(fā)工具優(yōu)勢(shì)。

在以往開發(fā)方法下界面設(shè)計(jì)側(cè)重在靜態(tài)頁(yè)面建設(shè)上，每個(gè)頁(yè)面作為一個(gè)獨(dú)立模

塊來處理，在頁(yè)面交互中則是程序員依據(jù)自己習(xí)慣來控制，程序?qū)€(gè)人編程風(fēng)格依靠

很強(qiáng)，這些在以往開發(fā)WEB站點(diǎn)方法擴(kuò)展到B/S系統(tǒng)有時(shí)是不正確，甚至是背道而弛

，當(dāng)然也不利于規(guī)?；瘓F(tuán)體合作。

1.3.定義

術(shù)語(yǔ)定義：

效果圖：由界面設(shè)計(jì)人員設(shè)計(jì)頁(yè)面效果圖，綜合了概要設(shè)計(jì)業(yè)務(wù)需要和整個(gè)站點(diǎn)

風(fēng)格，它要求了頁(yè)面布局上每個(gè)細(xì)節(jié)。

容器：即HTML標(biāo)識(shí)嵌套結(jié)構(gòu)，如在表格->行->單元格內(nèi)放置圖片，那么能夠認(rèn)為

單元格是放置圖片容器。

樣式表：即級(jí)聯(lián)式樣式表CSS，它是W3C機(jī)構(gòu)在HTML標(biāo)識(shí)語(yǔ)言上擴(kuò)展格式語(yǔ)言。

非標(biāo)準(zhǔn)交互控件：是經(jīng)過標(biāo)準(zhǔn)控件組合、擴(kuò)展等方法以提升特定業(yè)務(wù)實(shí)施效率而進(jìn)行封

裝控件，或概括為用戶依據(jù)以往操作經(jīng)驗(yàn)不能夠直接領(lǐng)會(huì)出操作方法交互控件。

2.界面設(shè)計(jì)規(guī)范細(xì)則

總體目標(biāo)

以規(guī)范作為基礎(chǔ)標(biāo)準(zhǔn)，在此框架內(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.通用標(biāo)準(zhǔn)

1界面色彩要求：計(jì)算機(jī)屏幕發(fā)光成像和一般視覺成像有很大不一樣，應(yīng)該注意這種差

別作出合適色彩搭配。對(duì)于需用戶長(zhǎng)時(shí)間使用系統(tǒng)，應(yīng)該使用戶在較長(zhǎng)時(shí)間使用后

不至于過于感到視覺疲憊為宜。比如輕松淡彩為主配色，灰色系為主配色等等。切忌

色彩過多，花哨艷麗，嚴(yán)重妨礙用戶視覺交互。

2界面平面版式要求：系統(tǒng)樣式排版整齊劃一，盡可能劃分不一樣功效區(qū)域于固定位置，

固定格式，方便用戶導(dǎo)航使用；排版不宜過于密集，保留一定“留白”區(qū)域，減輕

查看時(shí)視覺疲憊。

3數(shù)據(jù)顯示集中標(biāo)準(zhǔn)：多種列表在頁(yè)面中往往是傳輸信息關(guān)鍵，盡可能集中表現(xiàn)出來，

并提供必需關(guān)聯(lián)數(shù)據(jù)、表等合適組織起來，而且在視覺上使用戶很輕易覺察數(shù)據(jù)之

間關(guān)系，并方便查看、編輯等；冗長(zhǎng)拖沓數(shù)據(jù)組織形式可能給用戶帶來很低維

護(hù)效率。

4主次分明標(biāo)準(zhǔn)：頁(yè)面中同時(shí)分布較多欄目標(biāo)情況下，根據(jù)頁(yè)面（Flow）伸展方向，

即由上到下，有左到右，依據(jù)瀏覽方向，關(guān)鍵內(nèi)容應(yīng)該在左邊最易注意位置，導(dǎo)

航等置于頁(yè)面頭部固定位置。使導(dǎo)航等關(guān)鍵內(nèi)容一直處于用戶視野（Sight）之中.

頁(yè)面右邊通常是部分目前頁(yè)面關(guān)鍵操作擴(kuò)展、選項(xiàng)等內(nèi)容。

5改變（對(duì)比）標(biāo)準(zhǔn)：在頁(yè)面主體內(nèi)容部分往往有很多文本信息，它是需要用戶認(rèn)真閱

讀部分，只在文本字體、色彩上增加格式改變，如加粗、下劃線、行前導(dǎo)符、鏈接

文本不一樣狀態(tài)定義（link\hover\visited）等，就能夠?qū)⑷唛L(zhǎng)文檔、表格等組織很

有條理；冗長(zhǎng)內(nèi)容“層次“就有了改變，更輕易辯識(shí)(Readable)；在美學(xué)角度增加了

相臨部分間對(duì)比。

6頁(yè)面留白：頁(yè)面留白同時(shí)也是一個(gè)增加可讀性（Readable）方法。在文字區(qū)域預(yù)防用

戶讀完一行無法定位下一行位置麻煩，在整體布局上，它能夠減輕用戶視覺疲憊。

7即時(shí)響應(yīng)標(biāo)準(zhǔn)：每一個(gè)交互動(dòng)作應(yīng)該能夠立即看到操作結(jié)果，而且用色彩、文字粗細(xì)、

閃爍、彈出、頁(yè)面布局顯著改變等突出方法通知用戶。

8鼠標(biāo)最短距離移動(dòng)標(biāo)準(zhǔn)：交互按鈕控件等依據(jù)實(shí)施前后關(guān)系及表單中狀態(tài)控制等合

理組織起來。

2.2.顯示（版式）設(shè)計(jì)

1．頁(yè)面布局基于表格Table建立完全符合設(shè)計(jì)效果圖。

2．文字輕易閱讀。行間距、字體大小等經(jīng)過樣式表統(tǒng)一控制。

3．頁(yè)面鏈接依據(jù)不一樣功效、不一樣狀態(tài)用不一樣顏色、狀態(tài)標(biāo)志，增加頁(yè)面層次。

4．基于表格Talbe布局（Layerout）控制，便于控制實(shí)現(xiàn)不一樣分辨率下適應(yīng)，和頁(yè)面

上下方向自動(dòng)擴(kuò)展；表格作為控件“容器”規(guī)范外觀和規(guī)格，不一樣頁(yè)面中行列分布

基礎(chǔ)一致。

5．使用樣式表修飾頁(yè)面表格Table,如表格單元格、背景，表格內(nèi)字體等，方便以后對(duì)于整

個(gè)站點(diǎn)維護(hù)和擴(kuò)展。

6．頁(yè)面分組頁(yè)面查詢區(qū)域、數(shù)據(jù)列表、具體信息、編輯區(qū)域等依據(jù)不一樣功效分組，所在區(qū)

域?qū)ｎ}（Title）標(biāo)注該區(qū)域名稱，類似功效頁(yè)面間布局保持一致。

7．建立數(shù)據(jù)表格關(guān)系包含數(shù)據(jù)表格使用戶在視覺上了解相互間關(guān)系，如序列、父子表等。

8．頁(yè)面留白頁(yè)面有顯著留白區(qū)域，且不一樣群組之間距離保持一致。

9．分辨率適應(yīng)頁(yè)面布局以確保在低分辨率[800*600]下正確顯示為前提，適應(yīng)高分辨率情

況使用表格寬度等參數(shù)使用百分比方法自動(dòng)適應(yīng)；

2.3.對(duì)程序設(shè)計(jì)及編碼要求

1表格作為控件物理上包含容器和內(nèi)部包含控件之間屬性定制互不影響，即實(shí)現(xiàn)其

無關(guān)性，這么才能完整確保頁(yè)面基礎(chǔ)結(jié)構(gòu)在局部修改時(shí)不發(fā)生改變。

2努力爭(zhēng)取樣式表實(shí)現(xiàn)頁(yè)面格式全部控制，廢棄如<font>、<backcolor>等內(nèi)嵌標(biāo)識(shí)，實(shí)例化坐

標(biāo)位置<div>標(biāo)識(shí)、頁(yè)面中控制布局標(biāo)識(shí)修飾含style屬性內(nèi)嵌樣式修飾，便于使

用第三方頁(yè)面維護(hù)工具修改頁(yè)面。

3頁(yè)面基礎(chǔ)HTML及服務(wù)器端控件擴(kuò)展標(biāo)識(shí)等均保持代碼潔凈整齊，便于檢驗(yàn)和控制；

4含有復(fù)雜嵌套結(jié)構(gòu),<tr>,<td>標(biāo)識(shí)在行間留白及結(jié)構(gòu)縮進(jìn)，便于以后維護(hù)。

5非數(shù)據(jù)操作使用用戶端腳本實(shí)現(xiàn)，降低非必需服務(wù)器[WEB服務(wù)器、數(shù)據(jù)庫(kù)服務(wù)器]

負(fù)載；

2.4.交互設(shè)計(jì)

a)控件控制

1第三方服務(wù)器端控件使用要確保含有廣泛兼容性和安全性，且含有完備接口指定外

觀屬性和交互方法。

2復(fù)雜應(yīng)用程序中非標(biāo)準(zhǔn)交互控件給出具體操作方法提醒。

3頁(yè)面中盡可能使用統(tǒng)一導(dǎo)航類型，如使用基于點(diǎn)擊“圖形”鏈接、“文字”鏈接

或文字圖形混合其中一個(gè)方法。

舉例：

4頁(yè)面按鈕作為基礎(chǔ)交互控件，提倡使用有鼠標(biāo)響應(yīng)狀態(tài)改變和禁用狀態(tài)BUTTON按

鈕，除特殊界面需要，不提倡使用圖形按鈕，而且確保同一應(yīng)用程序內(nèi)只使用一個(gè)外觀

按鈕。

5拖放服務(wù)器端控件在頁(yè)面表格Table里在實(shí)施過程中不能破壞頁(yè)面原布局。如.NET

中CANLENDAR控件提議在彈出子窗體內(nèi)獨(dú)立使用。

6包含數(shù)據(jù)表格使用中沒有數(shù)據(jù)情況有文字標(biāo)注[無**數(shù)據(jù)]]，表頭字段名用區(qū)分于數(shù)

據(jù)行格式顯示。

7分欄目標(biāo)專題名稱使用用戶輕易了解，以用戶第一人稱角度命名方法，降低生硬

稱謂給用戶帶來不友好感。

8B/S應(yīng)用程序許可含有類似拖放操作非標(biāo)準(zhǔn)交互控件，不過需增加操作說明。

b)表單控制

1頁(yè)面內(nèi)部有必需前后文幫助信息，將頁(yè)面關(guān)鍵任務(wù)目標(biāo)、注意事項(xiàng)等描述在表單前申

明，便于用戶立即取得導(dǎo)引。

2頁(yè)面在交互控制中添加完整狀態(tài)控制，操作中灰顯特定組合控件來實(shí)現(xiàn)用戶正確

操作，立即刷新表單中遺留數(shù)據(jù)。

3表單內(nèi)任務(wù)無關(guān)信息、較少使用選項(xiàng)等能夠經(jīng)過DHTML技術(shù)、服務(wù)器端控件

隱藏等降低用戶操作中干擾原因。

4表單內(nèi)在特定字段域周圍給出必填信息提醒，并用醒目顏色標(biāo)注，提醒用戶注意，驗(yàn)

證錯(cuò)誤提醒要給出正確合適指導(dǎo)；為提升用戶填寫效率，提議使用用戶端驗(yàn)證；

復(fù)雜邏輯驗(yàn)證使用服務(wù)器端驗(yàn)證。

5信息顯示過濾可能出現(xiàn)用戶不能識(shí)別HTML特殊字符。

6表單中用戶在交互過程中確保用戶方便切換編輯、瀏覽狀態(tài)，方便用戶用最快速度

獲取需要信息，提升操作效率。

7常常使用工具按鈕（如新增、編輯等功效按鈕）確保在頁(yè)面經(jīng)單向拖曳瀏覽后，不需

往返拖曳滑竿即可操作；長(zhǎng)頁(yè)面能夠考慮頁(yè)首、頁(yè)尾均放置工具按鈕。

8主具體表及父子表關(guān)系查看方法使用聯(lián)動(dòng)式導(dǎo)航到下級(jí)數(shù)據(jù)，即點(diǎn)選主項(xiàng)目或父項(xiàng)目

統(tǒng)計(jì)時(shí)系統(tǒng)自動(dòng)查詢并顯示出關(guān)聯(lián)具體信息、子表數(shù)據(jù)，無需點(diǎn)選任何按鈕。

c)窗體控制

1.使用含有廣泛兼容性j***ascript控制用戶端交互和簡(jiǎn)單導(dǎo)航,，除服務(wù)器控件部分自動(dòng)

擴(kuò)展到用戶端Jscript外，程序員手動(dòng)控制腳本不推薦使用Jscript和VBscript。

2.操作過程中有清楚分界子任務(wù)使用彈出窗體實(shí)現(xiàn)，確保完成后向主任務(wù)窗體返回必需

結(jié)果，立即刷新主任務(wù)窗體，使用戶看到操作完成結(jié)果，而且經(jīng)過控件獲取焦點(diǎn)等

方法突出顯示該結(jié)果。

3.彈出窗體頁(yè)面專題、欄目標(biāo)題（Title）等資料和關(guān)聯(lián)父窗體保持上下文一致，方便

用戶了解并做出處理策略。

4.采取框架結(jié)構(gòu)應(yīng)用程序，要充足考慮不一樣分辨率下自動(dòng)擴(kuò)展，不一樣框架之間同時(shí)通

訊立即，方便用戶快速切換目標(biāo)導(dǎo)航，觀察數(shù)據(jù)之間關(guān)系等。

5.窗口專題顯示標(biāo)志用戶目前所在模塊或子系統(tǒng)名稱，子任務(wù)窗體專題使用“動(dòng)詞+名詞”

語(yǔ)法結(jié)構(gòu)指明用戶目前任務(wù)；

2.5.輸入設(shè)計(jì)

1．高效率輸入方法，特定字段內(nèi)容輸入方法選擇使用效率最高，不輕易發(fā)生錯(cuò)誤

方法。

如錄入日期使用用戶點(diǎn)選彈出日歷控件，并無須干預(yù)自動(dòng)返回正確格式。

2．方便獲取到必需信息，無須用戶記憶中間結(jié)果。

3．表單格式盡可能保持業(yè)務(wù)原始票據(jù)格式或字段排列次序，方便用戶集中錄入過程。

4．表單字段左對(duì)齊。

5．輸入控件寬度基礎(chǔ)符合數(shù)據(jù)庫(kù)能夠容納寬度，暗示系統(tǒng)能夠接收字符容量。

2.6.提醒信息

5.1.錯(cuò)誤操作提醒信息使用非專業(yè)、易了解名詞通知用戶。

5.2.以第二人稱“你”或“您”稱呼用戶，強(qiáng)調(diào)用戶主導(dǎo)能力。

5.3.對(duì)用戶寬容語(yǔ)氣。

5.4.嚴(yán)重警告信息使用彈出信息框提醒，不嚴(yán)重在頁(yè)面前后文處直接輸出，彈出不宜

太頻繁使用。

5.5.可能對(duì)系統(tǒng)造成破壞性操作要給出警告信息和用戶確定（Confirm）按鈕，用戶可

以取消操作，預(yù)防意外錯(cuò)誤操作造成損失。

6.復(fù)雜步驟在完成后給出完成成功提醒。

2.7.犯錯(cuò)處理及犯錯(cuò)畫面轉(zhuǎn)向

1.系統(tǒng)內(nèi)部狀態(tài)改變對(duì)于用戶有較大影響情況，給出用戶顯著處理方案提醒，或給

出自動(dòng)導(dǎo)航，使用戶快速恢復(fù)工作狀態(tài)。

2.比如用戶SESSION過期，用戶無法進(jìn)行操作時(shí)，系統(tǒng)自動(dòng)跳轉(zhuǎn)至登錄界面。

3.提供給用程序級(jí)錯(cuò)誤截獲，在不可預(yù)見情況下仍給用戶通知目前情況。

4.提供頁(yè)面間自動(dòng)導(dǎo)航控制[FlowControler],以更寬容方法接收用戶操作，幫助用戶處

理復(fù)雜交互任務(wù)。

3.小結(jié)

以上小結(jié)著重從交互方面將易忽略部分給規(guī)范，在用戶操作過程中每一個(gè)操作即時(shí)看

到操作結(jié)果，這也就符合了即時(shí)響應(yīng)標(biāo)準(zhǔn)要求，降低了用戶交互操作復(fù)雜度，提升了

效率。

4.展望

基于