最近給項(xiàng)目組做了一次Web應(yīng)用界面設(shè)計(jì)規(guī)范的培訓(xùn)

1、最近給項(xiàng)目組做了一次Web應(yīng)用界面設(shè)計(jì)規(guī)范的培訓(xùn)，共享一下。Web應(yīng)用界面設(shè)計(jì)規(guī)范（Design Specification for Web UI）主講人：ARay目錄：一、軟件界面規(guī)范的重要性及其目的二、用戶體驗(yàn)為何如此重要三、Web規(guī)范體系介紹四、界面設(shè)計(jì)開(kāi)發(fā)流程五、應(yīng)該遵循的基本原則六、界面設(shè)計(jì)規(guī)范一、軟件界面規(guī)范的重要性及其目的    使最終設(shè)計(jì)出來(lái)的界面風(fēng)格一致化，開(kāi)發(fā)編碼人員相互之間開(kāi)發(fā)更輕松，遵循統(tǒng)一的操作規(guī)范，以標(biāo)準(zhǔn)化的方式設(shè)計(jì)界面，提高工作效率。減少和改變責(zé)任不明，任務(wù)不清和由此產(chǎn)生的信息溝通不暢、反復(fù)修改、重復(fù)勞動(dòng)、效率低下的現(xiàn)象。 

2、   產(chǎn)品設(shè)計(jì)通過(guò)規(guī)范的方式來(lái)達(dá)到以用戶為中心的目的。二、用戶體驗(yàn)為何如此重要日常生活中的遭遇X員工悲慘的一天：早晨起來(lái)，發(fā)現(xiàn)鬧鐘沒(méi)有按原先設(shè)定響起來(lái)。一邊燒水，一邊穿衣服，臨走前去喝水卻發(fā)現(xiàn)水還沒(méi)有燒開(kāi)。到了地鐵站，發(fā)現(xiàn)公交卡沒(méi)有錢(qián)了。無(wú)奈之下只能去排隊(duì)買(mǎi)票。排了3趟地鐵，終于到公司了，但是你卻遲到了。結(jié)果：盡管你已經(jīng)非常努力，但是你還是遲到了。那么，讓我們看看這一連串的倒霉事，是什么讓我們?nèi)绱死仟N？ 什么是用戶體驗(yàn)用戶體驗(yàn)（user experience）是以用戶為中心的設(shè)計(jì)中最重要的一個(gè)部分，強(qiáng)調(diào)的是過(guò)程，是軟件對(duì)用戶行為產(chǎn)生的反應(yīng)與用戶期待值要盡可能的一致

3、。糟糕的用戶界面表現(xiàn)：  表現(xiàn)一：過(guò)分使用各種奇形怪狀、五顏六色的控件。  表現(xiàn)二：界面元素比例失調(diào)。比如按鈕巨大無(wú)比，其尺寸甚至超過(guò)顯示重要內(nèi)容的文本框的界面。   表現(xiàn)三：界面元素凌亂。比如說(shuō)，按鈕和文本框擺放地點(diǎn)隨意，該對(duì)齊的控件對(duì)不齊。  表現(xiàn)四：違背使用習(xí)慣。你按F1，它沒(méi)有彈出幫助，卻執(zhí)行了一件絕對(duì)出乎你意料的動(dòng)作。   表現(xiàn)五：消息框信息含糊、混亂。比如軟件彈出一個(gè)消息框。把原本“確定”和“取消”寫(xiě)成為“是”和“否”，讓用戶不知道什么意思。  表現(xiàn)六：還有一種糟糕的用戶界面，乍一看很厲害，實(shí)際上完全是

