設計B端後台-|-刘玉浦简历,必須搞清楚這些組件(一)

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

如果您想訂閱本博客內容|时尚魔女网,每天自動發到您的郵箱中-_-亿客隆彩票网站, 請點這裏

我們在設計諸如CRM(客戶關係管理)_|_毕福剑与王二妮睡觉、OA(辦公自動化)等麵向B端用戶的後台界麵時_|苏岑博客,往往會被各種各樣錯綜繁雜的組件弄得暈頭轉向|_|东方热线测速,不知該如何選擇_-|吸血白蝙蝠卫生巾。有時好不容易選完之後_-|平安果包装方法图解,又會發現有更合適的組件|-青浦朱家角中学,導致反複修改設計稿|__东北二嫂水仙视频种子,降低了工作效率_|_京东机票网。

那麼在對比了幾個常用的組件庫(Ant Design / Element / iView)並結合自身的工作經驗之後--_1分快3彩票,我選擇了一些常用的組件__|众购彩票娱乐,來和大家簡單總結下它們的使用場景以及可能出現的誤區_-赢彩网是正规网站吗。

在Ant Design 的組件庫中-|132彩票app,分為了通用_|11月4日风雨大作、布局|-|伊雅特、導航-|军刺电视剧、數據錄入||诸葛智彩软件怎么样、數據展示-|-小黄视频、反饋_-|234彩票靠资源、其他這七大類組件-_初一数学期中考试卷。今天先來看看數據錄入中的相關組件_|3cp彩票平台APP,我將其又分為了手動輸入以及點擊選擇兩大類_||移动手机怎么开通黄钻。(評分_-_易港行、上傳等特征明顯的組件就不在此贅述了_|-沽源贴吧。)

手動輸入

1. 輸入框Input

輸入框是數據錄入中最常見也是最基礎的組件_|至尊彩app怎么玩,在需要用戶輸入內容的時候即可選用|--烈女蒋究。

除了常規的輸入框_|金盛家居广场,帶前/後綴_-莱州中考成绩、帶圖標_-新浪微博阅读、帶按鈕的輸入框也是較常用到的-_闪光夫妇为什么下车。

在輸入內容中頭/尾是相對固定的時候|-亿彩彩票代理赚钱吗,我們就可以采用帶前/後綴的輸入框來減少用戶手動輸入-_奶妈吧,比如網址輸入框就可以加上後綴||31选7走势图福建省。

有時候為了幫助用戶了解輸入內容的類型|-优衣库视频ed2k,可以在輸入框中加上圖標-|亲戚关系图,比如輸入用戶名或密碼的時候--|何再贵。

帶按鈕的輸入框最常使用的場景就是搜索框了|娱乐天地官网下载。

2. 自動完成AutoComplete

自動完成其實是輸入框Input 的一項功能|俗人岛社区,但是 Ant Design 和 iView 中將其單獨拎出來了_||1号计划彩票,為了避免大家搞混|||陆贞传奇百度影音,我們這兒也單獨講-_诺基亚n79论坛。(Element中在輸入框 – 帶輸入建議)

顧名思義_右图是一个蛋糕盒,自動完成就是輔助用戶輸入|-脱兔3 0。在輸入一部分內容後|--诺基亚n79手机,提供相關的備選項__笔秀素材网,不僅可以減少手動輸入|_-花色处女地,還能更精準的輸入公顷换算。常見的使用場景就是搜索框了|-_法网奖金。

3. 數字輸入框InputNumber

數字輸入框特用於需要輸入範圍數值的場景(電話QQ等號碼不宜使用)|-_2019可以网上买彩票吗。右側的步進器則可以幫助用戶精準控製數值的增減|-布鲁金斯基征。

當然作為輸入框的一種__优选彩票怎么样,也可以加上前/後綴來減少固定內容的輸入-_许继慎,比如%或者貨幣單位(¥||_汤唯在韩国视频、$游彩网提现不到账、元--2017电影排行榜、円)_|云顶娱乐提现钱不到账。

點擊選擇

1. 單選框Radio

單選框顧名思義就是在一組選項中僅可選擇一個時使用--至尊争霸彩票安全吗。

由於單選框的選項都是平鋪展示的_--众发娱乐彩票是真是假,所以選項不宜過多_|众彩娱乐注册,當選項較多時建議采用選擇器Select(後文會提到)-|-如来陈涛。

按鈕形式的單選框也可以被當作標簽頁Tabs 來使用(標簽頁Tabs的本質其實就是單選框)|-莱州市教育科研网。

2. 多選框Checkbox

多選框則是在一組選項中需要選擇多個時使用|--雳剑电视剧 全集在线观看。

同樣---热血无赖4个独特数字,由於是平鋪展示--_258彩票注册送38,選項不宜過多_||注册彩票送18元彩金app。

多選框不同於單選框Radio 的是|-|2个月网赌输了40多万,它可以單獨使用|-198注册,來表示兩種狀態之間的切換|-运盛彩票首页,類似於開關Switch_-舒友阁的产品怎么样。區別在於開關Switch 會直接觸發改變狀態_至尊彩app至尊彩下载,多選框則一般用於狀態標記_-106福利版彩票正规吗?,需要配合提交操作使用--庐山县委书记。

3. 選擇器Select

選擇器也是數據錄入中很常見的組件|-http www ntce cn,它以下拉菜單的形式來呈現選項(選項較少時建議采用單選框Radio 或多選框Checkbox 平鋪展示)--鹿少女。

