界面設(shè)計(jì)規(guī)范演示文稿

界面設(shè)計(jì)規(guī)范演示文稿目前一頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的用戶體驗(yàn)為何如此重要Web規(guī)范體系介紹界面設(shè)計(jì)開發(fā)流程應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范目前二頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的產(chǎn)品設(shè)計(jì)通過規(guī)范的方式來達(dá)到以用戶為中心的目的。

使最終設(shè)計(jì)出來的界面風(fēng)格一致化，開發(fā)編碼人員相互之間開發(fā)更輕松，遵循統(tǒng)一的操作規(guī)范，以標(biāo)準(zhǔn)化的方式設(shè)計(jì)界面，提高工作效率。減少和改變責(zé)任不明，任務(wù)不清和由此產(chǎn)生的信息溝通不暢、反復(fù)修改、重復(fù)勞動(dòng)、效率低下的現(xiàn)象。目前三頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的用戶體驗(yàn)為何如此重要Web規(guī)范體系介紹界面設(shè)計(jì)開發(fā)流程應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范目前四頁\總數(shù)六十頁\編于十點(diǎn)日常生活中的遭遇什么是用戶體驗(yàn)用戶體驗(yàn)的要素用戶體驗(yàn)和軟件應(yīng)用記住你的用戶早晨起來，發(fā)現(xiàn)鬧鐘沒有按原先設(shè)定響起來。一邊燒水，一邊穿衣服，臨走前去喝水卻發(fā)現(xiàn)水還沒有燒開。到了地鐵站，發(fā)現(xiàn)公交卡沒有錢了。無奈之下只能去排隊(duì)買票。排了3趟地鐵，終于到公司了，但是你卻遲到了。結(jié)果：盡管你已經(jīng)非常努力，但是你還是遲到了。那么，讓我們看看這一連串的倒霉事，是什么讓我們?nèi)绱死仟N？用戶體驗(yàn)為何如此重要？X員工悲慘的一天目前五頁\總數(shù)六十頁\編于十點(diǎn)

什么是用戶體驗(yàn)用戶體驗(yàn)（userexperience）是以用戶為中心的設(shè)計(jì)中最重要的一個(gè)部分，強(qiáng)調(diào)的是過程，是軟件對(duì)用戶行為產(chǎn)生的反應(yīng)與用戶期待值要盡可能的一致。表現(xiàn)一：過分使用各種奇形怪狀、五顏六色的控件。表現(xiàn)二：界面元素比例失調(diào)。比如按鈕巨大無比，其尺寸甚至超過顯示重要內(nèi)容的文本框的界面。表現(xiàn)三：界面元素凌亂。比如說，按鈕和文本框擺放地點(diǎn)隨意，該對(duì)齊的控件對(duì)不齊。表現(xiàn)四：違背使用習(xí)慣。你按F1，它沒有彈出幫助，卻執(zhí)行了一件絕對(duì)出乎你意料的動(dòng)作。表現(xiàn)五：消息框信息含糊、混亂。比如軟件彈出一個(gè)消息框。把原本“確定”和“取消”寫成為“是”和“否”，讓用戶不知道什么意思。表現(xiàn)六：還有一種糟糕的用戶界面，乍一看很厲害，實(shí)際上完全是缺乏規(guī)劃的結(jié)果。這種軟件本身的確提供了比較復(fù)雜的功能，但對(duì)于哪些是常用功能，哪些是很少用到的高級(jí)功能，缺乏評(píng)估。什么功能都往界面上擠，占地方不說，用戶會(huì)厭煩，弄不好還會(huì)被嚇跑。用戶體驗(yàn)為何如此重要？體驗(yàn)好的用戶界面糟糕的用戶界面表現(xiàn)糟糕的用戶界面目前六頁\總數(shù)六十頁\編于十點(diǎn)用戶體驗(yàn)為何如此重要？

