Web原型頁面設(shè)計規(guī)范2019.04.23

1、Web原型頁面設(shè)計規(guī)范編號:版本號:受控狀態(tài):作者:分發(fā)號：2019.04.23文檔修改歷史記錄文檔修改記錄日期版本號更改人1更改內(nèi)容文檔審核記錄日期版本號審核人審核意見11引言6第第 頁共35頁1引言1.1目的本文用于規(guī)范我司所開發(fā)的商業(yè)軟件中對于web頁面的設(shè)計工作，明確在設(shè)計中所要遵循的準則和方法，web頁面中各個元素的規(guī)格要求，確保所實現(xiàn)的web頁面在風格、結(jié)構(gòu)和功能上的統(tǒng)一，提升商業(yè)軟件的外在品質(zhì)。1.2本規(guī)范適用于公司所有的商業(yè)軟件產(chǎn)品。1.3縮略術(shù)語1.4參考資料2WEB頁面框架內(nèi)容網(wǎng)頁寬度最新顯示器分辨率比例調(diào)查：目前主流分辨率處于1024X768以上，在此狀態(tài)下，默認使用91

2、0的網(wǎng)頁寬度。分券率占有率匚136676822.T4X25.14%二14.409002(1BQX2(15OX二11024768ITRIXIT.1TX二J192010801441%14-24%二112808005.94%6.20%uJ12803C10244.30%4.64%匚11S803C10504.L3X3.9r舞匚112807883.OOX3.32XeJeoo6oo2.33X1.17%izj115288-12.L3X2.02%ezJ12809801.SOX1-T1X特殊情況.信息量或圖片量過大的情況，可以考慮加寬承載，給出兩個參考尺寸:950990.搜索類信息頁面，采用自適應(yīng)屏幕方式頁面框架

3、WEB的頁面框架是指構(gòu)成完整頁面的組織結(jié)構(gòu)。通常是由以下三部分構(gòu)成:Head,Main,Foot,有些時候出于布局的需要，在“Head”下面還會加上用于頁面功能導航的“Mem】”。如圖：#Head#Menu#Foot圖1C頁面布局布局原則對于WEB應(yīng)用來說，頁面布局是和web應(yīng)用的功能區(qū)相對應(yīng)的，并且對于頁面中各個部分之間的切分比例也需要遵守一定的規(guī)則。頁面布局的設(shè)計，首先需要考慮用戶在瀏覽web頁面時視覺流向上的要求：#Head#Menu5#Foot#Head#Menu5圖2從視覺流向上看，用戶首先看到的是頁面“Head”部分的左面，通常那里是標識這個WEB應(yīng)用的Logo：然后是陳列WEB應(yīng)

4、用主要功能的“Menu”來用于頁面導航：接下來用戶將看的是處于頁面左側(cè)的“sidebar，通常這里也是用于頁面功能導航的，和“Menu”出的選擇相呼應(yīng)，這里的內(nèi)容可以通過類似樹狀結(jié)構(gòu)的方式展示更為詳細的功能；接下來是處于頁面中心位置的內(nèi)容部分，最后用戶的視線落在WEB頁面的底部。布局要求頁面分割以上面圖示的布局方式為例，按照通常web頁面設(shè)計時所遵循的方法，并結(jié)合黃金分割比例的方法：首先，將頁面按照3*3的方式進行分割，如下圖：在高度方向上，對上部1/3區(qū)域按照黃金分割的方法分出head和menu的區(qū)域；在寬度方向上，對中部左邊1/3區(qū)域按照黃金分割的方法分出sideba的區(qū)域，剩下的空間留給

5、content區(qū)域；在高度方向上，對下部1/3區(qū)域按照黃金分割的方法分出foot的區(qū)域：頁面結(jié)構(gòu)頁面的布局中，各個區(qū)域大小的定義方式是不同的，請見下圖:為自適應(yīng)屏幕的寬度為自適應(yīng)屏幕的寬度PX為固定像素的寬度在頁面布局中，對各個功能區(qū)域的切分是按照“像素”和“比例”方式來進行的，以1024*768的分辨率做為基準，其中：Head區(qū)域，寬度是按照比例方式設(shè)置的，寬度按照100%設(shè)置，高度采用所占的固定像素值來確定的，一般占？px,如果有menu區(qū)，則調(diào)整為？px：Menu區(qū)域，和“head”的配置要求是一樣的，寬度按照100%設(shè)置，高度結(jié)合“head”的高度設(shè)置來確定，一般占？px；Sideba

6、r區(qū)域，寬度是結(jié)合與“content”之間的黃金切分比例，按照固定像素的方式確定的，一般占？px；高度是按照比例方式來設(shè)置的；Content區(qū)域，高度和寬度方向布局都是按照比例方式來設(shè)置的；Foot區(qū)域，寬度按照100%設(shè)置，高度采用所占的固定像素值來確定的，一般占？px：頁面展現(xiàn)對于頁面布局來說，除了上述要求外，還需要考慮如下要求：能自適應(yīng)1024*768、800*600兩種分辨率；界面層次不超過3層；默認窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動條；,當界面內(nèi)容超出顯示區(qū)域時，以浮動層的形式顯示；還有，對于用戶的感官而言，屏幕對角線相交的位置是用戶直視的地方，而頁面正上方四分之一處為易吸引用戶注意

7、力的位置，所以在放置頁面時要注意利用這兩個位置。要求：父頁面或主頁面的中心位置應(yīng)該設(shè)計在對角線焦點附近；子頁面的位置應(yīng)該靠近主窗體的左上角或正中；需要多個子頁面彈出時，應(yīng)該依次向右下方偏移，以顯示窗體出標題為宜；在頁面上方四分之一處放置用戶的log。、主要功能導航和一些系統(tǒng)操作功能；頁面美化界面應(yīng)該大小適合美學觀點，感覺協(xié)調(diào)舒適，能在有效的范闈內(nèi)吸引用戶的注意力。建議和要求：長寬接近黃金點比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度；布局要合理，不宜過于密集，也不能過于空曠，合理的利用空間；,同一頁面上的按鈕大小應(yīng)該一致，不同頁面的按鈕大小盡量相近，按鈕上忌用太長的名稱：按鈕的大小要與界面的大小和空

8、間要協(xié)調(diào)；避免空曠的界面上放置很大的按鈕：放置完控件后界面不應(yīng)有很大的空缺位置；字體的大小要與界面的大小比例協(xié)調(diào)，通常使用的字體12px：前景與背景色搭配合理協(xié)調(diào)，反差不宜太大，主色要柔和，最好少用深色，如大紅、大綠等，可以借用Windows界面色調(diào)：大型系統(tǒng)常用的主色有#E1E1E1、#EFEFEF、#C0C0C0等；界面風格要保持一致，字的大小、顏色、字體要相同，需要藝術(shù)處理或有特殊要求的地方建議使用圖片表現(xiàn)；如果窗體支持最大化或放大時，窗體上的控件也要隨著窗體而縮放：切忌只放大窗體而忽略控件的縮放；系統(tǒng)對話框頁面不應(yīng)該支持縮放，即右上角只有關(guān)閉功能；通常父窗體支持縮放時，子窗體沒有必要縮

9、放；如果能給用戶提供自定義界面風格，則由用戶自己選擇顏色、字體等:頁面字體頁面字體屬性的設(shè)置在相應(yīng)的CSS中進行定義，頁面文字編碼要求是UTF-8,在規(guī)定字體屬性時,需要設(shè)置：中文采用“宋體”，英文采用“Anal”或“verdana”,CSS文件中的fbnt-fanuly里面必須保證有“宋體”。對于頁面屬性中字體大小的設(shè)置，需要內(nèi)容的不同級別來設(shè)置，通常：“Head”中標題文字，20px：“Menu”中的導航文字，14px：uSidebar中的文字，12px：“Content”中的正文，12Px或14px,標題：“foot中的文字，12Px或10px；邊距WEB頁面和其中的表格都應(yīng)該設(shè)定邊距，

10、避免頁面元素緊貼邊沿的情況發(fā)生，最小邊距值為“3px”，默認邊距值應(yīng)在CSS中設(shè)定。圖4段落排版在WEB頁面中，“content”部分是展示頁面正文的區(qū)域，當段落是由純文字構(gòu)成時：正文一行字數(shù)最好不超過50,首頁的標題文字以8-20字為佳。行距建議用百分比來定義，常用的兩個行距的值是lme-height:120%或150%；對于一段文字，尤其是正文部分，保證左右至少有15Px的留白，便于用戶換行時不受到干擾。文字和背景對比要足夠明顯，保證最弱文字的可讀性。在使用p標簽，需要對應(yīng)有/p,并且要求設(shè)置maigin,使得段落文字的前后左右能夠有合適的空白區(qū)。可在CSS中設(shè)置：pmargin:18Px

11、6Px6Pxi8px;,分別定義了上、右、下、左的空白區(qū)大小。首行縮進時,禁止使用,而是在CSS中設(shè)置text-indent,例如：ptext-mdent:2em;o在一段完整的文字中請盡量不要使用br來人工干預(yù)分段：對于margin,為了防止由于采用默認的margin值而導致的頁面排版問題，推薦所有標簽定義為：margin:。；當采用豎排文字時，推薦使用writing-mode。通過設(shè)置兩個屬性值：1Mb和tb“L并結(jié)合direction完成文字豎排，lr-tb指的是文字方向為：左-右、上-下，ttni是指上-下、右-左。FrameFrame是能夠?qū)⒁粋€WEB頁面切分成幾個窗II來顯示W(wǎng)EB

12、內(nèi)容的一種頁面設(shè)計方法,切分后的每個窗口內(nèi)容是通過指向URL來實現(xiàn)的。Frame的標記是FRAMESETFRAME,而在使用Flame時，通常需要將其放在網(wǎng)頁入口的html文件中，而不必放入BODY標記。FRAMESET是用以劃分框窗的，每一框窗由一個FRAME標記所標示，F(xiàn)RAME必須在FRAMESET范闈中使用。其中：FRAMESET稱框架標記，用以宣告HTML文件為框架模式，并設(shè)定視窗如何分割。FRAME則只是設(shè)定某一個框窗內(nèi)的參數(shù)屬性。使用Frame分割頁面，需要按照2.1節(jié)“頁面布局”中所描述的要求來設(shè)置FRAMESET和FRAME,以完成對頁面各個部分合理的切分。對于FRAMESE

13、T和FRAME中的一些屬性設(shè)置，要求有：Name,表示Frame的名字，必須有定義；Framespacmg,表示各個Frame之間空白距離，要求設(shè)置為非零，通常設(shè)置為5；Noresize,表示是否允許使用者通過拖拉改變Fiame的大小，要求在Fizme設(shè)置此參數(shù)；ScrolUng,表示是否要顯示卷軸，要求設(shè)置為“AUTO”Margniliight,表示框架高度部分邊緣所保留的空間，要求設(shè)置？Marginwidth,表示框架寬度部分邊緣所保留的空間，要求設(shè)置？2.8其他頁1=12.8其他頁1=1元素面板我們常用的布局對象，一般由標題欄加內(nèi)容區(qū)域以及狀態(tài)欄組成。標題、內(nèi)容區(qū)域中英文字符一般采用左對

14、齊方式。面板（Panel）35850px(9:3)內(nèi)容區(qū)域820px內(nèi)容區(qū)域240而以絢要曬面板（Panel）35850px(9:3)內(nèi)容區(qū)域820px內(nèi)容區(qū)域240而以絢要曬（6;6）曲8560Px66而OS乃3px(8：4)內(nèi)容區(qū)域530內(nèi)容區(qū)域530面板367Px34)內(nèi)容區(qū)域337內(nèi)容區(qū)域內(nèi)容區(qū)域337標簽頁當有多個分類內(nèi)容頁要顯示時使用，標簽上顯示的文字宜居中對齊標簽頁（Tabs）三個十四個”8三個作三個十四個”8區(qū)整頁說明豚基奧*fl女刊再“行式,一聆是正常的U鏤頁樣式,另外一是0九尺保簽黃展式,H余仔式主盤用于不同內(nèi)雄麻膜,而財曲或用于分欠內(nèi)行的切換.分頁器當我們顯示內(nèi)容行數(shù)過多

