修訂歷史記錄

1、修訂歷史記錄日期版本說(shuō)明提出機(jī)構(gòu)編寫(xiě)人及聯(lián)系方式2005-11-171.0馬俊2005-11-221.1關(guān)于css定義字體的順序進(jìn)行了修改馬俊目錄目錄2一、UI設(shè)計(jì)原理3二、UI界面設(shè)計(jì)原則31.概括說(shuō)明32.具體應(yīng)用中的原則3三、Logo及顏色標(biāo)準(zhǔn)51.正確的Logo圖標(biāo)樣式52.Logo標(biāo)準(zhǔn)色63.標(biāo)準(zhǔn)字體7四、使用網(wǎng)站標(biāo)準(zhǔn)來(lái)書(shū)寫(xiě)XHTML、HTML、CSS、JS81.head區(qū)代碼規(guī)范82.body區(qū)代碼規(guī)范93.用CSS定義元素外觀164. JS交互規(guī)范19五、文件的命名21六、目錄結(jié)構(gòu)22七、易用性規(guī)范221.易用性原理222.易用性規(guī)范23八、文件的備份及歷史工作的保存31UI的是

2、英文User Interface縮寫(xiě)，也就是用戶(hù)與界面的關(guān)系。包括交互設(shè)計(jì)，用戶(hù)研究，與界面設(shè)計(jì)三個(gè)方面。一、 UI設(shè)計(jì)原理UI設(shè)計(jì)原理：以用戶(hù)為中心一個(gè)重要的人機(jī)界面設(shè)計(jì)原理是：是用戶(hù)控制軟件，而不是軟件控制用戶(hù)。它的含義如下：l 操作者是用戶(hù)而不是電腦或者軟件，你可以讓電腦自動(dòng)執(zhí)行任務(wù)，但是這種自動(dòng)執(zhí)行應(yīng)該允許用戶(hù)選擇和控制； l 用戶(hù)有權(quán)選擇個(gè)性化的界面，軟件應(yīng)該提供多樣的界面或參數(shù)供用戶(hù)選擇； l 軟件應(yīng)該盡可能的提供交互和響應(yīng)，確保命令簡(jiǎn)單、明顯，結(jié)果是直接的，并且容易取消。 二、UI界面設(shè)計(jì)原則1.概括說(shuō)明l 直接 設(shè)計(jì)優(yōu)秀的軟件，用戶(hù)能夠直接操作并得到需要的信息。用戶(hù)應(yīng)該能夠在屏

3、幕上看到操作的效果，明顯、明確的提示信息能夠減少用戶(hù)的困惑。l 一致 一致性可以幫助用戶(hù)利用已有的知識(shí)，更快的學(xué)習(xí)和掌握新知識(shí)、新功能。一致性包括命令、信息窗、操作行為、界面的元素布局等。l 寬容 應(yīng)該允許用戶(hù)對(duì)軟件進(jìn)行探險(xiǎn)，允許用戶(hù)范錯(cuò)誤。對(duì)危險(xiǎn)的操作應(yīng)該提供適當(dāng)?shù)木嫘畔ⅲ蛘咛峁┠娌僮骱突謴?fù)操作。l 反饋 對(duì)用戶(hù)所有的操作做出反饋和響應(yīng)，比如在一個(gè)長(zhǎng)時(shí)間的處理動(dòng)作中提供當(dāng)前處理狀態(tài)和說(shuō)明。沒(méi)有什么比毫無(wú)反應(yīng)的屏幕更讓用戶(hù)擔(dān)心了，實(shí)驗(yàn)證明，大部分的用戶(hù)只能忍受幾秒鐘的“屏幕假死”狀態(tài)。l 美化 一個(gè)美觀漂亮、布局合理的界面是軟件是非常重要的組成部分。對(duì)于用戶(hù)接受軟件有無(wú)法衡量的價(jià)值。l 簡(jiǎn)

4、單 一個(gè)界面應(yīng)該盡可能的簡(jiǎn)單(而不是單純)，易于學(xué)習(xí)和使用。2.具體應(yīng)用中的原則l 一般適用原則簡(jiǎn)單明了原則：用戶(hù)的操作要盡可能以最直接最形象最易于理解的方式呈現(xiàn)在用戶(hù)面前。對(duì)操作接口，直接點(diǎn)擊高于右鍵操作，文字表示高于圖標(biāo)示意，盡可能的符合用戶(hù)對(duì)類(lèi)似系統(tǒng)的識(shí)別習(xí)慣；方便使用原則：符合用戶(hù)習(xí)慣為方便使用的第一原則。其它還包括，實(shí)現(xiàn)目標(biāo)功能的最少操作數(shù)原則，鼠標(biāo)最短距離移動(dòng)原則等；用戶(hù)導(dǎo)向原則：為了方便用戶(hù)盡快熟悉系統(tǒng)，簡(jiǎn)化操作，應(yīng)該盡可能的提供向?qū)再|(zhì)的操作流程；實(shí)時(shí)幫助原則：用戶(hù)需要能隨時(shí)響應(yīng)問(wèn)題的用戶(hù)幫助；提供高級(jí)自定義功能：為熟悉計(jì)算機(jī)及軟件系統(tǒng)的高級(jí)用戶(hù)設(shè)置自定義功能，可以對(duì)已經(jīng)確定的

5、常規(guī)操作以及系統(tǒng)的方方面面進(jìn)行符合自身習(xí)慣的自定義設(shè)置。包括常規(guī)操作、界面排版、界面樣式等種種自定義；界面色彩要求：計(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é)疲勞為宜。例如輕松的淡彩為主配色，灰色系為主配色等等。切忌色彩過(guò)多，花哨艷麗，嚴(yán)重妨礙用戶(hù)視覺(jué)交互；界面平面版式要求：系統(tǒng)樣式排版整齊劃一，盡可能劃分不同的功能區(qū)域于固定位置，方便用戶(hù)導(dǎo)航使用；排版不宜過(guò)于密集，避免產(chǎn)生疲勞感；l B/S構(gòu)架適用原則頁(yè)面最?。河捎赪eb的網(wǎng)絡(luò)特性，盡可能減小單頁(yè)面加載量，降低圖片文件大小和數(shù)量

