前端的UI設計與交互之數據錄入篇

數據錄入是獲取對象信息的重要交互方式，用戶會頻繁的增長、修改或刪除信息。多種多樣的文本錄入和選擇錄入方式幫助用戶更加清晰和高效的完成這項體驗。設計者應當注意這幾點：
爲初級用戶／偶爾訪問的用戶提供簡單易懂的文案做爲『標籤（Label） 』；爲領域專家提供專業術語做爲『標籤（Label） 』。當須要用戶提供敏感信息時，經過『暗提示』來講明系統爲何要這麼作，例如：須要獲取身份證號碼、手機號碼時；
讓用戶能在上下文中獲取信息，幫助他完成輸入。使用『良好的默認值』、『結構化的格式』、『暗提示』、『輸入提醒』等方式，避免讓用戶在空白中猜想輸入。
1、文本錄入
輸入框爲用戶提供了編輯文本的控件，是錄入數據最基礎和常見的方式。
一、文本框（Input）
輸入較少的字符總數，使用單行的輸入形式。
注：能夠對一些文本（如數字和網址）運用特別的樣式。
二、文本域（Textarea）
錄入長篇幅的單一的文本使用多行的文本區域。
三、提示與幫助
爲提高數據錄入效率，一般能夠在輸入框內增長暗提示以幫助提醒用戶。
注：輸入框一般與標籤（label）搭配使用，標籤（label）默認放於輸入區域的左側，當文案過長或英文環境下也可放於在上方，但同個系統中需保持統一。
當說明文案較長時，你可使用一個『信息』圖標或者提示工具。
對於那些短的輸入提醒（短於一句），你能夠將其放置在輸入框的下方。
四、搜索（Search）
搜索可讓用戶在巨大的信息池中縮小目標範圍，並快速獲取須要的信息。
2、選擇錄入
一、單選框（Radio Button）
注：單選框（Radio Button）必定多於 2 個，通常少於 5 個。
二、複選框（Checkbox）
注： 1. 複選框（Checkbox）通常用於狀態標記，須要和提交操做配合； 2. 單個複選框能夠表示兩種狀態之間的切換。
三、開關（Switch）
用於切換單個選項的狀態。『開關』的內聯標籤應該顯示清楚，例如：禁用/啓用，不容許/容許等。
四、選擇列表（Dropdown）
選擇列表（一般稱爲下拉菜單）容許用戶從列表中選擇一個選項或多個選項，爲用戶在選項的數量上提供了更多的靈活性。
注： 1. 當選項多於 5 項時使用； 2. 列表選項按照邏輯排序，並儘可能讓內容顯示完整。
五、滑塊選擇（Slider）
滑塊選擇能夠在連續或間斷的區間內，經過滑動錨點來選擇一個合適的數值。這種交互特性使得它在設置諸如音量，亮度，色彩飽和度等須要反映強度等級的選項時是一種極好的選擇。
注：在不要求精準數值的場景下用戶使用『連續滑塊』可獲得更靈活便捷的操做；在用戶須要精確數值時，可與『數字輸入框』搭配使用。
六、穿梭框（Transfer）
穿梭框用直觀的方式在兩欄中移動元素，完成選擇行爲。
七、日期選擇器（DatePicker）
日期選擇器爲用戶提供了一種可視化的方式去瀏覽和選擇一個日期或者日期範圍。
3、文件上傳（Upload）
一、簡單點擊上傳
通常用於單個上傳且不須要預覽效果的文件上傳，點擊按鈕彈出文件選擇框。
二、顯示縮略圖上傳
通常用於圖片文件上傳，用戶能夠上傳圖片並在列表中顯示縮略圖。當上傳照片數到達限制後，上傳按鈕消失。
三、拖拽上傳
把文件拖入指定區域，完成上傳，一樣支持點擊上傳。
注：文件上傳須要提供明確的文件大小和文件格式，例如：請選擇大小不超過 5M 的文本文件（支持 PDF.ZIP.EXL），上傳時須要有明確的進度提示。