B端信息錄入：輸入框基礎設計細節解析（一）

最近跟一些在做B端產品的小伙伴閑聊，發下大家初做B端產品存在的普遍問題是：明明網上有不少可參考的設計規范總結歸納的已經很詳細了，但是到真正使用的時候還是會存在這樣或那樣的問題，到底用哪個好呢？還有沒有更好的設計方案呢，這也是我一直在思考的問題，不斷嘗試推翻，嘗試推翻...

目錄

一. 輸入框的不同狀態

二. 輸入框的暗提示用法

三. 輸入框字數限制的不同用法

四. 輸入框寬高的延展使用

五 .畫重點

 好了，廢話不多說了！我們就從表單中最基礎的組件輸入框說起吧！

那么關于輸入框的不同狀態分為：未輸入、已輸入、只讀不可修改、系統信息帶入可修改、禁用、鼠標懸停、輸入激活、可清空、加載

1、系統自動錄入信息

未輸入和已輸入這里我們暫不多說，大家都比較清楚了。

那么當系統自動帶出數據信息的時候輸入框通常采用的是只讀狀態，只讀狀態分為可修改和不可修改2種形式，不可修改我們通常會將輸入框的背景色調節成灰色，而可修改狀態的顯示方式跟用戶已輸入后的狀態顯示是一致的。

只讀不可修改的狀態常用于系統自動帶出的文本數據及數字輸入相關計算的總和數據。如下圖舉例：

男女數量分別需要用戶手動輸入，而合計人數則是系統自動計算錄入的。

2、禁用狀態

禁用狀態通常是表單中不需要用戶錄入信息的輸入框采用此類狀態，需要用灰色背景及灰色字來進行區分。

3、輸入信息的操作態

操作態分為：鼠標懸?！髽它c擊——信息錄入——信息自動檢索——信息清空

鼠標懸停：當鼠標移動到輸入框上會有一個激活的狀態，如上圖的鼠標懸停狀態，輸入框的邊框顏色變藍。

鼠標點擊：當鼠標點擊之后變藍的輸入框外側會溢出半透明的顏色描邊，光標會變成相對應的藍色。

這2種狀態配合使用，會讓整個操作反饋更加細膩，目前市面上常見的用法是2者配合或者只采用一種狀態不做細節區分。

加載：加載一般多用于輸入框內的搜索過程，其他地方的運用似乎很少見。其優點是提升系統反饋的細膩度，尤其是當網絡不佳的狀態下，動態加載給用戶一定的未知預期。如果沒有則用戶無感知，也不知道系統下一步要做什么。

那么利用加載的自身優勢，其實我們可以賦予輸入框更多的信息功能。例如在輸入框內還可以放置特定的功能圖標，例如幫助按鈕，點擊幫助按鈕后系統自動加載并彈出幫助說明

這里在IOS的APP STORE也有應用，有興趣的同學可以把玩一下。

可清空：可清空的狀態是用戶想要快捷刪除所輸入的信息，在輸入框右側放置一個刪除按鈕能夠快捷的進行刪除，并進入二次輸入模式

4、輸入框狀態的拓展使用

當我們輸入較多的文本時，由于輸入框的寬度及使用場景的局限，無法預覽到全部輸入內容時，但又想能夠展示出輸入后的文本以遍用戶查看，此時就需要拓展輸入框的狀態了。如下圖所示：

我們可以設計出輸入框的展開狀態，鼠標懸停時觸發展開效果，且在右下角放置清空按鈕便于用戶隨時更改輸入信息。

注意：這里輸入框的展開是從下往上展開！

輸入框的暗提示用法通常分為框內提示、框外提示、校驗提示。

1、框內提示

出現在輸入框內部的文本，為淺灰色。需要注意的是暗提示描述用語，如下圖所示：

例如：請輸入字段標簽，與字段標簽的標題重復，這種重復性的暗提示是不必要的。此時如果沒有其他文本能夠做解釋說明，那么暗提示只顯示請輸入即可，如果能夠更詳細的進行解釋說明，我們則可以詳細的加1以說明，比如：請根據XX進行輸入。當然具體還是要根據實際運用場景來設定文本內容。 

2、框外提示

框外提示包括：框外文本提示、框外圖標提示、隱藏提示

框外文本提示：文本置于輸入框外側下方位置，也采用灰色系。如下圖所示：

其優點是包容性強，可以運用于字數限制、更詳細的解釋說明、超鏈接等。

注意：文本外側的暗提示是可以與框內暗提示一起使用的。

框外圖標提示：分為圖標提示、隱藏氣泡提示、下拉框提升、頂部浮層提示。如下圖所示：

圖標提示：一般用于提示文本較多的情況使用，比如當框外文本超過一行時，又不想用多行進行展示就可以采用圖標提示。

隱藏氣泡提示：當鼠標懸停到輸入框上時輸入框上方出現氣泡提示，適用于提示文本較少的情況。另外氣泡提示的位置可根據使用場景變動，具體可參考螞蟻規范，這里就不多講了。

下拉提示：也是經常使用的，例如用戶在輸入手機號時，如果系統之前自動記錄過歷史輸入信息，則下拉提示就會出現，用戶只需點擊一下，無需重新輸入。其拓展用法時輸入與搜索相關聯，用戶只需要輸入關鍵字，即可下拉展示出多個關聯信息，這里暫不細講了，在后續系列文章中會重點講輸入框與枚舉結合的多種復雜用法，敬請期待。