用戶體驗(yàn)的要素表現(xiàn)層視覺設(shè)計(jì)交互設(shè)計(jì)信息架構(gòu)界面設(shè)計(jì)導(dǎo)航設(shè)計(jì)功能說明內(nèi)容需求用戶需求產(chǎn)品目標(biāo)框架層結(jié)構(gòu)層范圍層戰(zhàn)略層具體抽象表現(xiàn)層---視覺設(shè)計(jì)在這個(gè)五層結(jié)構(gòu)的頂端，我們把注意力轉(zhuǎn)移到系統(tǒng)用戶會(huì)注意到的那些方面：視覺設(shè)計(jì)，這里，內(nèi)容、功能和美學(xué)匯集到一起來產(chǎn)生一個(gè)最終設(shè)計(jì)，這將滿足其他四個(gè)層面的所有目標(biāo)?？蚣軐印缑嬖O(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)在充滿概念的結(jié)構(gòu)層中開始形成了大量的需求，這些需求都是來自我們的戰(zhàn)略目標(biāo)的需求。在框架層，我們要更進(jìn)一步的提煉這些結(jié)構(gòu)，確定很詳細(xì)的界面外觀、導(dǎo)航和信息設(shè)計(jì)，這能讓結(jié)構(gòu)變得更實(shí)在。結(jié)構(gòu)層—交互設(shè)計(jì)與信息架構(gòu)在收集完用戶需求并將其排列好優(yōu)先級(jí)別之后，我們對(duì)于最終界面將會(huì)包括什么特性已經(jīng)有了清楚的圖像。然而，這些需求并沒有說明如何將這些分散的片段組成一個(gè)整體。這就是范圍層的上面一層：為產(chǎn)品創(chuàng)建一個(gè)概念結(jié)構(gòu)。范圍層—功能規(guī)格和內(nèi)容說明帶著“我們想要什么”、“我們的用戶想要什么”的明確認(rèn)識(shí)，我們就能弄清楚如何去滿足所有這些戰(zhàn)略的目標(biāo)。當(dāng)你把用戶需求和系統(tǒng)目標(biāo)轉(zhuǎn)變成系統(tǒng)應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍。戰(zhàn)略層—產(chǎn)品目標(biāo)和用戶需求成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”。知道企業(yè)與用戶雙方對(duì)產(chǎn)品的期許和目標(biāo)，有助于確立用戶體驗(yàn)各方面戰(zhàn)略的制定目前七頁\總數(shù)六十頁\編于十點(diǎn)面對(duì)大量的選擇，用戶只能自己想辦法，去決定哪一個(gè)軟件系統(tǒng)功能會(huì)符合她的要求。企業(yè)開始意識(shí)到，提供優(yōu)質(zhì)的用戶體驗(yàn)是一個(gè)重要的、可持續(xù)的競爭優(yōu)勢。用戶體驗(yàn)形成了客戶對(duì)企業(yè)的整體印象，界定了企業(yè)和競爭對(duì)手的差異，并且決定了客戶什么時(shí)候還會(huì)再次光顧。用戶體驗(yàn)為何如此重要？

用戶體驗(yàn)和軟件應(yīng)用目前八頁\總數(shù)六十頁\編于十點(diǎn)用戶體驗(yàn)為何如此重要？

記住你的用戶以用戶為中心的設(shè)計(jì)-------在開發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶列入考慮范圍內(nèi)。考慮用戶體驗(yàn)把它分為各個(gè)組成要素從不同角度來了解它-----通過這些才能確保你控制了決策所造成的全部結(jié)果用戶體驗(yàn)很重要，最大的理由：它對(duì)你的用戶很重要。協(xié)調(diào)一致，直觀明了，甚至讓人愉快的體驗(yàn)-----“一次”每件事都按照正確的方式在工作的體驗(yàn)。目前九頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的用戶體驗(yàn)為何如此重要Web規(guī)范體系介紹界面設(shè)計(jì)開發(fā)流程應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范目前十頁\總數(shù)六十頁\編于十點(diǎn)產(chǎn)品/項(xiàng)目約定界面框架規(guī)范基礎(chǔ)界面元素規(guī)范產(chǎn)品VILOGO系統(tǒng)框架視覺風(fēng)格根據(jù)業(yè)務(wù)需求約定交互模式、頁面流總體界面框架結(jié)構(gòu)界面模式靈活優(yōu)化多語言、多瀏覽器、換膚、組件庫、擴(kuò)展性等問題界面組件及其組合基礎(chǔ)應(yīng)用模板Web標(biāo)準(zhǔn)編碼，優(yōu)化結(jié)構(gòu)，代碼可重用性強(qiáng)Web規(guī)范體系介紹目前十一頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的用戶體驗(yàn)為何如此重要Web規(guī)范體系介紹界面設(shè)計(jì)開發(fā)流程應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范目前十二頁\總數(shù)六十頁\編于十點(diǎn)生命周期軟件界面設(shè)計(jì)實(shí)現(xiàn)過程相關(guān)活動(dòng)需求PM:需求規(guī)劃討論P(yáng)-spec編寫Ui草圖提供根據(jù)p-spec對(duì)界面工作成果審核確認(rèn)PM:根據(jù)P-spec對(duì)界面工作成果審核確認(rèn)RD:編寫pdd設(shè)計(jì)開發(fā)測試PM:根據(jù)P-spec修正解釋需求RD:編碼PM:解釋需求QA:測試RD:修正Bug界面維護(hù)支持框架、頁面模板HTML+CSS修正各HTML頁面修正及CSS技術(shù)支持DHTML組件HTML+CSS修正界面規(guī)劃（需求）需求理解建立界面模型界面設(shè)計(jì)主界面、登錄頁GUI設(shè)計(jì)主要模板頁GUI設(shè)計(jì)界面實(shí)現(xiàn)（編碼）框架、頁面模板HTML+CSS實(shí)現(xiàn)根據(jù)模板填充制作各HTML頁面部分DHTML組件的HTML+CSS提供界面設(shè)計(jì)制作InputFromPM1.P-spec2.UI草圖經(jīng)PM確認(rèn)1.分析規(guī)劃文檔2.低保真模擬示意原型圖片經(jīng)PM確認(rèn)主要界面高保真GUI設(shè)計(jì)圖經(jīng)PM確認(rèn)模板頁html+css各原型頁面html組件html+css界面設(shè)計(jì)開發(fā)流程目前十三頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的用戶體驗(yàn)為何如此重要Web規(guī)范體系介紹界面設(shè)計(jì)開發(fā)流程應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范目前十四頁\總數(shù)六十頁\編于十點(diǎn)應(yīng)該遵循的基本原則顯示信息一致性的原則以用戶為主導(dǎo)原則易用性原則鼠標(biāo)與鍵盤一致性原則系統(tǒng)響應(yīng)時(shí)間原則出錯(cuò)信息和警告原則信息顯示原則數(shù)據(jù)輸入原則合理性原則美觀與協(xié)調(diào)性原則目前十五頁\總數(shù)六十頁\編于十點(diǎn)顯示信息一致性的原則無論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。界面直觀、對(duì)用戶透明：用戶接觸軟件后對(duì)界面上對(duì)應(yīng)的功能一目了然、不需要多少培訓(xùn)就可以方便使用應(yīng)用系統(tǒng)。這樣得到的好處：

用戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)系統(tǒng)界面后，切換到另外一個(gè)系統(tǒng)界面能夠很輕松的推測出各種功能。降低培訓(xùn)、支持成本，支持人員不用費(fèi)力逐個(gè)指導(dǎo)。給用戶統(tǒng)一感覺，不覺得混亂，心情愉快，支持度增加。應(yīng)該遵循的基本原則目前十六頁\總數(shù)六十頁\編于十點(diǎn)明確用戶是所有系統(tǒng)處理的核心，不應(yīng)該有應(yīng)用程序來決定處理過程，所以用戶界面應(yīng)當(dāng)由用戶來控制應(yīng)如何工作、如何響應(yīng)，而不是由開發(fā)者按自己的意愿把操作流程強(qiáng)加給用戶。應(yīng)該遵循的基本原則以用戶為主導(dǎo)的原則目前十七頁\總數(shù)六十頁\編于十點(diǎn)用戶不用查閱幫助就能知道該界面的功能并進(jìn)行相關(guān)正確的操作。應(yīng)該遵循的基本原則完成相同或相近功能的按鈕用Frame框起來，常用按鈕要支持快捷方式。完成同一功能或任務(wù)的元素放在集中位置，減少鼠標(biāo)移動(dòng)的距離。按功能將界面劃分局域塊，用Frame框括起來,并要有功能說明或標(biāo)題。界面要支持鍵盤自動(dòng)瀏覽按鈕功能，即按Tab鍵的自動(dòng)切換功能。界面上首先應(yīng)輸入的和重要信息的控件在Tab順序中應(yīng)當(dāng)靠前,位置也應(yīng)放在窗口上較醒目的位置。同一界面上的控件數(shù)最好不要超過10個(gè)，多于10個(gè)時(shí)可以考慮使用分頁界面顯示。

易用性細(xì)則：易用性原則目前十八頁\總數(shù)六十頁\編于十點(diǎn)應(yīng)該遵循的基本原則易用性細(xì)則：分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab默認(rèn)按鈕要支持Enter操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作?？蓪懣丶z測到非法輸入后應(yīng)給出說明并能自動(dòng)獲得焦點(diǎn)。復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼。

