• 如何构建 Web 端设计组件之树和日期时间选择器 - 优设网 - UISDC

    如何构建 Web 端设计组件之树和日期时间选择器

    2018/06/03 12958评论区

    Echo :本文主要讲解表单中的 treeselect 树选择、datepicker 日期选择器和 timepicker 时间选择器。

    根据组件的用途,可以分为六大类:Feedback 反馈、form 表单、basic 基础、data 数据 、navigation 导航、other 其他。

    表单在网页中主要负责信息数据采集功能,用户需要填写输入信息数据并且提交到后端数据库,以此完成信息的采集,则这种组件就是表单组件。

    本文主要讲解表单中的 treeselect 树选择、datepicker 日期选择器和 timepicker 时间选择器。

    一、treeselect树选择

    1. 定义

    具有层级关系的选择器。

    2. 使用场景

    • 需要使用选择器,同时可以提供层级结构的枚举项时。
    • 弹出一个下拉选项给用户选择操作。
    • 具有单选和多选的功能。

    例如用户搜索关键词时,需要对搜索结果进行二次筛选,常见的使用树选择有城?#23567;?#32452;织架构?#21462;?/p>

    3. 基础样式

    只能选择枚举,不支持在选择框中进行关键词搜索,且为单选。用户选择选项后,浮层收起,表单为完?#21830;?/p>

    对于选项中层级结构是否展开收起,则根据父子层级架构来看待,例如省市比较多,默认展开的话,查找起来会变得很困难,收起的?#38712;?#21487;以快速找到省,再次点击可快速找到?#23567;?/p>

    4. 含有搜索样式

    选择框支持搜索,在用户输入?#22336;?#20018;过程中,枚举项动态匹配,且匹配的子集展开。当搜索无结果时出现搜索无结果提示,点击无交互效果。

    5. 含有搜索样式(可选择空选项)

    用户如果选择空值,则提交数据城市为空。

    6. 含有搜索样式(可清?#25214;?#36873;项)

    如果用户已选择,可提供用户清?#25214;?#36873;择的机会。用户如果已选择选项,则鼠标 hover,出现叉号,点击叉号,清空选择框。

    7. 含有搜索样式(多选

    用户在输入?#22336;?#20018;时,选项中出现匹配选项,点击复选框,输入框出现选项 tag 同时清空输入框。选择框支持搜索,在用户输入?#22336;?#20018;过程中,枚举项动态匹配,且匹配的子集展开。点击选择器和选择浮层以外其他区域,则浮层收起,树选择器为完?#21830;?/p>

    二、datepicker日期选择器

    1. 定义

    选择日期的组件。

    2. 使用场景

    • 当用户需要填写年月日/年月时。
    • 点击选择框,出现日期选择浮层。

    例如在 boss直聘填写工作经理的表单中,需要填写在职时间,这里使用的就是 datepicker 日期选择器。

    3. 基础样式

    非时间段日期选择器。点击选择框,出现日期选择浮层,默认停留在用户当天日期。用户未选择时,清空按钮默?#29616;没遙?#24050;选清空按钮恢复正常?#21050;?/p>

    4. 年月样式

    只能选择年月,用户激活输入框,出现年月选择浮层。默认停留在用户当月,清空按钮默?#29616;没搖?#29992;户点击选择时,浮层收起,选择框出现已选择当年月。

    5. 时间段样式

    时间段日期组件在结束时会多一个选项为?#20004;瘛?#29992;户选择?#20004;瘢?#21017;结束时间一?#32972;中?#21040;未?#30784;?/p>

    三、timepicker时间选择器

    1. 定义

    用于用户具体选择时间点时。

    2. 使用场景

    • 当用户需要选择具体时/分。
    • 点击选择框,出现时间选择浮层。

    例如微信公众后台定时群发时,可选择具体时间发?#20572;?#28857;击出现下拉选项。

    3. 基础样式

    点击选择框,出现时间选择浮层,用户可以用鼠标上下滚动滑轮选择具体的时间点。

    4. 分钟刻度样式

    有的场景,不需要具体的分钟,具体的分钟在选择起来因为选项太多而变得麻?#24120;?#29992;户更多的使用场景?#21069;?#29031;刻度来设置。点击选择框,出现时间选择浮层,用户可以用鼠标上下滚动滑轮选择大概的的时间点。

    5. 日期和时间组合样式

    有的表单,既要提交日期也要提交时间,这种情况可以用两个表单设计,datepiecker 和 timepicker 两者组合,也可以在一个表单上完成,如下所示,用户在选择了日期后,出现时间选择浮层。

    欢迎关注作者的微信公众号:「吴轶」

    ?#35745;?#32032;材作者:Irene Georgiou

    「Web端设计总结」

    ================明星栏目推荐================

    优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一?#35762;?#23398;习,一定可以迅速上手并制作出酷炫的视觉效果。

    设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

    优设大课堂

    非特殊说明,本文版权归原作者所有,转载请注明出处
    本文地址:http://www.caxp.icu/web-design-treeselect-datepicker-timepicker

    发表评论 加载中....

    评论加载中....

    uisdc

    评论区都快饿瘪了,看看我期盼的小眼神...

    版式设计 设计师 扁?#20132;?#35774;计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 设计师专访 字体下载 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

    您还没有登录

    优设启用更安全省心的 微信扫码登录

    微信扫码

    300万设计师聚集地!优设网是极具人气的设计师平台
    2012年成立?#20004;瘢?#19968;直专注于设计师的学习成长交流

    把好文章收藏到微信

    打开微信,扫码分享
    学设计 优设网 在这里

    017期神七是特码
  • 兰斯10汉化设置 阿贾克斯vs尤文图斯比分 贝蒂斯与塞维利亚比分预测 马戏团APP下载 天涯明月刀烧钱吗 国际米兰阵容1998 怪物赛车 雷恩加尔壁纸 燕赵彩票20选5走势图 apex英雄如何切换服务器 德甲拜仁vs汉诺威96 nba公牛vs骑士视频视频视频 亚洲风情有声 qq飞车手游礼包抽完要多少礼包券 拳皇命运官方论坛 赖扬vs塔什干火车头推荐