15、時應(yīng)采用分頁控件降低單頁的數(shù)據(jù)量，以提高系統(tǒng)性能。當需要分頁顯示數(shù)據(jù)時，要求：當對查詢結(jié)果進行分頁時，分頁的同時需要能夠執(zhí)行杳詢功能；,當頁數(shù)較多時，允許輸入具體頁數(shù)進行查詢；分頁按鈕可以采用數(shù)字也可以采用文字，但當前頁要與其他沒有選中的頁區(qū)分開來，如下圖采用顏色來分頁(Pagination)1234s-20，X4Sa7SJO，上7T-531-1：?1819|分R事件的分頁妞件有兩號樣式,第一a展般力遇用的4於不因焚函功不磁果.順口。只有上下輛個崗s,南子不需要快出i轉(zhuǎn)天先初情改.面包屑當系統(tǒng)存在更雜的層次結(jié)構(gòu)時，提供用戶導航作用，能引導用戶快速跳轉(zhuǎn)到相應(yīng)的內(nèi)容。每一層級內(nèi)容不宜過長，最好能控

16、制在4個字以內(nèi)容，最長不要超過6個字；宜左對齊。面包屑(Breadcrumb)前a/。/尬比S3芻事cw角妣3te藥高要在解向上號a并且費告&用戶自仁，在何處町,可以采用時也幾表單表單元素主要使用來收集用戶材料，子元素相對比較多應(yīng)注選擇統(tǒng)一對齊方法以及相應(yīng)字體，保持簡潔美觀。以下是為示例：表單（Form）大尺寸SW用人女人tfrt5WV,變?nèi)眨簝?yōu)6掙日*;第注：這劃t雷注（M2016-01-11b-z=asn12345678910Q12II141$1617IS19X)21n23242627?8不外312$e$a圮曜不冠,切煦M4Q）場35tMa屈axaux332.8.6表格對于表格，其屬性的設(shè)