目前十九頁\總數(shù)六十頁\編于十點(diǎn)盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成。但是，許多鼠標(biāo)的操作，如雙擊、拖動(dòng)對(duì)象等，并不能簡單地用鍵盤來模擬即可實(shí)現(xiàn)，此類操作可適當(dāng)增加操作按鈕。應(yīng)該遵循的基本原則鼠標(biāo)與鍵盤一致性原則目前二十頁\總數(shù)六十頁\編于十點(diǎn)系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過長，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過快也會(huì)影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則：0-5秒鼠標(biāo)顯示成為沙漏；5秒以上顯示處理窗口，或顯示進(jìn)度條；一個(gè)長時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。應(yīng)該遵循的基本原則系統(tǒng)響應(yīng)時(shí)間原則目前二十一頁\總數(shù)六十頁\編于十點(diǎn)出錯(cuò)信息和警告是指出現(xiàn)問題時(shí)系統(tǒng)給出的壞消息，對(duì)于出錯(cuò)信息和警告應(yīng)該遵循以下原則：信息以用戶可以理解的術(shù)語描述；信息簡明扼要，指出出錯(cuò)原因并提供解決辦法提示。應(yīng)該遵循的基本原則出錯(cuò)信息和警告原則目前二十二頁\總數(shù)六十頁\編于十點(diǎn)信息顯示遵循以下原則：只顯示與當(dāng)前用戶語境環(huán)境有關(guān)的信息；不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息的含義應(yīng)該非常明確，用戶不必再參考其它信息源；產(chǎn)生有意義的出錯(cuò)信息；使用縮進(jìn)和文本來輔助理解；使用窗口分隔控件分隔不同類型的信息；高效地使用顯示器的顯示空間，但要避免空間過于擁擠。應(yīng)該遵循的基本原則信息顯示原則目前二十三頁\總數(shù)六十頁\編于十點(diǎn)數(shù)據(jù)輸入遵循以下原則：盡量減少用戶輸入動(dòng)作的數(shù)量；維護(hù)信息顯示和數(shù)據(jù)輸入的一致性；交互應(yīng)該是靈活的，對(duì)鍵盤和鼠標(biāo)輸入的靈活性提供支持；在當(dāng)前動(dòng)作的語境中使不合適的命令不起作用；讓用戶控制交互流，用戶可以跳過不必要的動(dòng)作、改變所需動(dòng)作的順序（如果允許的話）以及在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)；為所有輸入的動(dòng)作提供幫助；消除冗余輸入。可能的話提供默認(rèn)值、絕不要讓用戶提供程序中可以自動(dòng)獲取或計(jì)算出來的信息。應(yīng)該遵循的基本原則數(shù)據(jù)輸入原則目前二十四頁\總數(shù)六十頁\編于十點(diǎn)應(yīng)該遵循的基本原則合理性原則屏幕對(duì)角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。

目前二十五頁\總數(shù)六十頁\編于十點(diǎn)應(yīng)該遵循的基本原則合理性原則合理性細(xì)則：父窗體或主窗體的中心位置應(yīng)該在對(duì)角線焦點(diǎn)附近。子窗體位置應(yīng)該在主窗體的左上角或正中。多個(gè)子窗體彈出時(shí)應(yīng)該依次向右下方偏移，以顯示窗體出標(biāo)題為宜。重要的命令按鈕與使用較頻繁的按鈕要放在界面上醒目的位置。與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽(用灰色顯示，沒法使用該按鈕)。對(duì)可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息,給用戶放棄選擇的機(jī)會(huì)。非法的輸入或操作應(yīng)有足夠的提示說明。對(duì)運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無限期的等待。提示、警告、或錯(cuò)誤說明應(yīng)該清楚、明了、恰當(dāng)。

目前二十六頁\總數(shù)六十頁\編于十點(diǎn)美觀與協(xié)調(diào)性細(xì)則：應(yīng)該遵循的基本原則美觀與協(xié)調(diào)性原則界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。長寬接近黃金點(diǎn)比例，切忌長寬比例失調(diào)、或?qū)挾瘸^長度。布局要合理,不宜過于密集，也不能過于空曠，合理的利用空間。按鈕大小基本相近，忌用太長的名稱，免得占用過多的界面位置。按鈕的大小要與界面的大小和空間要協(xié)調(diào)。避免空曠的界面上放置很大的按鈕。放置完控件后界面不應(yīng)有很大的空缺位置。字體的大小要與界面的大小比例協(xié)調(diào),通常使用的字體中宋體9-12較為美觀，很少使用超過12號(hào)的字體。

目前二十七頁\總數(shù)六十頁\編于十點(diǎn)應(yīng)該遵循的基本原則美觀與協(xié)調(diào)性原則美觀與協(xié)調(diào)性細(xì)則：前景與背景色搭配合理協(xié)調(diào)，反差不宜太大。常用色考慮使用Windows界面色調(diào)。如果使用其他顏色，主色要柔和，具有親和力，堅(jiān)決杜絕刺目的顏色。大型系統(tǒng)常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。通常父窗體支持縮放時(shí)，子窗體沒有必要縮放。如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。

