編輯導語：在設計的工作內容中，數據輸入佔據很大的比重。本文作者結合真實場景下，以實際需要找合適的控件匹配方案。通過實際的操作和分析，為我們總結了數據錄入控件應該如何應用。
數據輸入在本職的日常工作設計系統是出現頻次最高的元素，常態化的信息錄入方式，猶如吃飯拿筷子，那麼的得心應手。
概述：就是將需要的符合規則的數據填空（方式有多種：手動錄入、上傳、選擇等）進入對應的控件，提交後得到一個反饋結果。那麼數據輸入的過程就算是結束了。
數據輸入方式有很多種：
- 基本形式：最最常用的是輸入框（input）、下拉選擇框（select）、日期選擇器（date），以及搭配的單選（radio）和多選（checkbox）。
- 自定義形式：單一不能完全滿足實際操作應用，大多情況下會將呈現組合型使用。輸入框+選擇框、輸入框+日期選擇器、
基礎樣式就是標題+輸入框：
自定義樣式：是在基礎樣式的基礎之上，根據業務需要、場景要求，衍生出其他類多種樣式形態（必填/非必填、短/長文本、關鍵字匹配選項）。
設計樣式不單一，依然是從真實的產品設計業務出發，清楚使用羣體的特徵，考慮多種場景，更多可能性的設計，來選擇符合要求的數據輸入控件，滿足使用者動態的操作。
比如説搜索框，基本樣式滿足主流羣體的使用，對於“骨灰級”專家的用户，會有相對應的高級檢索模式。
設計原則：表意清晰，註釋要簡潔。
依然是遵循基本的界面設計原則，在web端以左右佈局（左標題有控件），優先級、操作形式的劃分，其次從業務場景的需要去考慮主流的用户的慣用操作行為，先手動輸入後選擇的方式，排列輸入控件的先後順序，目的也是幫助用户快速檢索所需內容。
一般是由用户主動發起，用來獲取對象信息，常用於查詢模塊。
1）短文本
一般不會單獨出現，以單行的形式，較少的字符數量，並伴有默認文本，為用户指明該文本框輸入的內容類型：
- 樣式：標籤名+輸入框+默認提示文本
- 位置：查詢模塊、新建內容、填寫表單
2）長文本
依舊不會單獨出現，相對短文本的長度而言，錄入長篇幅的文本，詳情細述或是註釋説明，也不會太長，依然做字數限制。應用的場景較少：
2. 搜索框也是由用户發起，輸入框的變體形式，主要用於查詢模塊、檢索篩查信息。
1）查詢模塊搜索
與其他查詢條件共處。此類搜索旨在操作者對目標患者信息有個模糊印象，一般記得醫生的名字較多，進一步縮小信息範圍。
- 樣式：輸入框+默認提示文案
- 位置：一般放置在查詢模塊的最左邊第一個
2）單獨的搜索模塊
此類搜索在一般系統內應用的比較少（搜索本身是個複雜的業務），能不採用就不採用。
但在醫療數據複雜、層級深度高，一般查詢只能應用在清晰記得目標信息的情況下，很快就定位到信息可以用。對於信息模糊的就需要應用到高級搜索。
高級搜索將多個單一的搜索條件通過優先級、邏輯關係的排列，組合成一個複雜的篩選過程，通過這個條件再找到目標數據信息。從操作成本、開發複雜程度、服務器壓力：
- 樣式：輸入框+默認提示文案+搜索按鈕+高級搜索文字按鈕
- 位置：單獨開一頁
給用户一個既定的選擇範圍中選擇：
1）一般選擇框
對數據查詢條件的狀態選擇，一般若干個狀態，單選項，選項一般不會超過5個；
- 樣式：標籤名+下拉框；
- 位置：這類形式一般存在於查詢模塊的查詢條件裏，或者是在其他內容裏的篩選條件裏。
2）組合應用1
應用在選擇數據多情況下，此時單以下拉框沒辦法很好的從多選項中找出目標選項，那麼就需要用户輸入內容匹配選項，且下拉選項列表高度限定最高度，超出部分，可提供滑動條。
- 樣式：標籤名+輸入框+下拉框；
- 位置：在查詢模塊裏、新建內容裏、內容編輯內，都有存在。依據實際業務的需要，不同場景之下應用。
3）組合應用2
一般選擇項的變體，唯一的差別在於可以多選，在選擇框內會顯示當前的多個選擇項：
- 樣式：標籤+輸入框+下拉框；
- 位置：查詢模塊裏、內容編輯裏，以及其他條件篩選裏。
下拉選擇的變體，對選擇列表項增加層級關係，一組有關聯的並且有層級結構的數據集合，多數應用在備註患者地址信息省市區、相關的醫學分類科室等等。
為方便錄入患者的基本信息，選擇比手錄更方便；當數據信息龐大，只提供選擇就不方便操作者操作，這時再提供手動錄入就更高效了。
1）一般應用
數據少，且清晰的層級結構的選擇選項，可以通過級聯選擇逐級查看選擇：
- 樣式：標籤名+級聯選擇框
- 應用位置：詳細地址信息、層級關係清晰的數據內容
2）組合應用
數據量大，手動選擇時間長，輔助增加手動輸入，快捷的搜索選擇項；當選中某一級的時候，可以考慮動態加載該級下的選項：
- 樣式：標籤名+搜索框+級聯選擇
- 應用位置：與上一個差異在於數據量的大小
也是下拉選擇的變體，清晰的層級關係，以樹形結構呈現。
一級下拉列表不能滿足對層級結構要求很清晰的數據進行查詢，因此需要將其列表數據多級展示。查詢外科科室下的普通外科專業的數據信息，就有層級結構關係了。
比如説查詢某醫療數據資料，這個資料的從屬關係的準確性要求高，文書資料（住院和門診病歷）、處方（中藥和西藥處方），再如醫囑（住院和門診醫囑）等等，會將其分類；同時就需要查詢好幾個資料，住院病歷、住院醫囑，西藥處方等，就需要不同分類的不同層級的組合查詢。
4. 日期選擇器所有操作、錄入信息的一個重要記錄依據信息。一類是操作者的操作記錄信息，或是消息通知的時間標記；另一類是在查詢數據的一個依據信息數據。
1）信息標記
操作者操作時的增刪改查的歷史記錄，時間標記，一般會精確到秒；而通知信息一般會精確到日。例如：A管理員在2021-02-22 18:40:20修改一條測試用户馬曉航的住院醫囑資料信息。
2）信息數據
此時作為週期日期查詢篩選條件，幫助操作者查詢目標信息。另一種就是與可視化圖表組合，篩選條件，常用為年—年、年月—年月、年月日—年月日。
- 樣式：標籤名+日期選擇器（年、月、日選擇器）
- 位置：查詢模塊、可視化圖表中、新增
這篇文章旨在引入一個思路，真實場景下，遵循需求找方案，以實際需要找合適的控件匹配方案。以單個基礎控件樣式，結合實際需求，擴展控件樣式，組合不同控件類型，解決實際問題。
本文由 @Ychen 原創發佈於人人都是產品經理，未經許可，禁止轉載
題圖來自 Unsplash，基於 CC0 協議