Click up 任务展示列表页操作功能设计学习

164 阅读2分钟

本文仅用户个人学习记录使用,意在提高自己的交互设计,仅此而已,欢迎指正.

Click up 在展示任务的时候会给予用户多种选择方式,虽然展示的方式是多样的,但是对任务的操作行为却是一致的,而 任务的内容太多,而操作行为太多的时加上页面内容空间有限,这个时候就使用了高内聚的形式将功能集放在了一起,节约了空间,也统一了不同列表展示下功能集是放在一起的

学习截图

image.png

优点

  • 展示结构清晰
  • 将任务组的总共数量放到了任务组的右边,紧接着是操作当前任务组的功能集,然后是针对当前组 Add Task 的常用功能
  • 鼠标 hover 到对应的可交互元素上均有 hover 效果,暗示用户这是一个交互性操作
  • 将所有的功能集都使用 ... 提示符来引导用户进行操作 image.png
  • 对于每个任务组,均可以在外部快速对其进行 fold, unfold 操作,此外在 功能集中也进行了展示,当展开的时候可以 Collapse group, 当收缩 group 的时候可以 Expand group, 功能集中列举了对当前组常用的操作: 重命名、添加新状态,折叠/展开组(所有组),选择当前组的所有任务、隐藏当前的 status, 以及管理所有的 statuses
  • 针对于每个 task 也有对应的功能集:对当前任务重命名、添加该任务到其他地方、转换为列表/自任务、修改 Task 的类型、复制 当前的 Task等等

image.png

缺点

  • 列表组的功能集不应该有全局的 Add status, 因为这是一个让人困惑的设计,应该将其放到全局的功能集中

个人感悟

  • 当内容很多的时候,可以使用 more icon 来引导用户进行操作,常用的行为需要放到外部,来减少用户点击的操作
  • 当某个元素是可交互的,那么 hover 上去的时候一定要有效果!
  • 全局的 mutation 操作应该放到全局的功能集中,避免让用户感觉困扰