6、，加快加載速度，方便用戶(hù)體驗(yàn)；屏幕適應(yīng)：Web界面需要適應(yīng)不同用戶(hù)屏幕大??；瀏覽器兼容：需要適應(yīng)不同瀏覽器瀏覽效果，雖然目前可不考慮不同瀏覽器差別，但仍需考慮IE瀏覽器版本差異帶來(lái)的客戶(hù)端不同效果；最少垂直滾動(dòng)：盡可能減少垂直方向滾動(dòng)，盡可能不超過(guò)兩屏；禁止水平滾動(dòng)：由于將導(dǎo)致非常惡劣的客戶(hù)體驗(yàn)，盡可能禁止瀏覽器水平滾動(dòng)操作；避免隱藏（右鍵）操作：瀏覽器的右鍵操作不符合用戶(hù)體驗(yàn)習(xí)慣，盡可能避免；三、Logo及顏色標(biāo)準(zhǔn)在海虹以往的各種產(chǎn)品的設(shè)計(jì)中，出現(xiàn)了很多版本的Logo圖標(biāo)，這樣做是不對(duì)的，違反了企業(yè)VI設(shè)計(jì)中的統(tǒng)一性、一致性，使企業(yè)的形象模糊不清，會(huì)使客戶(hù)心中產(chǎn)生困惑，從而影響企業(yè)的可信度。

7、1.正確的Logo圖標(biāo)樣式繪制坐標(biāo)圖：反白圖：2.Logo標(biāo)準(zhǔn)色標(biāo)志標(biāo)準(zhǔn)色依然沿用海虹控股的原有標(biāo)志的色彩規(guī)范，色彩要求給人的感覺(jué)是專(zhuān)業(yè)、信任。交易平臺(tái)系統(tǒng)中使用的標(biāo)準(zhǔn)色：海虹醫(yī)藥電子交易平臺(tái)系統(tǒng)是一個(gè)專(zhuān)業(yè)的、用戶(hù)類(lèi)型多、使用頻繁、訪問(wèn)量巨大的系統(tǒng)。色彩總體要求是給人以專(zhuān)業(yè)的感覺(jué)、長(zhǎng)時(shí)間看界面視覺(jué)不產(chǎn)生疲勞。因此在web256安全色基礎(chǔ)上降低飽和度和明度獲得如下的標(biāo)準(zhǔn)色。3.標(biāo)準(zhǔn)字體印刷標(biāo)準(zhǔn)字體 中文標(biāo)準(zhǔn)字體為：方正超粗黑簡(jiǎn)體。在不同情況下可以使用黑體、方正大黑、文鼎特粗黑簡(jiǎn)、漢儀菱心體簡(jiǎn)、文鼎新藝體簡(jiǎn)等字體代替。Web標(biāo)準(zhǔn)色：#000000； 英文的標(biāo)準(zhǔn)字體為：Verdana。Web標(biāo)準(zhǔn)色：

8、#848684；四、使用網(wǎng)站標(biāo)準(zhǔn)來(lái)書(shū)寫(xiě)XHTML、HTML、CSS、JS1. head區(qū)代碼規(guī)范l 為頁(yè)面添加正確的DOCTYPE 很多設(shè)計(jì)師和開(kāi)發(fā)者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的簡(jiǎn)寫(xiě)。主要用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。瀏覽器根據(jù)你DOCTYPE定義的DTD(文檔類(lèi)型定義)來(lái)解釋頁(yè)面代碼。所以，如果你不注意設(shè)置了錯(cuò)誤的DOCTYPE，結(jié)果會(huì)讓你大吃一驚。XHTML1.0提供了三種DOCTYPE可選擇：過(guò)渡型（Transitional ）嚴(yán)格型（Strict ）框架型（Frameset ）對(duì)于我們初級(jí)改善來(lái)說(shuō)，

9、只要選用過(guò)渡型的聲明就可以了。它依然可以兼容你的表格布局、表現(xiàn)標(biāo)識(shí)等，不至于讓你覺(jué)得變化太大，難以掌握。Tip:你懶得輸入上面過(guò)渡型代碼的話(huà)，可以訪問(wèn)l 設(shè)定一個(gè)名字空間（Namespace） 直接在DOCTYPE聲明后面添加如下代碼：一個(gè)namespace是收集元素類(lèi)型和屬性名字的一個(gè)詳細(xì)的DTD，namespace聲明允許你通過(guò)一個(gè)在線地址指向來(lái)識(shí)別你的namespace。只要照樣輸入代碼就可以。l 聲明你的編碼語(yǔ)言 為了被瀏覽器正確解釋和通過(guò)標(biāo)識(shí)校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言。代碼如下：這里聲明的編碼語(yǔ)言是簡(jiǎn)體中文GB2312，你如果需要制作繁體內(nèi)容，可以定義為

10、BIG5。網(wǎng)頁(yè)顯示字符集 例如：簡(jiǎn)體中文：繁體中文：英 語(yǔ)：l 關(guān)鍵字等META信息 允許全文檢索的頁(yè)面，為了使Internet 上的搜索引擎能夠有效檢索，在網(wǎng)站首頁(yè)及各頻道首頁(yè)的html的之間應(yīng)該加入Keywords 和Description 元標(biāo)記，但僅使用在首頁(yè)，其它頁(yè)面并非必須。原始制作者信息 網(wǎng)站簡(jiǎn)介 搜索關(guān)鍵字 l 公司版權(quán)注釋 l 所有的css盡量采取外部調(diào)用 l 網(wǎng)頁(yè)標(biāo)題 這里是你的網(wǎng)頁(yè)標(biāo)題 l 所有的javascript腳本盡量采取外部調(diào)用 2.body區(qū)代碼規(guī)范l 用小寫(xiě)字母書(shū)寫(xiě)所有的標(biāo)簽 XML對(duì)大小寫(xiě)是敏感的，所以，XHTML也是大小寫(xiě)有區(qū)別的。所有的XHTML元素和屬

11、性的名字都必須使用小寫(xiě)。否則你的文檔將被W3C校驗(yàn)認(rèn)為是無(wú)效的。例如下面的代碼是不正確的：公司簡(jiǎn)介正確的寫(xiě)法是：公司簡(jiǎn)介同樣的，改成，改成等等。這步轉(zhuǎn)換很簡(jiǎn)單。l 給所有屬性值加引號(hào) 在HTML中，你可以不需要給屬性值加引號(hào)，但是在XHTML中，它們必須被加引號(hào)。例：height=”100”，而不能是height=100。l 關(guān)閉所有的標(biāo)簽 在XHTML中，每一個(gè)打開(kāi)的標(biāo)簽都必須關(guān)閉。就象這樣：每一個(gè)打開(kāi)的標(biāo)簽都必須關(guān)閉。HTML可以接受不關(guān)閉的標(biāo)，XHTML就不可以。這個(gè)規(guī)則可以避免HTML的混亂和麻煩。舉例來(lái)說(shuō)：如果你不關(guān)閉圖像標(biāo)簽，在一些瀏覽器中就可能出現(xiàn)CSS顯示問(wèn)題。用這種方法能確保

12、頁(yè)面和你設(shè)計(jì)的一樣顯示。需要說(shuō)明的是：空標(biāo)簽也要關(guān)閉，在標(biāo)簽尾部使用一個(gè)正斜杠“/”來(lái)關(guān)閉它們自己。例如：l 把所有和&特殊符號(hào)用編碼表示任何小于號(hào)（），不是標(biāo)簽的一部分，都必須被編碼為> 任何與號(hào)（&），不是實(shí)體的一部分的，都必須被編碼為& 注：以上字符之間無(wú)空格。l 給所有屬性賦一個(gè)值XHTML規(guī)定所有屬性都必須有一個(gè)值，沒(méi)有值的就重復(fù)本身。例如： 必須修改為： l 用結(jié)構(gòu)化元素代替無(wú)意義的垃圾 許多人可能從來(lái)都不知道HTML和XHTML元素設(shè)計(jì)本意是用來(lái)表達(dá)結(jié)構(gòu)的。我們很多人已經(jīng)習(xí)慣用元素來(lái)控制表現(xiàn)，而不是結(jié)構(gòu)。例如，一段列表內(nèi)容可能會(huì)使用下面這樣的標(biāo)識(shí)：句子一句子二句子三

13、如果我們采用一個(gè)無(wú)序列表代替會(huì)更好：句子一句子二句子三你或許會(huì)說(shuō)“但是顯示的是一個(gè)圓點(diǎn)，我不想用圓點(diǎn)”。事實(shí)上，CSS沒(méi)有設(shè)定元素看起來(lái)是什么樣子，你完全可以用CSS關(guān)掉圓點(diǎn)。l 關(guān)于表格給每個(gè)表格和表單加上id 給表格或表單賦予一個(gè)唯一的、結(jié)構(gòu)的標(biāo)記，例如接下來(lái)，在書(shū)寫(xiě)樣式表的時(shí)候，你就可以創(chuàng)建一個(gè)“menu”的選擇器，并且關(guān)聯(lián)一個(gè)CSS規(guī)則，用來(lái)告訴表格單元、文本標(biāo)簽和所有其他元素怎么去顯示。這樣，不需要對(duì)每個(gè)標(biāo)簽附帶一些多余的、占用帶寬的表現(xiàn)層的高、寬、對(duì)齊和背景顏色等等屬性。只需要一個(gè)附著的標(biāo)記（標(biāo)記“menu”的id標(biāo)記），你就可以在一個(gè)分離的樣式表內(nèi)為干凈的、緊湊的代碼標(biāo)記進(jìn)行特別

14、的表現(xiàn)層處理。表格的嵌套 表格嵌套的原則是：嵌套層數(shù)不超過(guò)三，能不嵌套的盡量不要使用嵌套； 制作人員與美工設(shè)計(jì)合作時(shí)，應(yīng)盡可能地將美工的設(shè)計(jì)圖做拆分，以避免在網(wǎng)頁(yè)中將所有內(nèi)容嵌套在一個(gè)大的表格中。因?yàn)闉g覽器在解釋頁(yè)面的元素時(shí)，是以表格為單位逐一顯示，如果一張網(wǎng)頁(yè)是嵌套在一個(gè)大表格之內(nèi)，那么很可能造成的后果就是，當(dāng)瀏覽者敲入網(wǎng)址，他要先面對(duì)一片空白很長(zhǎng)時(shí)間，然后所有的網(wǎng)頁(yè)內(nèi)容同時(shí)出現(xiàn)。如果必須這樣做，請(qǐng)使用 （此標(biāo)簽僅限IE）標(biāo)記，以便能夠使這個(gè)大表格分塊顯示； 嵌套的表格大小盡量給定Width 和height數(shù)值，單位盡量為px，以便于瀏覽器加快解釋的速度，如采用自適應(yīng)性頁(yè)面布局，可統(tǒng)籌考慮使

15、用%還是px單位。 當(dāng)瀏覽時(shí)單元格中無(wú)內(nèi)容時(shí)，在原代碼中必須保證其代碼不為空，可以使用 或者透明GIF圖片填充； 表格中單元格不同數(shù)目時(shí)，建議使用和，以保證表格能夠正確排列，并方便他人閱讀表格代碼； 對(duì)于表格一般不建議使用除center外的align屬性，即 left或right ；不知道作何理解，我通常表格內(nèi)的位置，都是用td的對(duì)齊屬性以減少代碼； Width 和height 的寫(xiě)法：一般情況下Width 和height 寫(xiě)在 的標(biāo)簽內(nèi)；多行多列的表格，單元格的width寫(xiě)在每一列的第一個(gè) 標(biāo)簽內(nèi)，不再書(shū)寫(xiě)height標(biāo)簽?？傊裱粭l原則：不出現(xiàn)多于一個(gè)的控制同一個(gè)單元格大小的height

16、 和width, 保證任何一個(gè)width 和height 都是有效的，也就是你改動(dòng)代碼中任何一個(gè)width 和height 的數(shù)值，都應(yīng)該在瀏覽器中看到變化。做到這一條不容易，需要較長(zhǎng)時(shí)間的練習(xí)和思考； 注意在源代碼中不應(yīng)有這樣的代碼： 而應(yīng)該是這樣的： 這是因?yàn)闉g覽器認(rèn)為換行相當(dāng)于一個(gè)半角空格，以上不規(guī)范的寫(xiě)法相當(dāng)于無(wú)意中增加一個(gè)半角空格，如果確實(shí)有必要增加一個(gè)半角空格，也應(yīng)該這樣寫(xiě)： l 關(guān)于圖片圖片問(wèn)題主要存在size過(guò)大的問(wèn)題，在這里我們把圖片的優(yōu)化歸在代碼優(yōu)化一部分一起介紹而不另分一類(lèi)，是因?yàn)閳D片優(yōu)化與代碼內(nèi)容優(yōu)化的目的是一樣的。網(wǎng)頁(yè)中一般應(yīng)用兩種格式的圖片jpeg和gif，這兩種圖

