1、頁面元素焦點(diǎn)切換

在WEB頁面中，為了提高與用戶的交互，當(dāng)各種頁面元素需要獲得或失去焦點(diǎn)時(shí)，以下幾種場景的網(wǎng)站設(shè)計(jì)頁面交互的方法是：2、 信息填寫

驗(yàn)證輸入信息：

如果需要驗(yàn)證填寫的內(nèi)容，需要在輸入框失去焦點(diǎn)時(shí)判斷數(shù)據(jù)的合法性，并在輸入框后給出提示。如圖所示：

提示輸入信息：

在填寫一組需要驗(yàn)證的數(shù)據(jù)時(shí)，如果有必填項(xiàng)，需要在輸入框后面給出一個(gè)標(biāo)志，并說明填寫規(guī)則。如圖：3、鼠標(biāo)交互響應(yīng)

處理鼠標(biāo)在頁面上產(chǎn)生的事件。當(dāng)頁面元素獲得焦點(diǎn)、被點(diǎn)擊或失去焦點(diǎn)時(shí)，需要響應(yīng)控件本身的顏色、大小或形狀的變化，也可以添加聲音響應(yīng)。

以下是各種情況下的鼠標(biāo)交互示例：

例如：

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

鏈接：字體變粗，或者字體顏色改變，或者背景顏色改變，如圖：

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

在提交數(shù)據(jù)，或者關(guān)閉包含數(shù)據(jù)的頁面，或者其他需要用戶確認(rèn)和交互的場景下，軟件需要能夠以彈窗的形式提供一個(gè)要求用戶確認(rèn)執(zhí)行結(jié)果的對話框-up 頁面，包括以下幾種情況：

提示確認(rèn)輸入信息是否正確：彈出對話框，列出填寫的內(nèi)容，要求用戶確認(rèn)內(nèi)容的正確性，并給出“確定”和“取消”的選擇按鈕；

提示確認(rèn)數(shù)據(jù)變更是否保存：彈出對話框，提示當(dāng)前頁面內(nèi)容發(fā)生變更，要求用戶確認(rèn)是否保存變更信息，并給出“是”和“”的選擇按鈕不”;

提示確認(rèn)是否跳轉(zhuǎn)當(dāng)前頁面：彈出對話框，提示用戶跳轉(zhuǎn)到另一個(gè)頁面，要求用戶確認(rèn)是否離開當(dāng)前頁面，并給出“是”和“否”的選擇按鈕；

確認(rèn)刪除數(shù)據(jù)內(nèi)容：彈出對話框，提示用戶刪除當(dāng)前選中的內(nèi)容，要求用戶確認(rèn)是否繼續(xù)刪除操作，并給出“確定”和“取消”選擇按鈕；5、其他規(guī)則

對于信息交換的過程，需要遵循的其他規(guī)則是：

重要的命令按鈕和經(jīng)常使用的按鈕應(yīng)該放在界面上相對固定的位置；

容易造成操作錯(cuò)誤或?qū)е鲁绦蛲顺龌蜿P(guān)閉的按鈕，應(yīng)不顯眼，放置在不易點(diǎn)擊的地方；

與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該被屏蔽，例如：按鈕的背景顯示為灰色；

對可能導(dǎo)致數(shù)據(jù)不可恢復(fù)的操作必須提供確認(rèn)信息，給用戶放棄選擇的機(jī)會(huì)；

非法輸入或操作應(yīng)有充分的提示；

對于操作過程中出現(xiàn)問題而出現(xiàn)錯(cuò)誤的地方應(yīng)該有提示，讓用戶了解錯(cuò)誤的來源，避免無休止的等待；6、頁面信息提示

在網(wǎng)頁提供的功能中，很多時(shí)候，系統(tǒng)需要向頁面發(fā)送一些必要的提示信息，以顯示給用戶。這些信息的分類如下：

警告信息

禁止信息

操作執(zhí)行成功消息

操作執(zhí)行失敗信息

錯(cuò)誤信息

幫助信息

提示信息

此信息顯示在當(dāng)前頁面或彈出頁面上。如果是彈出對話框的形式，對話框的頁面結(jié)構(gòu)如下：

標(biāo)題區(qū)：簡要給出提示信息的性質(zhì)，例如：警告：非法操作！

圖標(biāo)區(qū)：給出符合提示信息性質(zhì)的圖標(biāo)；

提示信息區(qū)：給出本次提示信息的具體內(nèi)容；

按鈕區(qū)：給出按鈕供用戶選擇；

對話框的背景顏色要求與系統(tǒng)整體風(fēng)格選擇的顏色一致，右上角的操作區(qū)只保留一個(gè)可操作的功能關(guān)閉，最小化和最大化功能會(huì)不被顯示。

我們專注高端建站，小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn)，每一個(gè)項(xiàng)目承諾做到滿意為止，多一次對比，一定讓您多一份收獲！