代码之家 › 专栏 › 技术社区 › Keith Williams

如何直观地表示文件大小

usability user-interface

Keith Williams · 技术社区 · 15 年前

恐怕这有点主观,但我很重视集体的建议。

我们的web应用程序列出了用户可以下载的文档;标准的文件导航器内容:

Type   Name     Created       Size
-----------------------------------
PDF    Doc 1    01/04/2010    15 KB
PDF    Doc 2    01/04/2010    15 MB

目前我们将文件大小列为文本,但我希望通过某种方式显示 视觉上 不管文件是小的,普通的还是大的。

这样做的原因是,用户可以快速扫描列表并发现可能需要很长时间下载的文件。

我目前的选择是:

较大文件的字体大小较大(缺点:布局可能变得不整洁)
图标(像Wi-Fi信号强度指示器;缺点:难以扫描)
将所有大小都保留为KB,这样零的数目表示大小(缺点:用户必须计算出他们头脑中的“友好”大小)

我知道这是件小事,但我很感激大家对此事的看法!

编辑:谢谢你的回答!

从你所说的,我认为:

我真的很喜欢罗伯特告诉用户下载文件大概需要多长时间的想法
正如有人指出的,如果我使用一个条或“信号强度”图标,会给人一种“最大”文件大小的印象
我喜欢对文本进行着色-对于较大的文件,着色效果更强

我将采用组合方法:

统一字体大小
较大文件的深色文本
一个工具提示,告诉用户大约需要多长时间才能下载
一小段文字,放在括号内,大小写在后面,描述它有多大,例如:

15 KB (tiny)
2 MB (small)
20 MB (big)
300 MB (huge)

我来看看能不能在这里放一张截图,看看我有原型的时候它是什么样子的。再次感谢您的反馈!

8 回复 | 直到 15 年前

Robert Harvey 15 年前

如果是我,我会以通常的方式显示文件的大小,但也会显示估计的下载时间(假设1.5Mbit DSL用于计算)。

coolest_head 15 年前

一根长度取决于大小的酒吧怎么样?这类似于Wi-Fi信号图标的想法,但扫描会更容易。

随着长度的增加,颜色会从绿色开始变为红色。

Michael Zuschlag 15 年前

如果你有足够的空间,我会按照你的想法把所有的文件大小保持在一个固定的单位,这样数量级就由所占用的位置的数量来表示。使用右对齐的数字,这将使扫描特定数量级变得足够容易。

请记住,使用这种方法可以获得大约三个空间位置,因为您消除了units列,而将units放在file size列头中,所以这不会占用太多空间。若要节省更多空间,请考虑以MB为单位显示解析为0.1 MB的大小。对于今天的宽带下载持续时间,一旦你考虑到服务器响应时间和变化,任何低于0.1 MB的东西似乎都有相同的持续时间。它只需要加载一个新的网页,用户不需要估计时间。对于小于50KB的文件,可以将其写为低于0.1。如果你真的需要空间的话,也许分辨率达到1 MB就足够了。

文件大小的线性图形表示(例如条形图)更适合于评估相对下载时间。但是,当你的下载持续时间超过三个数量级时,我看不出它能很好地工作。用户可能希望区分5分钟和10分钟的下载,因此您需要一个视觉上明显的差异约2 MB。我想说,一个条形图至少需要3个像素(2 MB),这几乎排除了表示1 GB或更大文件的可能。

你可以尝试用单独的图形来线性表示GB、MB和KB,但这种显示可能是出了名的难以读取和难以扫描(例如,由于读取错误,多手高度表在飞机上已基本废弃)。除非你的用户接受过培训或有丰富的经验,否则我不会尝试类似的方法。

尝试使用图标、颜色、字体大小或符号数量对文件大小进行排序或分类是有问题的,除非您知道用户的正确断点。但是,您可能不知道,因为可接受持续时间的阈值将因用户、设备和情况(他们有多少时间)而变化。我不会对任何文件大小使用红色,除非您希望某些用户认为文件太大,下载可能会损坏他们的计算机或导致其他技术问题。

适合排名的代码,比如字体大小和符号数量,也可能会有问题,因为用户可能会假设它们与时间呈线性关系,而您可能需要使用对数转换。用常量单位写出大小并不存在这个问题,因为它清楚地表明,位置的数量与大小呈对数关系,即使对于不知道对数是什么的用户也是如此。如果你想尝试某种排序符号,我建议用三维实体的体积来表示大小(例如,各种大小的立方体)。这可能有助于用户理解一个步骤意味着尺寸非线性增加。当然,任何使用多个维度的图形编码都可能在表中出现行间距问题。

如果不能使用常量单位,那么图形化地区分kb、mb、gb符号是一个很好的选择。我考虑使用字体权重。它有些可扫描,但它的真正功能是增加用户注意到不同单位的机会,而不是帮助扫描特定大小范围的文件。如果用户无论如何都要下载文件,这是可以的,但只是希望能够计划下载时间。

实际上,如果任务真正是关于用户查找特定大小范围的文件,那么按文件大小排序或筛选列表(默认情况下或作为用户选项)可能是最好的解决方案。

Martin Beckett 15 年前

如果您只有一个范围步骤(即只有KB或MB,或只有MB或GB),那么我将使用大小+最低单位。例如15000KB,15KB。如果你必须这么做,KB,MB,GB,那就不行了。

在显示kb、mb、gb的大小之后使用简单的+++++++或$$$$$怎么样?

Matthias 15 年前

进度条样式的尺寸指示器怎么样?

另一种方法是灰度缩放:小文件浅灰色,大文件黑色。

Jules Olléon 15 年前

用颜色怎么样?类似于:

如果文件小于1MB,则为绿色
如果文件介于1MB和10MB之间,则为黄色
如果文件超过10MB,则为红色

或者任何其他适合你需要处理的文件的比例… 您可以将这些颜色放在描述文件的行的背景或文本颜色上,或者放在接近大小的图标上…

Craig Gidney Mihai 15 年前

做这件事的方法有很多,尽管对数刻度肯定是必要的。我建议使用一个字符更大的字段,每1000或1024次方的重复次数更多。这样地:

Type   Name     Created       Size
-------------------------------------
PDF    Doc 0    01/04/2010    15  B 
PDF    Doc 1    01/04/2010    15 KB .
PDF    Doc 2    01/04/2010    15 MB ::
PDF    Doc 3    01/04/2010    15 GB |||
PDF    Doc 4    01/04/2010    15 TB TTTT
PDF    Doc 5    01/04/2010    15 PB PPPPP
PDF    Doc 6    01/04/2010    15 EB EEEEEE

-1

Don 15 年前

我喜欢kb的想法b/c更大的数字会突出。然后设置限制并可能使用css颜色突出显示…绿色的时间越短,红色越深,时间越长,等等。