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

目錄：

1. 輸入框的不同狀態(tài)
2. 輸入框的暗提示用法
3. 輸入框字?jǐn)?shù)限制的不同用法
4. 輸入框?qū)捀叩难诱故褂?/li>
5. 畫重點(diǎn)

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

輸入框的不同狀態(tài)

那么關(guān)于輸入框的不同狀態(tài)分為：未輸入、已輸入、只讀不可修改、系統(tǒng)信息帶入可修改、禁用、鼠標(biāo)懸停、輸入激活、可清空、加載

1. 系統(tǒng)自動錄入信息

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

那么當(dāng)系統(tǒng)自動帶出數(shù)據(jù)信息的時候輸入框通常采用的是只讀狀態(tài)，只讀狀態(tài)分為可修改和不可修改2種形式，不可修改我們通常會將輸入框的背景色調(diào)節(jié)成灰色，而可修改狀態(tài)的顯示方式跟用戶已輸入后的狀態(tài)顯示是一致的。只讀不可修改的狀態(tài)常用于系統(tǒng)自動帶出的文本數(shù)據(jù)及數(shù)字輸入相關(guān)計(jì)算的總和數(shù)據(jù)。

如下圖舉例：

男女?dāng)?shù)量分別需要用戶手動輸入，而合計(jì)人數(shù)則是系統(tǒng)自動計(jì)算錄入的。

2. 禁用狀態(tài)

禁用狀態(tài)通常是表單中不需要用戶錄入信息的輸入框采用此類狀態(tài)，需要用灰色背景及灰色字來進(jìn)行區(qū)分。

3. 輸入信息的操作態(tài)

操作態(tài)分為：鼠標(biāo)懸?！髽?biāo)點(diǎn)擊——信息錄入——信息自動檢索——信息清空。

鼠標(biāo)懸停：當(dāng)鼠標(biāo)移動到輸入框上會有一個激活的狀態(tài)，如上圖的鼠標(biāo)懸停狀態(tài)，輸入框的邊框顏色變藍(lán)。

鼠標(biāo)點(diǎn)擊：當(dāng)鼠標(biāo)點(diǎn)擊之后變藍(lán)的輸入框外側(cè)會溢出半透明的顏色描邊，光標(biāo)會變成相對應(yīng)的藍(lán)色。

這2種狀態(tài)配合使用，會讓整個操作反饋更加細(xì)膩，目前市面上常見的用法是2者配合或者只采用一種狀態(tài)不做細(xì)節(jié)區(qū)分。

加載：加載一般多用于輸入框內(nèi)的搜索過程，其他地方的運(yùn)用似乎很少見。其優(yōu)點(diǎn)是提升系統(tǒng)反饋的細(xì)膩度，尤其是當(dāng)網(wǎng)絡(luò)不佳的狀態(tài)下，動態(tài)加載給用戶一定的未知預(yù)期。如果沒有則用戶無感知，也不知道系統(tǒng)下一步要做什么。

那么利用加載的自身優(yōu)勢，其實(shí)我們可以賦予輸入框更多的信息功能。例如在輸入框內(nèi)還可以放置特定的功能圖標(biāo)，例如幫助按鈕，點(diǎn)擊幫助按鈕后系統(tǒng)自動加載并彈出幫助說明。

這里在IOS的APP STORE也有應(yīng)用，有興趣的同學(xué)可以把玩一下。可清空：可清空的狀態(tài)是用戶想要快捷刪除所輸入的信息，在輸入框右側(cè)放置一個刪除按鈕能夠快捷的進(jìn)行刪除，并進(jìn)入二次輸入模式

4.?輸入框狀態(tài)的拓展使用

當(dāng)我們輸入較多的文本時，由于輸入框的寬度及使用場景的局限，無法預(yù)覽到全部輸入內(nèi)容時，但又想能夠展示出輸入后的文本以遍用戶查看，此時就需要拓展輸入框的狀態(tài)了。

如下圖所示：

我們可以設(shè)計(jì)出輸入框的展開狀態(tài)，鼠標(biāo)懸停時觸發(fā)展開效果，且在右下角放置清空按鈕便于用戶隨時更改輸入信息。

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

輸入框的暗提示用法

輸入框的暗提示用法通常分為框內(nèi)提示、框外提示、校驗(yàn)提示。

（1）框內(nèi)提示

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

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

（2）框外提示

框外提示包括：框外文本提示、框外圖標(biāo)提示、隱藏提示。

框外文本提示：文本置于輸入框外側(cè)下方位置，也采用灰色系。

如下圖所示：

其優(yōu)點(diǎn)是包容性強(qiáng)，可以運(yùn)用于字?jǐn)?shù)限制、更詳細(xì)的解釋說明、超鏈接等。

注意：文本外側(cè)的暗提示是可以與框內(nèi)暗提示一起使用的。

框外圖標(biāo)提示：分為圖標(biāo)提示、隱藏氣泡提示、下拉框提升、頂部浮層提示。

如下圖所示：