目前二十八頁\總數(shù)六十頁\編于十點(diǎn)軟件界面規(guī)范的重要性及其目的用戶體驗(yàn)為何如此重要Web規(guī)范體系介紹界面設(shè)計(jì)開發(fā)流程應(yīng)該遵循的基本原則界面設(shè)計(jì)規(guī)范目前二十九頁\總數(shù)六十頁\編于十點(diǎn)所有界面基準(zhǔn)字體為9pt。不考慮特殊字體(隸書、草書等,特殊情況可以使用圖片取代),保證每個(gè)用戶使用起來顯示都正常。所有字體屬性設(shè)定應(yīng)在CSS中完成。所有控件盡量使用大小統(tǒng)一的字體屬性，除了特殊提示信息、加強(qiáng)顯示等例外情況。避免使用粗體和斜體：用粗體來吸引人的注意，用斜體表示著重，但還要少使用。避免混合字體：最多包含兩種不同的字體。界面設(shè)計(jì)規(guī)范【功能名稱】字體【功能簡述】各個(gè)頁面必須使用統(tǒng)一的字體樣式【規(guī)范要求】不規(guī)范實(shí)例：目前三十頁\總數(shù)六十頁\編于十點(diǎn)所有字體尺寸一律采用“pt”作為單位，對(duì)象和線條的尺寸一律采用“px”作為單位。界面設(shè)計(jì)規(guī)范【功能名稱】尺寸單位【功能簡述】各個(gè)頁面必須使用統(tǒng)一的尺寸單位【規(guī)范要求】目前三十一頁\總數(shù)六十頁\編于十點(diǎn)界面設(shè)計(jì)規(guī)范盡可能通過選擇合適的主題顏色或系統(tǒng)顏色來選擇顏色。不要混用顏色類型。這就是說，應(yīng)當(dāng)始終將主題顏色與對(duì)應(yīng)的主題顏色匹配使用，系統(tǒng)顏色與對(duì)應(yīng)的系統(tǒng)顏色匹配使用，固定顏色與其他固定顏色一起使用。如果你一定要使用主題或系統(tǒng)顏色之外的顏色：最好是從某個(gè)主題或系統(tǒng)顏色派生，而不要硬編碼顏色值。如果不是為了顯示真實(shí)感的圖形和圖像，應(yīng)當(dāng)限制屏幕的色彩數(shù)目，因?yàn)槿藗冊谟^察屏幕時(shí)很難同時(shí)記住多種色彩應(yīng)當(dāng)根據(jù)對(duì)象的重要性來選擇顏色，重要的對(duì)象應(yīng)該用醒目的顏色表示。使用顏色的時(shí)候應(yīng)當(dāng)保持一致性，例如錯(cuò)誤提示信息用紅色表示，正常信息用綠色表示。在表達(dá)信息時(shí)，不要過度依賴顏色，因?yàn)橛行┯脩艨赡苌せ蛏??！竟δ苊Q】顏色【功能簡述】各個(gè)頁面必須使用統(tǒng)一的顏色設(shè)置【規(guī)范要求】“危險(xiǎn)、有風(fēng)險(xiǎn)、未知、基本安全”的顏色，有什么講究嗎？“黃色”看不清楚。另外，文字不完整，在數(shù)字后面加“個(gè)”，前后項(xiàng)留合適的間隙。目前三十二頁\總數(shù)六十頁\編于十點(diǎn)界面設(shè)計(jì)規(guī)范【功能名稱】登錄框【功能簡述】【規(guī)范要求】1.用戶名、密碼寬度應(yīng)該上下對(duì)齊。2.輸入框上下對(duì)齊。3.鼠標(biāo)點(diǎn)擊登錄、重置按鈕應(yīng)該顯示手型，而不是箭頭。目前三十三頁\總數(shù)六十頁\編于十點(diǎn)打開一個(gè)新界面，光標(biāo)默認(rèn)停留在第一個(gè)待輸入的文本框中。當(dāng)選擇下拉框不存在默認(rèn)值時(shí)，則默認(rèn)為“請(qǐng)選擇”；當(dāng)存在默認(rèn)值時(shí)，請(qǐng)綁定顯示默認(rèn)值。界面設(shè)計(jì)規(guī)范【功能名稱】默認(rèn)值【功能簡述】各個(gè)頁面都會(huì)存在默認(rèn)值【規(guī)范要求】目前三十四頁\總數(shù)六十頁\編于十點(diǎn)界面的必填項(xiàng)必須以紅色*號(hào)標(biāo)識(shí)出來。當(dāng)必填項(xiàng)沒有填寫時(shí)，可在光標(biāo)準(zhǔn)備移走時(shí)，在文本框后以“請(qǐng)輸入”紅色文字標(biāo)識(shí)。當(dāng)界面排列較緊時(shí)，必填項(xiàng)沒有填可以以彈出信息的方式來提示，光標(biāo)移走時(shí)彈出或最后提交時(shí)彈出都可；但確定后必須停留在第一個(gè)待輸入的文本框中。