17、置同樣在css中進行定義。表格使用最多的情況是顯示裝在的數(shù)據(jù)，由于有很多表項需要在頁面中完整顯示，因此原則上對于表格各個單元格寬度的設(shè)置應(yīng)采用百分比方式來進行，這樣表格不僅能夠?qū)?shù)據(jù)完整地顯示，而且還能夠適應(yīng)不同分辨率的情況。但由于表格中存在不定長的內(nèi)容，所以為了保證表格的寬度不被擠變形，對于不定長的內(nèi)容，可固定顯示寬度，當超出此顯示寬度后,以顯示，光標停留后，詳細內(nèi)容再在浮動層顯示。其他要求：表頭中的數(shù)據(jù)應(yīng)水平/垂直居中對齊。表單中內(nèi)容如為定長，則為居中顯示；如為不固定的中英文內(nèi)容，則為居左顯示；如為數(shù)值形式，則為居右顯示。表格的表頭應(yīng)采用不同于表格內(nèi)容的背景顏色，并要求對比明顯：表格表頭的

18、文字應(yīng)采用加粗，或不同于表格內(nèi)容的字體；表格中相鄰行需要通過兩種有一定對比差異的淺色作為背景色：各個頁面的表格邊框風格需要統(tǒng)一，建議設(shè)置細邊框；表格中存在的鏈接文字需要采用不同于其他內(nèi)容的顏色或字體顯示；對于表格的嵌套盡量控制在三層以內(nèi)，并且禁止使用表格來進行頁面布局。示例表格（Table）年齡整件鈿nw口子或23啊叼龍23ReMB劉芾56倒窗S691ft*大五長44切fita大三長44枝十*22女ffll22女fi502fitJMft空502典太白金1003a太日臺網(wǎng)1003表格18#發(fā)用撤fl玄*mt3J禁個本P,當*立*我劃*得奧第颯才會號點戈用表格格九提示框提示框（Alert）成功!9