浮層提示：位于輸入框的上方，同樣是用于輸入框內輸入內容較多的情況時使用的。功能與前文中介紹的輸入框的展開狀態有點類似。如果純文本展示更推薦用輸入框的展開狀態，如果是標簽展示則推薦用浮層，如下圖所示：

3、校驗提示

輸入框的校驗狀態分為：輸入正確校驗、輸入錯誤校驗、輸入警告。

輸入正確校驗：當輸入框的文本輸入正確的時候，通常的處理方式是不會有任何提示，反而當輸入錯誤的時候會提示錯誤信息。當然如果想要加強用戶輸入正確的正向反饋通常在輸入框右側放置勾號的圖標，如下圖所示：

輸入錯誤校驗：當用戶輸入錯誤的時候最常見的設計方式是輸入框的顏色變紅，輸入框下方出現文字提示。這里不建議配合使用下拉浮層，因為當表單結果較為復雜且密集的時候，下拉浮層會遮擋掉下一行的輸入框信息。我們只需要采用紅色的錯誤提示文字即可，無需配置圖標。

輸入警告：關于輸入警告，這里我并沒有加校驗二字，是因為警告校驗使用頻率遠不如錯誤校驗，基本上錯誤校驗已然能夠很好的解決問題了，警告校驗似乎顯得比較多余。例如上圖第一行右側的輸入框，其常見于市面上能夠見到的規范設定中，但其使用率確及低。其原因就是它的強調程度過高，基本與錯誤校驗提示并不太大區別。

那么警告提示要如何使用呢？這里我們可以借鑒移動端產品的使用方式。通常我們在輸入對應的字段的時候，可根據輸入的不同內容進行校驗，比如金額超過了XX元，可能導致無法XX。又不需要采用錯誤校驗這么強的提示，這個時候警告提示與框外提示文本就能夠更好的結合使用。只需要采用黃色文字來突出警告提示語即可。

關于輸入框的數字限制，我們最常見的就是文本域多行輸入框，其在右下角會顯示字數限制。如下圖所示：

那么如果是單行文本框的字數限制要如何設計呢？有三種方式：

1、輸入框內末尾提示：當輸入字數錯誤的時候提示數字變紅

2、框外文本提示：設置對應的字數限制信息，輸入錯誤時直接變換為錯誤校驗樣式

3、框內文本提示：框內的暗提示直接顯示限制字數信息，其缺陷是不適合再添加其他暗提示信息了

由于B端產品的特性，其業務屬性相當復雜。僅有的基礎輸入框的寬高已經無法滿足日益復雜的業務需求。為了讓輸入框的可用性更佳，我們可以對輸入框的高度和寬度進行不同尺寸的設定。

1、對輸入框的高度設定

在市面上常見的設計規范中，對輸入框的高度設定通常分為3個不同的尺寸，如下圖所示：

大號尺寸通常為40px、常規尺寸為32px、小型尺寸通常為28px或24px等。對應不同尺寸如何的運用常見在規范上確并沒有詳細說明，實際運用的案例中也較為少見。那么為了對比其差異我提取了最大號的輸入框高度40px和最小號的輸入框24px,在同一復雜使用場景下所呈現的效果進行比對，如下圖所示：

我們可以看到40px高度的輸入框所呈現的效果明顯比24px的輸入框所呈現的效果擁擠，小號的留白空間更大，整個區域的透氣性更佳。那么對應不同高度的輸入框如何運用詳細大家也都有了判斷。

2、對輸入框的寬度設定

對于輸入框的寬度設定，大家一定都有過困惑，當頁面需要采用多列的形式進行展示，采用相同寬度的輸入框并不能達到節省空間的目的，而且在遇到復雜的業務組件的時候固定寬度的輸入框更是無法滿足業務功能的特殊需求。

那么我們要如何設定輸入框的寬度呢？這里我們就需要運用到刪格化系統對輸入框的寬度進行定義了，如下圖所示：

我們先來了解下基礎的刪格知識，首先1px=1px,由于屏幕分辨率是X和Y坐標相乘的結果，所以在2倍分辨率下1pt=4px，以此類推在3倍分辨率下1pt=9px

網頁的基礎刪格單位是8pt

如上述推理可得：

在@1x 分辨率下8pt=8px

在@2x分辨率下8pt=32px

在@3x分辨率下8pt=72px

而我們看到的網頁通常采用的是@2x分辨率，所以我們在設定輸入框的寬度則需要設置成:8pt=32px=4px*8px

也就是4和8的倍數，如下圖所示：

關于輸入框的基礎設計細節主要講了：

1、關于輸入框的不同狀態分為：未輸入、已輸入、只讀不可修改、系統信息帶入可修改、禁用、鼠標懸停、輸入激活、可清空、加載、輸入信息的操作態。以及輸入框狀態的拓展使用

2、輸入框的暗提示用法通常分為框內提示、框外提示、校驗提示

3、輸入框的數字限制分為：輸入框內末尾提示、框外文本提示、框內文本提示

4、輸入框不同高度的呈現對比，以及如何運用刪格系統為輸入框定義寬度