當前位置:首頁 > 網站建設

實戰經驗!如何做好網頁后臺的表單和表格設計?

時間:2018-03-30 06:00:00來源:網站建設作者:seo實驗室小編閱讀:65次「手機版」
 

網頁設計表單

帶有識別功能的輸入框:

當輸入有誤時,盡量避免彈出框提示,可以直接對輸入框設計不同的狀態顯示默認狀態、選中狀態、錯誤狀態、成功狀態。

通過以上方式設計的一組信息錄入型的表單設計,如圖:

表單的設計可以單獨出一篇更詳細的文章,還有篩選/選擇器一類的表單,這里就不一一描述了。

友好舒適的彈窗

彈窗在后臺的出現頻率非常高,其強度一般分為三種,弱彈窗、強彈窗、重彈窗。字面上已經很好理解,輕彈窗,一般鼠標經過的時候即可出現而不用點擊,比如提示說明,顯示更多信息,鼠標移過后立即消失,它不會影響下一層(當前頁面內容)頁面的視覺效果和操作,因此這個彈窗通常會設計一個浮動帶有陰影效果的框。

而強彈窗則是一個對話框,它暗示你必須對這個對話框進行操作后才可以離開,如確認信息、錯誤提示信息。而重彈窗更像是一個新的頁面,比如彈出的列表,詳情,表單等。這兩種彈窗通常是點擊某一個按鈕/經過某一個操作觸發的。這兩種彈窗一般會對下一層頁面的視覺做蒙版處理,比如加上一定透明的黑色/白色,給下一層頁面的內容做模糊濾鏡等等。

當然,這三種彈窗式可以結合的,針對不同場景使用不同的彈窗設計這點非常重要,這直接關系到用戶體驗效果。你是否可曾遇到過使用一款產品時,動不動就彈窗,并且需要去點某一個按鈕才可以關閉。

任何一種場景在設計上都可以得以解決,什么情況下使用什么彈窗設計,或者有時候必須使用強彈窗,但是又不想讓用戶操作關閉,我們可以設計幾秒后自動關閉,或者點擊彈窗以外的區域直接關閉。

彈窗還有兩種主要的表現形式,一種是頂部有關閉按鈕,另外一種是直接點擊確認按鈕或者讀秒關閉。在保持規范性的同時,盡量避免按鈕功能的重復,比如一個提示信息必須讓用戶點擊確認按鈕才可以關閉,那么就使用沒有頂部關閉按鈕的設計。對于重彈窗,一般都會采用頂部有關閉按鈕的設計。

彈窗并不是后臺的專利,它在移動端更高頻率的出現,例如活動頁面的彈窗,趣味性就顯得更重要了。

總結:

這篇文章主要跟大家分享的是,當開始網頁后臺項目設計的時候,保持跟產品和前端的良好溝通。確定風格后開始設計,并分享了 3 個主要的點:

制作靈活又簡潔的表格設計整齊并帶有交互功能的表單選擇友好舒適的彈窗

后臺還有其他元件設計,歡迎大家共同探討。

相關閱讀

excel表格統計個數的方法步驟圖

我們在工作中使用excel時,經常會用到統計個數的操作,統計個數的方法有很多種,不妨和小編一起看看以下這種統計個數的方法,或許對你有

動力節點Java項目實戰

動力節點課程體系全部圍繞企業真實項目設計,結合獨有的PDT教學法,以企業真實項目驅動教學貫穿整個學習過程,做到理論與實踐完美融合,

form表單的提交

開發工具與關鍵技術:MVC JQuery 的 form表單的提交一、Form表單有兩個屬性分別是:“action”和“method”:Action: 的值是URL 就是

前端實現多人視頻聊天— WebRTC 實戰(多人篇)

轉自:https://juejin.im/post/5cbdc145e51d456e541b4cec

Excel將兩個表格關聯數據合并的方法

我們在使用excel表格的時候,有時候不能獲取完整的數據,只能通過不同的渠道獲取2分或者多分的表格數據,有時候一些數據是相關聯的,可以

分享到:

欄目導航

推薦閱讀

熱門閱讀

超市配送赚钱吗