19、示椎”比依靠雷示也/式。誓告*冰板球式O耀使冊第柩林式。誓告*冰板球式O耀使冊第柩林式斷樞林式停用修雙不應(yīng)同下衰用不自我小膻擇咒.從內(nèi)磔4用戶的（T用.為上再費提JH8體現(xiàn)力度,二1涸充用3，.標記標記(Label)標記3冊的元*大小無校學1381的內(nèi)自火飲化.所*我科nX?的大小.不由該用限4.標簽標簽(Tag)正常次等日趨標標售舊寨標片2”出舊區(qū)13B1標費使用用后悠不是颯為后送行球均,標EfiiW荔的：萬山咄MX省只I3H昨).全局信息全局信息(Message)正常忱1涪是f示博息KW8iXBTOrtM瞽做值0蛆原一篌造S息-3JR-*WiWM全叫Aft侵肺班金號(M如期皿.正上方也.埃

20、溫當示廂為硼WW也反饃.制m雙不H卡網(wǎng)戶M.期改設(shè)比漏失咖(UM5).2.8.11模態(tài)窗口模態(tài)框(Modal)a格使腋明m8奪hid無機杯，可以焉：。力入刎網(wǎng)者點出ma行關(guān)劃：足田不慢白由沒有矢ww切只旭蚯。照國娛初行收作(務(wù)過湖紳,它a行矢用i.遮礎(chǔ)明噸,iwo.2.8.12按鈕按鈕，要求按鈕上顯示的文字能夠準確表達功能含義;按鈕（Button）境加元素發(fā)IB元京尺寸夜電元餐接田元宦或用元*境加元素發(fā)IB元京尺寸夜電元餐接田元宦或用元*RrtrtBURrtrtBU式馬關(guān)窈班!比較格色吟肺式，可W1淞版.hover不可用尺寸板0元拿質(zhì)日元京枝目元旗法叨元素hover不可用尺寸板0元拿質(zhì)日元京枝

21、目元旗法叨元素在破內(nèi)再并在破內(nèi)再并HJWGTfflg溜我下.可以此刪徉江M索hover不可用尺寸技的元點按租元”|年旬元|展鈕無重|法由元京壬案hove不可用尺寸M索hover不可用尺寸技的元點按租元”|年旬元|展鈕無重|法由元京壬案hove不可用尺寸夜跖元陵按3元素殯18天竄傘犯藐）（按也門號）G立玲（。田元京）（二）技田元達描的元總成圖元*2.8.13單選框默認選擇一個，和所關(guān)聯(lián)的文字的間距應(yīng)該在2.8.13單選框默認選擇一個，和所關(guān)聯(lián)的文字的間距應(yīng)該在3px：性別：性別：男人女人多選框默認選擇大多數(shù)用戶的選擇結(jié)果，所關(guān)聯(lián)的文字應(yīng)該能夠準確表達選擇的含義，和控件的間距應(yīng)該在3px；下拉框給

22、出默認選擇，并且默認選擇顯示出“默認全部”或“請選擇”等文字提示;下圖默認選擇結(jié)果圖例圖片默認為顯示出代表圖片文件的圖標，或是縮略圖;多媒體默認為顯示出代表多媒體文件的圖標：媒體對象（Media）wlmy!%燈獻6京呢中的斕族40曲”.主費有內(nèi)為左片.右文字，父費深足諂個姑陶就可以考慮雙用段%由姮林子工2.8.18彈出框彈出框(Popover)Wjlpopove布HWMWjlpopove布HWM聞IpoK耐內(nèi)古.滋滋也可以不使用后總.僅僅融為宮.議號pogEflWJttpopo。的內(nèi)古,當制林也可以不便E分級.僅僅使用內(nèi)定.達等popore虐颯S這pops會內(nèi)K.才的為班以不物用現(xiàn).僅況題內(nèi)后

23、.堵filgpavtf堵filgpavtf做瀏於Rpover的K容.號然你也可U不GW場必以儀則為名.次分2我后金的po時vMX式.3電白也可以送Rlrt加的.沼發(fā)沒帶后必的xpgeE,當利你則以總內(nèi)勺折微的.沼發(fā)沒帶后必的xpgeE,當利你則以總內(nèi)勺折微的.至K，r、：；,上泮七二工OLr/.c；t;這國役有標喇pogE；式,當笊保也可以透IW%1W.這層國15萬吟2M這層國15萬吟2M心式,斷陰典）以塔科打標JK的.為出lUfllg較長文本的M一,包足四*6位吸毒M式（口失的破頭第）,賽古酬I也行通推雄膽2.8.19工具提示工具提示（Tooltips）度輛A出友禽彈出雙貨彈出icoWptf

24、flW度輛A出友禽彈出雙貨彈出icoWptfflWEWBW63吟蛆件；的:nt贊不第一他班的工貝國明，衛(wèi)會相親m克施/圖標妣.有川做出方位,可以內(nèi)文，增騏婚九2.8.20步驟條步驟條（Steps）已完成O獨行中O已完或O失效四條6件崛手罩鈍M用于引導用戶短刎次任蘇.4訥用未用.E明化釗史想3頁面風格WEB頁面的風格是指WEB頁面通過對頁面布局、字體、配色、頁面元素排列的融合來傳達給用戶的、含有主觀感受。頁面風格的選取除了需要考慮一般的用戶感受外，還需要將用戶所在環(huán)境的因素考慮進去，從而形成符合特定用戶要求的頁面風格。風格分類Web應(yīng)用的頁面風格內(nèi)容包括：布局，不僅僅是系統(tǒng)入門主頁的布局，而是所

25、有頁面；顏色，按照風格主題來設(shè)置頁面中包含的顏色及其表現(xiàn)；頁面元素，按照風格主題來確定頁面元素的大小、形狀和交互響應(yīng)行為；圖標，按照風格主題來定制表示各類功能的圖標；提示窗口，是頁面交互的主要形式，需要按照風格主題來定制：具體風格分類的定義，待定。頁面風格應(yīng)用具體風格應(yīng)用的定義，待定。4WEB頁面交互頁面元素焦點切換在WEB頁面中，為了提高和用戶之間的互動，需要在各類頁面元素獲得焦點和失去焦點的時候，在如下場景中采用頁面交互的方法有：信息填寫對輸入信息驗證：月戶名已經(jīng)存在.如果需要校驗填寫內(nèi)容，則需要在輸入框失去焦點時進行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：月戶名已經(jīng)存在.用戶名：*

26、toyota對輸入信息提示:在一組需要被驗證的數(shù)據(jù)填寫時，如果有必填項，需要在輸入框后面給出標志，并對填入的規(guī)則加以說明。如圖：基本信息C*為必埴項）驗證碼*I點擊輸入愜顯示騙證碼如果看不清驗證碼，語點圖片刷新如果輸入框內(nèi)有默認的文字，當輸入框獲得焦點時，需要將輸入框內(nèi)的文字處于全選狀態(tài)。如圖：.臉證同:融融新盤鼠標交互響應(yīng)對鼠標在頁面中所產(chǎn)生的事件進行處理，當頁面元素獲得焦點、被點擊、失去焦點時,則需要控件本身在顏色、大小或形狀上的變化給與響應(yīng)，亦可以添加聲音響應(yīng)。下面是各種情況下的鼠標交互示例：例如：-按鈕：按鈕顏色改變、或形狀，或字體改變，如圖：鼠標放上獲得焦點前:,鼠標放上獲得焦點前:

27、,!注冊免費郵箱I;、IS鼠標放上獲得焦點后：:-鏈接：字體變粗、或字體變色、或背景變色，如圖：鼠標放上獲得焦點前.網(wǎng)站地圖聯(lián)初式1f服務(wù)鼠標放上獲得焦點后：網(wǎng)站地圉鯉誦廣告服務(wù)-頁簽：獲得焦點的頁簽顏色變化，或頁簽的大小和里面的字體變大，如圖:產(chǎn)品中心服務(wù)支持購買相關(guān)鼠標放上獲得焦點前：產(chǎn)品中心服務(wù)支持敗買相關(guān)產(chǎn)品中心服務(wù)支持敗買相關(guān)鼠標放上獲得焦點后:-輸入框，輸入框的邊框變色:窗郵箱名稱：鼠標放上獲得焦點前：窗郵箱名稱：鼠標放上獲得焦點前：鼠標放上獲得焦點后:*郵箱名稱:鼠標放上獲得焦點后:*郵箱名稱:-表格，表格中行的底色改變;BookTitleAuthor1ATimetoKill2B

28、loodandSmokeJohnGrishamStephenKing鼠標放上獲得焦點前:BookTitleAuthor1ATimetoKillJohnGrisham2BloodandSmokeStephenKing鼠標放上獲得焦點后:-等待響應(yīng)：當由于載入大量數(shù)據(jù)等原因，使得用戶需要等待一定時間，需要將鼠標指針的形狀變成時間漏斗的形狀、或其他表示鼠標不可操作的樣子來提醒用戶等待。如圖：中加載中玲昌對于我們所使用的有關(guān)鼠標交互響應(yīng)的規(guī)范，將結(jié)合頁面風格在附錄中給出說明。4.2頁面信息交互操作結(jié)果確認在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁面關(guān)閉，或其他需要和用戶進行確認交互的場景，需要軟件能夠提供一個以彈出

29、頁面形式，要求用戶確認執(zhí)行結(jié)果的對話框，包含的情況有：提示確認輸入信息正確：彈出對話框，并將已填寫的內(nèi)容列出，要求用戶確認內(nèi)容的正確性，給出“確定”和“取消”的選擇按鈕；提示確認數(shù)據(jù)更改是否保存：彈出對話框，提示當前頁面內(nèi)容已經(jīng)改變，要求用戶確認是否保存更改的信息，給出“是”和“否”的選擇按鈕；提示確認當前頁面的跳轉(zhuǎn)：彈出對話框，提示用戶正在跳轉(zhuǎn)到另外一個頁面，要求用戶確認離開當前頁面，給出“是”和“否”的選擇按鈕；確認刪除數(shù)據(jù)內(nèi)容：彈出對話框，提示用戶刪除了當前選擇的內(nèi)容，要求用戶確認是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；其他規(guī)則對于信息交互過程中，其他需要遵守的規(guī)則有：重要

30、的命令按鈕與使用較頻繁的按鈕要放在界面上相對固定的位置上；容易引起操作錯誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目，放在不易點位置：與正在進行的操作無關(guān)的按鈕應(yīng)該加以屏蔽，例如：按鈕背景為灰色顯示；對可能造成數(shù)據(jù)無法恢匆的操作必須提供確認信息，給用戶放棄選擇的機會；非法的輸入或操作應(yīng)有足夠的提示說明；對運行過程中出現(xiàn)問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待；4.3頁面信息提示在web頁面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁面顯示給用戶，這些信息的分類有：警告信息禁止信息操作執(zhí)行成功信息操作執(zhí)行失敗信息錯誤信息幫助信息提示信息這些信息在當前頁面或彈出頁面

31、上顯示。如果采用彈出對話框的形式，對話框的頁面結(jié)構(gòu)如下圖：標題區(qū)：簡要給出此次提示信息的性質(zhì)，例如：警告：操作非法！圖標區(qū)：給出和此次提示信息性質(zhì)匹配的圖標；提示信息區(qū)：給出此次提示信息的具體內(nèi)容；按鈕區(qū)：給出供用戶進行選擇的按鈕；對于對話框的背景顏色，要求和系統(tǒng)的整體風格選取的顏色一致，而右上角的操作區(qū)只保留關(guān)閉一個可操作功能，最小化和最大化的功能將不顯示。對應(yīng)采用的圖標的圖例為:警告信息:OH禁止操作信息:操作成功信息:操作失敗信息:錯誤信息:幫助信息:提示信息:提示信息內(nèi)容要求：提示信息中如有標點符號，統(tǒng)一為全角符號；提示信息如有主語，統(tǒng)一為，您一在重要或復雜的操作成功后，給予提示信息；

32、有后續(xù)操作的操作在成功后，也需給予提示信息，說明當前的狀態(tài)。提示信息不宜太長，寬度應(yīng)不超過當前窗口寬度的1/2,當超過此比例時，請視具體情況進行換行；當功能按鈕為圖片按鈕時，光標停留需給予浮動提示信息；4.4鍵盤響應(yīng)支持由于用戶有時候還需要結(jié)合鍵盤進行操作，所以頁面需要提供一些簡單的健盤支持，例如：“Esc”、“Enter、“Tab”“Space，系統(tǒng)應(yīng)對這些鍵值作出響應(yīng)。其中：Esc,“取消”當前操作；Enter,“確認”或進行下一步操作或提交；Tab,或Shift+tab能夠在頁面元素中按照一定次序切換焦點，遵循從左上至右下的原則；其他快捷鍵的支持，需要根據(jù)項目的實際情況來定義。5WEB頁

33、面通用規(guī)范一般頁面功能新增當新增一條或多條記錄，要求：新增的記錄必須排在首頁首行。提交失敗后必須保存用戶已經(jīng)輸入的內(nèi)容，以便再次提交。提交時需對主要標識字段進行重復值、空值（空格）判斷。新增內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交;需對主標識字段進行重更值、空值（空格）判斷：修改當進行單條或多條記錄的修改時，要求：如界面存在夏選按鈕，勾選多條記錄進行修改時，每次只能對一條記錄進行修改,默認修改內(nèi)容為第一條的提示信息：修改后加載的內(nèi)容應(yīng)為的實際內(nèi)容，而不再為默認值；修改完成后須回到原記錄所在位置，且刷新顯示修改后的值；修改內(nèi)容提交失敗后，須保留用戶修改的內(nèi)容，以便再次修改提交；在查

34、詢條件下修改后返回，如不滿足查詢條件則不顯示；需對主標識字段進行重更值、空值（空格）判斷；刪除當刪除一條或多條記錄，要求：必須有確認刪除的提示信息：刪除成功后刷新，不顯示刪除的記錄；刪除成功后，返回到原記錄所在頁面，如果原記錄所在頁不存在時，則返回上一頁。當被刪除的記錄與其他記錄存在關(guān)聯(lián)時，請示需求界面給予不允許刪除、更明細提不等信息；查詢當按照條件查詢時，要求：每次查詢后定位到原頁面；每次查詢后保留當前杳詢條件；當查詢條件較多時，需要配置“重置”按鈕提供使用；當未查詢到任何記錄時，需給予未查找到相關(guān)記錄的提示信息；除了用戶明確要求不需要外，需提供模糊杳詢及組合查詢功能；取消當進行取消當前修改

35、并返回時，要求：在數(shù)據(jù)量較多的頁面中，當進行了修改后，取消請給予提示；取消返回到原記錄所在狀態(tài)；保存當保存內(nèi)容時，要求：當保存所費的時間較長時，需給出保存進度界面的提示；須控制不可以重兔保存；重置重置是恢復變更前的狀態(tài)，要求：必須保證重置后與初始進入此頁面時一致性；返回當需要返回前一個頁面時，要求：當從一個頁面點擊按鈕或鏈接進入子頁面時，子頁面必須提供返回按鈕；全選當在一個頁面上存在多個同類內(nèi)容的復選框時，需要提供全選的功能，要求：勾選全選，則選中當前頁面所有記錄；去掉當前頁面某個記錄的勾選，則全選也去掉勾選;刷新頁面后，自動去掉已勾選的記錄及全選的勾選;一般頁面規(guī)則默認值各個頁面都會存在默認

36、值。要求：打開一個新界面，光標默認停留在第一個待輸入的文本框中；當選擇下拉框不存在默認值時，則默認為“請選擇”，當存在默認值時，請顯示默認值；單選按組鈕默認值表單元素選擇表單元素選擇要求主要集中在select,radio：性別，5個以下類別列表選擇用radio比較合適部門列表，用select比較合適必填值對界面必填項的要求：界面的必填項必須以紅色*號標識出來。當必填項沒有填寫時，可在光標準備移走時，在文本框后以“請輸入”紅色文字標識;當界面排列較緊時，如果必填項沒有填，可以通過彈出信息的方式來提示，或者光標移走時彈出，或者最后提交時彈出。但確定后必須停留在第一個待輸入的文本框中；界面?zhèn)鬟f對于程

37、序執(zhí)行過程中，會出現(xiàn)父窗體與子窗體參數(shù)同步傳遞的情況，規(guī)則是：當父窗體與子窗體都存在同樣的查詢條件時，父窗體已輸入的杳詢條件必須被帶到子窗體中；當子窗體的任何操作影響了父窗體的數(shù)據(jù)時，子窗體關(guān)閉返回，但必須刷新父窗體的數(shù)據(jù)；關(guān)閉父窗體必須連同子窗體一同關(guān)閉；子窗體的大小不能超過父窗體，且不要遮住父窗體的主要信息；窗口嵌套針對多層頁面窗口的嵌套情況，要求：如果存在多層嵌套頁面窗11,每層頁面窗口彈出時都自動往右下移動一點點，以保證不遮蓋上層頁面窗II標題為準：頁面窗口嵌套層次最好不超過3層：輸入框操作對于輸入框操作的限制，規(guī)則是：只允許輸入數(shù)字的輸入框需要控制其它字符的輸入，或在輸入非法值時給予

38、提示,或在輸入框內(nèi)不再捕獲非法值；只允許輸入口期、時間的輸入框需要通過格式化方式約束輸入，而不是輸入非法值后給出提示；當輸入的內(nèi)容達到了字段的長度限制時，不顯示新輸入的的數(shù)值，并提示不允許再輸入，而不是保存后自動截斷；在線幫助功能系統(tǒng)應(yīng)該提供詳盡而可靠的在線幫助文檔，在用戶使用產(chǎn)生迷惑時可以自己尋求解決方法。要求：幫助文檔中的性能介紹與說明要與系統(tǒng)性能配套一致；更新系統(tǒng)版本時，對作了修改的地方在幫助文檔中要做相應(yīng)的修改：操作時要提供及時調(diào)用幫助的快捷方式，常用F1；在界面上即時調(diào)用幫助時，應(yīng)該能夠及時定位到與該操作相對應(yīng)的幫助位置，也就是說幫助要有即時的針對性；最好提供目前流行的聯(lián)機幫助格式或

39、HTML幫助格式；用戶可以用關(guān)鍵詞在幫助索引中搜索所要的幫助，當然也應(yīng)該提供幫助索引：如果沒有提供軟件書面的幫助文檔，最好能夠有打印幫助的功能；在幫助中應(yīng)該提供我們的技術(shù)支持方式,一旦用戶難以自己解決可以方便的尋求新的幫助方式；菜單功能要求菜單是界面上最重要的元素，菜單位置按照按功能來組織。要求：菜單通常采用“常用一主要一次要一工具一幫助”的位置排列，符合Windows風格的要求；常用的有“文件”、“編輯”，“查看”等，需要系統(tǒng)有這些選項；下拉菜單要根據(jù)菜單選項的含義進行分組，并切按照一定的規(guī)則進行排列，用橫線隔開；一組菜單的使用有先后要求或有向?qū)ё饔脮r，應(yīng)該按先后次序排列；沒有順序要求的菜單

