关于“下一步”按钮的设计思考

2015.11.13

用户使用App的过程中，会进入到各种页面中，在页面之间的跳转过程，返回上一页面普遍需要用户主动点击来实现，实现的载体是【<返回】或者物理键来回溯到上一级页面；而进入下一页面则是由用户主动操作或者页面逻辑跳转来实现的，进入下一级页面的入口，一般是各种操作按钮、缩略图、文字引导入口、tab或者导航切换。在工具性产品中，用户往往需要持续完成某项操作而达到使用目的，例如图片美化或者 视频美化操作，需要调整画面质量，增加标签、字幕、音效等操作，不同的编辑功能，必然需要用户不断进入新页面进行操作。这些功能操作给用户提供了实现自己创意的方法。

用户花费时间和心思去处理页面内容以期达到期望结果，繁复的功能随之不断在主流程之上增加，各种页面不断堆积在产品之上，造成整个操作流程的混乱与臃肿。如果产品设计初期，架构以及交互逻辑未梳理清晰的话，新增功能往往会在不经意间影响产品架构和整体的操作流畅性。

本文主要总结的页面中【取消】【下一步】【完成】【保存】等类似连接性或结束按钮在设计中的使用方式，帮助将各个页面间的操作合理贯穿起来。这些按钮都有对当前操作终止的意义，但是能够终止的范围有所差异，其中，【完成】按钮的普遍性更大，表意终止的范围更大。

对比分析是最显著而好用的说明方式。这些功能性按钮除了在按钮样式上能够给人以可点击的认知以外，文案本身的隐喻含义对操作也会产生影响。

 

在一段完整的操作流程中，不同的按钮适用于不同的流程之内，如下图所示：

                                              

贯穿工具类app的主要操作流程中，可通过【下一步】连接，在流程结束后，点击完成作为结束，后续的可能就是分享或者上传操作；而在主流程中延伸的子流程，则需要一些【保存】来确认对一小部分结果进行确认。以美拍拍摄上传功能为例：

美拍的主要拍摄流程主要为拍摄-滤镜特效-（添加音乐）-上传流程，其中，拍摄/添加滤镜/mv为核心操作流程，拍摄操作为取消按钮，取消当前操作可直接退出当前的拍摄上传操作，拍摄页面的【√】则表示“完成”的含义，表明一个小范围内的主要操作完成；对添加滤镜流程，则是主要美化流程，是与整个产品逻辑一致的，因此使用的是【下一步】按钮；在这个美化过程中，一个次要权重的添加音乐作为一个子流程，入口出现在了滤镜页面中，因此在添加音乐页面中，使用了【完成】按钮作为一个一个子流程的结束；在结束页面中的【分享】按钮，则是对当前操作的一个结束，同时开启下一个入口。

使用【保存】按钮的产品，最显著的是Snapeed。作为一款很牛叉的图片优化的app，Snapseed的操作界面用户在每一步的操作都会有一个记录，保存确认后能够确保当前任务不会丢失。每一次的修改，都会将自己的内容进行重新编辑，同时有可以看到自己的修改记录，可随时返回之前的操作，这是比肩ps的强大功能，也是一般的app没做到的，尽管技术上没什么问题。

 

这些按钮更经常出现在工具性产品中，一些影音、娱乐、电商等产品，仅在使用编辑操作时涉及到，在浏览操作时时不会出现的。因为浏览的操作更多地是在一个展示层级上，强调的是逻辑横向的扩展性，尽管可能架构层级很深，但是实际上的操作逻辑没有纵深性，依旧是横向上的不断扩展和丰富；下一步按钮则一定与纵向的逻辑延伸有关，具有一个明确或者模糊的目标且一定会达到。

另外，除非整个操作具有很强的流畅性和一致性，或者用户对产品早已存在认知，取消按钮建议使用文字表示，纯icon样式用户的感知度较低。