做产品，我为什么如此小题大做：一个向上的箭头，为什么让人看不懂？
我做了一个上传按钮，结果过了一段时间之后，再使用的时候，连自己都犹豫了一下。
这是上传，还是回到顶部？
事情发生在我打磨 FooCloud 的 iOS 客户端时。FooCloud 是一个文件同步产品，在浏览文件夹的页面里，用户可以把文件上传到当前目录。
当时，上传入口悬浮在页面右下角：一个蓝色圆形按钮，中间是一支白色的向上箭头。它很显眼。箭头画得也清楚。
但放在一张可以上下滚动的文件列表上，我看着它，脑子里冒出来的另一个解释是：点一下，回到列表顶部。
这就有意思了。功能是我自己知道的，疑问也是我自己产生的。
一个第一次打开这个页面的人，又有什么理由一定能猜对？
向上的箭头，只告诉了我“向上”。至于是让文件向上传，还是让页面向上滚，周围的环境也在参与解释。设计者脑子里那个明确的“上传”，到了界面上，可能只剩下一个方向。
这与图标可用性中的一个常见问题有关：人们理解图标时，会带入已有的使用经验。同一图形可以被认出来，具体动作却仍然含糊。Nielsen Norman Group 对这种歧义有过专门讨论，也建议用可见文字帮助澄清含义。关于图标可用性
重新看这个按钮，我觉得自己遗漏了一件事：我知道它能做什么，用户只能根据它看起来像什么来判断。
于是，我把上传入口移到了页面右上角，放在“新建文件夹”旁边，并把单独的向上箭头换成了“托盘＋向上箭头”。
图 1：依据旧版与当前实现绘制的概念示意，非产品截图。文件名为示例。
托盘给箭头补了一点含义，位置又补了一点。
新建文件夹和上传文件，都在往当前目录里添加内容。把这两个动作放在一起，我希望用户更容易将它们理解成“对这个目录可以做的事情”。上传入口有了一个可以借助的邻居，也有了更明确的操作范围。
图标的含义，也写在它的位置和邻居里。
改到这里，好像可以结束了。但我接着问了两个问题：图标风格跟新建文件夹一致了吗？两个按钮之间的空白，是不是又太宽了？
一个按钮挪了位置，还要管旁边那点空白，确实有点小题大做。
不过，空白会影响我们怎么理解关系。
格式塔的邻近原则讲的就是这件事：距离近的元素，更容易被看成一组；距离拉开，关系也容易被读得更疏远。关于邻近原则
如果上传和新建文件夹本来就属于同一组目录操作，却在视觉上各占一边，那这层关系便需要用户自己补上。将间距收紧一点，两个按钮就能一起表达“这里是一组操作”。
图 2：用于解释邻近原则的布局对照。左侧为讨论用方案，右侧示意当前分组结构；不表示两个历史版本的精确截图。
风格也是一样。假如上传按钮保留很重的实心底和阴影，旁边的新建文件夹却只是一个轻巧的线条图标，即使挨在一起，它们也会显得不在同一个层级。
格式塔的相似原则提醒我们，相近的颜色、形状或大小也会提示元素之间的关联。关于相似原则
现在这两个入口使用一致的线条风格和主题色。再配合距离，它们可以共同表达关系。至于某个操作是否应该格外突出，则需要另外判断它在当前任务里有多重要。
还有一个细节：靠近，不等于把按钮缩得很小。
这次收紧的是两个按钮之间额外的空白，每个按钮仍保留了 44×44 pt 的点击区域。图标只占其中一部分，周围看起来空着的位置，也可以点。
图 3：虚线框用于说明点击范围，实际界面不显示这些边框；示意图已放大。
我希望它们看起来是一组，同时让每个动作都容易操作。视觉上紧凑，和手指有没有足够的点击空间，需要一起考虑。
当然，这个调整也有代价。
把入口移到右上角，单手使用时可能要伸得更远；使用图标节省了空间，也仍然要求用户理解图形。如果还会产生误解，增加“上传”文字就是值得继续考虑的方向。换了位置和图标，并不能替我保证每个人都看得懂。
但这次调整让我更清楚地看到：打磨一个按钮，需要把图形、位置、邻近关系和点击范围放在一起看。它们共同组成了用户眼前的提示。
我愿意在这些地方多花一点时间。因为用户打开产品时，通常有自己的事情要做：找一个文件，上传一份资料，新建一个文件夹。
我希望他把注意力留给这些事情。
至于这个向上的箭头究竟是什么意思，做产品的人应该先替他多想一步。