40、項按使用頻率和重要性排列，常用的放在開頭，不常用的靠后放置：重要的放在開頭，次要的放在后邊；如果菜單選項較多，應(yīng)該采用加長菜單的長度而減少深度的原則排列：菜單深度一般要求最多控制在三層以內(nèi)；對常用的菜單要有快捷命令方式，組合原則見5.2.8：最好能夠?qū)驼谶M行的操作無關(guān)的菜單項能夠屏蔽，也可采用動態(tài)加載方式即只有需要的菜單才顯示；菜單前的圖標不宜太大，與和相應(yīng)的字高保持一致；主菜單的寬度要接近，字數(shù)最好不應(yīng)多于四個；主菜單數(shù)目不應(yīng)太多，最好為單排布置：快捷鍵功能在菜單及按鈕中使用快捷健可以讓喜歡使用鍵盤的用戶操作得更快一些在Windows及其應(yīng)用軟件中的快捷鍵功能大多是一致的，可以根據(jù)實際情

41、況考慮實現(xiàn)。要求：面向事務(wù)的組合有：Ctrl-D刪除、Ctrl-F尋找、Ctrl-H替換、Ctrl-I插入、Ctrl-N新記錄、Ctrl-S保存、Ctrl-0打開；列表：Ctrl-R、Ctrl-G定位；Ctrl-Tab卜.一分頁窗口或反序瀏覽同一頁面控件;編輯：CtrLA全選；Ctrl-C拷貝；Ctrl-V粘貼：Ctrl-X剪切；CtrLZ撤消操作；Ctrl-Y恢復操作；文件操作：Ctrl-P打??；Ctrl-W關(guān)閉；系統(tǒng)菜單:Alt-A文件；Alt-E編輯：AltT工具；Alt-W窗口；AltH幫助。MSWindows保留鍵：Ctrl-Esc任務(wù)列表：Ctrl-F4關(guān)閉窗II：Alt-F4結(jié)束

