設計B端後台|__云顶娱乐彩票如何注册,必須搞清楚這些組件(一)

2019-2-14 泥人張 設計資源

如果您想訂閱本博客內容|苏州房交会,每天自動發到您的郵箱中__阿里旺旺2009, 請點這裏

我們在設計諸如CRM(客戶關係管理)_-|产品市场调查表、OA(辦公自動化)等麵向B端用戶的後台界麵時|-_怎么免费刷q币,往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向|--22彩票平台有人玩吗,不知該如何選擇__福州市华伦中学。有時好不容易選完之後|__军刺电视剧,又會發現有更合適的組件|22选5开奖结果河南省,導致反複修改設計稿-_antonia 霍启仁,降低了工作效率--_2019年128期四不像头像。

那麼在對比了幾個常用的組件庫(Ant Design / Element / iView)並結合自身的工作經驗之後_|_22彩票平台提现不到账,我選擇了一些常用的組件|2019最新118彩票手机版,來和大家簡單總結下它們的使用場景以及可能出現的誤區|_民间故事和民间歌谣。

在Ant Design 的組件庫中-||盈彩平台提不出钱来,分為了通用__-促其反正、布局369官方网彩票、導航___魔泥官网、數據錄入-||德州华翔驾校、數據展示||dhc滋养化妆水、反饋-|qq游戏商城网址、其他這七大類組件-_莅临参加。今天先來看看數據錄入中的相關組件_-|诺基亚6208c游戏,我將其又分為了手動輸入以及點擊選擇兩大類|_|众赢彩票开奖记录数据分析。(評分-阿桑古卡、上傳等特征明顯的組件就不在此贅述了_-_苏州红星美凯龙活动。)

手動輸入

1. 輸入框Input

輸入框是數據錄入中最常見也是最基礎的組件|__注册送28信誉彩票网,在需要用戶輸入內容的時候即可選用||-360购彩大厅怎么样。

除了常規的輸入框-__南华苑路,帶前/後綴-|_众购彩票网址是多少、帶圖標_-好看的丧尸片、帶按鈕的輸入框也是較常用到的|__房产继承咨询。

在輸入內容中頭/尾是相對固定的時候|芬迪斯,我們就可以采用帶前/後綴的輸入框來減少用戶手動輸入|--1216彩票怎么进不去了,比如網址輸入框就可以加上後綴__-美图还原。

有時候為了幫助用戶了解輸入內容的類型_|_喂养恐龙赚钱,可以在輸入框中加上圖標__长郡style,比如輸入用戶名或密碼的時候-|-168网赌输了好多钱咋办。

帶按鈕的輸入框最常使用的場景就是搜索框了_--金谷证券。

2. 自動完成AutoComplete

自動完成其實是輸入框Input 的一項功能__|七里香 泷泽萝拉,但是 Ant Design 和 iView 中將其單獨拎出來了-365精彩每一天,為了避免大家搞混_198彩票扣牌怎么样,我們這兒也單獨講_-_亿发彩票下载安装。(Element中在輸入框 – 帶輸入建議)

顧名思義_|_玫琳凯督导,自動完成就是輔助用戶輸入-_淘宝开店步骤。在輸入一部分內容後-_-拳王97电影,提供相關的備選項||oppo手机a201,不僅可以減少手動輸入|_160彩票网站,還能更精準的輸入_|都匀蓝宇装饰。常見的使用場景就是搜索框了||唯爱侦察。

3. 數字輸入框InputNumber

數字輸入框特用於需要輸入範圍數值的場景(電話QQ等號碼不宜使用)__|伯西来。右側的步進器則可以幫助用戶精準控製數值的增減-|-苏泊尔电压力锅使用方法。

當然作為輸入框的一種-|135彩票访问地址,也可以加上前/後綴來減少固定內容的輸入|-聚美优品上不去,比如%或者貨幣單位(¥|_|天猫供销平台、$--众发彩票走势预测、元_-盈盈彩靠谱么、円)__|三中全会2014。

點擊選擇

1. 單選框Radio

單選框顧名思義就是在一組選項中僅可選擇一個時使用___深圳都市频道第一现场直播。

由於單選框的選項都是平鋪展示的--晋城五个人图片,所以選項不宜過多|_雯雅婷图,當選項較多時建議采用選擇器Select(後文會提到)--至尊时时彩登录网站。

按鈕形式的單選框也可以被當作標簽頁Tabs 來使用(標簽頁Tabs的本質其實就是單選框)_|初中数学试讲教案。

2. 多選框Checkbox

多選框則是在一組選項中需要選擇多個時使用||306老版彩票。

同樣_|-重庆主城钓鱼地图,由於是平鋪展示|-|长春汽车保险,選項不宜過多_-_薪福卡官网。

多選框不同於單選框Radio 的是-_蓝色冰晶瘦身霜,它可以單獨使用|-青山湖区教体信息网,來表示兩種狀態之間的切換_-众发彩票网,類似於開關Switch|_|隐藏文件夹病毒。區別在於開關Switch 會直接觸發改變狀態_|_闰井,多選框則一般用於狀態標記|-木层网,需要配合提交操作使用|-_成都九眼桥猛女资料。

3. 選擇器Select

選擇器也是數據錄入中很常見的組件|_无限挑战120121,它以下拉菜單的形式來呈現選項(選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示)|--认命歌词。

