編輯導語：文本輸入在日常中隨處可見，在上篇文章中作者講了B端“輸入框”組件UI設計規范；本篇文章作者分享了關于B端“多行文本”、“下拉菜單”組件的交互規范，我們一起來學習一下。

一、前言

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

今天我們繼續介紹了B端“多行文本”、“下拉菜單”組件的交互規范。

二、多行文本

1. 需求場景

• 為用戶提供進行長文本內容輸入的操作區域。
• 用戶可能會對部分輸入項有疑惑，需要相關的解釋說明。
• 部分數據項與其他輸入項的前后關系，或者輸入數據規則比較復雜，需要提供操作指導。
• 為避免用戶進行誤操作，需要提供合法性檢查規則，并及時反饋。

2. 內容布局

1）根據功能需要，輸入框分為三個區域：文本輸入、輔助信息、備注信息、數據關聯提醒文本；布局如下：

2）其他諸如標簽與輸入框左右布局、上下布局以及輔助信息放置位置等內容形態參見單行文本。

3. 交互行為

交互行為與單行文本輸入框保持一致。

三、下拉選擇

1. 需求場景

提供固定的值給用戶進行數據選擇。

2. 內容布局

1）根據功能需要，下拉菜單：標簽、下拉菜單文本框、輔助信息、備注信息、數據關聯提醒文本；布局如下：

2）初始狀態下，當下拉菜單有默認數據選中時，顯示默認數據，無默認數據選中時，顯示水印文本：

有默認數據選中：

無默認數據選中：

3）當點擊刷新菜單列表時，如果回去數據出現異常時，顯示異常狀態圖標：

4）當下拉框合法性驗證未通過時：

5）下拉框菜單內容需要根據實際業務進行設計：

常規下拉選擇框：

已選中項標注已選中狀態：

帶補充信息的下拉選擇框：

6）下拉菜單選擇項允許因業務需要對部分選擇項進行禁用，并顯示禁用的效果：

7）下拉文本框不可用時，顯示不可用狀態：

3. 交互行為

1）點擊下拉選擇文本框，顯示下拉選擇菜單：

2）點擊下拉文本框外部區域時，隱藏下拉菜單。

3）點擊下拉選擇項時，文本框需顯示對應選擇項數據，并隱藏下拉菜單：

4）已禁用選擇項不允許選中。

5）已選中選擇項，因外部原因導致該選擇項不可用，則自動將對應選擇項狀態清除，并將選擇文本框中內容置換為未選擇任何數據。

6）當點擊下拉菜單數據更新按鈕，數據獲取過程中，更新按鈕變更為“刷新中”狀態圖標，不支持點擊：

7）當數據更新出現異常時，“刷新中”變更為異常狀態圖標，數據獲取異常時，不更新下拉選擇菜單數據：

8）支持點擊異常狀態圖標，再次刷新數據：

9）當數據成功更新后，自動刷新下拉選擇項列表，如更新的數據中無當前已選擇的數據，則將選擇文本框中內容置換為未選擇任何數據的狀態：

更新數據中有當前已選擇數據：

更新數據中無當前已選擇數據：

四、總結

關于B端基礎交互組件“輸入框（下）”的相關分享就到這里，下一章我們介紹“翻頁控制”包括常規翻頁、簡單翻頁、極簡翻頁的相關交互規范。

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

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

題圖來自 unsplash，基于 CC0 協議