除了單選__-易彩集团是真的么,還有多選的形式|-_深圳居住证快速办理。

上文輸入組件中提到的自動完成AutoComplete_|-365精彩每一天论坛,其實也是選擇器的一種衍生方式──帶輸入的選擇器|-1分快三彩票网址。

4. 級聯選擇Cascader

級聯選擇是指-|易旺彩票邀请码,在選擇器Select 選項數量較大時|_-卓易彩票闪退,采用多級分類的方式將選項進行分隔--韩国综艺节目runningman,便於用戶選擇-_阿列克莎。比如地址選擇_-_布拉格果盘,就可以按省市區一層層分類-__万文网校。

5. 穿梭框Transfer

當多選框Checkbox 選項過多時-||盐都网,除了選擇器Select 的多選形式|-_这五个人火了,還可以用穿梭框的形式來呈現_-揭刘汉留下多少遗产。相比於選擇器Select_-索爱m30,穿梭框占據更大的空間-|-aupres手表,當然也可以展示選項的更多信息|_108娱乐新3d软件分析。

6. 日期選擇器DatePicker

當需要錄入日期的時候_-步步高学习机h2下载,可以選用日期選擇器-_-台湾身份证号生成器。用戶從彈出的日曆麵板中直接選取即可-__芮娜森黑钻全效面膜。

當然|||青岛火车站订票电话,需要錄入一段時間的時候||铁路狂奔,也可以同時選擇開始日期和結束日期|_|106平台彩票。

7. 時間選擇器TimePicker

時間選擇器與日期選擇器DatePicker 幾乎一樣---云顶国际彩票,從彈出麵板中選擇時間即可|_快视影院百度影音。

時間選擇器和日期選擇器DatePicker 還可以組合使用_-铁道兵家园网。

8. 滑塊Slider

滑塊的使用場景類似於數字輸入框InputNumber---杜香油,需要在某個範圍內錄入數值||仙剑奇侠传五破解补丁。不同的是|亚当夏娃怡情谷,它可以直接選取而不用手動輸入__韩版恶作剧之吻收视率。

當然_|360彩票超级赛车,也可以和數字輸入框InputNumber 配合使用_--360时时彩杀码平台。

還可以選擇某個區間___天津观赏鱼养殖基地,比如價格區間-||掉下了眼泪音译歌词。

當數據選項較少或者離散(不連續)時_|11086移动彩票可靠吗,還可以采用分段的形式|__168开奖网极速时时彩。

總結

今天主要講了數據錄入的相關組件|-平码四中四,共11個|铁三角atht50:

  • 輸入框Input|-14胜负彩在哪买:最基礎組件-右图是一个蛋糕盒,除常規外_-五家渠政务网,還有帶前/後綴|亿彩邀请码199倍、帶圖標_|青年中国说 余佳文、帶按鈕的形式|_360彩票网官网走势图。
  • 自動完成AutoComplete_-永盛国际赢了取不出来:輸入框Input 的一項功能|__青田封门青,提供備選項輔助輸入-||铀钚。
  • 數字輸入框InputNumber|-04400王中王开奖结果:錄入範圍數值|瑞丽裳电子杂志,帶步進器精準控製|_易建宝怎么样,還可帶前/後綴|-|cf千变轮回2017。
  • 單選框Radio|_|中科彩票220:隻能選擇一個-|众发娱乐是骗局吗,選項不宜過多---qq炫舞紫钻,按鈕形式可做標簽頁Tabs---干旱新闻。
  • 多選框Checkbox_|-掌上新华APP:可多選|--川化股份股吧,選項不宜過多_-亿人彩票娱乐,單個使用可做開關Switch--爵迹风津道14。
  • 選擇器Select||2n3055功放:以下拉菜單的形式呈現更多選項|-金童玉子,可單選/多選|-_御诚电脑配件批发,可帶輸入|||众彩彩票app下载安装。
  • 級聯選擇Cascader-云顶彩票注册送45元:選項數量較大--_御龙在天祝融夫人坐标,采用分類的方式將選項分隔|--苏州车险哪家好。
  • 穿梭框Transfer_挠脚心漫画:可多選|山西环法尊道长,展示選項更多的信息--青岛洗头房。
  • 日期選擇器DatePicker_中博彩票系统:選擇日期|-富平县人民政府网,可以選擇一段日期|-1号彩票信得过吗?。
  • 時間選擇器TimePicker||_诗恩芙:選擇時間|||英杰交流中心,可以與日期選擇器DatePicker 組合使用||街头篮球葡萄论坛。
  • 滑塊Slider--易购爱购是热门APP吗:錄入範圍數值_10665185是什么号码,可與數字輸入框InputNumber 組合使用_|_阜阳市卫生局网,可選擇區間-|_306官方彩票靠谱吗?,可用分段的形式|||天翼3g上网卡驱动。

    藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司_--诛仙飞升任务流程,為期望卓越的國內外企業提供卓越的UI界麵設計--范特华特、BS界麵設計 -_|快手福利视频、 cs界麵設計 _nba2konline外挂、 ipad界麵設計 __触手动画片、 包裝設計 _-_2号彩票平台、 圖標定製 __|106福利版彩票、 用戶體驗 ||永安彩票是否合法、交互設計_驾校教练车图片、 網站建設 |_都匀蓝宇装饰、平麵設計服務||诺基亚串号查询网站。

分享到_|_亿彩彩票靠谱吗: 新浪微博 騰訊微博 微信 微信 更多

Powered by emlog 京ICP備12006971號-1 sitemap