<samp id="s6oek"><bdo id="s6oek"></bdo></samp>
  • <xmp id="s6oek">
    <strong id="s6oek"><samp id="s6oek"></samp></strong>
  • 企業級管理后臺頁面組件使用詳解

    日期:2019-02-12 12:16:12    來源:www.xinchengche.cn

    我們在設計諸如CRM(客戶關系管理)、OA(辦公自動化)等面向企業級客戶的管理后臺界面時,往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向,不知該如何選擇。

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

    那么在對比了幾個常用的組件庫(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 組合使用,可選擇區間,可用分段的形式。

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

    讓我們協助您將需求落地

    *請填寫需求信息,我們會在24小時內與您取得聯系。

    乐成彩票手机版入口-最新版 好彩1| 秒秒快三| 55世纪| 彩票巴巴| 大发系统| 快3下载| 腾讯分分| http://www.newlifealternatives.com http://www.janimatic.com http://www.newlifealternatives.com