除了單選-|图标猜成语,還有多選的形式_|云发购彩票。

上文輸入組件中提到的自動完成AutoComplete_-_粤dk0213,其實也是選擇器的一種衍生方式──帶輸入的選擇器||-河南4套。

4. 級聯選擇Cascader

級聯選擇是指--_2019鸿运棋牌,在選擇器Select 選項數量較大時_|_金巧巧短信门,采用多級分類的方式將選項進行分隔-_|105彩票是哪个公司的,便於用戶選擇_|儿童画春天。比如地址選擇-|_尚志都市,就可以按省市區一層層分類---闪光夫妇为什么下车。

5. 穿梭框Transfer

當多選框Checkbox 選項過多時|_-御肤堂化妆品,除了選擇器Select 的多選形式_鳌太线,還可以用穿梭框的形式來呈現-|成年人身份证号。相比於選擇器Select_|-秦皇岛高中排名,穿梭框占據更大的空間-_-遂宁英语网,當然也可以展示選項的更多信息|-王的第十七妾。

6. 日期選擇器DatePicker

當需要錄入日期的時候_-丽谯楼,可以選用日期選擇器--jy男装淘宝店。用戶從彈出的日曆麵板中直接選取即可-|01彩票软件平台安全吗。

當然|--lenovoa60软件,需要錄入一段時間的時候--|2018生肖歇后语1一153,也可以同時選擇開始日期和結束日期--_118彩宝彩票安卓手机。

7. 時間選擇器TimePicker

時間選擇器與日期選擇器DatePicker 幾乎一樣---我要的是无话不说,從彈出麵板中選擇時間即可|爱家乡的诗歌。

時間選擇器和日期選擇器DatePicker 還可以組合使用||_至尊心水在哪里下载。

8. 滑塊Slider

滑塊的使用場景類似於數字輸入框InputNumber_kookai价格,需要在某個範圍內錄入數值|-|众博线上娱乐。不同的是-_360重庆老时时开奖结果,它可以直接選取而不用手動輸入|-moko路遥。

當然_|-喂养恐龙赚钱,也可以和數字輸入框InputNumber 配合使用|_11086移动彩票登不进去。

還可以選擇某個區間-_|078彩票包赔本金是真的吗,比如價格區間|_长沙三毛妮休闲中心。

當數據選項較少或者離散(不連續)時-|市场问卷调查表,還可以采用分段的形式_-|天府新区总体规划图。

總結

今天主要講了數據錄入的相關組件_-|永久免费网游排行榜,共11個||_车四十四路事件原型:

  • 輸入框Input|众彩彩票老板是谁:最基礎組件-||亿发彩票软件,除常規外___众乐彩票的骗局,還有帶前/後綴_-企业发展规划书范文、帶圖標_--重庆高考作文题目、帶按鈕的形式||长治文明小博客。
  • 自動完成AutoComplete__盈彩下载安装:輸入框Input 的一項功能18大全称,提供備選項輔助輸入_-魅力研习所。
  • 數字輸入框InputNumber||_需要杨光:錄入範圍數值__pk 3调试,帶步進器精準控製--|初二女生胸,還可帶前/後綴|_家教老师h漫之全彩。
  • 單選框Radio|__星光大道20130202:隻能選擇一個-|防患于未然的意思,選項不宜過多_|_ovi套件下载,按鈕形式可做標簽頁Tabs|-|重庆高考作文题目。
  • 多選框Checkbox|__3k娱乐平台负盈利:可多選_|168彩票苹果版本怎么下载,選項不宜過多_360彩票购彩,單個使用可做開關Switch||商丘摄影网。
  • 選擇器Select_|_工程款支付申请表:以下拉菜單的形式呈現更多選項_|_淘宝网沙发巾,可單選/多選|_银河海润,可帶輸入__临县秧歌2013贺升亮。
  • 級聯選擇Cascader-_陈红天:選項數量較大_||兰州商学院长青学院教务,采用分類的方式將選項分隔||怎么去霉运。
  • 穿梭框Transfer-_|永盛彩票开奖网站:可多選--_众发娱乐app,展示選項更多的信息|-|邮寄包裹费用。
  • 日期選擇器DatePicker_众益彩手机客户端:選擇日期_-非常了得陈星光,可以選擇一段日期_|肖字和德。
  • 時間選擇器TimePicker_|_青岛海底世界门票:選擇時間_||李天一受害教师照片,可以與日期選擇器DatePicker 組合使用-|-易盈彩票网上登录。
  • 滑塊Slider_炮击事件:錄入範圍數值-|赢彩彩票有人玩吗,可與數字輸入框InputNumber 組合使用||2m彩票2m永久费资料,可選擇區間_语文老师你的好紧嗯爽,可用分段的形式|_大成基金2020。

    藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-_htcg11报价,為期望卓越的國內外企業提供卓越的UI界麵設計___河南瘦肉精事件、BS界麵設計 2m彩票2m永久免费彩图、 cs界麵設計 -|众乐彩票提现、 ipad界麵設計 -御肤堂化妆品、 包裝設計 _|北大教授、 圖標定製 __苏州干将西路535号、 用戶體驗 y阅、交互設計_北风吹呀吹、 網站建設 _--256cp彩票、平麵設計服務|--双色球67期开奖结果。

分享到_||注册送彩金彩票软件: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap