編輯導(dǎo)語(yǔ)：文本輸入在日常中隨處可見(jiàn)，在上篇文章中作者講了B端“輸入框”組件UI設(shè)計(jì)規(guī)范；本篇文章作者分享了關(guān)于B端“多行文本”、“下拉菜單”組件的交互規(guī)范，我們一起來(lái)學(xué)習(xí)一下。

一、前言

在前一篇文章《B端UI界面交互基礎(chǔ)組件-輸入框（上）》中，一起學(xué)習(xí)了B端“輸入框”組件UI設(shè)計(jì)規(guī)范，其中包括單行文本；并從“單行文本”組件的需求場(chǎng)景、內(nèi)容布局以及交互方式等方面對(duì)以上組件進(jìn)行了詳盡的規(guī)范描述。

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

二、多行文本

1. 需求場(chǎng)景

• 為用戶提供進(jìn)行長(zhǎng)文本內(nèi)容輸入的操作區(qū)域。
• 用戶可能會(huì)對(duì)部分輸入項(xiàng)有疑惑，需要相關(guān)的解釋說(shuō)明。
• 部分?jǐn)?shù)據(jù)項(xiàng)與其他輸入項(xiàng)的前后關(guān)系，或者輸入數(shù)據(jù)規(guī)則比較復(fù)雜，需要提供操作指導(dǎo)。
• 為避免用戶進(jìn)行誤操作，需要提供合法性檢查規(guī)則，并及時(shí)反饋。

2. 內(nèi)容布局

1）根據(jù)功能需要，輸入框分為三個(gè)區(qū)域：文本輸入、輔助信息、備注信息、數(shù)據(jù)關(guān)聯(lián)提醒文本；布局如下：

2）其他諸如標(biāo)簽與輸入框左右布局、上下布局以及輔助信息放置位置等內(nèi)容形態(tài)參見(jiàn)單行文本。

3. 交互行為

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

三、下拉選擇

1. 需求場(chǎng)景

提供固定的值給用戶進(jìn)行數(shù)據(jù)選擇。

2. 內(nèi)容布局

1）根據(jù)功能需要，下拉菜單：標(biāo)簽、下拉菜單文本框、輔助信息、備注信息、數(shù)據(jù)關(guān)聯(lián)提醒文本；布局如下：

2）初始狀態(tài)下，當(dāng)下拉菜單有默認(rèn)數(shù)據(jù)選中時(shí)，顯示默認(rèn)數(shù)據(jù)，無(wú)默認(rèn)數(shù)據(jù)選中時(shí)，顯示水印文本：

有默認(rèn)數(shù)據(jù)選中：

無(wú)默認(rèn)數(shù)據(jù)選中：

3）當(dāng)點(diǎn)擊刷新菜單列表時(shí)，如果回去數(shù)據(jù)出現(xiàn)異常時(shí)，顯示異常狀態(tài)圖標(biāo)：

4）當(dāng)下拉框合法性驗(yàn)證未通過(guò)時(shí)：

5）下拉框菜單內(nèi)容需要根據(jù)實(shí)際業(yè)務(wù)進(jìn)行設(shè)計(jì)：

常規(guī)下拉選擇框：

已選中項(xiàng)標(biāo)注已選中狀態(tài)：

帶補(bǔ)充信息的下拉選擇框：

6）下拉菜單選擇項(xiàng)允許因業(yè)務(wù)需要對(duì)部分選擇項(xiàng)進(jìn)行禁用，并顯示禁用的效果：

7）下拉文本框不可用時(shí)，顯示不可用狀態(tài)：

3. 交互行為

1）點(diǎn)擊下拉選擇文本框，顯示下拉選擇菜單：

2）點(diǎn)擊下拉文本框外部區(qū)域時(shí)，隱藏下拉菜單。

3）點(diǎn)擊下拉選擇項(xiàng)時(shí)，文本框需顯示對(duì)應(yīng)選擇項(xiàng)數(shù)據(jù)，并隱藏下拉菜單：

4）已禁用選擇項(xiàng)不允許選中。

5）已選中選擇項(xiàng)，因外部原因?qū)е略撨x擇項(xiàng)不可用，則自動(dòng)將對(duì)應(yīng)選擇項(xiàng)狀態(tài)清除，并將選擇文本框中內(nèi)容置換為未選擇任何數(shù)據(jù)。

6）當(dāng)點(diǎn)擊下拉菜單數(shù)據(jù)更新按鈕，數(shù)據(jù)獲取過(guò)程中，更新按鈕變更為“刷新中”狀態(tài)圖標(biāo)，不支持點(diǎn)擊：

7）當(dāng)數(shù)據(jù)更新出現(xiàn)異常時(shí)，“刷新中”變更為異常狀態(tài)圖標(biāo)，數(shù)據(jù)獲取異常時(shí)，不更新下拉選擇菜單數(shù)據(jù)：

8）支持點(diǎn)擊異常狀態(tài)圖標(biāo)，再次刷新數(shù)據(jù)：

9）當(dāng)數(shù)據(jù)成功更新后，自動(dòng)刷新下拉選擇項(xiàng)列表，如更新的數(shù)據(jù)中無(wú)當(dāng)前已選擇的數(shù)據(jù)，則將選擇文本框中內(nèi)容置換為未選擇任何數(shù)據(jù)的狀態(tài)：

更新數(shù)據(jù)中有當(dāng)前已選擇數(shù)據(jù)：

更新數(shù)據(jù)中無(wú)當(dāng)前已選擇數(shù)據(jù)：

四、總結(jié)

關(guān)于B端基礎(chǔ)交互組件“輸入框（下）”的相關(guān)分享就到這里，下一章我們介紹“翻頁(yè)控制”包括常規(guī)翻頁(yè)、簡(jiǎn)單翻頁(yè)、極簡(jiǎn)翻頁(yè)的相關(guān)交互規(guī)范。

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

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

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