进度条的首要任务是解释“正在做什么、完成多少、接下来能做什么”，不是让一条彩色横线持续移动。只有总量和已完成量可测时才适合显示百分比；未知时长的处理任务需要另一种表达。
等待过程需要连同取消与完成一起评审。用Pixso的原型评审能力串联处理中的页面与结果页，能提前讨论用户是否知道任务还在运行。
1. 什么是进度条设计？
进度条是一种用于指示任务进度的可视化工具。它能帮助用户了解他们当前任务的进度，包括已完成的部分和尚未完成的部分。可测的进度能反映已完成比例，但比例本身不能保证剩余时间准确。例如，在下载文件或上传照片时，UI进度条会展示这个过程的进行情况，帮助用户判断传输是否在继续；速度变化时，剩余时间只能作为估算。
UI进度条设计在提升用户体验上发挥着极其重要的作用。以下是几点理由：
-
提供可视化反馈：当用户执行一个任务时，他们期待得到一些反馈，以确认他们的操作已被系统接收并在处理中。如果没有适当的反馈，用户可能会感到困惑和不安。UI进度条可以提供直观的反馈，告诉用户他们的任务正在进行。
-
管理用户期望：通过显示任务的进度，UI进度条有助于设定和管理用户对任务完成所需时间的期望。如果没有进度指示，用户可能会对等待时间产生误解或焦虑。
-
提升用户满意度：良好的UI进度条设计可以增加用户在使用应用程序或网站时的满意度。当用户看到他们的任务正在稳步进行，并且可以预见完成时刻，他们就会感到满足和高兴。
2. 进度条设计技巧
2.1 清晰的反馈机制
UI进度条的最重要任务是为用户提供清晰的反馈，以便他们了解当前任务的完成程度。采用直观的标签、百分比或其他可视化元素，使用户可以轻松识别任务的进行状态。这有助于建立用户对应用程序的信任度，并让他们感到更有控制权和参与感。
2.2 利用动画效果
动画是一种强力的吸引用户注意力的手段。通过运用渐变、平滑过渡等动态效果，使进度条显得更富有生命力。这不仅提升了用户体验，而且让进度的变化更为直观，用户可以更自然地感知任务的进行情况。
2.3 适配用户期望的颜色搭配
在UI设计中，色彩运用极为关键。利用颜色来传递信息，例如用不同样式区分完成、警告与错误，同时显示文字或图标。保持颜色使用的连贯性，并确保选择的颜色与应用程序的整体风格相配。同时，为考虑色盲用户，必须保证颜色的选择不会引起信息混淆。
2.4 提供额外信息
除了基本的进度数据外，可以考虑向用户提供额外的信息，比如预估剩余时间、已完成步骤数量等。这有助于用户更深入地理解任务的复杂性，并提高他们对整个过程的认知水平。
2.5 考虑取消操作
用户喜欢掌控权。在设计考虑到长时间运行任务时，设立取消功能的选项是非常好的实践。这样的设计能提升用户的信任度及满意度。
2.6 注重无障碍性
一流的UI设计必须照顾到所有用户，包括残障用户。使用合适的标签、提示信息以及屏幕阅读器友好的设计，检查进度条在不同使用方式下是否可访问。
2.7 扁平化设计的简洁之美
进度信息应优先保持清楚、简洁。简化界面元素，使其看上去清晰、简洁。避免过度装饰，使用户能更专注于进度的跟踪。
2.8 考虑不同设备的适应性
如今的用户通过多种设备接触应用程序，因此进度条必须能够在各种屏幕大小和设备上正常显示。需要确保设计具备响应性，能够适应各种屏幕大小和方向。
2.9 增加交互性
圆形步骤和横向步骤条都表达流程位置；它们可以作为导航的前提，是对应步骤允许返回，而不是后台进度可以被任意跳过。
如果显示的是用户可以返回修改的表单步骤，可以提供步骤导航；文件上传或后台处理的完成比例不是导航，不能让用户点击某个位置就跳到尚未完成的阶段。
2.10 测试与迭代
同样重要的一点是，进行严格的测试并根据用户反馈进行迭代。持续优化你的UI设计，确保它能在各种使用场景下提供优秀的用户体验。
上传完成，不代表文件已经可以使用
假设用户上传一段视频，系统还要完成处理。上传阶段可以显示已传输字节对应的百分比；进入处理阶段，如果没有可靠总量，就显示“视频处理中”与持续进行的反馈，而不是让同一百分比从100%突然退回0%。只有结果已可访问时，才显示“处理完成”并提供打开入口。
如果必须合并展示总进度，应先定义各阶段的实际权重与测量方法，不要为了视觉匀速任意分配百分比。Carbon进度条指南区分可确定进度与未知完成量的进度表达。信息不足时诚实说明当前阶段，比长期停在99%更容易理解。
退款也不宜按等待时长虚构百分比，界面可以用阶段和结果说明 退款处理中、失败与到账的区别，避免把处理成功直接写成资金已经到账。
取消任务、关闭面板、失败重试是三件事
关闭进度面板可以只隐藏界面；取消任务则需要服务端确认停止。如果任务仍在排队或处理中，按钮可先进入“正在取消”，等到结果明确后再显示“已取消”。取消失败时保留任务入口，不能让用户以为工作已经停止。
失败重试也应明确范围：是重传整个文件，还是只重做处理阶段。保留文件名、失败原因和可继续的动作，避免一句“出错了”后让用户重新找文件。跨页面运行、排队和下载过期的具体流程，可继续看异步导出任务的状态与恢复设计。
进度播报不必追随每个细小百分比变化；开始、阶段变化、失败与完成更值得突出。移动端要让任务名称、当前状态和取消入口都读得清楚，避免动画占满空间而把关键动作挤到屏幕外。
3. 在线设计进度条
Pixso可用于绘制进度条、整理状态并连接原型页面。先把上传、处理、完成和失败各画一版，再让团队按同一个任务走完；设计文件中的动画不等于后台任务已经实现。
可以打开Pixso绘制这组任务状态，从现有组件样式出发补齐每一个结果。
-
进度条组件参考：Pixso资源社区提供进度相关设计素材，可先查看资源详情，再按任务的取值和状态修改。
-
优化你的设计流程：在Pixso，您可以创建，分享和测试您的进度条设计，所有的这些都可以在同一个平台上完成。你不再需要在各种不同的软件间切换以完成你的工作。这无疑会大大提高您的效率，让你能够更快速地进行设计迭代。
-
卓越的协作体验：与许多其他设计工具相比，Pixso提供了卓越的合作体验。无论你们团队的成员身处何处，只要有互联网连接，他们就可以实时参与到项目中来。在这个平台上，团队成员可以共享文件，评论，甚至同时编辑同一个文件。这使得沟通和协作变得非常简单。
-
强大而直观的设计工具：Pixso拥有一套强大而直观的设计工具。无论您是想要设计一个简单的线性进度条还是一个复杂的圆形进度条，Pixso都可以让您毫不费力地完成。而且，您也可以利用其内置的库来快速选择和修改预设样式。
