修訂歷史記錄

1、修訂歷史記錄日期版本說明提出機構(gòu)編寫人及聯(lián)系方式2005-11-171.0馬俊2005-11-221.1關(guān)于css定義字體的順序進行了修改馬俊目錄目錄2一、UI設(shè)計原理3二、UI界面設(shè)計原則31.概括說明32.具體應(yīng)用中的原則3三、Logo及顏色標準51.正確的Logo圖標樣式52.Logo標準色63.標準字體7四、使用網(wǎng)站標準來書寫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縮寫，也就是用戶與界面的關(guān)系。包括交互設(shè)計，用戶研究，與界面設(shè)計三個方面。一、 UI設(shè)計原理UI設(shè)計原理：以用戶為中心一個重要的人機界面設(shè)計原理是：是用戶控制軟件，而不是軟件控制用戶。它的含義如下：l 操作者是用戶而不是電腦或者軟件，你可以讓電腦自動執(zhí)行任務(wù)，但是這種自動執(zhí)行應(yīng)該允許用戶選擇和控制； l 用戶有權(quán)選擇個性化的界面，軟件應(yīng)該提供多樣的界面或參數(shù)供用戶選擇； l 軟件應(yīng)該盡可能的提供交互和響應(yīng)，確保命令簡單、明顯，結(jié)果是直接的，并且容易取消。 二、UI界面設(shè)計原則1.概括說明l 直接 設(shè)計優(yōu)秀的軟件，用戶能夠直接操作并得到需要的信息。用戶應(yīng)該能夠在屏

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

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

5、常規(guī)操作以及系統(tǒng)的方方面面進行符合自身習慣的自定義設(shè)置。包括常規(guī)操作、界面排版、界面樣式等種種自定義；界面色彩要求：計算機屏幕的發(fā)光成像和普通視覺成像有很大的不同，應(yīng)該注意這種差別作出恰當?shù)纳蚀钆?。對于需用戶長時間使用的系統(tǒng)，應(yīng)當使用戶在較長時間使用后不至于過于感到視覺疲勞為宜。例如輕松的淡彩為主配色，灰色系為主配色等等。切忌色彩過多，花哨艷麗，嚴重妨礙用戶視覺交互；界面平面版式要求：系統(tǒng)樣式排版整齊劃一，盡可能劃分不同的功能區(qū)域于固定位置，方便用戶導航使用；排版不宜過于密集，避免產(chǎn)生疲勞感；l B/S構(gòu)架適用原則頁面最?。河捎赪eb的網(wǎng)絡(luò)特性，盡可能減小單頁面加載量，降低圖片文件大小和數(shù)量

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

23、有的CSS的盡量采用外部調(diào)用 l 書寫時重定義的最先，偽類其次，自定義最后（其中a:link a:visited a:hover a:actived 要按照順序?qū)懀┍阌谧约汉退碎喿x。l CSS縮寫規(guī)范使用縮寫可以幫助減少你CSS文件的大小，更加容易閱讀。css縮寫的主要規(guī)則如下：顏色16進制的色彩值，如果每兩位的值相同，可以縮寫一半，例如：#000000可以縮寫為#000;#336699可以縮寫為#369;盒尺寸通常有下面四種書寫方法:property:value1; 表示所有邊都是一個值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; 四個值依次表示top,right,bottom,left 方便的記憶方法是順時針，上右下左。具體應(yīng)用在margin和padding的例子如下：margin:1em 0 2em 0.5em; 邊框(border)邊框的屬性如下：border-width:1px; border-style:solid; border-

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

26、 0; 語法是background:color image repeat attachment position;你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：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; 可以縮寫為一句：font:italic small-caps bold 1em/140% Lucida Grande,sans-serif;注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。列表(lists)取消默認的圓點和序號可以這樣寫list-style:none;,list的屬性如下:list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); 可以縮寫為一句：list-style:squar

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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