17、片的應(yīng)用很多人把握的并不是很好，jpeg適用于顏色比較多、構(gòu)成比較復(fù)雜的圖片（比如一些照片、漸變顏色等等），gif適用于顏色比較少、構(gòu)成比較簡(jiǎn)單的圖片（比如網(wǎng)站的logo、大的色塊構(gòu)成的圖片等等）。Gif圖片尤其要注意導(dǎo)出的時(shí)候選擇顏色數(shù)目這樣也會(huì)達(dá)到很好的減小尺寸的效果。對(duì)于一些比較大的圖片我們還可以將它切割成比較小的圖片進(jìn)行拼接這樣也可以提高網(wǎng)頁(yè)的下載速度；網(wǎng)頁(yè)中插入的圖形文件除程序自動(dòng)調(diào)用的以外，必須指定其大小，即必須書(shū)寫(xiě)為，這樣在圖形文件未被讀取時(shí)，保證瀏覽器預(yù)留圖形占用的空間，防止網(wǎng)頁(yè)最終顯示時(shí)出現(xiàn)抖動(dòng)現(xiàn)象；帶有連接的圖形文件必須在樣式表中設(shè)置border:0;，以避免圖形被加入邊框

18、顏色；為所有圖片添加alt屬性。alt屬性指定了當(dāng)圖片不能顯示的時(shí)候就顯示供替換文本，這樣做對(duì)正常用戶(hù)可有可無(wú)，但對(duì)純文本瀏覽器和使用屏幕閱讀機(jī)的用戶(hù)來(lái)說(shuō)是至關(guān)重要的。只有添加了alt屬性，代碼才會(huì)被W3C正確性校驗(yàn)通過(guò)。注意的是我們要添加有意義的alt屬性，象下面這樣的寫(xiě)法毫無(wú)意義：正確的寫(xiě)法：l 圖標(biāo)原則建立有意義的圖標(biāo)使用已有的圖標(biāo)(不要濫用新圖標(biāo))在一個(gè)系統(tǒng)中使用不同的圖標(biāo)來(lái)表示相同的含義，或者使用一個(gè)圖標(biāo)來(lái)表示不同的多個(gè)含義都會(huì)使用戶(hù)迷惑。如果不是一個(gè)新的含義需求，我們應(yīng)該盡量使用已有的、已經(jīng)有確定含義的圖標(biāo)。相對(duì)固定的位置相同含義/作用的圖標(biāo)應(yīng)該放在屏幕相同的位置。含義明確好的圖標(biāo)

19、不需要作過(guò)多的解釋?zhuān)瑘D形本身能夠很清楚、容易的讓人們理解到它的含義。相鄰的圖標(biāo)之間不會(huì)產(chǎn)生歧義和混淆。色彩一般使用原則紅：警告、錯(cuò)誤、停止、禁止、危險(xiǎn)綠：ok、允許、不危險(xiǎn)黃：中等危險(xiǎn)警告灰：不可用狀態(tài)新建ICON前的可用性檢查在設(shè)計(jì)一個(gè)新圖標(biāo)前，設(shè)計(jì)師應(yīng)該了解其他更多的情況，比如：是否已經(jīng)有現(xiàn)成的圖標(biāo)，這個(gè)圖標(biāo)將被放在什么系統(tǒng)中，這個(gè)系統(tǒng)原來(lái)的圖標(biāo)規(guī)范等等。下面的檢查列表(checklist)幫助檢查新圖標(biāo)的可用性。checklist是否已有與新圖標(biāo)類(lèi)似的圖標(biāo)(在公司的任何產(chǎn)品中)?如果有，是哪一個(gè)? 這個(gè)已有的圖標(biāo)是否有合適的文字解釋?是否需要修改? 能不能使用已有的圖標(biāo)?如果不能，為什么

20、? 新圖標(biāo)將放在哪里(菜單條、菜單樹(shù)、列表),尺寸和顏色要求是什么? 新圖標(biāo)與原系統(tǒng)圖標(biāo)是否一致? 其它海虹的產(chǎn)品中是否使用了該圖標(biāo)，含義是否一致? 該圖標(biāo)是否需要一個(gè)特殊的顏色? 對(duì)圖標(biāo)的設(shè)計(jì),你有沒(méi)有一個(gè)詳細(xì)的想法? 圖標(biāo)樣稿是否通過(guò)用戶(hù)測(cè)試?圖標(biāo)尺寸16x1622x2232x3248x4864x64128x128l 文字排版 文章分段請(qǐng)使用 標(biāo)記，注意，一般情況下，請(qǐng)不要省略 結(jié)束標(biāo)記； 排版中我們經(jīng)常會(huì)遇到需要進(jìn)行首行縮進(jìn)的處理，不要使用 或者全角空格來(lái)達(dá)到效果，規(guī)范的做法是在樣式表中定義 p text-indent: 2em; ； 的CSS設(shè)置中請(qǐng)選定text-align: just

21、ify方式，以保證文字左右均對(duì)齊排列，盡量避免鋸齒現(xiàn)象的發(fā)生（此方式僅限IE，最好少用，最好刪除）； 為了最大程度的發(fā)揮瀏覽器自動(dòng)排版的功能，在一段完整的文字中請(qǐng)盡量不要使用 來(lái)人工干預(yù)分段； 不同語(yǔ)種的文字之間應(yīng)該有一個(gè)半角空格，但避頭的符號(hào)之前和避尾的符號(hào)之后除外漢字之間的標(biāo)點(diǎn)要用全角標(biāo)點(diǎn)，英文字母和數(shù)字周?chē)睦ㄌ?hào)應(yīng)該使用半角括號(hào)； l 字體、字號(hào)為了保證不同瀏覽器上字號(hào)保持一致，字號(hào)建議用點(diǎn)數(shù)（pt）和像素（px）來(lái)定義，使用pt單位時(shí)一般使用中文宋體的9pt和11pt，使用px單位時(shí)一般使用中文宋體12px 和14.7px，這是經(jīng)過(guò)優(yōu)化的字號(hào)，黑體字或者宋體字加粗時(shí)，一般選用11pt和

22、14.7px 的字號(hào)比較合適； 所有的字號(hào)都應(yīng)該用樣式表來(lái)實(shí)現(xiàn)，禁止在頁(yè)面中出現(xiàn) 標(biāo)記；中英文混排時(shí)，我們盡可能的將英文和數(shù)字定義為verdana 或arial 兩種字體，中文字體定義為宋體；l 添加注釋為了你的代碼方便程序員以及其他設(shè)計(jì)人員閱讀，請(qǐng)?jiān)诖a后書(shū)寫(xiě)注釋?zhuān)籹tyle.css文件中，每一條樣式都要注釋?zhuān)悦鞔_說(shuō)明該條樣式的作用；functions.js文件中，每一個(gè)函數(shù)都要注釋?zhuān)哉f(shuō)明該函數(shù)的作用。不要在注釋內(nèi)容中使“-”“-”只能發(fā)生在XHTML注釋的開(kāi)頭和結(jié)束，也就是說(shuō)，在內(nèi)容中它們不再有效。例如下面的代碼是無(wú)效的: 用等號(hào)或者空格替換內(nèi)部的虛線。3.用CSS定義元素外觀 l 所

