編輯導語：我們在很多平臺都會用到輸入框這個功能，輸入框設計的好與壞對用戶的體驗關聯(lián)非常大；遇到過一些輸入框，句子過長就隱藏了后面的內(nèi)容，讓用戶根本沒辦法一目了然，也不好修改；本文作者詳細介紹了B端UI交互界面基礎組件的輸入框，我們一起來看一下。

一、前言

在前一篇文章《B端UI界面交互基礎組件-下拉菜單》中，一起學習了B端“下拉菜單”組件UI設計規(guī)范，其中包括常規(guī)菜單、多級菜單；并從“下拉菜單”組件的需求場景、內(nèi)容布局以及交互方式等方面對以上組件進行了詳盡的規(guī)范描述。

今天，作者又為我們介紹了B端“輸入框”組件的交互規(guī)范，由于輸入框內(nèi)容比較多，規(guī)范比較細，我們分為上下兩部分進行學習。

二、單行文本輸入框

1. 需求場景

• 提供用戶無段落輸入的操作區(qū)域。
• 用戶可能對部分輸入項有疑惑，需要進行解釋說明。
• 輸入項規(guī)則比較復雜需要提供操作說明。
• 對于用戶的誤操作，需要提供合法性檢測并且能夠及時反饋。

1）內(nèi)容布局

按照功能分為：文本輸入、輔助信息、備注信息、數(shù)據(jù)關聯(lián)提醒文本。

2）輸入框文本標簽居右對齊，標簽左側為是否為必填項標注。

非必填項：

必填項：

3）在輸入框寬度允許時，可提供水印文本，用于提示允許用戶輸入的內(nèi)容。

4）備注說明、操作數(shù)據(jù)提醒與文本輸入框換行顯示。

5）操作數(shù)據(jù)提醒文本可能因輸入特定數(shù)據(jù)變化而發(fā)生變化。

6）備注文本，操作數(shù)據(jù)提醒文本寬度可能會大于文本輸入框寬度。

7）當文本輸入框不可用時，需要從視覺上進行區(qū)分：

正常狀態(tài)：

不可用狀態(tài)：

8）在進行前臺數(shù)據(jù)格式合法性檢測時，需要提示校驗結果：

數(shù)據(jù)格式合法：

數(shù)據(jù)格式不合法（顯示邊框提醒效果）：

9）在有后臺有效性檢查時，提供有效性檢查狀態(tài)標示示意，如校驗中、正確、錯誤、異常；值得注意的是在輸入框初始狀態(tài)下，不需要顯示數(shù)據(jù)有效性檢測的標注。

初始狀態(tài)：

后臺校驗中：

這種情況涉及等待時間較長的合法性校驗，如名稱是否重復，數(shù)據(jù)是否存在合法性校驗。

后臺校驗結果正確：

后臺校驗結果錯誤：

后臺校驗結果異常，需要出現(xiàn)異常圖標提示用戶：

10）文本輸入框獲取焦點時應當有焦點獲取樣式：

11）涉及合法性校驗的數(shù)據(jù)需要提供懸浮框，用來提示用戶該輸入框的輸入規(guī)則。

合法性檢查提示文本默認懸浮顯示在輸入框右側，與文本輸入框垂直居中對齊：

當右側顯示空間不足以支持提示信息時，合法性提示信息可以懸浮在輸入框上部，與輸入框右對齊顯示。

當與文本輸入框與提示文本右對齊，但右側空間依然不夠時，提示信息文本框與顯示邊界居右對齊：

當上部與右側空間顯示區(qū)域均受限時，提示文本在輸入框底部顯示：

當?shù)撞匡@示右側可見區(qū)域受限時：

2. 交互行為

1）可用狀態(tài)下文本輸入框獲取焦點后，應當進行諸如邊框線、顏色等變化，如圖所示：

2）當輸入框合法性規(guī)則對輸入字符長度有限制時，不支持輸入超過約定的字符長度。

3）當具備合法性驗證規(guī)則（僅有長度限制外）的文本輸入框處于初始狀態(tài)（未填入任何值，未獲取過焦點），首次獲取焦點時，Tip顯示輸入合法性規(guī)則。

4）當輸入框有水印文本時，在獲取焦點后水印文本需要可見，而當輸入框有輸入內(nèi)容時，水印文本則消失。

未輸入內(nèi)容：

輸入內(nèi)容后：

5）當輸入框內(nèi)容發(fā)生改變時，進行及時的格式合法性校驗，如校驗正確則不顯示合法性輸入提示信息；如果合法性輸入提示文本處于可見狀態(tài)，則隱藏合法性輸入提示。

6）當輸入框中的輸入內(nèi)容非法時，則邊框變更為輸入錯誤提示狀態(tài)，同時顯示合法性驗證規(guī)則，如果有多條規(guī)則，則并行檢測多條合法性規(guī)則，對非法項需要重點標出。

7）當輸入框焦點移除時，需要進行二次校驗。

8）當輸入規(guī)則需要在后臺進行有效性檢查（如不允許重復）時，需要遵循以下規(guī)則：

• 觸發(fā)后臺檢查動作需要在輸入框移除焦點后自動觸發(fā)；
• 前臺校驗結果為合法。

后臺校驗過程中需要提供過程，校驗狀態(tài)等圖標標示：

在后臺檢驗過程中如果輸入框內(nèi)容發(fā)生了變化，需要取消上次等待檢驗返回的消息監(jiān)聽。

9）后臺校驗結果為非法，顯示后臺校驗錯誤的圖標，同時標注輸入框輸入不合法的狀態(tài)：

輸入框未獲取焦點：

輸入框已獲取焦點（后臺校驗返回的錯誤提示以實際為準）：

10）后臺校驗過程中，后臺返回異常、超時等需要標注異常狀態(tài)的圖標，鼠標移入顯示異常信息，并且支持鼠標點擊重試：

11）對已完成后臺數(shù)據(jù)校驗，文本輸入框內(nèi)容發(fā)生變更時，自動隱藏后臺校驗狀態(tài)圖標。

12）鼠標移入幫助圖標區(qū)域時，Tips提供幫助信息：

三、總結

關于B端基礎交互組件“輸入框（上）”的相關分享就到這里，下一章我們介紹“輸入框（下）”包括多行文本、下拉選擇組件的相關交互規(guī)范。

作者：云桌面產(chǎn)品，微信公眾號：云桌面產(chǎn)品，歡迎關注

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

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