界面設(shè)計(jì)規(guī)范【功能名稱】必填值【功能簡述】對(duì)界面必填項(xiàng)的一些規(guī)范【規(guī)范要求】目前三十五頁\總數(shù)六十頁\編于十點(diǎn)可輸入/選擇框以正常色顯示；不可輸入/選擇框以灰色顯示；對(duì)于不可輸入/選擇框，通過鼠標(biāo)或鍵盤都不可讓光標(biāo)定位至此控件。

界面設(shè)計(jì)規(guī)范【功能名稱】控件顯示【功能簡述】【規(guī)范要求】目前三十六頁\總數(shù)六十頁\編于十點(diǎn)提示信息中標(biāo)點(diǎn)符號(hào)請(qǐng)統(tǒng)一為全角符號(hào)。提示信息如有主語，請(qǐng)統(tǒng)一為‘您’。復(fù)雜的操作在成功后給予提示信息。需要后續(xù)操作的操作在成功后給予提示信息。提示信息不宜太長，寬度不能超過當(dāng)前窗口的1/2；當(dāng)超過此比例時(shí)，請(qǐng)視具體情況進(jìn)行換行。當(dāng)功能按鈕為圖片按鈕時(shí)，光標(biāo)停留需給予浮動(dòng)提示信息。

界面設(shè)計(jì)規(guī)范【功能名稱】提示語【功能簡述】提示信息的規(guī)范【規(guī)范要求】目前三十七頁\總數(shù)六十頁\編于十點(diǎn)支持回車鍵提交。支持tab鍵、shift+tab鍵移動(dòng)光標(biāo)焦點(diǎn)。Tab鍵移動(dòng)遵循從左上至右下的原則。

界面設(shè)計(jì)規(guī)范【功能名稱】鍵盤支持【功能簡述】由于用戶還是會(huì)常用鍵盤進(jìn)行操作，故提供一些簡單的鍵盤支持是必要的。【規(guī)范要求】目前三十八頁\總數(shù)六十頁\編于十點(diǎn)當(dāng)父窗體與子窗體都存在同樣的查詢條件時(shí)，父窗體已輸入的查詢條件必須被帶到子窗體中。當(dāng)子窗體的任何操作影響了父窗體的數(shù)據(jù)時(shí)，子窗體關(guān)閉返回必須刷新父窗體的數(shù)據(jù)。關(guān)閉父窗體必須連同子窗體一同關(guān)閉。

子窗體的大小最好不要超過父窗體，且最好不要遮住父窗體的主要信息。

界面設(shè)計(jì)規(guī)范【功能名稱】界面?zhèn)鬟f【功能簡述】父窗體與子窗體的傳遞?！疽?guī)范要求】目前三十九頁\總數(shù)六十頁\編于十點(diǎn)如果存在多層嵌套窗口，每層窗口彈出時(shí)都自動(dòng)往右下移動(dòng)一點(diǎn)點(diǎn)，以保證不遮蓋上層窗口標(biāo)題為準(zhǔn)。窗口嵌套層次最好不超過3層。

界面設(shè)計(jì)規(guī)范【功能名稱】窗口嵌套【功能簡述】針對(duì)多層窗口的嵌套【規(guī)范要求】

目前四十頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】輸入框限制【功能簡述】對(duì)各種輸入框的限制。【規(guī)范要求】

界面設(shè)計(jì)規(guī)范只允許輸入數(shù)字的輸入框請(qǐng)控制不允許輸入其它字符，而不是輸入非法值后給予提示。只允許輸入日期、時(shí)間的輸入框請(qǐng)給予格式化，而不是輸入非法值后再給予提示或者就沒有提示。當(dāng)輸入的內(nèi)容達(dá)到了字段的長度限制時(shí)，請(qǐng)控制不允許再輸入，而不是保存后自動(dòng)截?cái)嗷虮４鏁r(shí)給予提示。對(duì)非法字符的控制。限制不可以輸入或提交時(shí)給予提示。（如’、”、<、<>）

目前四十一頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】表單列表【功能簡述】對(duì)表單列表的相關(guān)規(guī)范?！疽?guī)范要求】界面設(shè)計(jì)規(guī)范表頭水平/垂直居中對(duì)齊。表單中內(nèi)容如為定長，則為居中顯示；如為不固定的中英文內(nèi)容，則為居左顯示；如為數(shù)值形式，則為居右顯示。保證表格的寬度不被擠變形，對(duì)于不定長的內(nèi)容，可固定顯示寬度，當(dāng)超出此顯示寬度后，以……顯示，光標(biāo)停留后，詳細(xì)內(nèi)容再在浮動(dòng)層顯示。

