文件传输界面设计：Transferly的三种状态

Transferly的文件传输界面设计，用很少的元素区分添加、核对和等待。空状态是一块清楚的拖入区，加入文件后变成列表，下载时再突出进度。简洁感来自内容随阶段改变，而不只是删掉按钮。

初始页先让添加区域成为视觉落点

左侧三行品牌文字，右侧是一块圆角面板。文件符号与Drop files or folders位于面板中央，Files、Message和Password排在上方，上传下载方向按钮在右端。第一次看页面，就有一块可以开始操作的区域。

浅灰山景只出现在下部，亮度较低，文字与面板不直接叠在复杂山体上。它提供品牌气氛，又没有把工具做成必须先欣赏的全屏海报。

界达设计喜欢这里的任务聚合。文件、留言与密码属于同一次传输的内容，放在同一面板里比散落整页更容易建立关系。实际实现还可补上点击选取提示，以及当前方向的文字名称，方便不使用拖拽的人。

加入文件后，界面把核对信息逐行展开

深色状态的面板显示4 Files和总体积，下面依次列出文件与Assets文件夹。每行有类型图标、名称、大小和删除符号，Upload则在右上用红色强调。启动动作与内容核对没有混进一颗模糊的箭头。

列表是这一步的主角。文件名回答传什么，大小帮助理解总量，删除让误加内容有明确处理位置。背景山景也变暗，白灰文字在前，传输对象不会被风景吞掉。

计数里包含文件夹时，4 Files的含义需要更准确。可以写明顶层项目数，并让文件夹有包含内容的摘要。长文件名与同名文件还应保留查看路径的机会，核对身份不能只靠格式图标。

红色只集中在Upload与标志细节，删除符号没有同样的大色块。界面因此能够把“准备开始”放在前面，又留住修改清单的能力。删除后的总体积如何更新，是后续原型值得检查的关联状态。

等待页减少细项，远近读数各有位置

移动下载页上方写download，细进度条接在下面，传输体积与Cancel靠得很近。下方留给巨大的64%，一眼看状态，仔细看又能确认已传与总量。

同一次等待有两种尺度的表达：百分比适合快速扫视，体积适合核对数量。它们应该来自相同进度，并共同解释当前阶段。如果传输之后还有生成链接或处理文件的步骤，阶段名称也应继续变化。

这里没有加入大量转圈图标或反复宣传语，空白让状态显得稳定。菜单页仍保留New transfer、Security等方向，工具内容与辅助信息分开，移动端没有把桌面导航全部挤在顶部。

轻量界面需要把结果页也想完整

这组图展示了准备与进行中，未出现完成后的具体去向。继续设计时，上传结果可以解释链接生成、复制和分享，下载结果可以说明已完成内容与下一步。不能让一个100%承担所有状态的含义。

Cancel的后果也需要与实现能力对应：队列是否保留、部分文件是否成功、哪些项目可重试，都应该在相应状态中说清。它们不必挤进初始页，等动作发生时再给需要的信息即可。

这正是分阶段设计的好处。开始前少一些负担，核对时多一些对象信息，等待时突出读数，结束时把结果交代清楚。每一步简洁，整个过程也能被理解。