頁面交互網(wǎng)頁設計

1、頁面元素焦點切換
在WEB頁面中，為了提高和用戶之間的互動，需要在各類頁面元素獲得焦點和失去焦點的時候，在如下場景中采用網(wǎng)站設計頁面交互的方法有：

2、 信息填寫
對輸入信息驗證：
如果需要校驗填寫內(nèi)容，則需要在輸入框失去焦點時進行數(shù)據(jù)有效性的判斷，并在輸入框后給出提示。如圖：



對輸入信息提示：
在一組需要被驗證的數(shù)據(jù)填寫時，如果有必填項，需要在輸入框后面給出標志，并對填入的規(guī)則加以說明。如圖：



3、鼠標交互響應
對鼠標在頁面中所產(chǎn)生的事件進行處理，當頁面元素獲得焦點、被點擊、失去焦點時，則需要控件本身在顏色、大小或形狀上的變化給與響應，亦可以添加聲音響應。
下面是各種情況下的鼠標交互示例：

例如：

按鈕：按鈕顏色改變、或形狀，或字體改變，如圖：



鏈接：字體變粗、或字體變色、或背景變色，如圖：



4、操作結(jié)果確認

在提交數(shù)據(jù)，或是載有數(shù)據(jù)的頁面關(guān)閉，或其他需要和用戶進行確認交互的場景，需要軟件能夠提供一個以彈出頁面形式，要求用戶確認執(zhí)行結(jié)果的對話框，包含的情況有：

提示確認輸入信息正確：彈出對話框，并將已填寫的內(nèi)容列出，要求用戶確認內(nèi)容的正確性，給出“確定”和“取消”的選擇按鈕；
提示確認數(shù)據(jù)更改是否保存：彈出對話框，提示當前頁面內(nèi)容已經(jīng)改變，要求用戶確認是否保存更改的信息，給出“是”和“否”的選擇按鈕；
提示確認當前頁面的跳轉(zhuǎn)：彈出對話框，提示用戶正在跳轉(zhuǎn)到另外一個頁面，要求用戶確認離開當前頁面，給出“是”和“否”的選擇按鈕；
確認刪除數(shù)據(jù)內(nèi)容：彈出對話框，提示用戶刪除了當前選擇的內(nèi)容，要求用戶確認是否繼續(xù)刪除的操作，給出“確定”和“取消”的選擇按鈕；

5、其他規(guī)則

對于信息交互過程中，其他需要遵守的規(guī)則有：

重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對固定的位置上；
容易引起操作錯誤或使程序退出、關(guān)閉的按鈕應不醒目，放在不易點位置；
與正在進行的操作無關(guān)的按鈕應該加以屏蔽，例如：按鈕背景為灰色顯示；
對可能造成數(shù)據(jù)無法恢復的操作必須提供確認信息，給用戶放棄選擇的機會；
非法的輸入或操作應有足夠的提示說明；
對運行過程中出現(xiàn)問題而引起錯誤的地方要有提示，讓用戶明白錯誤出處，避免形成無限期的等待；

6、頁面信息提示

在web頁面提供的功能中，很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁面顯示給用戶，這些信息的分類有：

警告信息
禁止信息
操作執(zhí)行成功信息
操作執(zhí)行失敗信息
錯誤信息
幫助信息
提示信息

這些信息在當前頁面或彈出頁面上顯示。如果采用彈出對話框的形式，對話框的頁面結(jié)構(gòu)如下圖：

標題區(qū)：簡要給出此次提示信息的性質(zhì)，例如：警告：操作非法！
圖標區(qū)：給出和此次提示信息性質(zhì)匹配的圖標；
提示信息區(qū)：給出此次提示信息的具體內(nèi)容；
按鈕區(qū)：給出供用戶進行選擇的按鈕；
對于對話框的背景顏色，要求和系統(tǒng)的整體風格選取的顏色一致，而右上角的操作區(qū)只保留關(guān)閉一個可操作功能，最小化和最大化的功能將不顯示。