23、有的CSS的盡量采用外部調(diào)用 l 書(shū)寫(xiě)時(shí)重定義的最先，偽類(lèi)其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序?qū)懀┍阌谧约汉退碎喿x。l CSS縮寫(xiě)規(guī)范使用縮寫(xiě)可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫(xiě)的主要規(guī)則如下：顏色16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫(xiě)一半，例如：#000000可以縮寫(xiě)為#000;#336699可以縮寫(xiě)為#369;盒尺寸通常有下面四種書(shū)寫(xiě)方法:property:value1; 表示所有邊都是一個(gè)值value1； property:value1 value2; 表示top和bottom的值是value

24、1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四個(gè)值依次表示top,right,bottom,left 方便的記憶方法是順時(shí)針，上右下左。具體應(yīng)用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 邊框(border)邊框的屬性如下：border-width:1px; border-style:solid; border-

25、color:#000; 可以縮寫(xiě)為一句：border:1px solid #000; 語(yǔ)法是border:width style color; 背景(Backgrounds)背景的屬性如下：background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; 可以縮寫(xiě)為一句：background:#f00 url(background.gif) no-repeat fixed 0

26、 0; 語(yǔ)法是background:color image repeat attachment position;你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為：color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% 字體(fonts)字體的屬性如下：font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family

27、:Lucida Grande,sans-serif; 可以縮寫(xiě)為一句：font:italic small-caps bold 1em/140% Lucida Grande,sans-serif;注意，如果你縮寫(xiě)字體定義，至少要定義font-size和font-family兩個(gè)值。列表(lists)取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫(xiě)list-style:none;,list的屬性如下:list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); 可以縮寫(xiě)為一句：list-style:squar

28、e inside url(image.gif);l CSS命名規(guī)范交易系統(tǒng)4.0中，為了避免與程序沖突，除了需要用js控制的對(duì)象采用id定義，其他樣式全部采用class定義。命名原則小寫(xiě)：所有的定義都使用小寫(xiě)； 不使用任何前綴，也不要使用任何下劃線。 盡量使用有明確語(yǔ)義的英文，原則上不使用拼音。 div的命名以系統(tǒng)模塊+具體功能方式，例如：數(shù)據(jù)系統(tǒng)的標(biāo)志條定義為：datasystemlogobar 允許縮寫(xiě)定義，例如數(shù)據(jù)系統(tǒng)：datasystem縮寫(xiě)為ds，但請(qǐng)?jiān)谖募^部注釋說(shuō)明； 一些命名慣例導(dǎo)航:nav 菜單:menu 登錄條:loginbar 標(biāo)志條:logobar 數(shù)據(jù):data 標(biāo)題

29、:titlebar 按鈕:buttonbar 版權(quán):copyright 廣告:ad 搜索:search 表格索引：pageindex 狀態(tài)：state 圖例：legend4. JS交互規(guī)范l 一般交互原則一致性：菜單選擇、數(shù)據(jù)顯示以及其它功能都應(yīng)使用一致的格式； 提供有意義的反饋；執(zhí)行有較大破壞性的動(dòng)作前要求確認(rèn)； 在數(shù)據(jù)錄入上允許取消大多數(shù)操作； 減少在動(dòng)作間必須記憶的信息數(shù)量；在對(duì)話(huà)、移動(dòng)和思考中提高效率；允許用戶(hù)非惡意錯(cuò)誤，系統(tǒng)應(yīng)保護(hù)自己不受致命作物的破壞；按功能對(duì)動(dòng)作分類(lèi)，并按此排列屏幕布局，設(shè)計(jì)者應(yīng)那里提高命令和動(dòng)作組織的內(nèi)聚性 提供語(yǔ)境相關(guān)的幫助機(jī)制；l 信息顯示原則只顯示與當(dāng)前用

30、戶(hù)語(yǔ)境環(huán)境有關(guān)的信息； 不要用數(shù)據(jù)將用戶(hù)包圍，使用便于用戶(hù)迅速吸取信息的方式表現(xiàn)信息； 使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫(xiě)和可預(yù)測(cè)的顏色，顯示信息的含義應(yīng)該非常明確，用戶(hù)不必再參考其它信息源； 產(chǎn)生有意義的出錯(cuò)信息； 使用縮進(jìn)和文本來(lái)輔助理解； 使用窗口分隔控件分隔不同類(lèi)型的信息； 高效地使用顯示器的顯示空間；l 數(shù)據(jù)輸入原則盡量減少用戶(hù)輸入動(dòng)作的數(shù)量； 維護(hù)信息顯示和數(shù)據(jù)輸入的一致性； 交互應(yīng)該時(shí)靈活的，對(duì)鍵盤(pán)和鼠標(biāo)輸入的靈活性提供支持； 在當(dāng)前動(dòng)作的語(yǔ)境中使不合適的命令不起作用； 讓用戶(hù)控制交互流，用戶(hù)可以跳過(guò)不必要的動(dòng)作、改變所需動(dòng)作的順序（如果允許的話(huà)）以及在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)；

31、 為所有輸入的動(dòng)作提供幫助； 消除冗余輸入?？赡艿脑?huà)提供缺省值、絕不要讓用戶(hù)提供程序中可以自動(dòng)獲取或計(jì)算出來(lái)的信息；l 向?qū)В╓IZARD）使用原則對(duì)于應(yīng)用中某些部分的處理流程是固定的，用戶(hù)必須按照指定的順序輸入操作信息，為了使用戶(hù)操作得到必要的引用應(yīng)該使用向?qū)?，使用?hù)使用功能時(shí)比較輕松明了，但是向?qū)П仨氂迷诠潭ㄌ幚砹鞒讨校⑶姨幚砹鞒虘?yīng)該不少于3個(gè)處理步驟。l 顏色使用原則統(tǒng)一色調(diào)，針對(duì)軟件類(lèi)型以及用戶(hù)工作環(huán)境選擇恰當(dāng)色調(diào)。 如：安全軟件，根據(jù)工業(yè)標(biāo)準(zhǔn)，可以選取黃色，綠色體現(xiàn)環(huán)保，藍(lán)色表現(xiàn)時(shí)尚、紫色表現(xiàn)浪漫等等，淡色可以使人舒適，暗色做背景使人不覺(jué)得累等；如果沒(méi)有自己的系列界面，采用標(biāo)準(zhǔn)界面

