小按钮大学问：“返回”与“关闭”按钮的合理运用

　　小按钮大学问：“返回”与“关闭”按钮的合理运用

　　前言

　　小按钮大学要求

　　今天就带大家分析一下“返回”和“关闭”按钮的合理使用。细心的朋友会发现，最新版的微信6.6.7变化很大，包括重定向网页的“返回”。 “关闭”按钮的使用也进行了更适当的调整。这就是写这篇文章的原因。下面通过几个案例，让你全面了解这两个按钮的使用奥妙。

　　案例分析

　　反例

　　在我的设计生涯中，我曾多次遇到过这样的产品。当我需要创建任务时，点击创建任务，左上角是一个返回按钮，点击下一步，左上角仍然是返回按钮，最后一步当时没有我的*敏*感*词*照片无法改进ID，所以我需要退出。这时候，左上角还有返回键。后来，我点击了三下“返回”按钮退出了任务。

　　当时，我对这个应用感到焦虑。

　　暂且不说填写信息的经验，这个返回键的使用真的是很糟糕！完全不符合产品逻辑！

　　用一个案例分析产品问题，找到合理的解决方案，让您全面了解“返回”和“关闭”按钮的使用场景，保证让您豁然开朗、豁然开朗、目瞪口呆突然意识到，等等。 （可怜的词！）

　　苹果iOS系统“信息”页面

　　iOS系统“信息”页面结构中的“返回”和“关闭”按钮。当用户点击查看商品信息时，“返回”按钮在左上角。

　　创建消息时，没有“返回”按钮，而是右上角的“取消”按钮。 （注意：取消、关闭和X图标都是同一个性质）

　　iOS“信息”页面之所以设计成这样：

　　浏览信息为随机浏览状态，查看后返回为自然操作状态，为非模态页面。

　　创建信息是需要创建或编辑的任务状态。它属于模态页面。 “取消”更适合场景。

　　注意：“取消”按钮可能并不总是适用于模态页面，“返回”按钮可能并不总是适用于非模态页面。主要取决于产品架构。

　　知识拓展，为什么“取消”按钮不是在页面的左上角而是在右上角？

　　原因是操作惯性。创建信息图标按钮在右上角，取消也在右上角。这样不仅实现了惯性操作，而且更容易记住创建任务的操作过程，还区分了返回按钮。

　　以上案例的思考给出的优化方案。

　　改变之后（这样就不会着急了）

　　微信6.6.7“返回”和“关闭”优化

　　在旧版微信中，在公众号打开文章文章时，左上角有一个“返回”按钮。

　　新版本替换为“关闭”图标

　　微信这次改版更贴近产品的使用场景，因为当我点击公众号文章的时候，其实是跳出了微信原生页面，换成了一个html页面。也就是说，它进入了另一个模块。所以关闭更合适。

　　这个设计也解决了过去用户浏览移动网页的痛点！

　　最后想起文章给我点个赞！

　　如果点击文章中的链接跳转到页面，老版本会出现两个按钮。新版本6.6.7做了合理的优化。

　　用户不再需要点击错误的按钮或在点击之前犹豫，因为这两个按钮是在一起的。

　　接下来，在微信强大的产品潜力的驱动下，这方面的交互可能会有更多的产品优化。

　　微信6.6.7 亮点功能

　　微信6.6.7版本改版最大的亮点是优化了阅读文章与聊天场景的交互。

　　微信新版6.6.7功能

　　在旧版本中，同样的位置是“聊天置顶”，返回聊天页面时会出现在顶部。如果要关闭，必须回到文章“取消到顶部”，使用起来有点麻烦。

　　这个优化是一个非常好的创新。

　　总结

　　“返回”按钮适用于模块中的页面跳转或页面的随机浏览。

　　“关闭”按钮适用于创建任务的模态页面，或跳转到另一个表单或模块。

　　其实在产品设计过程中，只要结合产品结构去考虑用户的使用场景，很多问题都会得到有效避免。

　　最后希望这个文章能帮到你，期待下次与你分享更多的设计知识！

　　有素材，有内涵，关注“互联网设计帮助”，定期分享设计干货