交互

Teambition和百度网盘的交互细节对比分析

5247

前段时间为公司的后台系统做了文件管理的功能，调研了百度网盘、Teambition、Dropbox和360云盘的相关功能和细节交互。下面以Teambition和百度网盘为主要调研对象（针对网页端），并结合我们公司自己的文件管理系统加以分析。希望小伙伴们将来设计文件管理系统时这篇文章能够给你带来帮助。

不同产品根据用户需求场景的不同，文件管理系统功能多少会有差异，一般都会具备“新建文件夹、上传、下载、重命名、移动、复制文件/文件夹、复制文件/文件夹链接、删除、回收站以及权限管理”这些功能。

1.新建文件夹

Teambition点击新建文件夹，文件夹名字为空，并有浅灰色文字提示“按Enter新建文件夹”，操作后发现除按Enter完成新建，还可点击其他区域完成确认操作。百度网盘默认文件夹名称为“新建文件夹”，且名称为选中状态，输入框后跟随对勾和叉号按钮，代表确认和取消，只有点击这两个按钮操作才能成功，没有其他快捷操作。细想新建文件夹的操作其实与电脑上新建文件夹的操作功能一致，用户既然使用电脑便对电脑的交互已经产生使用习惯，新建文件夹的交互可以和电脑保持一致，文件夹默认一个名称，如“新建文件夹”，按回车或点击其他区域完成创建动作。另外如果文件名为空文件夹不能创建成功。

▲Teambition

▲百度网盘

2.上传

①上传功能按交互分为点击按钮上传和拖拽上传，按功能又分为上传文件和上传文件夹。拖拽上传两个功能可一起操作，这里不做过多赘述，重点分析点击按钮上传。在网页端这两个功能必须分开操作，不能一次性选择，问过开发，这属于技术问题。Teambition采用的交互是，点击上传按钮默认上传文件，“上传”按钮旁边有一个代表下拉功能的小箭头，点击箭头出现下拉选项“上传文件”和“上传文件夹”。百度网盘采用的交互是只显示出了上传功能按钮，鼠标悬浮时出现下拉选项。Teambition的弊端在于用户需要上传文件夹时需要先点击下拉按钮，再点击上传文件夹，产生两部操作，而百度网盘只需一步。这个交互细节影响不大，用户一般都使用拖拽到指定区域上传，点击按钮上传相比使用率较低。个人认为这个功能可在百度网盘交互的基础上，在上传二字旁边加一个下拉箭头，整个操作区域为蓝色按钮，会更加清晰直观。

▲Teambition

▲百度网盘

②上传列表

上传列表只讨论一个问题，上传过程中如果点击右上角的关闭按钮（也就是整个上传列表的关闭按钮），已经上传成功的文件应不应该在用户的文件系统列表中展示。Teambition和百度网盘采取了截然不同的两种处理方式，Teambition的文件中不会产生刚才上传成功的文件，百度网盘则相反。分析用户场景，为什么用户点击整个列表的取消按钮，而不是取消其中的一两个文件，说明用户是对所有文件都不想上传了，比如发现上传的文件夹选错了，或者上传错了地方，或者网速太慢不想上传了，既然点击的是整个列表的取消按钮，就说明针对的是所有文件，故在上传列表中上传成功的文件也不应该出现在用户的文件系统中。

另：文件夹套文件夹的上传，上传列表只展示文件，但上传成功后在用户的文件系统还是以文件夹套文件夹的形式存在。

▲百度网盘

3.下载

下载一般不需要设计，是浏览器自身的功能，但是针对我们团队产生的问题还是有个小细节要说。下载分单个文件下载和多个文件或文件夹的下载，我们的开发完成后，在进行UI测试时发现不管是哪种情况，开发做的都是以压缩包的格式呈现，其实对单个文件来说，压缩包的形式属于画蛇添足，用户还要多一步解压的操作。所以单个文件下载完成以文件本身的格式展现就可以了。

下载单个文件——文件本身

下载多个文件或文件夹——压缩包

4.重命名

Teambition重命名只显示文件的名称，不显示后缀名，百度网盘显示文件名也显示后缀名，文件名默认为选中状态，确认取消交互同新建文件夹，这里不再做说明，只讨论名称的显示方式。在文件管理系统中修改后缀名的需求很少，即便要修改可以下载到电脑再修改，比如是电脑不能识别的格式等情况，如果在文件管理系统中用户修改了后缀名很容易造成文件不能被识别，所以重命名时可只显示文件名称就可以了，文件名称为全部选中的状态，更利于用户的操作。

▲Teambition

▲百度网盘