32、則可以少考慮此方面，做到與操作系統(tǒng)統(tǒng)一，讀取系統(tǒng)標(biāo)準(zhǔn)色表；色盲、色弱用戶(hù)，即使使用了特殊顏色表示重點(diǎn)或者特別的東西，也應(yīng)該使用特殊指示符，如!，?著重號(hào)，以及圖標(biāo)等；顏色方案也需要測(cè)試，常常由于顯示器、顯卡的問(wèn)題，色彩表現(xiàn)每臺(tái)機(jī)器都不一樣，應(yīng)該經(jīng)過(guò)嚴(yán)格測(cè)試，不同機(jī)器進(jìn)行顏色測(cè)試；遵循對(duì)比原則：在淺色背景上使用深色文字，深色背景上使用淺色文字，藍(lán)色文字以白色背景容易識(shí)別，而在紅色背景則不易分辨，原因是紅色和藍(lán)色沒(méi)有足夠反差，而藍(lán)色和白色反差很大。除非特殊場(chǎng)合，杜絕使用對(duì)比強(qiáng)烈，讓人產(chǎn)生憎惡感的顏色；整個(gè)界面色彩盡量少的使用類(lèi)別不同的顏色；l 字體使用原則使用統(tǒng)一字體，字體標(biāo)準(zhǔn)的選擇依據(jù)操作系統(tǒng)類(lèi)

33、型決定； 中文采用標(biāo)準(zhǔn)字體，“宋體”，英文采用標(biāo)準(zhǔn) Microsoft Sans Serif 不考慮特殊字體(隸書(shū)、草書(shū)等,特殊情況可以使用圖片取代),保證每個(gè)用戶(hù)使用起來(lái)顯示都很正常；字體大小根據(jù)系統(tǒng)標(biāo)準(zhǔn)字體來(lái)，例如 MSS字體8磅，宋體的小五號(hào)字(9磅）五號(hào)字（10.5磅)；所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情況；l 系統(tǒng)大小字體屬性改變的處理Windows系統(tǒng)有個(gè)桌面設(shè)置，設(shè)置大字體屬性，很多界面設(shè)計(jì)者常常為這個(gè)惱火，如果設(shè)計(jì)時(shí)遵循微軟的標(biāo)準(zhǔn)，全部使用相對(duì)大小作為控件的大小設(shè)置，當(dāng)切換大小字體的時(shí)候，相對(duì)不會(huì)有什么特殊問(wèn)題。 但是由于常常方便使用點(diǎn)陣作為

34、窗口設(shè)計(jì)單位，導(dǎo)致改變大字體后，出現(xiàn)版面混亂的問(wèn)題。 這個(gè)情況下，應(yīng)該做相應(yīng)處理：寫(xiě)程序自動(dòng)調(diào)節(jié)大小，點(diǎn)陣值乘以一個(gè)相應(yīng)比例；全部采用點(diǎn)陣作為單位，不理會(huì)系統(tǒng)字體的調(diào)節(jié)，這樣可以減少調(diào)節(jié)大字體帶來(lái)的麻煩；l 控件使用原則不要錯(cuò)誤使用控件，例如： 使用Button樣式做TTable的功能，拿主菜單條顯示版權(quán)信息；統(tǒng)一類(lèi)型的控件操作方式相同，例如一個(gè)控件雙擊可以執(zhí)行某些動(dòng)作，而同樣控件，雙擊卻沒(méi)有任何反映；一個(gè)控件只做單一功能，不復(fù)用 。 很多人為了寫(xiě)程序方便，喜歡把一個(gè)控件在不同情況下做不同功能用，這些對(duì)用戶(hù)初次理解增加難度，只有用戶(hù)熟悉后才能理解； 控件布局屏幕不能擁擠 擁擠的屏幕讓人難以理解

35、，因而難以使用。試驗(yàn)結(jié)果(Mayhew,1992年)屏幕總體覆蓋度不應(yīng)該超過(guò)40，而分組鐘覆蓋度不應(yīng)該超過(guò)62 ；讓人看上去，不能太擁擠，也不能太松散； 整個(gè)項(xiàng)目，采用統(tǒng)一的控件間距，通過(guò)調(diào)整窗體大小達(dá)到一致，即使在窗體大小不變的情況下，寧可留空部分區(qū)域，也不要破壞控件間的行間距； 區(qū)域排列 一行控件，縱向中對(duì)齊, 控件間距基本保持一致； 行與行之間間距相同，靠窗體Border距離應(yīng)大于行間間距(間距加邊緣留空)； 當(dāng)屏幕有多個(gè)編輯區(qū)域，要以視覺(jué)效果和效率來(lái)組織這些區(qū)域； 數(shù)據(jù)對(duì)齊要適當(dāng) 說(shuō)明文字，中文版應(yīng)使用中文全角冒號(hào)，縱向?qū)R時(shí)，并按冒號(hào)右對(duì)其； 縱向控件寬度盡量保持相通。并左對(duì)齊； 例

36、如金額等字符穿應(yīng)根據(jù)小數(shù)點(diǎn)對(duì)齊，或者右對(duì)齊； 有效組合 邏輯上相關(guān)聯(lián)的控件應(yīng)當(dāng)加以組合，以表示其關(guān)聯(lián)性，反之，任何不想光的項(xiàng)目應(yīng)當(dāng)風(fēng)格開(kāi)，在項(xiàng)目集合間，用間隔對(duì)其進(jìn)行分組，或者使用方框劃分各自區(qū)域； 窗口縮放時(shí)，控件位置、布局： 為了使界面不出現(xiàn)跑版或者難看的局面，解決方法：固定窗口大小，不允許改變尺寸， 改變尺寸的窗口，在Onsize的時(shí)候做控件位置、大小的相應(yīng)改變； 五、文件的命名l 所有文件的命名只能由小寫(xiě)英文字母，數(shù)字和下劃線組成，絕對(duì)禁止包含漢字、空格和特殊字符；l 文件的命名必須能表明文件的含義，不要用無(wú)意義的數(shù)字或字母；l 盡量使用有明確語(yǔ)義的英文，原則上不使用拼音；l 所有的H

37、TML頁(yè)面的后綴名用html，不要用htm；l 圖片的命名格式為：類(lèi)型+意義+后綴，例如：menu_about.gif；六、目錄結(jié)構(gòu)l 在網(wǎng)站根目錄中開(kāi)設(shè)images、js、css三個(gè)子目錄，images目錄中放網(wǎng)站所有頁(yè)面都要用到的公共圖片（包括*.swf），例如公司的標(biāo)志、banner 條、菜單、按鈕等等；js 子目錄中放外調(diào)的JavaScript文件；css 子目錄中放外調(diào)的樣式表文件； l 根目錄下默認(rèn)存在一個(gè)index.html文件作為網(wǎng)站的首頁(yè)；l 千萬(wàn)不要把圖片和flash的源文件（*.psd、*.fla）放在images目錄中；l 不要把一些網(wǎng)頁(yè)制作過(guò)程中的臨時(shí)文件放在目錄中提

