頁面交互網(wǎng)頁設(shè)計(jì)
在WEB頁面中,為了提高和用戶之間的互動(dòng),需要在各類頁面元素獲得焦點(diǎn)和失去焦點(diǎn)的時(shí)候,在如下場景中采用網(wǎng)站設(shè)計(jì)頁面交互的方法有:
2、 信息填寫
對輸入信息驗(yàn)證:
如果需要校驗(yàn)填寫內(nèi)容,則需要在輸入框失去焦點(diǎn)時(shí)進(jìn)行數(shù)據(jù)有效性的判斷,并在輸入框后給出提示。如圖:
對輸入信息提示:
在一組需要被驗(yàn)證的數(shù)據(jù)填寫時(shí),如果有必填項(xiàng),需要在輸入框后面給出標(biāo)志,并對填入的規(guī)則加以說明。如圖:
3、鼠標(biāo)交互響應(yīng)
對鼠標(biāo)在頁面中所產(chǎn)生的事件進(jìn)行處理,當(dāng)頁面元素獲得焦點(diǎn)、被點(diǎn)擊、失去焦點(diǎn)時(shí),則需要控件本身在顏色、大小或形狀上的變化給與響應(yīng),亦可以添加聲音響應(yīng)。
下面是各種情況下的鼠標(biāo)交互示例:
例如:
按鈕:按鈕顏色改變、或形狀,或字體改變,如圖:
鏈接:字體變粗、或字體變色、或背景變色,如圖:
4、操作結(jié)果確認(rèn)
在提交數(shù)據(jù),或是載有數(shù)據(jù)的頁面關(guān)閉,或其他需要和用戶進(jìn)行確認(rèn)交互的場景,需要軟件能夠提供一個(gè)以彈出頁面形式,要求用戶確認(rèn)執(zhí)行結(jié)果的對話框,包含的情況有:
提示確認(rèn)輸入信息正確:彈出對話框,并將已填寫的內(nèi)容列出,要求用戶確認(rèn)內(nèi)容的正確性,給出“確定”和“取消”的選擇按鈕;
提示確認(rèn)數(shù)據(jù)更改是否保存:彈出對話框,提示當(dāng)前頁面內(nèi)容已經(jīng)改變,要求用戶確認(rèn)是否保存更改的信息,給出“是”和“否”的選擇按鈕;
提示確認(rèn)當(dāng)前頁面的跳轉(zhuǎn):彈出對話框,提示用戶正在跳轉(zhuǎn)到另外一個(gè)頁面,要求用戶確認(rèn)離開當(dāng)前頁面,給出“是”和“否”的選擇按鈕;
確認(rèn)刪除數(shù)據(jù)內(nèi)容:彈出對話框,提示用戶刪除了當(dāng)前選擇的內(nèi)容,要求用戶確認(rèn)是否繼續(xù)刪除的操作,給出“確定”和“取消”的選擇按鈕;
5、其他規(guī)則
對于信息交互過程中,其他需要遵守的規(guī)則有:
重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對固定的位置上;
容易引起操作錯(cuò)誤或使程序退出、關(guān)閉的按鈕應(yīng)不醒目,放在不易點(diǎn)位置;
與正在進(jìn)行的操作無關(guān)的按鈕應(yīng)該加以屏蔽,例如:按鈕背景為灰色顯示;
對可能造成數(shù)據(jù)無法恢復(fù)的操作必須提供確認(rèn)信息,給用戶放棄選擇的機(jī)會;
非法的輸入或操作應(yīng)有足夠的提示說明;
對運(yùn)行過程中出現(xiàn)問題而引起錯(cuò)誤的地方要有提示,讓用戶明白錯(cuò)誤出處,避免形成無限期的等待;
6、頁面信息提示
在web頁面提供的功能中,很多情況需要系統(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ū):給出供用戶進(jìn)行選擇的按鈕;
對于對話框的背景顏色,要求和系統(tǒng)的整體風(fēng)格選取的顏色一致,而右上角的操作區(qū)只保留關(guān)閉一個(gè)可操作功能,最小化和最大化的功能將不顯示。
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設(shè)計(jì)風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計(jì)開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計(jì)
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
如何學(xué)習(xí)SEO入門到精髓
在中國談SEO網(wǎng)站優(yōu)化還得從百度說起。百度于2000年1月由由李彥宏、...
2013-11-20 -
認(rèn)識搜索營銷趨勢,找到網(wǎng)站優(yōu)化方向
搜索引擎的出現(xiàn)有效的提升了用戶上網(wǎng)的效率,同時(shí)也改變了人們上網(wǎng)的習(xí)慣,...
2013-09-05 -
企業(yè)建站需要了解的幾個(gè)問題
在現(xiàn)代社會,企業(yè)建設(shè)網(wǎng)站已經(jīng)成為一種常態(tài)。無論是品牌推廣還是業(yè)務(wù)拓展,...
2023-05-31 -
促進(jìn)您的網(wǎng)站增加流量
北京網(wǎng)站建設(shè)公司尚品中國:SEO網(wǎng)站優(yōu)化,從而導(dǎo)致較高的排名在搜索結(jié)果...
2012-02-19 -
網(wǎng)站設(shè)計(jì)之色彩的三要素
明度、色相、純度是色彩最基本的三要素,也是人正常視覺感知色彩的網(wǎng)站設(shè)計(jì)...
2015-12-28 -
如何制作網(wǎng)站?怎樣制作網(wǎng)站?
如何制作網(wǎng)站?怎樣制作網(wǎng)站?第一步:客戶提出網(wǎng)站制作申請(www.si...
2012-05-26
預(yù)約專業(yè)咨詢顧問溝通!
免責(zé)聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動(dòng)。
2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時(shí),以國家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請您及時(shí)與我們,我們會在第一時(shí)間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com