42、應(yīng)用；Alt-Tab下一應(yīng)用；Enter缺省按鈕/確認操作；Esc取消按鈕/取消操作；Shift-Fl上下文相關(guān)幫助；按鈕中：可以根據(jù)系統(tǒng)需要而調(diào)節(jié)，以下只是常用的組合。A1LY確定（是）；Alt-C取消；Alt-N否；A1LD刪除;Alt-Q退出；Alt-A添加；A1LE編輯;A1LB瀏覽;Alt-R讀；A1LW寫。這些快捷鍵也可以作為開發(fā)中文應(yīng)用軟件的標準，但亦可使用漢語拼音的開頭字母；5210快捷鍵的限制由于IE本身的一些原因，需要避免一些不必要的錯誤，故對其進行攔截限制。要求：在用戶沒有提供明確需求情況下，限制F5、IE工具欄、退格鍵（僅限頁面不限輸入框）、Ctrl+N的使用;根據(jù)功能

43、需要，限制右鍵菜單的使用；頁面的規(guī)范性通常界面設(shè)計都按Windows界面的規(guī)范來設(shè)計，即包含“菜單條、工具欄、工具廂、狀態(tài)欄、滾動條、右鍵快捷菜單”的標準格式，可以說：界面遵循規(guī)范化的程度越高，則易用性相應(yīng)的就越好。小型軟件一般不提供工具廂。規(guī)范要求：常用菜單要有命令快捷方式。完成相同或相近功能的菜單用橫線隔開放在同一位置。菜單前的圖標能直觀的代表要完成的操作。菜單深度一般要求最多控制在三層以內(nèi)。工具欄要求可以根據(jù)用戶的要求自己選擇定制。相同或相近功能的工具欄放在一起。工具欄中的每一個按鈕要有及時提示信息。一條工具欄的長度最長不能超出屏幕寬度。工具欄的圖標能直觀的代表要完成的操作。系統(tǒng)常用的工

