关闭按钮图标(霸道eco怎么关闭按钮)

编辑导语:返回按钮和关闭按钮是日常生活中经常使用的两种按钮。这两个按钮在逻辑表现上是相似的，但是有明显的区别。你真的正确使用它们了吗？在本文中，作者将为我们介绍两个按钮的正确用法，一起学习。

先介绍一下返回键和关闭键(严格来说应该叫关闭/取消键，后面会详细解释。为了文字的方便，它们是设计中常见的图标按钮。下图显示了“后退”按钮和“关闭”按钮的基本视觉样式。

后退按钮和关闭按钮在页面布局设计中应用广泛，其主要功能是帮助用户在产品中“导航”，比如返回到某个页面或者关闭正在浏览的页面，所以从信息架构的角度来看，后退按钮和关闭按钮属于导航按钮。如下图所示,“后退”按钮和“关闭”按钮分别用于设置手机页面和在日历中创建日程页面。

由于后退按钮和关闭按钮在体验效果上是相似的，即都是如上图所示点击按钮后返回上一页，所以我们在实践中经常可以看到误用后退按钮和关闭按钮的例子。点击下图左图中的编辑按钮，进入如右图所示的页面编辑管理状态，但是在页面中使用后退按钮是错误的，这里应该使用关闭按钮。

如上图所示，虽然关闭按钮和返回按钮在逻辑表达上相似，但还是有本质区别的，否则“返回”和“关闭”这两个不同的设计术语和概念也不会出现在设计中。下面我们从定义和使用场景两个方面来分析一下后退按钮和关闭按钮的区别。

二、返回按钮1. 返回按钮的定义

后退按钮的逻辑定义主要包括两个方面，即返回上一浏览页面和返回上一页面。

(1)返回上一页。

后退按钮表达了“返回上一个浏览页面”的意思，即后退按钮，主要用于帮助用户返回进入当前页面之前的页面。这是后退键的基本含义，使用场景也是最多的。

如下图所示，用户点击A页进入B页，然后进入C页，此时用户点击C页的后退按钮返回B页，再点击B页的后退按钮返回A页..

基于此，可以得出后退按钮在表达“返回上一浏览页面”意思时的特点如下:

①用户浏览的页面

后退按钮表达“返回上一页”含义的最基本特征是返回的页面必须是用户浏览过的页面，并且是用户在当前页面之前浏览过的页面，即按照浏览的相反顺序返回。如上图所示，用户首先从A页进入B页，然后进入C页，依次点击返回按钮也必须先返回B页，再到A页..

②当前页面和上一个浏览页面没有逻辑关联。

后退按钮表达“返回上一个浏览页面”意思时的另一个特点是，当前页面和上一个浏览页面之间没有必然的逻辑关联。如上图所示，页面A可能是功能模块1中的一级页面，页面B可能是功能模块2中的二级页面，页面C可能是功能模块3中的一级页面。

甚至在某些场景下，还可以通过后退按钮跳回到不同应用的页面。比如在支付过程中，跳转到微信支付页面后，点击支付页面中的返回按钮，会直接返回到当前应用，而不是微信中的一个页面。

③系统返回逻辑

当使用返回按钮“返回上一个浏览页面”的含义时，其逻辑功能与Android系统导航栏中的返回按钮一致。如下图所示，用户点击页面标题栏左侧的返回按钮依次返回到B页和A页，这与用户点击手机屏幕下方系统导航栏中的返回按钮的逻辑完全一致。

现在底部导航栏不再在全屏安卓设备上显示，而是改为全局手势操作，即在全屏边缘滑动也可以返回上一个浏览页面，这与点击页面中的返回按钮一致。

值得注意的是，系统底部的导航栏是Android系统独有的，iOS系统不支持，但iOS的设备也支持全局手势操作返回上一个浏览页面的功能。

(2)进入下一页。

后退按钮表达的是“转到上一层次页面”的意思，即向上按钮，这是一个具有上一层次结构的页面，帮助用户返回到当前页面。后退按钮表达“进入下一页”含义的最大特点是，点击后退按钮返回的页面完全由产品结构决定，与用户对页面的实际操作和浏览无关。

如下图所示，产品中有四个层次结构，每个层次结构代表一个页面(即结构A-1代表页面A-1)。

如果用户先进入A页，然后通过A页进入B-1页，通过B-1页进入C-3页，如下图绿色路径所示。此时用户点击C-3页面中的返回按钮，再点击返回按钮，然后依次进入C-1页面和C页面，直到产品的顶层结构页面如下图红色路径所示。

返回键在实际使用中有利有弊。优点是可以引导用户到目标页面，比如用户从模块A进入模块B的子页面，通过返回按钮“进入上一页”的模块B页面，这样可以引流和暴露B页面，尤其是跨应用跳转，可以很好的引导用户到产品的首页。

但是，缺点也很明显。用户在使用产品的过程中，对自己的行为缺乏预期和控制，容易打断用户的操作过程，因此在实践中使用相对较少。

从后退按钮表达“回到上一个浏览页面”和“进入上一个层次结构页面”的功能逻辑来看，这两种设计在实践中“体验相同”的概率很大，因为一般来说，用户在产品中的操作都是在层次结构之间跳转，即点击父结构页面进入子结构页面。此时，点击返回按钮时，无论是“返回上一个浏览页面”还是“转到上一个”

如下图所示，用户点击C页进入C-1页、C-2页、C-3页。这时候不管后退按钮是什么意思，依次点击后退按钮都会回到C-2页，C-1页，C-3页。

2.返回按钮的使用规范无论是表示“返回上一个浏览页面”还是“进入上一个页面”，返回按钮在具体使用规范上是一致的，只是功能逻辑上有所区别。

(1)后退按钮只能在整个页面中使用。

后退按钮只能在整个页面使用，比如一些浮动层或者弹出框等场景。如下右图所示，在浮动层面板中使用后退按钮是错误的。

从上图可以看出，返回按钮关联的页面(即返回前后的页面)必须是全屏的，有效显示区域大小完全相同，没有大小差异。如上右图所示，浮动面板的区域大小小于整个页面，使用后退按钮是错误的。

(2)在产品主层次结构的整页中使用后退按钮。

后退按钮的主要作用是帮助用户在产品中“导航”，所以只能使用产品主层次结构的整个页面，即后退按钮帮助用户在产品的不同页面之间“绕圈”导航，这也意味着用户可以通过产品的层次结构和导航，多次使用后退按钮进入同一个页面。

如下图所示，用户可以点击A页的功能入口，用户可以多次进入B页。

同样，如果用户不能多次进入同一个页面，那么后退按钮就不能用于这个页面，比如一些临时页面(比如新编辑的页面)或者页面的临时状态(页面的编辑管理状态)。

虽然用户可以多次使用临时页面，但是用户每次进入的临时页面在逻辑上并不是同一个页面(虽然页面功能逻辑完全一致)。

(3)后退按钮与页面标题栏结合使用。

后退按钮作为产品导航系统的一部分，经常与页面的标题栏结合使用，即后退按钮一般布置在整个页面标题栏的左侧，如下图所示。

三、关闭按钮1。关闭按钮的意思和返回按钮类似，关闭按钮也有两个意思，分别是取消和关闭。

(1)取消

当关闭按钮表达“取消”的意思时，就是取消按钮，本质上包括两层意思，即先取消用户当前的操作，然后关闭当前的操作页面(包括弹出窗口等操作区域)或页面状态。

如下图所示，在系统中添加日程的页面。左上角红色区域的关闭按钮表示“取消”，即点击关闭按钮后，页面中的时间设置、闹钟提醒等相关操作将不被保存，同时关闭页面，返回上一页。

事实上，当关闭按钮表示“取消”时，一般页面中会有一个与“取消”含义相反的操作按钮，即用户操作该按钮后，用户的相关操作会被保存并关闭页面，比如上图标题栏右侧的保存按钮。

当然，这不是绝对的。如果其他功能逻辑可以保存和关闭页面也是可以的。如下图所示，在常用列表编辑管理状态下，用户可以在选择多个列表项后，点击下方的删除按钮，删除并退出编辑管理状态。此时点击删除按钮相当于删除并关闭当前页面/状态。

(2)关闭按钮

关闭按钮的另一个含义是“关闭按钮”，即点击按钮关闭当前页面(包括弹出窗口和其他操作区域)并返回页面。它最大的特点是点击按钮后，只会关闭当前页面，不会执行其他任何操作和逻辑。

当关闭按钮表达“关闭”的意思时，它的使用场景非常广泛，不仅可以在全页面使用，也可以在区域页面使用(比如弹出、浮动层等。).如下图所示，关闭按钮分别用于打开产品中的临时页面和引导弹出窗口。

2.关闭按钮的使用说明

当设计中关闭按钮的含义不同时，其使用规范也不同，如下。

(1)关闭按钮表示“取消”

当关闭按钮表示“取消”时，只能对整个页面使用，且页面必须处于“临时状态”，即该页面在产品使用过程中不能长期存在，在用户进行相关操作后一定会消失。

有两种常见的“临时状态”页面:临时页面(如新建的编辑页面)和页面临时状态(页面的编辑管理状态)，如下图所示。

与后退按钮类似，关闭按钮在表达“取消”的意思时一般与页面中的标题栏结合使用，在弹出或浮动层等非整页的样式中不会使用。在这些场景中，即使需要表达“取消”含义的逻辑，一般也是用其他形式表达，比如标准按钮，而不是使用关闭按钮样式。

(2)关闭按钮表示“关闭”

关闭按钮表示“关闭”的意思时，一般用在弹出或浮动层等非全页面的场景中，主要作用是关闭页面中显示的一个元素。所以当关闭按钮表达“关闭”的意思时，它的使用是比较自由的。

如下图所示，页面中浮动图层面板中的关闭按钮可以安排在左上角，也可以安排在右上角。这两种设计方案都是合理的，也是设计中最常见的。

四。总结虽然后退键和关闭键本质上只是视觉风格上的差异，但是即使在设计上使用错误，也可以通过逻辑控制来保证产品逻辑的正确性，也就是用户的使用上没有区别。但是，作为一个比较常见的基础按钮，返回键和关闭键在现实生活中已经形成了用户相对固定的认知和习惯，在设计中必须考虑用户的这种认知和习惯。即使是纯粹的视觉风格也要遵循一定的原则和规范，不能随便使用，既能保证良好的用户体验，又能保证产品中设计的规范性和一致性。

本文由@小乞丐原创发布。每个人都是产品经理。未经作者允许，禁止转载。

来自Unsplash的图像，基于CC0协议。

更多精彩内容请关注人人都是产品经理微信官方账号或下载App。

2年初级按钮设置