4、缺乏規(guī)劃的結(jié)果。這種軟件本身的確提供了比較復(fù)雜的功能，但對(duì)于哪些是常用功能，哪些是很少用到的高級(jí)功能，缺乏評(píng)估。什么功能都往界面上擠，占地方不說(shuō)，用戶會(huì)厭煩，弄不好還會(huì)被嚇跑。 用戶體驗(yàn)的要素   用戶體驗(yàn)和軟件應(yīng)用面對(duì)大量的選擇，用戶只能自己想辦法，去決定哪一個(gè)軟件系統(tǒng)功能會(huì)符合她的要求。企業(yè)開(kāi)始意識(shí)到，提供優(yōu)質(zhì)的用戶體驗(yàn)是一個(gè)重要的、可持續(xù)的競(jìng)爭(zhēng)優(yōu)勢(shì)。用戶體驗(yàn)形成了客戶對(duì)企業(yè)的整體印象，界定了企業(yè)和競(jìng)爭(zhēng)對(duì)手的差異，并且決定了客戶什么時(shí)候還會(huì)再次光顧。 記住你的用戶以用戶為中心的設(shè)計(jì)   -在開(kāi)發(fā)產(chǎn)品的每一個(gè)步驟中，都要把用戶列入考

5、慮范圍內(nèi) 考慮用戶體驗(yàn) 把它分為各個(gè)組成要素 從不同角度來(lái)了解它        -通過(guò)這些才能確保你控制了決策所造成的全部結(jié)果用戶體驗(yàn)很重要，最大的理由：它對(duì)你的用戶很重要。協(xié)調(diào)一致，直觀明了，甚至讓人愉快的體驗(yàn)-“一次”每件事都按照正確的方式在工作的體驗(yàn)。三、Web規(guī)范體系介紹四、界面設(shè)計(jì)開(kāi)發(fā)流程五、應(yīng)該遵循的基本原則顯示信息一致性的原則以用戶為主導(dǎo)原則易用性原則鼠標(biāo)與鍵盤(pán)一致性原則系統(tǒng)響應(yīng)時(shí)間原則出錯(cuò)信息和警告原則信息顯示原則數(shù)據(jù)輸入原則合理性原則美觀與協(xié)調(diào)性原則顯示信息一致性的原則

6、0;   無(wú)論是控件使用，提示信息措辭，還是顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)，做到真正的一致。界面直觀、對(duì)用戶透明：用戶接觸軟件后對(duì)界面上對(duì)應(yīng)的功能一目了然、不需要多少培訓(xùn)就可以方便使用應(yīng)用系統(tǒng)。這樣得到的好處：  用戶使用起來(lái)能夠建立起精確的心里模型，使用熟練了一個(gè)系統(tǒng)界面后，切換到另外一個(gè)系統(tǒng)界面能夠很輕松的推測(cè)出各種功能。  降低培訓(xùn)、支持成本，支持人員不用費(fèi)力逐個(gè)指導(dǎo)。  給用戶統(tǒng)一感覺(jué)，不覺(jué)得混亂，心情愉快，支持度增加。以用戶為主導(dǎo)原則    明確用戶是所有系統(tǒng)處理的核心，

7、不應(yīng)該有應(yīng)用程序來(lái)決定處理過(guò)程，所以用戶界面應(yīng)當(dāng)由用戶來(lái)控制應(yīng)如何工作、如何響應(yīng)，而不是由開(kāi)發(fā)者按自己的意愿把操作流程強(qiáng)加給用戶。易用性原則用戶不用查閱幫助就能知道該界面的功能并進(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í)可以考慮

8、使用分頁(yè)界面顯示。分頁(yè)界面要支持在頁(yè)面間的快捷切換，常用組合快捷鍵Ctrl+Tab默認(rèn)按鈕要支持Enter操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作。可寫(xiě)控件檢測(cè)到非法輸入后應(yīng)給出說(shuō)明并能自動(dòng)獲得焦點(diǎn)。復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。復(fù)選框和選項(xiàng)框要有默認(rèn)選項(xiàng)，并支持Tab選擇。專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語(yǔ)，通用性界面則提倡使用通用性詞眼。鼠標(biāo)與鍵盤(pán)一致性原則   盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤(pán)也應(yīng)當(dāng)可以完成。但是，許多鼠標(biāo)的操作，如雙擊、拖動(dòng)對(duì)象等，并不能簡(jiǎn)單地用鍵盤(pán)來(lái)模擬即可實(shí)現(xiàn)，此類操作可適當(dāng)增加操作按鈕。系統(tǒng)響應(yīng)時(shí)間原則 

