談談表單設計的一些細節，mysql自定義表單數據表設計

「本文重點介紹關于表單設計。」

編輯導語：當我們想使用某個站點的服務，站點也想了解用戶的信息資料時，便產生了表單。然而冗長麻煩的表單，可能會勸退用戶，要怎么做出簡潔干凈，另用戶愉悅填寫的表單呢？

自互聯網發展到現在，當我們想使用某個站點的服務時，站點也想了解用戶的信息資料，這時候就產生了表單，在站點提供服務給用戶前，需要用戶進行填寫資料。但是冗長復雜麻煩的表單，會立馬勸退用戶。這時不禁拋出以下疑問：

怎樣做出簡潔干凈令用戶愉悅填寫的表單呢？

我們不能忽略一些交互細節，往往一些好的交互提升會帶給用戶不一樣的美妙感受，而我們這邊通過查閱了一些表單設計文章，輸出了以下表單的設計功能建議：

一、表單組件

1. 輸入框

一般輸入包含文本標簽，輸入框本身以及信息提示組成。

建議規范：

1）清晰的文本標簽

讓用戶正確識別需要輸入什么，文本標簽必須要有的，還可以增加普遍認知的圖標，用戶一瞬間即可反應輸入內容（例如搜索的放大鏡圖標）。

2）合理的輸入框尺寸

輸入框尺寸根據輸入內容的長短來設計，會更加適宜用戶閱讀和輸入，如果一個字段太長或太短，用戶就會開始懷疑他們是否誤解了這個標簽。

對于具有可變輸入(姓名或電子郵件)長度但在標準平均范圍內的表單字段，應該根據可能輸入的平均長度找到合適的寬度。研究表明，這些輸入字段的范圍通常在18到33個字符之間。

譬如我們經常輸入的驗證碼，一般為4個字符的長度，減低用戶瀏覽時感受的輸入負擔。

3）合適的字體大小

應該確保字體足夠大，盡量讓它們清晰可辨，參考了蘋果跟安卓的設計規范，安全文字一般14px-16px之間。

4）顏色與背景高對比度

標簽和輸入文案的顏色，確保在W3C的對比度范圍中，較小的文本應當確保至少和背景之間有4.5:1的對比度比率。

5）提供舒適的點擊區域

確保用戶用戶點擊輸入的時候，觸發區足夠寬松舒適，而不是很難點擊。拇指的觸發區域應當控制在 45~57px之間，但是在移動端上，控件看起來太大會讓人覺得不舒服，所以你的文本框高度應該設計在32~40px之間，這樣看起來足夠友好，又不會太大。

6）選擇合適的鍵盤（平板&移動端）

輸入框選擇合適的鍵盤，可以讓用戶更快的填寫表單，例如輸入框內容如果只需輸入數字的，可以選擇數字鍵盤。

7）鍵盤tab訪問（PC端）

根據W3C的用戶實踐設計模式中鍵盤交互模式提及，表單應該只能通過鍵盤上的tab按鈕來訪問和編輯。

8）輸入框顯示邊框，聚焦時高亮輸入框

具有定義邊界的輸入字段對于有移動障礙和認知障礙的用戶非常重要。

點擊聚焦輸入框時，建議在輸入框提供一個清晰的視覺提示——改變顏色，在框中淡出，高亮顯示，縮放等等。

9）避免使用占位符文本作為標簽

雖然占位符文本用作標簽非常節約表格的空間，但是對于用戶來說非常容易出現忘記輸入的是什么，然后又要刪除掉輸入框所寫的，才能看到占位符的標簽內容，所以目前更推薦使用懸浮標簽。

2. 單選組件

單選，在提供的選項中只能選擇其中一項。

建議規范：

1）合適的字體大小

同輸入框的規范一樣，建議安全文字一般14px-16px之間。

2）顏色與背景高對比度

同輸入框的規范一樣，確保文本和背景之間有4.5:1的對比度比率。

3）舒適的點擊區域

建議將整個單選框和標簽選項作為點擊區域。

4）合適的單選設計形式

根據選項的數量來選擇對應的設計形式（單選常見樣式如開關形式、分段控件式、垂直列表式、輸入篩選式還是下拉菜單式）。

5）考慮預填寫

讓容易被選中的放在選項的最前處，例如生日年份，有些控件一拉下來就是1960-2018，但是目標用戶也不大可能是1,2歲的小孩吧，這種選項完全可以排除掉。

3. 多選組件

建議規范：建議規范基本跟單選組件一致。

樣式選擇：

多選形式目前大多采用以下四種方式：

開關形式：表示選中或非選中兩種狀態之間的切換，一般只有一條單獨使用

水平放置式：適合選擇項不非常多和移動端展示，節省空間

垂直列表式：適合選擇項少于6項的情況和PC端顯示，更直觀，也容易選中，但是較浪費空間

輸入篩選式：適合選項較多的情況，增加搜索篩選功能

選擇建議：

開關式：只有兩個選項，并且是互斥狀態

水平列表式：小于6個選項，適合移動端

垂直列表式：小于6個選項，適合PC端

輸入篩選式：適合非常多選項，移動端&PC端皆可

4. 滑塊

滑塊，對于刻度范圍上的非謹慎選擇，例如捏臉的時候對臉部的調整。由軌道，拇指，選中值（可選）和刻度線（可選）組成。

建議規范：

觸碰范圍，讓用戶容易點中滑塊上的拇指，拇指直徑建議20px左右

即刻反應，當與滑塊交互時，周圍涉及的更改立即有反應執行

mysql自定義表單數據表設計

1.主體表

該表主要存儲主體的內容信息

「上述就是小編為大家整理的關于表單設計相關內容」

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。