cancel怎么用,cancel按键功能介绍

首页 > 教育 > 作者:YD1662024-04-04 15:27:40

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

当然这也不是绝对的,如果其他的功能逻辑能充当保存关闭页面的作用也是可以的,如下图所示为常见的列表编辑管理状态中,用户选中若干列表项后点击底部的删除按钮就可以删除并退出编辑管理状态,此时点击删除按钮就相当于执行删除操作并关闭当前页面/状态。

cancel怎么用,cancel按键功能介绍(13)

(2)关闭按钮

关闭按钮另外一种含义就是“关闭”,即Close Button,点击按钮关闭当前页面(包括弹窗等操作区域)返回之间的页面,其最大的特点就是点击按钮后仅仅关闭当前页面,不会执行任何其他操作和逻辑。

关闭按钮表达“关闭”含义时其使用场景相对广泛,不仅可以用在全页面中使用,还可以在区域页面(如弹窗,浮层等)中使用。如下图所示分别为在产品中打开临时页面和引导弹窗中使用关闭按钮。

cancel怎么用,cancel按键功能介绍(14)

2. 关闭按钮的使用规范

关闭按钮在设计中表达的含义不同时,其使用规范也有所不同,具体如下。

(1)关闭按钮表达“取消”含义

关闭按钮表达“取消”含义时,一般只能用于全页面,且页面一定是一种“临时状态”的页面,即这个页面在用户使用产品的过程中不能长久的存在,在用户执行相关操作后一定会消失。

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

cancel怎么用,cancel按键功能介绍(15)

与返回按钮类似,关闭按钮表达“取消”含义时一般也与页面中的标题栏组合使用,不会用于非全页面的弹窗或者浮层之类的样式,在这些场景下,即使需要表达“取消”含义的逻辑,一般是用其他形式来表达,比如标准按钮,而不会使用关闭按钮样式。

(2)关闭按钮表达“关闭”含义

关闭按钮表达“关闭”含义时,一般多用于用于非全页面的弹窗或者浮层之类的场景,其主要作用就是关闭页面中展示的某个元素。因此,关闭按钮表达“关闭”含义时,其使用就相对比较自由。

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

cancel怎么用,cancel按键功能介绍(16)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.