44、具欄設(shè)置默認放置位置。工具欄太多時可以考慮使用工具廂。工具廂要具有可增減性，由用戶自己根據(jù)需求定制。工具廂的默認總寬度不要超過屏幕寬度的1/5。狀態(tài)條要能顯示用戶切實需要的信息，常用的有：目前的操作、系統(tǒng)狀態(tài)、用戶位置、用戶信息、提示信息、錯誤信息等，如果某一操作需要的時間較長，還應(yīng)該顯示進度條和進程提示。滾動條的長度要根據(jù)顯示信息的長度或?qū)挾饶芗皶r變換，以利于用戶了解顯示信息的位置和百分比。狀態(tài)條的高度以放置五好字為宜，滾動條的寬度比狀態(tài)條的略窄。菜單和工具條要有清楚的界限;菜單要求凸出顯示，這樣在移走工具條時仍有立體感。菜單和狀態(tài)條中通常使用5號字體。工具條一般比菜單要寬，但不要寬的太多，

45、否則看起來很不協(xié)調(diào)。右健快捷菜單采用與菜單相同的準則。5212系統(tǒng)易用性易用性是指頁面上的功能遵從慣例，例如：按鈕名稱易懂，用詞準確，并與同一界面上的其他按鈕易于區(qū)分，能望文知意。這樣，使得用戶不用查閱幫助就能知道該頁面上的功能并進行相關(guān)的正確操作。要求：打開一個新界面，光標默認停留在第一個待輸入的文本框中；,完成相同或相近功能的按鈕放置在一起，減少鼠標移動的距離，常用按鈕要支持快捷方式；按功能將界面劃分局域塊，用Frame框括起來，并要有功能說明或標題：界面要支持鍵盤自動瀏覽按鈕功能，即按Tab鍵的自動切換功能；界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當靠前，位置也應(yīng)放在窗口上較醒

