前言
小按钮大学问!
今天带大家解析“返回”与“关闭”按钮的合理运用,留心的朋友会发现微信的最新版本6.6.7有了很大的改变,其中跳转网页的“返回”与“关闭”按钮也做了更贴切的使用调整,这也是写这篇文章的原由,下面就分享几个案例,让你充分了解这两个按钮的使用奥妙!
案例分析
反例
在我的设计生涯中遇到过几次类似这样的产品,当我需要建立一个任务时,点击创建任务,左上角是个返回按钮,点击下一步,左上角依旧是返回按钮,最后一步时因为没带身份证无法提高身份证照片,所以需要退出,这时候左上角还是返回按钮,后来我点了三次“返回”按钮才退出了此次任务!
当时我就跟这个APP急眼了
暂且不说填写资料的体验上如何,就这个返回按钮用的真的真的很差劲!完全不符合产品逻辑!
下面就结合案例分析这个产品问题出在哪里,并找到合理解决方案,让你充分了解“返回”与“关闭”两个按钮的使用场景,保证让你豁然开朗、醍醐灌顶、茅塞顿开、恍然大悟等等!(词穷了!)
苹果iOS系统“信息”页面
iOS系统“信息”页面架构的“返回”与“关闭”按钮,当用户点击查看条目信息,左上角是“返回”按钮。
创建信息则没有“返回”按钮,而是右上角的“取消”按钮!(注:取消、关闭、X图标都是一个性质)
iOS“信息”页面这样设计的原因:
浏览信息,是一种随机浏览状态,查看后返回是种很自然的操作状态,属于非模态页面!
创建信息,是一种任务状态,需要创建或编辑,属于模态页面,“取消”更符合场景!
注:模态页面不一定都适用“取消”按钮,非模态也不一定都适用“返回”按钮,主要还是看产品架构。
知识拓展,为什么“取消”按钮不在页面的左上角而是右上角?
原因是操作惯性,创建信息图标按钮在右上角,取消也在右上角,这样不仅实现了惯性操作,而且也更容易记忆创建任务操作流程,同时也很好的区别了返回按钮。
通过上面案例的思考给出的优化方案!
改后(这样就不会急眼了)
微信6.6.7“返回”“关闭”的优化
旧版微信,当打开公众号一篇文章时,左上角是“返回”按钮。
新版则换成了“关闭”图标!
微信这次改版更贴近了产品的使用场景,因为点开一篇公众号文章时,其实已经跳出了微信的原生页面,换成了html页面。换一种说法就是已经进入了另一个模块中!所以关闭更适合!
这样的设计还解决了用户以往查看手机网页的一个痛点!
被我言中了记得文章末尾给点个赞!
若在文章中点击链接跳转了页面,旧版就会出现两个按钮!新版6.6.7则做出了一个合理的优化!
用户再也不用因为这两个按钮在一起,常常点错或点击前有思考犹豫了。
接下来在微信强大产品势能的带动下,可能会有更多的产品优化这方面交互!
微信6.6.7亮点功能
微信6.6.7版本的改版最大的亮点还是阅读文章与聊天场景交互的优化!
微信新版6.6.7功能
在旧版中同样的位置是“在聊天中置顶”,回到聊天页面会在顶上出现,若要关闭必须回到文章“取消置顶”,用起来有些许繁琐!
这次的优化是一次非常好的创新!
总结
“返回”按钮适用于一个模块中的页面跳转或随机浏览页面中运用!
“关闭”按钮适用于创建任务的模态页面,或者跳转到另一种形态或模块中!
其实在产品设计过程中只要多结合产品构架思考用户使用场景,就会很有效的避免很多问题!
最后希望这篇文章给你带来帮助,期待下一次与你分享更多的设计知识!
有料、有内涵、关注“互联网设计帮”,定期分享设计干货
长按下方二维码关注“互联网设计帮”
原文始发于微信公众号(互联网设计帮):“返回”与“关闭” 在APP中怎么合理的运用?微信这次改版好在哪里?
评论0