頁面交互網頁設計
在WEB頁面中,為了提高和用戶之間的互動,需要在各類頁面元素獲得焦點和失去焦點的時候,在如下場景中采用網站設計頁面交互的方法有:
2、 信息填寫
對輸入信息驗證:
如果需要校驗填寫內容,則需要在輸入框失去焦點時進行數據有效性的判斷,并在輸入框后給出提示。如圖:

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

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

鏈接:字體變粗、或字體變色、或背景變色,如圖:

4、操作結果確認
在提交數據,或是載有數據的頁面關閉,或其他需要和用戶進行確認交互的場景,需要軟件能夠提供一個以彈出頁面形式,要求用戶確認執(zhí)行結果的對話框,包含的情況有:
提示確認輸入信息正確:彈出對話框,并將已填寫的內容列出,要求用戶確認內容的正確性,給出“確定”和“取消”的選擇按鈕;
提示確認數據更改是否保存:彈出對話框,提示當前頁面內容已經改變,要求用戶確認是否保存更改的信息,給出“是”和“否”的選擇按鈕;
提示確認當前頁面的跳轉:彈出對話框,提示用戶正在跳轉到另外一個頁面,要求用戶確認離開當前頁面,給出“是”和“否”的選擇按鈕;
確認刪除數據內容:彈出對話框,提示用戶刪除了當前選擇的內容,要求用戶確認是否繼續(xù)刪除的操作,給出“確定”和“取消”的選擇按鈕;
5、其他規(guī)則
對于信息交互過程中,其他需要遵守的規(guī)則有:
重要的命令按鈕與使用較頻繁的按鈕要放在界面上相對固定的位置上;
容易引起操作錯誤或使程序退出、關閉的按鈕應不醒目,放在不易點位置;
與正在進行的操作無關的按鈕應該加以屏蔽,例如:按鈕背景為灰色顯示;
對可能造成數據無法恢復的操作必須提供確認信息,給用戶放棄選擇的機會;
非法的輸入或操作應有足夠的提示說明;
對運行過程中出現問題而引起錯誤的地方要有提示,讓用戶明白錯誤出處,避免形成無限期的等待;
6、頁面信息提示
在web頁面提供的功能中,很多情況需要系統(tǒng)發(fā)送一些必要的提示信息到頁面顯示給用戶,這些信息的分類有:
警告信息
禁止信息
操作執(zhí)行成功信息
操作執(zhí)行失敗信息
錯誤信息
幫助信息
提示信息
這些信息在當前頁面或彈出頁面上顯示。如果采用彈出對話框的形式,對話框的頁面結構如下圖:
標題區(qū):簡要給出此次提示信息的性質,例如:警告:操作非法!
圖標區(qū):給出和此次提示信息性質匹配的圖標;
提示信息區(qū):給出此次提示信息的具體內容;
按鈕區(qū):給出供用戶進行選擇的按鈕;
對于對話框的背景顏色,要求和系統(tǒng)的整體風格選取的顏色一致,而右上角的操作區(qū)只保留關閉一個可操作功能,最小化和最大化的功能將不顯示。
推薦新聞
更多行業(yè)-
網頁色彩不僅能夠提升畫面設計,還可以營造視覺沖擊
網站設計中色彩的表達在平面廣告設計中能夠充分的展現出產品的特性,同時塑...
2018-06-07 -
網站如何提高用戶粘性?
我們都知道,搭建一個網站不難,很多公司、很多企業(yè)都能夠贊助你完成,但是...
2020-12-31 -
互動網站建設公司為企業(yè)建站需要做好哪些準備工作
隨著各行各業(yè)對網站建設的需求上不斷增多之后,在建站過程中都會經過一系列...
2020-07-08 -
百度再次亮劍 劍指地域性SEO
自己在調查了全國各大 地域性seo詞之后發(fā)現了第9位無一例外都百度所給...
2012-07-10 -
善于向對手學習的SEOer才能更快的提高自己
曾幾何時本人也是一個連域名和IP都分不清的菜鳥,剛剛接觸SEO那會...
2012-02-05 -
北京網站建設—如何讓網站銷量翻倍增長?
隨著互聯網電子商務的深入,越來越多的網站頁面充斥著網絡,其結果是網站同...
2019-03-18
預約專業(yè)咨詢顧問溝通!
免責聲明
非常感謝您訪問我們的網站。在您使用本網站之前,請您仔細閱讀本聲明的所有條款。
1、本站部分內容來源自網絡,涉及到的部分文章和圖片版權屬于原作者,本站轉載僅供大家學習和交流,切勿用于任何商業(yè)活動。
2、本站不承擔用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關法律法規(guī),當本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準。
4、如果侵害了您的合法權益,請您及時與我們,我們會在第一時間刪除相關內容!
聯系方式:010-60259772
電子郵件:394588593@qq.com