38、交任務(wù)，比如*.bak文件；七、易用性規(guī)范1.易用性原理在閱讀詳細(xì)細(xì)節(jié)規(guī)范前。推薦您先了解易用性的一些基本原理。 l 為用戶(hù)設(shè)計(jì)任何軟件的目的都是幫助特定的一組用戶(hù)完成工作，所以我們首先要考慮的是誰(shuí)是你的用戶(hù)； 這個(gè)軟件能夠讓他們做什么。 你必須熟悉你的用戶(hù)，理解他們的需求，知道他們必須達(dá)到的目標(biāo)。l 不要限定你的用戶(hù)基礎(chǔ)使你的軟件適合特定用戶(hù)中所有人，包括色盲；殘疾；聽(tīng)力障礙者； 非本國(guó)語(yǔ)言使用者； l 國(guó)際化和本地化國(guó)際化是指軟件界面和功能應(yīng)該適合不同語(yǔ)言環(huán)境；本地化是指可以將所有提示信息、標(biāo)簽、過(guò)程界面用本地語(yǔ)言替換。 l 使您的軟件保持一致使您的軟件外觀和操作與其他軟件保持一致，這是最

39、重要的易用性基本原理，卻常常被忽視。一致性可以幫助用戶(hù)用以往的軟件使用知識(shí)更快的接受和學(xué)習(xí)新軟件l 讓用戶(hù)知道軟件正在做什么及時(shí)給用戶(hù)反饋信息，讓用戶(hù)總是知道你的軟件在做什么。不要讓他們猜測(cè)系統(tǒng)狀態(tài)，l 保持簡(jiǎn)單美觀讓你的操作界面保持簡(jiǎn)單、有效，不要放過(guò)多的按鈕、菜單、圖標(biāo)。 l 把控制權(quán)交給用戶(hù)電腦是為人服務(wù)的，應(yīng)該允許人們隨時(shí)隨地運(yùn)行或暫停軟件。 l 允許用戶(hù)犯錯(cuò)我們都會(huì)犯錯(cuò)誤。軟件應(yīng)該允許人們恢復(fù)他們的操作。對(duì)不可恢復(fù)的操作要提前警告。2.易用性規(guī)范易用性按鈕名稱(chēng)應(yīng)該易懂，用詞準(zhǔn)確，屏棄模棱兩可的字眼，要與同一界面上的其他按鈕易于區(qū)分，能望文知意最好。理想的情況是用戶(hù)不用查閱幫助就能知道

40、該界面的功能并進(jìn)行相關(guān)的正確操作。 完成相同或相近功能的按鈕用Frame框起來(lái)，常用按鈕要支持快捷方式；完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離； 按功能將界面劃分局域塊，用Frame框括起來(lái),并要有功能說(shuō)明或標(biāo)題；界面要支持鍵盤(pán)自動(dòng)瀏覽按鈕功能，即按Tab鍵的自動(dòng)切換功能；界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置；同一界面上的控件數(shù)最好不要超過(guò)10個(gè)，多于10個(gè)時(shí)可以考慮使用分頁(yè)界面顯示； 分頁(yè)界面要支持在頁(yè)面間的快捷切換，常用組合快捷鍵Ctrl+Tab ；默認(rèn)按鈕要支持Enter即選操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操

41、作；可寫(xiě)控件檢測(cè)到非法輸入后應(yīng)給出說(shuō)明并能自動(dòng)獲得焦點(diǎn)； Tab鍵的順序與控件排列順序要一致，目前流行總體從上到下，同時(shí)行間從左到右的方式； 復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列；復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇；選項(xiàng)數(shù)相同時(shí)多用選項(xiàng)框而不用下拉列表框； 界面空間較小時(shí)使用下拉框而不用選項(xiàng)框；選項(xiàng)數(shù)較少時(shí)使用選項(xiàng)框，相反使用下拉列表框；專(zhuān)業(yè)性強(qiáng)的軟件要使用相關(guān)的專(zhuān)業(yè)術(shù)語(yǔ)，通用性界面則提倡使用通用性詞眼；規(guī)范性通常界面設(shè)計(jì)都按Windows界面的規(guī)范來(lái)設(shè)計(jì)，即包含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動(dòng)條、右鍵快捷菜單”的標(biāo)準(zhǔn)格式，可以說(shuō)：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就

42、越好。小型軟件一般不提供工具廂。 常用菜單要有命令快捷方式；完成相同或相近功能的菜單用橫線隔開(kāi)放在同一位置； 菜單前的圖標(biāo)能直觀的代表要完成的操作； 菜單深度一般要求最多控制在三層以?xún)?nèi)； 工具欄要求可以根據(jù)用戶(hù)的要求自己選擇定制； 相同或相近功能的工具欄放在一起； 工具欄中的每一個(gè)按鈕要有及時(shí)提示信息； 一條工具欄的長(zhǎng)度最長(zhǎng)不能超出屏幕寬度； 工具欄的圖標(biāo)能直觀的代表要完成的操作；系統(tǒng)常用的工具欄設(shè)置默認(rèn)放置位置；工具欄太多時(shí)可以考慮使用工具廂； 工具廂要具有可增減性，由用戶(hù)自己根據(jù)需求定制； 工具廂的默認(rèn)總寬度不要超過(guò)屏幕寬度的1/5；狀態(tài)條要能顯示用戶(hù)切實(shí)需要的信息，常用的有： 目前的操作

43、、系統(tǒng)狀態(tài)、用戶(hù)位置、用戶(hù)信息、提示信息、錯(cuò)誤信息等，如果某一操作需要的時(shí)間較長(zhǎng)，還應(yīng)該顯示進(jìn)度條和進(jìn)程提示。 滾動(dòng)條的長(zhǎng)度要根據(jù)顯示信息的長(zhǎng)度或?qū)挾饶芗皶r(shí)變換，以利于用戶(hù)了解顯示信息的位置和百分比；狀態(tài)條的高度以放置五號(hào)字為宜，滾動(dòng)條的寬度比狀態(tài)條的略窄； 菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時(shí)仍有立體感； 菜單和狀態(tài)條中通常使用五號(hào)字體。工具條一般比菜單要寬，但不要寬的太多，否則看起來(lái)很不協(xié)調(diào)；右鍵快捷菜單采用與菜單相同的準(zhǔn)則；幫助系統(tǒng)應(yīng)該提供詳盡而可靠的幫助文檔，在用戶(hù)使用產(chǎn)生迷惑時(shí)可以自己尋求解決方法。 幫助文檔中的性能介紹與說(shuō)明要與系統(tǒng)性能配套一致；打包新系

