編輯導語：在這個互聯網時代，表單是每個APP中必不可少的一部分，有時我們也經常會接觸一些不得不填的表單，整體設計比較簡單，視覺比較好，但是還有一些真的就是慘不忍睹，體驗感極差 。那怎樣更好地打造用戶體驗的表單呢，本文就來為大家聊一聊 。
文章插圖
在大家的記憶中，填過既復雜又不易操作的表單是什么樣的？是結構多變、耗時耗力，還是內容巨多、填錯一項就要全部重來？很多時候，當我們遇到體驗超級不好的表單設計、但又不得不用它完成任務時，那就只能機械化的對著這些字段進行不情愿的填寫 。
表單是UI設計中很常見的元素，不管是PC端還是移動端，表單幾乎是無法規避的UI控件，用戶可以通過表單完成線上購物、信息交換、文章訂閱等任務，使用范疇極為廣泛且牽扯到方方面面 。
表單作為信息收集的重要環節，對于用戶和產品來說至關重要，其看似簡單、實則很容易忽略用戶體驗，作為設計師，需要根據觸發條件、使用場景將文本信息、輸入框、按鈕等元素進行靈活的調整，以確保用戶順暢的完成表單任務，因此，設計出一個可用性非常好的表單是提升用戶完成效率的關鍵 。
本篇文章將針對表單最常見的設計準則及用戶體驗做出總結，希望能夠拋磚引玉，對表單設計有一個更全面的認識 。
一、認識UI中的表單1. 什么是表單表單主要用來收集或呈現數據、信息或特定字段，其本身不具備屬性，只是一個數據采集工具，需要靈活的運用到不同的場景模塊中才能發揮其真正作用，例如常見的登錄注冊、調查問卷、個人信息頁面等 。如何確定當前頁面是不是表單頁，主要看該頁面是否發生數據采集而觸發用戶輸入、選擇、編輯等操作，從而對部分內容進行控制 。
文章插圖
2. 表單的構成（視覺角度）除去系統隱藏的交互及程序規則，常用且可見的表單元素有標簽、輸入區、占位符、圖標、按鈕這幾部分 。
文章插圖
標簽：明確該項應輸入/選擇什么內容，部分表單沒有標簽，例如登錄頁，直接以圖標、占位符提示錄入的內容； 輸入區：與用戶發生交互的區域，通常用輸入框、分隔線、選項框、開關…等常見元素提示；占位符：用于描述表單內容的詳細說明、錄入規則、注意事項等，光標插入或有內容錄入時占位符消失；圖標：帶有圖標的表單頁面，通常存在較復雜的次級任務，伴隨下拉框、彈窗或頁面跳轉來完成前置條件；按鈕：表單中的任務按鈕（非保存/提交）與單選作用相同，用于選項條件較少的表單內容 。
3. 表單的各種狀態表單基本上需經過三個階段，即交互前、交互中、交互后的三個狀態 。
交互前：在用戶未發生任何操作時，表單為默認的初始化狀態；交互中：光標插入即成為聚焦狀態，占位符消失，隨著內容的輸入，輸入框后面顯示一鍵清除圖標；交互后：輸入完成光標離開，前端如驗證內容有誤會立即反饋，無誤則回到正常輸入后的狀 。
二、表單元素拆解及設計細節1. 結構/框架首先，在視覺上，移動端表單不管所輸入字段有多么的少也不要在同一行添置多個表單，更好的版式就是單列展示，便于用戶瀏覽和理解，盡量避免多列展示，除非存在關聯性極強的前置條件，如：輸入手機號碼之前要先選擇國際 *** 區號，可將區號和手機號碼歸納為同一表單項 。
其次，表單內容需先易后難，避免用戶從一開始就產生逃避的想法，需要根據內容的關聯性循序漸進的引導用戶完成 。例如：添加地址，常見順序是姓名、 *** 、地區、詳細地址，如果一開始就讓用戶填寫詳細地址的話就不合理了（并不是不行），這等于在顛覆用戶的認知，就算完成了表單內容多少也會有些“上頭” 。
最后，當同一個頁面的表單內容過多時，需要根據類型、相似性或前后關系進行分組，保持頁面的節奏感，讓用戶在最短的時間內對整個頁面內容有個大致的了解，從而能更輕松的完成表單 。另外，將選填的內容盡量靠后，若其重要性較低，還不如直接去掉，如無必要、勿增實體 。
文章插圖
2. 標簽標簽的作用是告知用戶當前表單要輸入什么內容，清晰簡潔的表單能讓用戶更快速的理解 。標簽的長短決定著其對齊方式，通常標簽字數在可控的情況下可使用左對齊；文本字數不可控但不是很多時可使用右對齊；字數不可控且標簽長短不一、相差巨大就使用頂對齊（例如英文，大多數不可控，參差不齊） 。
推薦閱讀
- 找一個能夠把圖片轉換成ICO格式的圖標文件軟件?
- 大學生入黨思想匯報格式范文2022
- md格式是什么，md格式文件
- kgma是什么格式車里能放嗎，酷狗的kgma是什么格式
- 怎么把jpeg改為jpg，格式為jpg怎么弄
- 怎么才能解除黑名單，手機號碼拉黑名單怎么恢復
- excel怎么更改文件格式，win10怎么更改文件格式
- 怎樣把mp4轉換成mp3格式，把mp4轉換成mp3的軟件
- 表格格式設置，表格格式不對怎么轉換
- 論證方法的作用及答題格式 論證方法的作用