服务粉丝

我们一直在努力
当前位置:首页 > 财经 >

返回、关闭和取消的用法

日期: 来源:Echo的设计笔记收集编辑:Echo

欢迎关注团队号:


当进入新页面时,回到上一级页面的操作会使用「返回」、「关闭」或者是「取消」。他们看起来相似,但实际使用上有明显的区别。

今天来聊一聊「返回」、「关闭」和「取消」在实际设计中的用法。


本文大纲如下:

1、返回

2、关闭

3、取消

4、总结


1、返回

如下图在微信App-我tab页,点击列表(卡包)进入下一页,新页面(卡包)从右往左出现,这时候导航栏左侧是返回图标。


上述案例,几乎所有的页面返回都符合这个规律,可以简单总结下:如果下一级页面从右往左移动,这时候使用「返回」。

从右往左移动,然后通过「返回」,原路回去,符合交互行为逻辑。


2、关闭

如下图,发朋友圈,点击「从手机相册选择」,这时候新页面从屏幕底部出现,导航栏左侧为「关闭」。

之前版本微信从相册中选取照片,使用的是「取消」,后面版本改为了关闭,如下图所示:
有些时候「关闭」和「取消」可混用。
facebook发布动态,页面从底部出现,使用的也是「关闭」。
对于页面临时从底部覆盖上一级页面,且是完全覆盖,这种情况不应该使用返回,可使用「关闭」。
用户点击链接,通过微信内置的浏览器打开,页面从右边往左移动打开,这时候导航栏为「关闭」操作。这似乎不符合上述结论。

出现这种情况的原因是:关闭操作承接的任务是关闭整个网站(程序),而不是回到该网站(程序)的上一级页面。
如果出现的新页面是一个系统,这时候需要使用关闭(即使新页面从右往左移动出现)。
对于底部浮层面板,符合上述规则,基本都是使用「关闭」,如下图所示:
支付宝充值提现,选择银行卡时,浮层面板从底部出现,使用返回,不符合交互动效,这种做法不对,如下图所示:

3、取消
「关闭」和「取消」区别不大,都是结束当前页。很多情况下可混用。
当含有「取消」按钮,通常页面有需要一些填写的表单,如下图iOS邮箱所示:

目前我理解比较大的区别是:「取消」多适用于填写较多的表单的临时覆盖页面。如下图发布朋友圈所示:
上图中,涉及到取消的位置,几乎所有的取消都在左侧。取消等同于关闭、回到上一级页面的动作,位置上布局逻辑统一。
当然也有例外,如搜索的「取消」则在右边:
几乎主流的产品和iOS系统搜索,都将「取消」放在右边。可能是为了布局的合理性,如果从逻辑上很难解释这个现象。

4、总结
「返回」、「关闭」和「取消」三个的用法总结:
1、新一级页面从右到左移动转场用「返回」;
2、新页面从底部出现覆盖当前界面,可使用「取消」或者「关闭」,这部分没有明确的对与错;
3、当新页面从底部出现覆盖当前界面,需要填写较多表单内容时,使用「取消」居多。
4、进入一个全新的系统,即使新页面从右往左出现,也应该使用去「关闭」,而不应该使用「返回」。



公众号资源库升级
公众号资源库迎来大更新,资源链接均为阿里云盘,不用担心下载被限速。
回复以下关键词获得对应的资源:

相关阅读

  • 又双发了一个公测

  • 大家好,iOS 前两天发布了 3.0.12 版本,但是由于对统计页一些控件进行调整,导致出现BUG,在自定义日期时,统计页面数据加载异常,现在已经修复,预计明天可以通过 AppStore 审核(版本号
  • 浅谈UI设计中的“向右小箭头”

  • 前言相信UI设计师对“向右小箭头”都不陌生,甚至可以说非常熟悉。它的应用场景很广,最常见于各种列表。但它所代表的含义,以及相应的作用,很少被梳理。最近在工作中正好遇到一个
  • 新的设计故事,从这个符号开始

  • #01项目开展近些日子,智行火车票客户端正在准备全新的视觉升级。而作为这次升级的重要分支:UI品牌符号,承载了传递品牌感知,打造产品差异化的重要作用。我们希望符号展现什么?1
  • 1.61版本开发中!

  • 亲爱的新老用户大家好!新的一年已过去1/12了,今年小A 会有一个新的开始,应大家强烈要求需要安卓版本,目前已安排安卓版本的开发,如果不出意外的话会尽快上线!请大家耐心等待,谢谢大
  • B端思路分享|表盘页面的布局重构方法

  • 表盘页面设计是我们做B端界面设计会做的第一种界面,也是网上 B 端飞机稿做的最多的类型。在一个项目中,表盘页面决定了该项目视觉观感的上限,也是作品集里展示项目中最重要的页
  • B端视觉 | 项目里全是表格页该怎么做加分设计?

  • 表格页面是B端项目中最重要的页面类型,所以我们在前面分享了不少关于表格相关的规范和设计思路。案例解析 | 10个表格加分项设计(加了亿点点细节年前最后一篇长干货,B端表格规
  • 眼动实验搞不定?这样做准没错!

  • 引言某个工作日的中午,你打开饿了么,想找一份合自己心意的工作餐快速下单,在首页逛了5分钟后,还是没有找到想吃的店,于是找了一家买过的店,点了之前点过的商品,完成了一次标准的复
  • 1张元宵节海报设计实战教程

  • 这是鱼先生的第28篇设计教程距小目标还有72篇hi,我是鱼先生,专注于平面、视觉设计方向。 持续写点大家都能一学就会的设计教程,今天的主题是元宵节。先看一下最终效果,如下图所

热门文章

  • “复活”半年后 京东拍拍二手杀入公益事业

  • 京东拍拍二手“复活”半年后,杀入公益事业,试图让企业捐的赠品、家庭闲置品变成实实在在的“爱心”。 把“闲置品”变爱心 6月12日,“益心一益·守护梦想每一步”2018年四

最新文章

  • 返回、关闭和取消的用法

  • 欢迎关注团队号:当进入新页面时,回到上一级页面的操作会使用「返回」、「关闭」或者是「取消」。他们看起来相似,但实际使用上有明显的区别。今天来聊一聊「返回」、「关闭」和
  • 光音移动端设计规范2.0 【Figma】发布

  • 目前广为流传的有iOS官方设计指南和Material Design。但这两种规范是针对系统平台级的设计建议指南,不能形成标准的规范,也不适用于具体App产品。网上有一些移动端App设计规范
  • 厚予Gives设计系统Design System如何商用?

  • Gives设计系统(Design System)是一套财富管理行业的设计标准,提炼于40余个财富场景,从用户体验出发,保证顺畅的流程,清晰的信息展示,高效的操作平台,是一套轻量易用的标准,设计与用户
  • 如何写产品竞品分析报告

  • 前言写报告之前,我们要想清楚为什么要写这个报告?我们写竞品分析报告是为了通过分析挖掘潜在需求,找到产品的可改进点,得出有利于业务发展的建议。明确分析目的我们可以从以下
  • 智库项目场景化设计复盘

  • 项目概况1.需求目标搭建与整合内容频道,提升理财师使用频度,通过赋能理财师的方式实现最终数据增长。2.用户角色财富管理行业的机构从事者,包括但不限于财富管理机构、家族办公