9、;   系統(tǒng)響應(yīng)時(shí)間應(yīng)該適中，響應(yīng)時(shí)間過(guò)長(zhǎng)，用戶就會(huì)感到不安和沮喪，而響應(yīng)時(shí)間過(guò)快也會(huì)影響到用戶的操作節(jié)奏，并可能導(dǎo)致錯(cuò)誤。因此在系統(tǒng)響應(yīng)時(shí)間上堅(jiān)持如下原則： 0-5秒鼠標(biāo)顯示成為沙漏； 5秒以上顯示處理窗口，或顯示進(jìn)度條； 一個(gè)長(zhǎng)時(shí)間的處理完成時(shí)應(yīng)給予完成警告信息。出錯(cuò)信息和警告原則    出錯(cuò)信息和警告是指出現(xiàn)問(wèn)題時(shí)系統(tǒng)給出的壞消息，對(duì)于出錯(cuò)信息和警告應(yīng)該遵循以下原則： 信息以用戶可以理解的術(shù)語(yǔ)描述； 信息簡(jiǎn)明扼要，指出出錯(cuò)原因并提供解決辦法提示。信息顯示原則信息顯示遵循以下原則： 

10、;只顯示與當(dāng)前用戶語(yǔ)境環(huán)境有關(guān)的信息； 不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息； 使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫(xiě)和顏色，顯示信息的含義應(yīng)該非常明確，用戶        不必再參考其它信息源； 產(chǎn)生有意義的出錯(cuò)信息； 使用縮進(jìn)和文本來(lái)輔助理解； 使用窗口分隔控件分隔不同類型的信息； 高效地使用顯示器的顯示空間，但要避免空間過(guò)于擁擠。數(shù)據(jù)輸入原則數(shù)據(jù)輸入遵循以下原則：盡量減少用戶輸入動(dòng)作的數(shù)量；維護(hù)信息顯示和數(shù)據(jù)輸入的一致性；交互應(yīng)該是靈活的，

11、對(duì)鍵盤(pán)和鼠標(biāo)輸入的靈活性提供支持；在當(dāng)前動(dòng)作的語(yǔ)境中使不合適的命令不起作用；讓用戶控制交互流，用戶可以跳過(guò)不必要的動(dòng)作、改變所需動(dòng)作的順序（如果允許的話）以及在不退出系統(tǒng)的情況下從錯(cuò)誤狀態(tài)中恢復(fù)；為所有輸入的動(dòng)作提供幫助；消除冗余輸入?？赡艿脑捥峁┠J(rèn)值、絕不要讓用戶提供程序中可以自  動(dòng)獲取或計(jì)算出來(lái)的信息。合理性原則  屏幕對(duì)角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。美觀與協(xié)調(diào)性原則  界面應(yīng)該大小適合美學(xué)觀點(diǎn)，感覺(jué)協(xié)調(diào)舒適，能在有效的范圍內(nèi)吸引用戶的注意力。長(zhǎng)寬接近黃金點(diǎn)比例，切忌長(zhǎng)

12、寬比例失調(diào)、或?qū)挾瘸^(guò)長(zhǎng)度。布局要合理,不宜過(guò)于密集，也不能過(guò)于空曠，合理的利用空間。按鈕大小基本相近，忌用太長(zhǎng)的名稱，免得占用過(guò)多的界面位置。按鈕的大小要與界面的大小和空間要協(xié)調(diào)。避免空曠的界面上放置很大的按鈕。放置完控件后界面不應(yīng)有很大的空缺位置。字體的大小要與界面的大小比例協(xié)調(diào), 通常使用的字體中宋體9-12較為美觀，很少使用超過(guò)12號(hào)的字體。前景與背景色搭配合理協(xié)調(diào)，反差不宜太大。常用色考慮使用Windows界面色調(diào)。如果使用其他顏色，主色要柔和，具有親和力，堅(jiān)決杜絕刺目的顏色。大型系統(tǒng)常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。通常父窗體支持縮放時(shí)，子窗體沒(méi)有必要縮放。如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。六、界面