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

一、前言

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

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

二、單行文本輸入框

1. 需求場景

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

1）內容布局

按照功能分為：文本輸入、輔助信息、備注信息、數據關聯提醒文本。

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

非必填項：

必填項：

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

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

5）操作數據提醒文本可能因輸入特定數據變化而發生變化。

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

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

正常狀態：

不可用狀態：

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

數據格式合法：

數據格式不合法（顯示邊框提醒效果）：

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

初始狀態：

后臺校驗中：

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

后臺校驗結果正確：

后臺校驗結果錯誤：

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

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

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

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

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

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

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

當底部顯示右側可見區域受限時：

2. 交互行為

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

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

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

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

未輸入內容：

輸入內容后：

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

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

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

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

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

后臺校驗過程中需要提供過程，校驗狀態等圖標標示：

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

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

輸入框未獲取焦點：

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

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

11）對已完成后臺數據校驗，文本輸入框內容發生變更時，自動隱藏后臺校驗狀態圖標。

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

三、總結

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

作者：云桌面產品，微信公眾號：云桌面產品，歡迎關注

本文由 @云桌面產品 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自 unsplash，基于 CC0 協議