E2.15.1click-and-drop file intake设计

需同时提供点击选择与拖入

别名: 文件拖放 · file picker · dropzone

概念解释

文件已经在用户的设备上,进入产品有两条惯用路径:打开系统选择器点选,或把图标拖进一块区域。点击与拖入并用(click-and-drop file intake)要求两条路都通到同一接收口。只做按钮的人,文件已在桌面摊开时还要再钻一层目录;只做拖放的人,在触屏、远程桌面、读屏器上会没有入口。它管的是文件如何被挑中,不是挑之前要不要告知格式限制,也不是传上去之后的进度。

机制

点选走的是系统文件对话框,擅长「我知道文件在哪个文件夹」。拖放走的是空间匹配,擅长「文件已经在眼前」。两条路径的用户状态不同,不能互相替代。拖放在桌面操作系统上几乎是反射,缺了它会被当成上传不好用;触屏和许多虚拟机没有可靠的拖入,缺了点击就完全不能传。接收口还要在拖入时给出「可以放这里」的表面变化,否则拖过页面却没有任何命中反馈,文件被系统当成在桌面内部移动。两条路径必须接受同一组文件类型,否则用户会以为拖放坏了。

边界

纯移动 App 往往只有系统文档选择器或拍照,拖入不是主通道,强做桌面式 dropzone 会空占一屏。企业环境禁用拖放(某些远程桌面、浏览器权限)时,点击必须单独可完成任务。多文件、文件夹拖入的行为要定义:是全部接收还是只收第一层文件,否则拖入路径会悄悄丢掉内容。键盘用户不拖,点击路径必须能从按钮或标签用回车打开选择器。

怎么落地

  • 在同一接收区同时放「选择文件」和可发现的拖放区,两条路径写入同一列表。
  • 拖文件经过时改变该区域外观,松手即加入,不要让拖放落到无反馈的页面空白上。
  • 触屏和键盘上保证点击路径完整可用,不要把拖放当成唯一入口。
  • 验证:从文件夹对话框选一份;从桌面拖一份;只靠键盘打开选择器。三条都要进同一队列。缺拖或缺点,就还在用单一通道冒充上传。

延伸

  • 同组E2.15.2 格式与大小限制需在选择前告知 · E2.15.3 上传进度与失败需可见可重试
  • 相邻E2.18 富文本编辑器 · E6.09 确定与不确定进度
  • 站内检索click-and-drop file intake · dropzone · file picker

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.15.1