學(xué)習(xí)鏈接地：http://www.php100.com/html/webkaifa/DIV_CSS/2012/1010/11210.html
平時(shí)大多數(shù)做的是公司內(nèi)部網(wǎng)站的功能設(shè)計(jì)工作，邏輯和規(guī)則是主要的考慮點(diǎn)，對(duì)易用性考慮欠缺。真正設(shè)計(jì)給客戶使用時(shí)才發(fā)現(xiàn)對(duì)web界面設(shè)計(jì)的基本原則沒有及時(shí)的學(xué)習(xí)和總結(jié)。從網(wǎng)上搜索了一些相應(yīng)的原則，在此與大家分享一下。
web界面設(shè)計(jì)應(yīng)遵循的基本準(zhǔn)則有以下幾點(diǎn)：顯示信息一致性的原則；以用戶為主導(dǎo)原則；易用性原則；鼠標(biāo)與鍵盤一致性原則；系統(tǒng)響應(yīng)時(shí)間原則；出錯(cuò)信息和警告原則；信息顯示原則；數(shù)據(jù)輸入原則；合理性原則；美觀與協(xié)調(diào)性原則
（1）顯示一致性原則：
主要是指控件使用，提示信息措辭，顏色、窗口布局風(fēng)格，遵循統(tǒng)一的標(biāo)準(zhǔn)。
好處：用戶使用起來能夠建立起精確的心里模型，使用熟練了一個(gè)系統(tǒng)界面后，切換到另外一個(gè)系統(tǒng)界面能夠很輕松的推測出各種功能，降低培訓(xùn)成本。給用戶統(tǒng)一感覺，不混亂。
（2）以用戶我主導(dǎo)原則：
根據(jù)用戶的工作流程設(shè)計(jì)操作流程，符合用戶使用習(xí)慣。
PS：現(xiàn)在有時(shí)根本不了解用戶，只是根據(jù)“我以為”的去設(shè)計(jì)。
（3）易用性原則：
完成相同或相近功能的按鈕用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í)可以考慮使用分頁界面顯示。分頁界面要支持在頁面間的快捷切換，常用組合快捷鍵Ctrl+Tab。
默認(rèn)按鈕要支持Enter操作，即按Enter后自動(dòng)執(zhí)行默認(rèn)按鈕對(duì)應(yīng)操作。如表單的保存、提交按鈕。
可寫控件要能自動(dòng)獲得焦點(diǎn)并檢測到非法輸入后應(yīng)給出相應(yīng)提示，提示盡量簡潔明了。
復(fù)選框和選項(xiàng)框按選擇幾率的高底而先后排列。
專業(yè)性強(qiáng)的軟件要使用相關(guān)的專業(yè)術(shù)語，通用性界面則提倡使用通用性詞眼。
④鼠標(biāo)與鍵盤一致性原則
盡量遵循可不用鼠標(biāo)的原則：應(yīng)用中的功能只用鍵盤也應(yīng)當(dāng)可以完成。但是，許多鼠標(biāo)的操作，如雙擊、拖動(dòng)對(duì)象等，并不能簡單地用鍵盤來模擬即可實(shí)現(xiàn)，此類操作可適當(dāng)增加操作按鈕。
PS：個(gè)人覺得此項(xiàng)原則根據(jù)應(yīng)用的用戶人群需求省略。對(duì)大家都熟悉的功能可以適當(dāng)增加一些快捷鍵操作。
⑤系統(tǒng)響應(yīng)時(shí)間原則
系統(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)給予完成警告信息。
PS：不知這個(gè)時(shí)間段劃分是否合理。個(gè)人感覺某些需要長時(shí)間處理的任務(wù)可以給用戶提示并轉(zhuǎn)到后臺(tái)執(zhí)行，在頁面上顯示進(jìn)度，當(dāng)執(zhí)行結(jié)束后給出提示。這樣避免用戶一直等待該響應(yīng)，浪費(fèi)時(shí)間。
⑥出錯(cuò)信息和警告原則
出錯(cuò)信息和警告是指出現(xiàn)問題時(shí)系統(tǒng)給出的壞消息，對(duì)于出錯(cuò)信息和警告應(yīng)該遵循以下原則：
信息以用戶可以理解的術(shù)語描述；信息簡明扼要，指出出錯(cuò)原因并提供解決辦法提示。
PS：發(fā)現(xiàn)過一些提示不明確的情況，比如某批未及時(shí)處理被強(qiáng)制，彈出的提示沒有指明批號(hào)等，需要用戶根據(jù)業(yè)務(wù)規(guī)則自己排查。
⑦信息顯示原則
信息顯示遵循以下原則：
只顯示與當(dāng)前用戶語境環(huán)境有關(guān)的信息；
不要用數(shù)據(jù)將用戶包圍，使用便于用戶迅速吸取信息的方式表現(xiàn)信息；
使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息的含義應(yīng)該非常明確，用戶不必再參考其它信息源；
產(chǎn)生有意義的出錯(cuò)信息；
使用窗口分隔控件分隔不同類型的信息；
高效地使用顯示器的顯示空間，但要避免空間過于擁擠。
⑧數(shù)據(jù)輸入原則
數(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)作提供幫助；
消除冗余輸入?？赡艿脑捥峁┠J(rèn)值、絕不要讓用戶提供程序中可以自
動(dòng)獲取或計(jì)算出來的信息。
⑨合理性原則
屏幕對(duì)角線相交的位置是用戶直視的地方，正上方四分之一處為易吸引
用戶注意力的位置，在放置窗體時(shí)要注意利用這兩個(gè)位置。
⑩美觀與協(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)的字體。
前景與背景色搭配合理協(xié)調(diào)，反差不宜太大。常用色考慮使用Windows界面色調(diào)。
如果使用其他顏色，主色要柔和，具有親和力，堅(jiān)決杜絕刺目的顏色。
大型系統(tǒng)常用的主色有“#E1E1E1”、“#EFEFEF”、“#C0C0C0”等。
界面風(fēng)格要保持一致，字的大小、顏色、字體要相同，除非是需要藝術(shù)處理或有特殊要求的地方。
如果窗體支持最小化和最大化或放大時(shí)，窗體上的控件也要隨著窗體而縮放；切忌只放大窗體而忽略控件的縮放。
通常父窗體支持縮放時(shí)，子窗體沒有必要縮放。
如果能給用戶提供自定義界面風(fēng)格則更好，由用戶自己選擇顏色、字體等。