目前四十二頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】窗體【功能簡述】對(duì)窗體的相關(guān)規(guī)范?！疽?guī)范要求】對(duì)話框窗體大小盡量不要超過640*460。并且高和寬（或W寬和高）的比應(yīng)該大致保持為3:4（或4：3）。由于每個(gè)人的屏幕大小設(shè)置不一樣，有些是1024*768，有些是1366*768，因此在設(shè)計(jì)期間請(qǐng)注意窗體大小，盡量不要超過1024*768，以免出現(xiàn)窗體超出或覆蓋屏幕的問題

界面設(shè)計(jì)規(guī)范目前四十三頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】快捷鍵的限制【功能簡述】由于IE本身的一些原因，避免一些不必要的錯(cuò)誤，故對(duì)其進(jìn)行限制?！疽?guī)范要求】

在用戶沒有提供明確需求情況下，限制F5、IE工具欄、退格鍵（僅限頁面不限輸入框）。限制右鍵菜單的使用。

界面設(shè)計(jì)規(guī)范目前四十四頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】頁面布局【功能簡述】對(duì)界面布局、分辨率的規(guī)范【規(guī)范要求】

必須要能自適應(yīng)1024*768的分辨率。界面層次不宜超過3層。

默認(rèn)窗口設(shè)置下，不應(yīng)出現(xiàn)水平、垂直滾動(dòng)條。

當(dāng)界面內(nèi)容超出顯示區(qū)域時(shí)，以浮動(dòng)層的形式顯示。

界面設(shè)計(jì)規(guī)范目前四十五頁\總數(shù)六十頁\編于十點(diǎn)列表名稱選中的行菜單層次列表內(nèi)容表頭按鈕【功能名稱】列表界面【功能簡述】對(duì)列表界面規(guī)范要求【規(guī)范要求】界面設(shè)計(jì)規(guī)范目前四十六頁\總數(shù)六十頁\編于十點(diǎn)1.菜單層次：說明本模塊所在位置的文字，所在的位置必須對(duì)應(yīng)功能菜單，比如點(diǎn)擊菜單上的則模塊位置說明文字必須對(duì)應(yīng)起來，顯示：2.按鈕說明：按鈕的顏色是統(tǒng)一的;按鈕上如果只有兩個(gè)字，則這兩個(gè)字之間和兩個(gè)字的兩邊都需要一個(gè)空格；如果是兩個(gè)字以上的則只需要在字兩邊加一個(gè)空格；按鈕如靠右放置，則按鈕的最右端必須和列表的最右端對(duì)齊；按鈕之間沒有空格；間距由css定義。界面設(shè)計(jì)規(guī)范不規(guī)范實(shí)例目前四十七頁\總數(shù)六十頁\編于十點(diǎn)3.記錄文字說明：如果列表前選擇框使用的是RadioButton，則應(yīng)該默認(rèn)選中第1條;選中的記錄必須和未選中的記錄區(qū)分開來；列表中數(shù)量數(shù)字必須靠右顯示；金額數(shù)字采用千分位分隔符的形式，分隔符為西文逗號(hào)“,”如：列表中字?jǐn)?shù)固定的文字（比如日期，圖片等）居中顯示；字?jǐn)?shù)不規(guī)則的記錄靠左顯示；4.如果沒有選中列表的項(xiàng)，在點(diǎn)擊功能操作按鈕時(shí)，必須有提示“沒有選擇..”。例如：沒有選擇項(xiàng)目列表中的項(xiàng)目時(shí)，按功能按鈕彈出窗口提示：“您沒有選擇項(xiàng)目！”。界面設(shè)計(jì)規(guī)范目前四十八頁\總數(shù)六十頁\編于十點(diǎn)5.在列表的字段中，有被截短的，鼠標(biāo)放上去，必須顯示出全部的值6.選中的行顯示為不同的顏色。7.如果列表沒有數(shù)據(jù)時(shí)，顯示“本列表暫無記錄！”如圖所示:界面設(shè)計(jì)規(guī)范目前四十九頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】一般編輯界面【功能簡述】對(duì)一般編輯界面規(guī)范要求【規(guī)范要求】界面設(shè)計(jì)規(guī)范文本框必填項(xiàng)多行文本框目前五十頁\總數(shù)六十頁\編于十點(diǎn)1.文本框：只讀的文本框和可輸入的文本框在顏色上必須區(qū)分；可以輸入的文本框以白色為背景；如只讀的文本框一灰色為背景；如：文本框上下或者左右對(duì)齊；數(shù)字靠右顯示；字?jǐn)?shù)不等的文字靠左顯示；

