B端淺聊|認識“選擇器”

1 評論 6437 瀏覽 43 收藏 12 分鐘

編輯導語:在B端系統的設計過程中,設計師要對基礎控件有充分的認識,以及對控件使用影響因素進行規避處理。本文作者對“選擇器”的類型和使用進行了分析,一起來看一下吧。

B端系統設計過程中,基礎設計控件的重要性不言而喻,需要設計師對基礎控件有充分的認識,以及對控件使用影響因素進行規避處理。

01 選擇器如何使用

那么對這個主題議題分解下,聊幾個小問題。

在各個場景中,明確的是選擇器是從設計層面來解決問題——控件如何在特定場景中適用——怎么判定場景適用的控件依據——從需求挖掘。

  1. 了解選擇器,以及選擇器有哪些常用的衍生選擇控件
  2. 為什么要用不同的選擇器
  3. 誰來操作使用選擇器
  4. 什么場景下使用不同的選擇器
  5. 在特定的場景下,適用什么樣的選擇器
  6. 使用選擇器需要注意哪些問題

設計解決的就是問題,把問題弄明白了,設計執行就比較順利了。

那么選擇器類型、場景、影響因素結合起來表述比較適合,分開說沒有意義。且相互之間互有穿插。

選擇器大家都不陌生,能叨叨明白的事情,就別動手;能用選擇的,就別手動輸入。選擇比輸入操作有著更好的便利性。大多數情況下,都希望鼠標點點就把事情處理掉,在B端這方面也更是為此付出更多的努力。由基礎的單選控件,在不同的場景中,演化出不同的選擇方式。

但不能說輸入類控件不重要,然而恰恰相反,越復雜的數據處理系統,輸入類控件也是占據重要的位置。因為是選擇無法處理的事項需要手動輸入(區別于篩選區的輸入模糊搜索)。

B端淺聊|認識“選擇器”

粗略判斷下,類型與影響因素以及應用場景之間的關系:

B端淺聊|認識“選擇器”

02 選擇類型

大多數朋友對選擇的使用認識,在設計執行中,選擇器是應用最廣泛的,常用的包含有基礎選擇器單選框、多選框,演變的下拉單選框、下拉多選框,變異體的級聯選擇器、穿梭框、樹選擇器。

共同的認識中,各大設計系統平臺,組建規范里將這些內容歸類到數據錄入模塊內。

在之前的文章中「數據錄入控件的使用」,有提到選擇類控件在實際應用中的不同表現形式,這里從個體角度去介紹場景中應用選擇器。

03 單選控件

B端淺聊|認識“選擇器”

選項個數和選項字段長度是雙重影響,常規思路,產品在畫原型的時候,盡可能的控制選項的個數、選項字段的長度,通常情況下會控制在4個字以內。而在復雜的數據處理系統內,選項字段名稱都是專用的,短不了,所以得換思路,單選不行就要轉向尋求別的方式。

1. 篩選區

比較少用單選按鈕控件,且考慮統一性的前提下,用下拉單選控件替代,即使是「是」「否」單選項內容。

2. 表格區

表格范圍更容易理解,單選按鈕方式不行,下拉選擇框是優選。另一個延伸問題字段長度過長顯示問題。分兩種情況,一種是必須全顯示;另一種是省略部分字段,選中的選項顯示如下展示。

B端淺聊|認識“選擇器”

3. 表單區

表單對選擇的可操作性、容忍度都挺高,在這里都是根據操作用戶的行為,怎么方便怎么來。有種情況下,即使選項字段明確簡短,出于不干擾讀取的角度考慮,還會用下拉選擇框控件顯示。表明只顯示只想要的。

B端淺聊|認識“選擇器”

4. 問卷區

需求用提到需要用到問卷的功能,問卷區就比較單一,所以單選/多選按鈕控件是最常見的,向使用者展示擁有的選項,且是全顯示。

web端不受選項字段長度和選項個數影響。

移動端在布局和顯示上需要做調整。

04 多選控件

1. 篩選區

