B端UI界面交互基礎組件-輸入框(下)
編輯導語:文本輸入在日常中隨處可見,在上篇文章中作者講了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 協議
非常感謝作者的這幾門UI界面交互組件的文章,有可能的話,希望能看到頁面交互的文章