46、目的位置；同一界面上的控件數(shù)最好不要超過10個，多于10個時可以考慮使用分頁界面顯示;分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab：默認按鈕要支持Enter操作，即按Enter后自動執(zhí)行默認按鈕對應(yīng)操作；可寫控件檢測到非法輸入后應(yīng)給出說明并能自動獲得焦點；按鈕鍵的順序與控件排列順序要一直，目前流行總體從上到下，同時行間從左到右的方式；復選框和選項框按選擇幾率的高底而先后排列；復選框和選項框要有默認選項，并支持Tab選擇；選項數(shù)相同時多用選項框而不用下拉列表框；界面空間較小時使用下拉框而不用選項框；選項數(shù)較少時使用選項框，相反使用下拉列表框；專業(yè)性強的軟件要使用相關(guān)的專業(yè)術(shù)語

47、，通用性界面則提倡使用通用性詞眼;5213輸入安全性要求在界面上需要建立一些規(guī)則來控制輸入的出錯幾率，會大大減少系統(tǒng)因用戶人為的錯誤引起的破壞，開發(fā)者應(yīng)當盡量周全地考慮到各種可能發(fā)生的問題，使出錯的可能降至最小，例如：當程序出現(xiàn)保護性錯誤而退出系統(tǒng)，會使用戶對軟件失去信心，因為這意味著用戶要中斷思路，井費時費力地重新登錄，而且已進行的操作也會因沒有存盤而全部丟失。因此需要在頁面設(shè)計時應(yīng)對輸入按照規(guī)則進行校驗。要求：排除可能會使程序非正常中止的錯誤；應(yīng)當檢查用戶錄入無效的數(shù)據(jù)；采用相關(guān)控件限制用戶輸入值的種類；當用戶面臨的選擇是兩個或多個選一時，請采用單選框，而當選擇的可能再多一些時，可以采用夏選框；當選項特別多時，可以采用列表框，下拉式列表框；確保未經(jīng)授權(quán)或沒有意義的操作不能進行；對可能引起致命錯誤或系統(tǒng)出錯的輸入字符或動作要加限制或屏蔽：對可能發(fā)生嚴重后果的操作要有補救措施。通過補救措施用戶可以回到原來的正確狀態(tài)；對一些特殊符號的輸入，與系統(tǒng)使用的符號相沖突的字符等進行判斷并阻止用戶輸入該字符，并提前給出輸入提示；對錯誤操作最好支持可逆性處理，如取消