注：百度网盘重命名时输入框长度太短，显示的名字的字符数很少，如图和未编辑状态相比长度缩短了一半，浪费空间也不好用。

重命名时如果该名称已经存在，Teambition会出现名称一样的文件，百度网盘以在名称后添加序号如（1）的形式处理。

▲百度网盘

5.移动

在展现形式上Teambition和苹果电脑分栏展示的形式相同，用户使用时会更加直观，百度网盘采用的是比较传统的树形控件。移动需要注意的是文件夹移动时不能移动到自身的文件夹，Teambition把这种文件夹做了置灰不可点击的处理，百度网盘是在用户选择了自身文件夹后提示“不能将文件移动到自身或其子目录下”，高下立判。

注：移动或复制文件夹时在弹窗选择的页面都会有新建文件夹的功能。

▲Teambition

▲百度网盘

移动成功后Teambition不仅显示移动文件数目，移动至的文件夹也会展示，并且可以点击跳转至该文件夹，百度网盘只是做了移动成功的提示。

▲Teambition

▲百度网盘

6.复制

Teambition和百度网盘的文件和文件夹不能复制到当前所在级别中，Dropbox可以，关于这一点我觉得差别不是很大，可根据本身系统需求进行设计。

7.复制文件/文件夹链接

复制链接的功能很好用，比如团队内部协作时对于上传的文件可以复制链接发给需要的小伙伴，有些系统有权限设置还可以分享给外部用户。

8.删除和回收站

Teambition的回收站藏的很深，用户在删除操作后的提示会显示回收站的位置，百度网盘只有删除成功的提示，因为百度网盘的回收站和文件在一个层级，用户不存在找不到回收站的情况。当时在想Teambition为什么不把查看回收站也做成可点击的状态，和移动、复制后的操作提醒保持一致，思考后认为用户删除文件后一般不会伴随查看的操作，而且查看回收站是一个比较低频的操作需求。

▲Teambition

▲百度网盘

另外Teambition的回收站文件和文件夹是分开的，其实字段既然都相同，放在一起未尝不可，而且用户在回收站会按时间顺序进行查找，同时删除了文件和文件夹，在回收站要在两个列表查找两次未免有些麻烦。我们的开发反馈给我的信息是文件和文件夹分开放比较容易实现，放在一个列表会麻烦一些，不知道Teambition的处理方式有没有这方面的原因。

百度网盘的回收站两个操作按钮只有图标，没有文字的解释，虽然大部分用户对这两个图标的含义已经很熟知了，但还是要考虑到小部分用户，要把用户当傻瓜对待，这里可以和“全部文件”里的交互保持一致，鼠标悬浮时出现这个按钮的名称。

▲Teambition

▲百度网盘

9.权限管理

权限管理各公司根据需求不同功能也会有差异，这里只提一点，设置了权限的文件应和未设置的做以区分，常见的操作是加了权限的文件会添加一个小锁的图标。

10.其他细节

①.关于不同文件类型的图标展示

一般文件系统涉及到的图标有文件夹，Word 文档，Excel 表格，PPT，PDF，图片，视频，音频，压缩及其他格式文件。这里着重讨论图片格式文件的图标，百度网盘采用了和其他格式一样的形式，用了一个图标代替，而Teambition则是显示图片缩略图，用户通过缩略图可以对文件进行判断。从开发角度，显示缩略图比统一用一个图标要麻烦很多。

②.文件名的展示

因为文件名的长度有限定，所以会存在显示不全的情况，关于文件名的展示不建议省略最后面，如“ui首页界面第一版的最终…”，比较好的方式是省略文件名的其中一部分，最后展示出格式的后缀，如“ui首页界面第一版的…版本.jpg”。Teambition和百度网盘对所有的文件名做了鼠标悬浮展示文件名的样式，Dropbox只对文件名展示不全的情况做了悬浮展示的效果。我最开始的想法是名字能够展示全没必要再做鼠标悬浮的名称展示，后来考虑到鼠标悬浮再次出现文件名会令用户更确认当前所操作的文件是哪个，反馈效果会更好。

▲Teambition

▲百度网盘

③.可操作区域

Teambition的点击区域是一条，百度网盘必须要点击文件名，对于文件名比较简短的点击区域太小，不方便。

④.文件夹的颜色的更改（标记）

Teambition可对文件夹的颜色进行更改，相当于一个标记的功能。这里提一下有道云笔记，因为我个人很喜欢用有道云笔记，但是在使用过程中发现有一点不方便，由于我的文件夹分类比较多，个别一两个文件夹想做区分处理以便更容易查找，但是没有这种功能，建议可增加类似Teambition更改文件夹颜色的设置，或苹果电脑对文件进行颜色区分标记的功能。