圖標(biāo)提示：一般用于提示文本較多的情況使用，比如當(dāng)框外文本超過一行時，又不想用多行進(jìn)行展示就可以采用圖標(biāo)提示。

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

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

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

（3）校驗(yàn)提示

輸入框的校驗(yàn)狀態(tài)分為：輸入正確校驗(yàn)、輸入錯誤校驗(yàn)、輸入警告。

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

輸入錯誤校驗(yàn)：當(dāng)用戶輸入錯誤的時候最常見的設(shè)計(jì)方式是輸入框的顏色變紅，輸入框下方出現(xiàn)文字提示。這里不建議配合使用下拉浮層，因?yàn)楫?dāng)表單結(jié)果較為復(fù)雜且密集的時候，下拉浮層會遮擋掉下一行的輸入框信息。我們只需要采用紅色的錯誤提示文字即可，無需配置圖標(biāo)。

輸入警告：關(guān)于輸入警告，這里我并沒有加校驗(yàn)二字，是因?yàn)榫嫘ｒ?yàn)使用頻率遠(yuǎn)不如錯誤校驗(yàn)，基本上錯誤校驗(yàn)已然能夠很好的解決問題了，警告校驗(yàn)似乎顯得比較多余。

例如上圖第一行右側(cè)的輸入框，其常見于市面上能夠見到的規(guī)范設(shè)定中，但其使用率確及低。其原因就是它的強(qiáng)調(diào)程度過高，基本與錯誤校驗(yàn)提示并不太大區(qū)別。

那么警告提示要如何使用呢？

這里我們可以借鑒移動端產(chǎn)品的使用方式。通常我們在輸入對應(yīng)的字段的時候，可根據(jù)輸入的不同內(nèi)容進(jìn)行校驗(yàn)，比如金額超過了XX元，可能導(dǎo)致無法XX。又不需要采用錯誤校驗(yàn)這么強(qiáng)的提示，這個時候警告提示與框外提示文本就能夠更好的結(jié)合使用。只需要采用黃色文字來突出警告提示語即可。

輸入框字?jǐn)?shù)限制的不同用法

關(guān)于輸入框的數(shù)字限制，我們最常見的就是文本域多行輸入框，其在右下角會顯示字?jǐn)?shù)限制。

如下圖所示：

那么如果是單行文本框的字?jǐn)?shù)限制要如何設(shè)計(jì)呢？

有三種方式：

1. 輸入框內(nèi)末尾提示：當(dāng)輸入字?jǐn)?shù)錯誤的時候提示數(shù)字變紅；
2. 框外文本提示：設(shè)置對應(yīng)的字?jǐn)?shù)限制信息，輸入錯誤時直接變換為錯誤校驗(yàn)樣式；
3. 框內(nèi)文本提示：框內(nèi)的暗提示直接顯示限制字?jǐn)?shù)信息，其缺陷是不適合再添加其他暗提示信息了。

輸入框?qū)捀叩难诱故褂?/h2>

由于B端產(chǎn)品的特性，其業(yè)務(wù)屬性相當(dāng)復(fù)雜。僅有的基礎(chǔ)輸入框的寬高已經(jīng)無法滿足日益復(fù)雜的業(yè)務(wù)需求。為了讓輸入框的可用性更佳，我們可以對輸入框的高度和寬度進(jìn)行不同尺寸的設(shè)定。

1. 對輸入框的高度設(shè)定

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

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

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

2. 對輸入框的寬度設(shè)定

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

那么我們要如何設(shè)定輸入框的寬度呢？

這里我們就需要運(yùn)用到刪格化系統(tǒng)對輸入框的寬度進(jìn)行定義了，如下圖所示：

我們先來了解下基礎(chǔ)的刪格知識，首先1pt=1px,由于屏幕分辨率是X和Y坐標(biāo)相乘的結(jié)果，所以在2倍分辨率下1pt=4px，以此類推在3倍分辨率下1pt=9px網(wǎng)頁的基礎(chǔ)刪格單位是8pt

如上述推理可得：

• 在@1x 分辨率下8pt=8px
• 在@2x分辨率下8pt=32px
• 在@3x分辨率下8pt=72px

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

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

畫重點(diǎn)

關(guān)于輸入框的基礎(chǔ)設(shè)計(jì)細(xì)節(jié)主要講了：

1. 關(guān)于輸入框的不同狀態(tài)分為：未輸入、已輸入、只讀不可修改、系統(tǒng)信息帶入可修改、禁用、鼠標(biāo)懸停、輸入激活、可清空、加載、輸入信息的操作態(tài)，以及輸入框狀態(tài)的拓展使用。
2. 輸入框的暗提示用法通常分為框內(nèi)提示、框外提示、校驗(yàn)提示
3. 輸入框的數(shù)字限制分為：輸入框內(nèi)末尾提示、框外文本提示、框內(nèi)文本提示
4. 輸入框不同高度的呈現(xiàn)對比，以及如何運(yùn)用刪格系統(tǒng)為輸入框定義寬度

參考文獻(xiàn)：http://www.codemsi.com/ucd/577874.html

作者：角馬X

本文由 @角馬X 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議