設計B端后臺,必須搞清楚這些組件(一) - 優設網 - UISDC

設計B端后臺,必須搞清楚這些組件(一)

2019/02/11 25893評論區

云南体彩网海舟Ocean:我們在設計諸如CRM(客戶關系管理)、OA(辦公自動化)等面向B端用戶的后臺界面時,往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向,不知該如何選擇。有時好不容易選完之后,又會發現有更合適的組件,導致反復修改設計稿,降低了工作效率。

那么在對比了幾個常用的組件庫(Ant Design / Element / iView)并結合自身的工作經驗之后,我選擇了一些常用的組件,來和人人簡單總結下它們的使用場景以及可能涌現的誤區。

云南体彩网在Ant Design 的組件庫中,分為了通用、結構、導航、數據錄入、數據展示、反饋、其他這七大類組件。今天先來看看數據錄入中的相關組件,我將其又分為了手動輸入以及點擊選擇兩大類。(評分、上傳等特征明顯的組件就不在此贅述了。)

手動輸入

? 1. 輸入框Input

云南体彩网輸入框是數據錄入中最常見也是最基礎的組件,在需要用戶輸入內容的時候即可選用。

云南体彩网除了慣例的輸入框,帶前/后綴、帶圖標、帶按鈕的輸入框也是較常用到的。

在輸入內容中頭/尾是相對固定的時候,我們就可以采取帶前/后綴的輸入框來減少用戶手動輸入,好比網址輸入框就可以加上后綴。

有時候為了贊助用戶了解輸入內容的類型,可以在輸入框中加上圖標,好比輸入用戶名或密碼的時候。

云南体彩网帶按鈕的輸入框最常使用的場景就是搜索框了。

? 2. 自動完成AutoComplete

自動完成其實是輸入框Input 的一項功能,但是 Ant Design 和 iView 中將其零丁拎出來了,為了避免人人搞混,我們這兒也零丁講。(Element中在輸入框 – 帶輸入建議)

顧名思義,自動完造詣是輔助用戶輸入。在輸入一部分內容后,提供相關的備選項,不僅可以減少手動輸入,還能更精準的輸入。常見的使用場景就是搜索框了。

? 3. 數字輸入框InputNumber

云南体彩网數字輸入框特用于需要輸入范圍數值的場景(德律風QQ等號碼不宜使用)。右側的步進器則可以贊助用戶精準控制數值的增減。

云南体彩网當然作為輸入框的一種,也可以加上前/后綴來減少固定內容的輸入,好比%或者貨幣單位(¥、$、元、円)。

點擊選擇

? 1. 單選框Radio

單選框顧名思義就是在一組選項中僅可選擇一個時使用。

由于單選框的選項都是平鋪展示的,所以選項不宜過多,被選項較多時建議采取選擇器Select(后文會提到)。

云南体彩网按鈕形式的單選框也可以被看成標簽頁Tabs 來使用(標簽頁Tabs的實質其實就是單選框)。

? 2. 多選框Checkbox

云南体彩网多選框則是在一組選項中需要選擇多個時使用。

同樣,由于是平鋪展示,選項不宜過多。

多選框分歧于單選框Radio 的是,它可以零丁使用,來表示兩種狀態之間的切換,類似于開關Switch。區別在于開關Switch 會直接觸發改變狀態,多選框則一般用于狀態標記,需要配合提交操作使用。

? 3. 選擇器Select

云南体彩网選擇器也是數據錄入中很常見的組件,它以下拉菜單的形式來涌現選項(選項較少時建議采取單選框Radio 或多選框Checkbox 平鋪展示)。

云南体彩网除了單選,還有多選的形式。

云南体彩网上文輸入組件中提到的自動完成AutoComplete,其實也是選擇器的一種衍生方式──帶輸入的選擇器。

? 4. 級聯選擇Cascader

云南体彩网級聯選擇是指,在選擇器Select 選項數量較大時,采取多級分類的方式將選項進行分隔,便于用戶選擇。好比地址選擇,就可以按省市區一層層分類。

? 5. 穿梭框Transfer

云南体彩网當多選框Checkbox 選項過多時,除了選擇器Select 的多選形式,還可以用穿梭框的形式來涌現。相比于選擇器Select,穿梭框占據更大的空間,當然也可以展示選項的更多信息。

? 6. 日期選擇器DatePicker

當需要錄入日期的時候,可以選用日期選擇器。用戶從彈出的日歷面板中直接選取即可。

當然,需要錄入一段時間的時候,也可以同時選擇開始日期和結束日期。

? 7. 時間選擇器TimePicker

時間選擇器與日期選擇器DatePicker 幾乎一樣,從彈出面板中選擇時間即可。

云南体彩网時間選擇器和日期選擇器DatePicker 還可以組合使用。

? 8. 滑塊Slider

滑塊的使用場景類似于數字輸入框InputNumber,需要在某個范圍內錄入數值。分歧的是,它可以直接選取而不消手動輸入。

云南体彩网當然,也可以和數字輸入框InputNumber 配合使用。

還可以選擇某個區間,好比價格區間。

當數據選項較少或者離散(不連續)時,還可以采取分段的形式。

總結

今天主要講了數據錄入的相關組件,共11個:

  • 輸入框Input:最基礎組件,除慣例外,還有帶前/后綴、帶圖標、帶按鈕的形式。
  • 自動完成AutoComplete:輸入框Input 的一項功能,提供備選項輔助輸入。
  • 數字輸入框InputNumber:錄入范圍數值,帶步進器精準控制,還可帶前/后綴。
  • 單選框Radio:只能選擇一個,選項不宜過多,按鈕形式可做標簽頁Tabs。
  • 多選框Checkbox:可多選,選項不宜過多,單個使用可做開關Switch。
  • 選擇器Select:以下拉菜單的形式涌現更多選項,可單選/多選,可帶輸入。
  • 級聯選擇Cascader:選項數量較大,采取分類的方式將選項分隔。
  • 穿梭框Transfer:可多選,展示選項更多的信息。
  • 日期選擇器DatePicker:選擇日期,可以選擇一段日期。
  • 時間選擇器TimePicker:選擇時間,可以與日期選擇器DatePicker 組合使用。
  • 滑塊Slider:錄入范圍數值,可與數字輸入框InputNumber 組合使用,可選擇區間,可用分段的形式。

想進一步了解的小伙伴可以移步各大組件庫的官網,里面有各個組件更詳盡的涌現形式及使用方法。

  • Ant Design:
  • Element:
  • iView:

歡迎關注作者的微信公眾號:「海鹽社」

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.7daer.cn/tob-backstage-component-1

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

您還沒有登錄

優設啟用更平安省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
云南体彩网 2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里