资讯专栏INFORMATION COLUMN

UDesign 组件更新 | 近期优化迭代

ernest.wang / 350人阅读

摘要:一日期时间相关组件改版月初对日期时间相关组件交互上进行了一波大更新,主要是为了减少用户的操作成本,减少展示占用面积。单日期范围选择器中选择日期后,自动跳转至下一个框进行选择,都选择完成后自动确认。单日期范围选择器中使用双面板展示。

一、日期时间相关组件改版(DatePicker、TimePicker)

6 月初对日期时间相关组件 DatePickerTimePicker 交互上进行了一波大更新,主要是为了减少用户的操作成本,减少展示占用面积。

背景/现状

原先确定操作过多、体验比较复杂,其次样式上字体小、组件整体尺寸又偏大,窗口缩放时日历面板自适应定位体验不好,且内容可读性差。

优化逻辑和效果

  1. 在单日期选择确认时取消了确定按钮,点击日期后自动确认。

  2. 单日期范围选择器中选择日期后,自动跳转至下一个框进行选择,都选择完成后自动确认。

  3. 单日期范围选择器中使用双面板展示。

  4. 范围选择器添加选中范围展示条。

  5. 减小格子间隔、缩小面板大小。

  6. 增加清空按钮逻辑。

  7. 取消底部的快捷选择项。

还有一些细节上的调整如:范围选择器选中一个时间节点后另一个节点会按照前一个选中的节点来禁用部分事件等。

二、选择器组件改版( Select )

7 月初对 Select 组件进行了改版,主要为了确定后续 Select 组件的定位:只负责简单内容的选择,如列表项多、存在层级时需使用其它方案来替代。

背景/现状

原先多选结果展示可读性差,全选以及搜索功能下的全选逻辑复杂,实际效果与客户期望不一致。

优化逻辑和效果

  1. 搜索框与选择器进行合并,不再放到下拉区域。

  2. 搜索增加高亮展示。

  3. 全选勾选变更为按钮。

  4. 增加清空按钮。

  5. 多选增加了 tag 展示。

由于本次改动中交互存在与之前版本不兼容的问题:搜索区域、新版不支持多层数据结构,顾依旧保留之前的版本,在识别到配置不兼容时自动切换为旧版本:

  • 在使用了 renderSelector 并且需要搜索时

  • 使用了 Group 时

其它还有一些细节变动:如下拉最小宽度默认为选择器的宽度,搜索压缩 tag 展示等,选择后清空搜索等。

三、ActionList 增加自动伸缩功能

由于控制台中很多产品的表格中存在操作按钮列宽度与实际宽度不太匹配的情况,导致操作按钮折行的现象,因此在 ActionList 中添加了自动伸缩功能,使用 autoAdjustment 后 ActionList 会根据列宽自动调整展示数量,最多为 exposeCount,该参数在控制台中为默认启用。

如果在宽度确定时不建议使用该参数,因为自动调整需要不断重绘来测试可放置的数量,而表格中操作列都较多,一定程度上会影响性能。

四、其它更新

其它还有一些小更新如:

  1. 新增 Skeleton 组件

  2. Table 组件 中增加 columnResizable。



文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127450.html

相关文章

  • iView 近期更新,以及那些“不为人知”的故事

    ...risostomo 和 Xotic750 的贡献,iView 才得以越来越完善。 日期组件 DatePicker 的重构 首先是在 2.10.0 对日期组件 DatePicker 的重构。DatePicker 是 iView 48 个组件里最复杂的组件之一。复杂的功能使得代码逻辑非常重,在许多新特性的支持上...

    UsherChen 评论0 收藏0
  • 产品的金钥匙:一致性

    ...们前端与用户体验中心打造了U-Design组件规范平台https://udesign.ucloud.cn,帮助设计师与前端同学在设计开发工作中打造一致性的平台化产品,同时提高了协和配合的工作效率。 总结通过以上的分析介绍,我们现在也可以了解到...

    ernest.wang 评论0 收藏0
  • 阿里HBase的数据管道设施实践与演进

    ...什么功能? Bulkload使用的是一种新的结构LSM Tree进行写入更新,其结构如上图所示。使用Application code 进行数据写入,数据会被写入到MemStore,MemStore在HBase里是一个跳表,可以把它看成一个有序的列表,并不断往里面插入数据。...

    luxixing 评论0 收藏0
  • 阿里HBase的数据管道设施实践与演进

    ...什么功能? Bulkload使用的是一种新的结构LSM Tree进行写入更新,其结构如上图所示。使用Application code 进行数据写入,数据会被写入到MemStore,MemStore在HBase里是一个跳表,可以把它看成一个有序的列表,并不断往里面插入数据。...

    LMou 评论0 收藏0
  • Android开发辅助工具Pandora2.0发布

    ...求,经过一段时间的开发,近期Pandora2.0正式发布,此次更新主要包含了以下更改: 新特性 网络日志新增对Android默认URLConnection的支持; 新增Crash记录和查看的功能; 新增Activity历史栈记录的功能; 新增添加自定义快捷入口的...

    singerye 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<