首页 > 其他分享 >前端设计,确定按钮正慢慢消失

前端设计,确定按钮正慢慢消失

时间:2023-04-16 11:35:27浏览次数:46  
标签:类产品 慢慢 前端 保存 确定 按钮 如果 操作

不论做什么产品,界面上几乎都少不了「确定」按钮,例如:操作提示时、进行选择时、填写表单数据时……

img

完成、保存、下单……各种代表“确定某一步骤”的按钮,都可以统称为确定按钮。

以前的产品设计,大量以来确定按钮,但是现在的产品设计,确定按钮用得越来越少了。

倒不是因为不需要确定操作了,而是除了「确定按钮」之外,设计师们发现了更好的方式。

能自动「确定」就不需要按钮

有一句话说:

最好的交互就是没有交互

同样,最好的「确定」按钮,其实是没有按钮。

例如,手机锁屏时,输入密码后不需要确定按钮就可以直接验证进入。

img

能这么做是因为手机锁屏密码固定六位数,而电脑的锁屏密码通常不确定,所以还是需要一个「确定」按钮。

img

这说明,如果能够预料到用户的操作数量,且操作很简单的话,是完全可以考虑去掉「确定」按钮的。

img

不是什么时候都适合写「确定」

通常「确定」字面上可以表示:“我知道了/就这样”。

如果是提示或者是简单的操作,则比较适合使用「确定」文案。

img

把确定了什么写出来

如果是发送、登录、购买、支付……这类目的性很强的操作,与其写「确定」还不如直接把操作目的写出来。

不然,如果只写「确定」,让人容易犯迷糊。

img

进行了输入/修改,得用「保存」

输入操作后,用户最怕丢失信息没有保存,回头得重新写。

如果只是简单的表单,例如设置用户名什么的,重来一次倒也无所谓。但如果是填写项达到三、四条甚至更多,看不到「保存」两个字难免担心数据丢失。

如果按钮上写清楚「保存」两个字,也让人安心一些。如果是自动保存,也需要把相应反馈展示出来。

img

只是结束流程而非操作,可以用「完成」

其实「完成」按钮大多可以用「确定」替代。

但是「完成」的特别之处,是表达了“结束流程”的概念。

所以,如果想让用户感觉按下按钮之后不会进行任何其它操作,而仅仅只是结束流程而已,则很时候使用「完成」。

img

工具类产品,可以用「XX并XX」

很多工具类产品,为了操作效率会把两个操作并列起来。

例如我现在打在所用的公众号编辑器,就有一个「保存并群发」的按钮:

img

这样做挺好的,工具类产品效率最重要美观是其次。两个经常要连贯执行的操作,合为一个按钮能够减少没必要的点击。

而一旦把操作合并了,肯定要写清楚比较好。否则如果没说明白,既让人难以理解,而且点起来又不放心,导致学习成本大大增加。

有一个问题是,如果文字太长了,可以考虑简化按钮文案并在旁边加点提示。

img

工具类产品效率最重要美观是其次,因为如果不写清楚很难让人理解。

前往了解国思RDIF.vNext低代码开发平台:http://www.guosisoft.com

标签:类产品,慢慢,前端,保存,确定,按钮,如果,操作
From: https://www.cnblogs.com/huyong/p/17322723.html

相关文章

  • 什么是前端开发领域的 Cumulative Layout Shift 问题
    CLS是CumulativeLayoutShift(累计布局偏移)的缩写,它是一个用于度量网页稳定性的指标。CLSissue指的是网页在加载过程中存在的累计布局偏移问题,这些问题会导致网页元素在页面上闪烁或跳动,影响用户体验。在前端开发中,CLSissue是一个常见的问题,通常由于页面中的图片、视频或广......
  • 前端&后端程序员必备的Linux基础知识
    一从认识操作系统开始1.1操作系统简介我通过以下四点介绍什么操作系统:操作系统(OperationSystem,简称OS)是管理计算机硬件与软件资源的程序,是计算机系统的内核与基石;操作系统本质上是运行在计算机上的软件程序;为用户提供一个与系统交互的操作界面;操作系统分内核与外壳(我......
  • 前端小知识点扫盲笔记记录8
    前言我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣带你进入前端巅峰交流群今天继续对前端知识的小结命令模式宏命令<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • ES6 NO.1( var、let 和 const 命令 )| 前端小白的的第一篇博客~
    varvar声明的变量存在变量提升即在声明该变量之前就可以使用,值为undefined,其作用域为全局;let和constlet用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效;const只能用来声明常量,一旦赋值,不能修改,故使用const不能只声明不赋值;区别var和let......
  • ???热乎的前端面试题(昨天)
    前言系列首发于公众号『前端进阶圈』,若不想错过更多精彩内容,请“星标”一下,敬请关注公众号最新消息。热乎的前端面试题(昨天)1.Vue响应式原理?vue2:在Vue2中注意使用Object.defineProperty()方法来实现响应式,它为对象中的每一个属性都定义了一个getter和setter,当数据发生变化......
  • 前端基础之JavaScript
    目录JS简介JS基础变量与常量基本数据类型数值(number)字符串的常用方法对象的常用方法forEach()splice()map()运算符流程控制函数内置对象JS简介全称JavaScript但是与Java一毛钱关系都没有之所以这么叫是为了蹭Java的热度它是一门前端工程师的编程语言但是它本身有很多逻辑错误(......
  • 个人部署【未实现Nginx前端资源部署】
    【未在Nginx上实现静态资源部署】虚拟机A作为服务器A:安装Nginx、安装Mysql作为主库虚拟机B作为服务器B:安装能采用shell脚本部署项目所需软件:jdkgitmavenjar、安装Mysql作为从库、安装Redis作为缓存。服务器B操作:第一步:使用gitclone命令将远程仓库的代码克隆下来第二步:上......
  • 前端pdf一次下载多个echarts图表
    //需下载pdf,html2canvas模块savePDF:function(){letobj1=document.getElementById("pieChart");letobj2=document.getElementById("homepage-bandwidth-container");letobj3=document.getElementById("homepage-iops-container");le......
  • 前端CSS
    目录CSS介绍CSS语法CSS实例CSS注释学习css的步骤CSS的几种引入方式行内样式内部样式外部样式CSS选择器基本选择器id选择器类选择器标签选择器通用选择器组合选择器后代选择器儿子选择器毗邻选择器弟弟选择器属性选择器分组和嵌套分组嵌套伪类选择器伪元素选择器first-letterbefore......
  • 前端常用/不常用插件【想起来才会去更新】
    maptalks支持2d/3d地图渲染及操作,maptalks可支持1w左右图形渲染(再多了就会有一点点卡,和电脑性能也有关系)官网:www.maptalks.org 组件中的组件maptalks.three:可支持three及一些简单数据样式,具体的还没用过maptalks.snap:绘制图形可贴边操作maptalks.arcgistilelayerarcgis......