44、統(tǒng)時(shí)，對(duì)作了修改的地方在幫助文檔中要做相應(yīng)的修改； 操作時(shí)要提供及時(shí)調(diào)用系統(tǒng)幫助的功能。常用F1；在界面上調(diào)用幫助時(shí)應(yīng)該能夠及時(shí)定位到與該操作相對(duì)的幫助位置，也就是說(shuō)幫助要有即時(shí)針對(duì)性；最好提供目前流行的聯(lián)機(jī)幫助格式或HTML幫助格式； 用戶(hù)可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當(dāng)然也應(yīng)該提供幫助主題詞；如果沒(méi)有提供書(shū)面的幫助文檔的話(huà)，最好有打印幫助的功能。 在幫助中應(yīng)該提供我們的技術(shù)支持方式，一旦用戶(hù)難以自己解決可以方便的尋求新的幫助方式；合理性屏幕對(duì)角線相交的位置是用戶(hù)直視的地方，正上方四分之一處為易吸引用戶(hù)注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。 父窗體或主窗體的中心位置應(yīng)該在

45、對(duì)角線焦點(diǎn)附近； 子窗體位置應(yīng)該在主窗體的左上角或正中； 多個(gè)子窗體彈出時(shí)應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜；重要的命令按鈕與使用較頻繁的按鈕要放在界面上注目的位置； 錯(cuò)誤使用容易引起界面退出或關(guān)閉的按鈕不應(yīng)該放在易點(diǎn)位置，橫排開(kāi)頭或最后與豎排最后為易點(diǎn)位置；與正在進(jìn)行的操作無(wú)關(guān)的按鈕應(yīng)該加以屏蔽(Windows中用灰色顯示，沒(méi)法使用該按鈕)；對(duì)可能造成數(shù)據(jù)無(wú)法恢復(fù)的操作必須提供確認(rèn)信息,給用戶(hù)放棄選擇的機(jī)會(huì)；非法的輸入或操作應(yīng)有足夠的提示說(shuō)明；對(duì)運(yùn)行過(guò)程中出現(xiàn)問(wèn)題而引起錯(cuò)誤的地方要有提示，讓用戶(hù)明白錯(cuò)誤出處，避免形成無(wú)限期的等待；提示、警告、或錯(cuò)誤說(shuō)明應(yīng)該清楚、明了、恰當(dāng)；美觀與協(xié)調(diào)

46、性界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺(jué)協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶(hù)的注意力。 長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度；布局要合理,不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間；按鈕大小基本相近，忌用太長(zhǎng)的名稱(chēng)，免得占用過(guò)多的界面位置； 按鈕的大小要與界面的大小和空間要協(xié)調(diào)； 避免空曠的界面上放置很大的按鈕； 放置完控件后界面不應(yīng)有很大的空缺位置； 字體的大小要與界面的大小比例協(xié)調(diào), 通常使用的字體中宋體9-12較為美觀，很少使用超過(guò)12號(hào)的字體； 前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，最好少用深色，如大紅、大綠等，常用色考慮使用Windows界面色調(diào)；如果使用其他顏色，主色要柔

47、和，具有親和力與磁力，堅(jiān)決杜絕刺目的顏色；大型系統(tǒng)常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等。 界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方； 如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放；對(duì)于含有按鈕的界面一般不應(yīng)該支持縮放，即右上角只有關(guān)閉功能； 通常父窗體支持縮放時(shí)，子窗體沒(méi)有必要縮放；如果能給用戶(hù)提供自定義界面風(fēng)格則更好，由用戶(hù)自己選擇顏色、字體等；菜單菜單是界面上最重要的元素，菜單位置按照按功能來(lái)組織。 菜單通常采用“常用-主要-次要-工具-幫助”的位置排列，符合流行的Wi

48、ndows風(fēng)格。 常用的有“文件”、“編輯”，“查看”等，幾乎每個(gè)系統(tǒng)都有這些選項(xiàng)，當(dāng)然要根據(jù)不同的系統(tǒng)有所取舍； 下拉菜單要根據(jù)菜單選項(xiàng)的含義進(jìn)行分組，并且按照一定的規(guī)則進(jìn)行排列，用橫線隔開(kāi)； 一組菜單的使用有先后要求或有向?qū)ё饔脮r(shí)，應(yīng)該按先后次序排列；沒(méi)有順序要求的菜單項(xiàng)按使用頻率和重要性排列，常用的放在開(kāi)頭， 不常用的靠后放置；重要的放在開(kāi)頭，次要的放在后邊； 如果菜單選項(xiàng)較多，應(yīng)該采用加長(zhǎng)菜單的長(zhǎng)度而減少深度的原則排列； 菜單深度一般要求最多控制在三層以?xún)?nèi)；對(duì)常用的菜單要有快捷命令方式，組合原則見(jiàn)8； 對(duì)與進(jìn)行的操作無(wú)關(guān)的菜單要用屏蔽的方式加以處理，如果采用動(dòng)態(tài)加載方式即只有需要的菜單才顯示最好；菜單前的圖標(biāo)不宜太大，與字高保持一直最好； 主菜單的寬度要接近，字?jǐn)?shù)不應(yīng)多于四個(gè)，每個(gè)菜單的字?jǐn)?shù)能相同最好； 主菜單數(shù)目不應(yīng)太多，最好為單排布置；獨(dú)特性如果一味的遵循業(yè)界的界面標(biāo)準(zhǔn)，則會(huì)喪失自己的個(gè)性.在框架符合以上規(guī)范的情況下，設(shè)計(jì)具有自己獨(dú)特風(fēng)格的界面尤為重要。尤其在商業(yè)軟件流通中有著很好的遷移默化的廣告效用。 安裝界面上應(yīng)有單位介紹或產(chǎn)品介紹，并有自己的圖標(biāo)；主界面，最好是大多數(shù)界面上要有公司圖標(biāo)；登錄界面上要有本產(chǎn)品的標(biāo)志，同時(shí)包含公司圖標(biāo)； 幫助菜單的“關(guān)于”中應(yīng)有版權(quán)和產(chǎn)品信息；公司的系列產(chǎn)品要保持一直的界面風(fēng)格，如背景色、字體、菜單排列方式、圖標(biāo)、安裝