构建拖放UI

作者:丁晓峰  发布时间:2020-04-16 20:32:23

  在Web应用程序的上下文中,拖放操作使人们可以像在现实世界中一样直观地拾取和移动元素。这种拟态化使得具有拖放交互作用的用户界面易于使用。

  拟态是软件中的对象模仿其真实世界中对应对象的地方。

  尽管在交互看板列表上拖动数字卡可能没有明显的现实世界,但操作本身是人类所熟悉的,因此易于学习。

  现代拟态化是数字和工业设计交汇处的桥梁。它是关于在不牺牲可用性的情况下促进非传统设备的交互。它是在人类生理学的背景下丰富和激活现实世界的对象。

构建拖放UI

  尽管这些交互已成为Web上各种工具中的通用功能,但实际上很难构建它们。即使在使用开放源代码库的情况下,我自己制作时也会发现这一点。

  在本文中,我将介绍:设计注意事项:辅助功能等;React库:用于构建拖放UI的几个选项;响应迅速:在移动设备上拖放。

  1、拖放设计

  在研究不同的库以及实现拖放的技术方面之前,我建议从设计考虑开始。什么才是好的拖放?这里有几件事:

  无障碍

  对于传统的拖放库而言,可访问性对于拖放而言可能是一个挑战,它会跳过它:

  传统上,拖放交互仅是鼠标或触摸交互。

  如果用户不能使用他们的交互方法实际拖放,如何使它更容易?键盘交互是一个不错的选择,例如:按下空格键即可接听、使用箭头键移动选定的元素、再次使用空间放下。

  在没有先验知识的情况下,这个领域听起来很难实现。ARIA Live Regions是一个开始探索的好地方,它可以帮助您在拖放交互过程中交流操作,身份和状态。

  可访问拖放的4种主要模式

  可拖动表面

  拖动手柄是单击或触摸以拾取和移动项目的可拖动元素的区域。

  您也可以根本使用拖动手柄来提问。尽管在某些情况下有所帮助,但在其他情况下,实际上可能没有必要:对于通常不涉及拖放的组件,拖动手柄可帮助用户发现拖放作为可用操作。但是,在拖放始终是预期行为的情况下,则没有必要。

  概念示例

  这在概念中很明显。对于常规列表视图,存在很小的拖动手柄,但对于看板视图则不存在。在这种情况下,整个卡片成为可拖动表面。

  拖放状态

  您的用户如何知道何时开始拖动?状态的使用可能是一个很好的指标。要考虑的一些状态是:悬停时、按下时(或单击)、拖曳时、下降时。

  这些听起来很明显,但也取决于输入设备。例如,触摸设备上实际上没有悬停状态。

  2、拖放库

  有了现成的拖放库,您可能需要避免从头开始创建自己的库。但是,重要的是要注意开源库的局限性,导致它们无法用于您的设计。在这种情况下,从头开始实际上比尝试构建变通办法更快。

  例如,设计工具Marvel有一个独特的用例,其中组件在“Sections”之间垂直拖动,也水平拖动:

  这样的UI中的特定需求可能使它成为重新思考拖放操作的更好选择。

  现在您知道存在局限性,我将介绍我尝试过的库。这些只是React库,因为Letter是用React编写的:

  好处

  该库的好处是巨大的-它为您提供了上一节概述的各种设计方案。我认为,它的可访问性支持尤其使其与众不同:

  全面的键盘支持(重新排序,合并,在列表之间移动)

  键盘多拖动支持

  键盘自动滚动

  出色的屏幕阅读器支持

  当涉及到输入设备支持时,它也是无限的。

  缺点

  我以为它拥有一切,但是有一些限制,这意味着我无法使用此库:

  您不能有嵌套的容器,这意味着2个拖放列不能重叠。这使我的弹出菜单无法在库中使用。

  拖动过程中没有占位符

  如果这些缺点对您没有影响,请在此处尝试。

  反应平滑DnD

  不像React-Beautiful那样酷,但这是我目前所使用的。这是Kutlu Sahin的作品,它有很多优点:

  好处

  可自定义的放置占位符 -参见上方的蓝色虚线。对于组件的整体体验而言,这是一个很大的改进,因为毫无疑问,该组件将在哪里着陆。

  拖动速度较慢 -React-beautiful-dnd几乎过于敏感,因此很难在我的实现中将组件放置在正确的位置。该库感觉更加受控且较慢,对于大型组件而言效果更好。

  对重叠容器没有任何限制 -这解决了我在React-beautiful-dnd中遇到的问题。

  缺点

  没有提到React-Smooth-DnD的键盘支持或可访问性注意事项。现在众所周知,我们应该首先构建可访问性,而我在前面的部分中已对此进行了概述。从理论上讲,这很容易而且很明显,但是使用非常有限的时间和资源进行工作的现实意味着,很难单独处理拖放功能。为此,我必须依靠开源库。

  另一个值得一提的库是React-DnD。这是我使用过的第一个应用程序,当时Letter应用程序名为Email Otter。我发现添加动画时很难使用它,因此很早就切换到了React-beautiful-dnd。由于我对该库的了解有限,因此我将不对其进行详细介绍。

  库可以互换

  总的来说,可以说我经历了拖放式地狱,然后回到过去。

  所有这些拖放库的工作方式都相对相似,因此在它们之间进行交换并不是不可能的。React-beautiful-dnd和React-smooth-dnd都基于类似的概念-拖动容器和可放置项目,使React组件从高层实现类似。

  事后看来,在将它们烘焙到您的应用程序之前,绝对值得在CodeSandbox中使用它们。快速搜索可以为您提供React-beautiful-dnd,React-smooth-dnd以及其他任何内容的可编辑演示。研究您使用的任何库所需的数据结构,并确保您的应用程序结构可灵活切换。

  使其响应

  您永远不会知道有人在尝试您的应用时将使用哪种尺寸的屏幕或设备类型。如果他们使用移动设备,还需要考虑以下几点:

  拖动手柄大小:在触摸设备上,应该有拖动手柄吗?拖动手柄可用吗?

  触摸输入:触摸不同于鼠标单击。有不同的事件和状态,例如触摸与悬停。

  拖动表面:也许整个组件应该是可拖动的表面。如果是这样,是否应该有一个按钮来激活拖动模式?触摸组件拖动时,我们需要确保文本不会被错误突出显示。

  在以上三个方面中,我发现触摸输入是更具挑战性的方面之一。当用户触摸可拖动组件,然后滑动以移动它时,整个页面将随之滚动。因此,在拖动组件期间必须禁用本机触摸滚动。为此,React提供了一系列综合事件供我们使用(可能不希望使用pun):

  通过使用onTouchStart来检测用户何时按下了可拖动元素,可以在适当的时候禁用滚动。

  触摸时长

  但这还不是全部!您如何知道用户是否要滚动或拾取组件?为此,可以使用检测触摸持续时间:

  保持激活:如果用户触摸并按住可拖动组件上的相同位置,请激活拖动。

  滑动时忽略:如果触摸持续时间很短(例如滑动时间),我们可以猜测用户正在滚动。



转载请注明来自:http://www.dingxiaofeng.com/design/87.html

相关文章阅读

如何制作良好的UI演示视频、视频录制

如何使用设计思维来解决营销问题

平面设计简介以及基本结构单位

如何模拟UX编写

理想的设计工作流程

Top