第4節(jié) web頁(yè)面設(shè)計(jì)規(guī)范之頁(yè)面交互
WEB頁(yè)面交互
頁(yè)面元素焦點(diǎn)切換
在WEB頁(yè)面中，為了提高和用戶之間的互動(dòng)，需要在各類頁(yè)面元素獲得焦點(diǎn)和失去焦點(diǎn)的時(shí)候，在如下場(chǎng)景中采用頁(yè)面交互的方法有：
信息填寫
對(duì)輸入信息驗(yàn)證：
如果需要校驗(yàn)填寫內(nèi)容，則需要在輸入框失去焦點(diǎn)時(shí)進(jìn)行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：
對(duì)輸入信息提示：
在一組需要被驗(yàn)證的數(shù)據(jù)填寫時(shí)，如果有必填項(xiàng)，需要在輸入框后面給出標(biāo)志，并對(duì)填入的規(guī)則加以說(shuō)明。如圖：
如果輸入框內(nèi)有默認(rèn)的文字，當(dāng)輸入框獲得焦點(diǎn)時(shí)，需要將輸入框內(nèi)的文字處于全選狀態(tài)。如圖：
鼠標(biāo)交互響應(yīng)
對(duì)鼠標(biāo)在頁(yè)面中所產(chǎn)生的事件進(jìn)行處理，當(dāng)頁(yè)面元素獲得焦點(diǎn)、被點(diǎn)擊、失去焦點(diǎn)時(shí)，則需要控件本身在顏色、大小或形狀上的變化給與響應(yīng)，亦可以添加聲音響應(yīng)。
下面是各種情況下的鼠標(biāo)交互示例：
例如：
-按鈕：按鈕顏色改變、或形狀，或字體改變，如圖：
鼠標(biāo)放上獲得焦點(diǎn)前：
鼠標(biāo)放上獲得焦點(diǎn)后：
-鏈接：字體變粗、或字體變色、或背景變色，如圖：
鼠標(biāo)放上獲得焦點(diǎn)前：
鼠標(biāo)放上獲得焦點(diǎn)后：
-頁(yè)簽：獲得焦點(diǎn)的頁(yè)簽顏色變化，或頁(yè)簽的大小和里面的字體變大，如圖：
鼠標(biāo)放上獲得焦點(diǎn)前：
鼠標(biāo)放上獲得焦點(diǎn)后：
-輸入框，輸入框的邊框變色；
鼠標(biāo)放上獲得焦點(diǎn)前：
鼠標(biāo)放上獲得焦點(diǎn)后：
-表格，表格中行的底色改變；
鼠標(biāo)放上獲得焦點(diǎn)前：
鼠標(biāo)放上獲得焦點(diǎn)后：
-等待響應(yīng)：當(dāng)由于載入大量數(shù)據(jù)等原因，使得用戶需要等待一定時(shí)間，需要將鼠標(biāo)指針的形狀變成時(shí)間漏斗的形狀、或其他表示鼠標(biāo)不可操作的樣子來(lái)提醒用戶等待。如圖：
對(duì)于我們所使用的有關(guān)鼠標(biāo)交互響應(yīng)的規(guī)范，將結(jié)合頁(yè)面風(fēng)格在附錄中給出說(shuō)明。
頁(yè)面信息交互
操作結(jié)果確認(rèn)
在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁(yè)面關(guān)閉，或其他需要和用戶進(jìn)行確認(rèn)交互的場(chǎng)景，需要軟件能夠提供一個(gè)以彈出頁(yè)面形式，要求用戶確認(rèn)執(zhí)行結(jié)果的對(duì)話框，包含的情況有：
提示確認(rèn)輸入信息正確：彈出對(duì)話框，并將已填寫的內(nèi)容列出，要求用戶確認(rèn)內(nèi)容的正確性，給出“確定”和“取消”的選擇按鈕；
提示確認(rèn)數(shù)據(jù)更改是否保存：彈出對(duì)話框，提示當(dāng)前頁(yè)面內(nèi)容已經(jīng)改變，要求用戶確認(rèn)是否保存更改的信息，給出“是”和“否”的選擇按鈕；
提示確認(rèn)當(dāng)前頁(yè)面的跳轉(zhuǎn)：彈出對(duì)話框，提示用戶正在跳轉(zhuǎn)到另外一個(gè)頁(yè)面，要求用戶確認(rèn)離開(kāi)當(dāng)前頁(yè)面，給出“是”和“否”的選擇按鈕；
確認(rèn)刪除數(shù)據(jù)內(nèi)容：彈出對(duì)話框，提示用戶刪除了當(dāng)前選擇的內(nèi)容，要求用戶確認(rèn)是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；
其他規(guī)則
對(duì)于信息交互過(guò)程中，其他需要遵守的規(guī)則有：
重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對(duì)固定的位置上；
容易引起操作錯(cuò)誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目，放在不易點(diǎn)位置；
與正在進(jìn)行的操作無(wú)關(guān)的按鈕應(yīng)該加以屏蔽，例如：按鈕背景為灰色顯示；
對(duì)可能造成數(shù)據(jù)無(wú)法恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的機(jī)會(huì)；
非法的輸入或操作應(yīng)有足夠的提示說(shuō)明；
對(duì)運(yùn)行過(guò)程中出現(xiàn)問(wèn)題而引起錯(cuò)誤的地方要有提示，讓用戶明白錯(cuò)誤出處，避免形成無(wú)限期的等待；
頁(yè)面信息提示
在web頁(yè)面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁(yè)面顯示給用戶，這些信息的分類有：
警告信息
禁止信息
操作執(zhí)行成功信息
操作執(zhí)行失敗信息
錯(cuò)誤信息
幫助信息
提示信息
這些信息在當(dāng)前頁(yè)面或彈出頁(yè)面上顯示。如果采用彈出對(duì)話框的形式，對(duì)話框的頁(yè)面結(jié)構(gòu)如下圖：
標(biāo)題區(qū)：簡(jiǎn)要給出此次提示信息的性質(zhì)，例如：警告：操作非法！
圖標(biāo)區(qū)：給出和此次提示信息性質(zhì)匹配的圖標(biāo)；
提示信息區(qū)：給出此次提示信息的具體內(nèi)容；
按鈕區(qū)：給出供用戶進(jìn)行選擇的按鈕；
對(duì)于對(duì)話框的背景顏色，要求和系統(tǒng)的整體風(fēng)格選取的顏色一致，而右上角的操作區(qū)只保留關(guān)閉一個(gè)可操作功能，最小化和最大化的功能將不顯示。
對(duì)應(yīng)采用的圖標(biāo)的圖例為：
警告信息：
禁止操作信息：
操作成功信息：
操作失敗信息：
錯(cuò)誤信息：
幫助信息：
提示信息：
提示信息內(nèi)容要求：
提示信息中如有標(biāo)點(diǎn)符號(hào)，統(tǒng)一為全角符號(hào)；
提示信息如有主語(yǔ)，統(tǒng)一為‘您’；
在重要或復(fù)雜的操作成功后，給予提示信息；
有后續(xù)操作的操作在成功后，也需給予提示信息，說(shuō)明當(dāng)前的狀態(tài)。
提示信息不宜太長(zhǎng)，寬度應(yīng)不超過(guò)當(dāng)前窗口寬度的1/2，當(dāng)超過(guò)此比例時(shí)，請(qǐng)視具體情況進(jìn)行換行；
當(dāng)功能按鈕為圖片按鈕時(shí)，光標(biāo)停留需給予浮動(dòng)提示信息；
鍵盤響應(yīng)支持
由于用戶有時(shí)候還需要結(jié)合鍵盤進(jìn)行操作，所以頁(yè)面需要提供一些簡(jiǎn)單的鍵盤支持，例如：“Esc”、“Enter”、“Tab”“Space”，系統(tǒng)應(yīng)對(duì)這些鍵值作出響應(yīng)。其中：
Esc，“取消”當(dāng)前操作；
Enter，“確認(rèn)”或進(jìn)行下一步操作或提交；
Tab、或Shift+tab能夠在頁(yè)面元素中按照一定次序切換焦點(diǎn)，遵循從左上至右下的原則；
其他快捷鍵的支持，需要根據(jù)項(xiàng)目的實(shí)際情況來(lái)定義。
