第37周+《交互设计 - 聊聊步骤条》+林灿业+新学霸社群

1、步骤条简介

        引导用户按照流程完成任务的导航条，可表示任务进度或步骤。

2、使用场景 

两种使用场景：表示任务进度或者步骤，并起到导航的作用。

2.1、进度条：表示某事务的进度，侧重于表现当前进度，如订单进度；

2.2、步骤条：将某个任务分解成由若干步骤组成的流程，表示该任务所处的步骤，侧重于表明操作步骤，通常带有“上一步”、“下一步”操作按钮，如资质认证等复杂任务；

3、理解与思考

        步骤条可表现当前任务的整体步骤，以及进度情况的组件，常用于比较复杂繁琐的任务，把任务分步进行，简化任务，也降低用户的畏难心理，反映任务进度，给足用户更多的心理预期。

        一个清晰完整的步骤条，应该可以使用不同的视觉元素，使得更清晰地表示过去、现在、将来，过去是指已经完成的动作，通常使用“对勾”表示；现在是指当前进行中的动作，通常高亮即可；未来是指即将要执行的动作，通常置灰即可，一个清晰完整的步骤条，如第2小节的图示。

        不清晰不完整的步骤条举例如下：

不完整的步骤条

4、小结

4.1 任务导航：清晰地体现任务的所有步骤，并清晰描述每个步骤，需要描述的内容如：动作描述、状态描述、时间描述、人物描述等；

4.2 视觉元素：需清晰地表示过去、现在、将来；

4.3 信息结构化：任务分步骤完成时，合理设计每个步骤的内容及界限。