界面設(shè)計(jì)規(guī)范【功能名稱】一般編輯界面【功能簡述】對(duì)一般編輯界面規(guī)范要求【規(guī)范要求】目前五十一頁\總數(shù)六十頁\編于十點(diǎn)輸入框樣式應(yīng)該統(tǒng)一

界面設(shè)計(jì)規(guī)范【功能名稱】一般編輯界面【功能簡述】對(duì)一般編輯界面規(guī)范要求【規(guī)范要求】目前五十二頁\總數(shù)六十頁\編于十點(diǎn)2.彈出窗口說明：彈出式窗口應(yīng)居中顯示；必須有關(guān)閉窗口的按鈕。如果是關(guān)閉按鈕，名稱必須叫做“關(guān)閉”，不能寫成“取消”或其他類似的名字。系統(tǒng)中彈出框的樣式需統(tǒng)一界面設(shè)計(jì)規(guī)范【功能名稱】一般編輯界面【功能簡述】對(duì)一般編輯界面規(guī)范要求【規(guī)范要求】目前五十三頁\總數(shù)六十頁\編于十點(diǎn)3.必填項(xiàng)說明：編輯頁面中的必填項(xiàng)必須有標(biāo)識(shí)，如右圖：4.多行文本框說明：多行的文本框必須有提示剩余輸入字?jǐn)?shù)的功能，且文字是黑色的，數(shù)字必須是突出的紅色字體如圖所示：界面設(shè)計(jì)規(guī)范【功能名稱】一般編輯界面【功能簡述】對(duì)一般編輯界面規(guī)范要求【規(guī)范要求】5.控件：暫時(shí)不用的控件應(yīng)該灰掉目前五十四頁\總數(shù)六十頁\編于十點(diǎn)界面設(shè)計(jì)規(guī)范【功能名稱】防錯(cuò)和出錯(cuò)處理【功能簡述】用戶在使用軟件的過程中，不可避免的會(huì)出現(xiàn)一些錯(cuò)誤的操作。倘若用戶不小心輸入了錯(cuò)誤的數(shù)據(jù)或者錯(cuò)誤的刪除了有用的數(shù)據(jù)，而軟件將錯(cuò)就錯(cuò)的執(zhí)行了，那么用戶肯定很惱火，以后就不敢放心的使用軟件。在設(shè)計(jì)用戶界面時(shí)必須考慮防錯(cuò)處理，目的是讓用戶不必為避免犯錯(cuò)誤而提心吊膽，小心翼翼的操作。【規(guī)范要求】對(duì)輸入的數(shù)據(jù)進(jìn)行校驗(yàn)對(duì)于某些情況下不應(yīng)該使用的菜單項(xiàng)和命令按鈕，應(yīng)當(dāng)將其“失效”（變成灰色，可見但不可操作）或者隱藏。例如對(duì)于某些軟件，不用的用戶有不同的操作權(quán)限。如果低權(quán)限的用戶登錄到系統(tǒng)，那些僅供高級(jí)權(quán)限用戶使用的功能應(yīng)當(dāng)被隱藏，或者將其“失效”執(zhí)行破壞性的操作之前，應(yīng)當(dāng)獲得用戶的確認(rèn)。例如用戶刪除一個(gè)文件時(shí)，應(yīng)當(dāng)彈出對(duì)話框：“真的要?jiǎng)h除該文件嗎”，當(dāng)用戶確認(rèn)后才真正刪除文件。盡量提供undo功能，用戶可以撤銷剛才的操作。如果發(fā)生意外和錯(cuò)誤，應(yīng)當(dāng)及時(shí)給出警告信息和錯(cuò)誤信息，提醒用戶做出正確的處理。目前五十五頁\總數(shù)六十頁\編于十點(diǎn)界面設(shè)計(jì)規(guī)范實(shí)例分析好的差的不規(guī)范的消息框主要表現(xiàn)在：措辭生硬、幼稚、甚至有文字、語法錯(cuò)誤。消息文本、圖形標(biāo)志和命令按鈕在語義上不一致等目前五十六頁\總數(shù)六十頁\編于十點(diǎn)【功能名稱】html編寫【功能簡述】對(duì)html編寫的規(guī)范要求【規(guī)范要求】首行縮進(jìn)的處理，不要使用全角空格來達(dá)到效果，規(guī)范的做法是在樣式表中定義p{text-indent:2em;}

然后給每一段加上<p>

標(biāo)記，注意，一般情況下，請(qǐng)不要省略</p>

結(jié)束標(biāo)記。為了最大