亚洲AV免费看深爱成人|日韩av另类一级特黄片在线|中国免费一级黄片|国产av一二三区|亚洲有码AV在线|久久亚洲国产日韩欧美|成人免费AV网站|婷婷一区综合一区|亚洲AV无码导航|高级欧美成人网站

高校合作1：010-59833514 ?咨詢電話：400-810-1418 服務(wù)與監(jiān)督電話：400-810-1418轉(zhuǎn)接2

B端UI界面交互基礎(chǔ)組件——輸入框(下)

發(fā)布時間：2024-01-18 09:25:06 瀏覽量：165次

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

一、前言

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

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

二、多行文本

1. 需求場景

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

2. 內(nèi)容布局

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

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

3. 交互行為

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

三、下拉選擇

1. 需求場景

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

2. 內(nèi)容布局

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

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

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

無默認數(shù)據(jù)選中：

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

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

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

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

已選中項標注已選中狀態(tài)：

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

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

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

3. 交互行為

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

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

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

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

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

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

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

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

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

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

更新數(shù)據(jù)中無當前已選擇數(shù)據(jù)：

四、總結(jié)

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

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

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

熱門課程推薦

熱門資訊

請綁定手機號

獲取驗證碼
x

同學您好！

您已成功報名0元試學活動，老師會在第一時間與您取得聯(lián)系，請保持電話暢通！
確定