什么是用于选择多个项目和执行操作的一些优秀的UX Web设计

时间:2017-10-05 21:06:22

标签: user-interface material-design user-experience

我正在重新设计Web界面,以提供与当前相同的功能,但通过良好的用户体验设计可以更轻松地使用。目前,设计如下:

Current Design

我不太担心豆腐的外观和感觉,这可能会在以后发生,我想首先确定UX功能。此选项卡中的想法是用户可以通过复选框选择项目并执行"我想要"下拉(根据操作打开不同的模态对话框)。列表中项目右侧的3点省略号允许用户通过另一个下拉控件执行相同的操作,并认为他们使用顶部下拉菜单对多个项目执行操作,省略号三点菜单一个项目。

此控件的令人讨厌的部分是列表可能包含数百个项目,并且复选框需要太多精确度才能快速检查。用户将按顺序选择他们想要执行操作的项目,然后必须向上滚动到页面顶部以选择操作。这可能是5秒的滚动,我觉得这是令人讨厌的。我想开发一个好的UX模式,以减少点击次数,滚动和挫败感提供相同的功能。

我的想法是提供一个浮动动作按钮。用户可以*某种方式*(我还没有想到一个想法,至少至少有一个更大的复选框)选择多个项目然后通过浮动操作按钮选择他们想要做的事情,该按钮总是在界限内屏幕而不是可怕的滚动回到顶部(我不认为"滚动到顶部"按钮是一个很好的解决方案)。

因此,我需要一些关于用户体验模式的建议或一些关于如何使这个过程对用户不那么令人沮丧的一般性建议。我现在是材料设计的粉丝,但我对任何建议持开放态度,材料设计指南似乎没有任何类似的范例。

2 个答案:

答案 0 :(得分:1)

我认为用户体验的步骤很顺利:首先选择它们,然后设置动作。

而不是只有一个复选框才能点击,每行的整个顶部都可以点击以选择项目。这样可以使用户更容易,而且无法点击复选框也不那么令人沮丧。

将标题固定在顶部对于添加“选择/取消全选”选项并使操作始终可用非常有用。如果您考虑长列表,添加搜索框到过滤器也是一个不错的选择。结合搜索框和“全选”选项可以帮助用户完成任务。

如果这是在该屏幕中要完成的最重要的操作,那么使“做什么”按钮脱颖而出将是一个好主意,区分用户要执行的主要选项和次要选项。

答案 1 :(得分:0)

我看到了两件简单的事情,你可以用很少的努力使它更有用。

  1. 删除复选框并使整行可以点亮,突出显示所选的那些。每行基本上都会成为复选框的标签,复选框本身将隐藏在视图之外。

  2. 当用户向下滚动时,
  3. Fix the header到浏览器窗口的顶部。