篩選里每一選擇的選項都是單個,可以理解為精選指定的某一項,目標很明確。也有個別場景需要,比如醫療科研研究的病例數據信息,篩選的條件如同電商那樣,分類篩選。本身關鍵詞長度也不是固定的,有長有短,所以在樣式上,考慮橫向空間的最大化利用,容納更多選項,取消點選按鈕樣式。

B端淺聊|認識“選擇器”

2. 表格區

多選按鈕多在表格區里常見,一般與批量處理搭配,比如批量刪除。

B端淺聊|認識“選擇器”

業務需求的要求,在圖表里也需要多選。簡單可以理解為圖表可視化的篩選,篩選的結果也是圖表展示。字段長度和選項也不再是重要的影響因素。

B端淺聊|認識“選擇器”

表單區問卷區不做贅述,同上單選。

當新增一些數據以及選擇數據的部分指標時,以及指標之間的關系,單單多選按鈕已經不能達到業務需求的表示方式,那么需要對多選方式進行改造,區別的是下拉多選的顯示,各大設計系統里都有對這部分的基礎展示樣式。在這基礎上進行調整。

B端淺聊|認識“選擇器”

05 樹選擇器

樹選擇器的標志性特點就是父子層級關系很明確,應用場景也很廣,導航目錄、病例資料等。常和多選按鈕結合在一起使用。部分專業用詞長度不可縮減,限定長度,參考方式依據上述的單選。

B端淺聊|認識“選擇器”

1. 篩選區

結構性信息在篩選區應用的不多,有的話,將父子級文案在框內顯示出來,且層級一般不會超過三級,要兼顧字段長度,超出了深度太深了,父子級文本在有限的框框內顯示意義不在了,需考慮其他方式。

B端淺聊|認識“選擇器”

2. 表格區

表格里樹結構參與度不高。層級過深,表格需求的意義就不大了,不超過三級,控制在二級以內,且二級的信息量不超過父級,更多的信息是放在詳情里。

B端淺聊|認識“選擇器”

3. 表單區

不完全定位在常規的表單區內,在需要填寫填寫數據信息的場景下,都可應用到。

B端淺聊|認識“選擇器”

問卷區不用它。

06 級聯選擇器

級聯選擇器和樹選擇有著相似的結構,明確指明的父子級關系。在操作的不同之處是級聯選擇是單向道,先選擇父級才會有子級,所以在應用場景上區別開來,常用做地址選擇、科室選擇等。

地址選擇:僅受字段長度的影響,特別是新疆西藏等地方名稱,展開選項時,展開樣式不受頁面影響,可全顯示文本,亦可做部分缺失處理(依然可看完整名稱)。完成地址選擇顯示即為全顯示。

B端淺聊|認識“選擇器”

1. 篩選區

在權限高的賬戶體系的系統界面里,篩選患者需要用到科室的篩選。而一般一線操作員的權限系統界面基本不需要篩選科室。

2. 表格區

部分表格也會將表格的表頭名科室香作為篩選按鈕,而省去篩選區里的科室篩選。

3. 表單區

新增患者信息,會讓輸入患者地址信息,方便藥品配送。一般在表單區填寫患者信息一并將患者地址完成掉。

在部分需求里,給新建系統賬戶時,亦會用到級聯選擇器輔助配置權限。

07 日期/時間選擇器

也是選擇的一種,有單選日期點、時間點、時間周期。常應用在篩選區,查詢在指定的一段時間內符合的患者信息;統計指定周期內的數據信息,比如走勢圖圖,柱狀圖等;患者隨訪跟蹤,定時提醒。

08 后記

在這里一是向大伙整理選擇器的多種形態、樣式,二是基于這些樣式結合各自項目產品的需求進行添磚加瓦,稍加改造控件組件,設計符合業務要求的控件樣式。貼合需求的設計的才算是恰當的解決方式。

 

本文由 @Ychen(啊嗚計) 原創發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 篩選里每一選擇的選項都是單個,可以理解為精選指定的某一項,目標很明確。

    來自廣西 回復