8种按钮设计的常见类型分享

按钮是UI界面的元素之一,可以本能地吸引游客并将其转化为买家。界面中的UI按钮类型包括:CTA按钮、幽灵按钮、下拉按钮、浮动操作按钮、汉堡包按钮、加号按钮、消耗品按钮、共享按钮。

号召性用语按钮

CTA(呼叫语言)按钮是一种交互元素,可以提示用户注册、登录、立即购买等,并应放置在用户可能看到的位置。CTA移动UI按钮的主要目的是提高单个页面的切换速度,以达到预期的效果。您可以选择一个圆角的CTA按钮,既醒目又醒目。

丰富的按钮素材分享

幽灵按钮

幽灵UI按钮也被称为大纲按钮,它们非常重要,但不是页面上的主要操作。如今,这种UI按钮设计已经变得非常流行,尤其是对于登录页面。

填充按钮和幽灵按钮哪个更好?如果你想强调你的文本,填充UI按钮应该是你的主要CTA。同时,幽灵UI按钮给设计带来优雅微妙的感觉。

下拉按钮

下拉按钮是一个常用的UI按钮。当单击或悬停时,您会发现一个相互排斥的项目下拉列表,它为用户提供了一个开放列表,以添加任何特定的项目。您可以使用自定义的下拉颜色来添加光滑的动画,并使用CSS选择器来设置组件样式。此外,越来越多的项目可以通过输入几个锚点来添加到菜单中。

浮动操作按钮

浮动操作UI按钮类似于出现在所有页面上的主UI按钮。通常,它以三种不同的形式出现——传统、迷你和扩展,你只需要根据项目的要求进行选择。如下图所示,应用程序UI设计中的主要操作可以通过右下角的浮动操作UI按钮触发。

丰富的按钮素材分享即时设计是一款支持在线协作的专业级 UI 设计工具,支持 Sketch、Figma、XD 格式导入,海量优质设计资源即拿即用。支持创建交互原型、获取设计标注,为产设研团队提供一站式协同办公体验。icon-default.png?t=N7T8https://js.design/community?category=search&search=%E6%8C%89%E9%92%AE&source=csdn&plan=yscsdn111

汉堡按钮

汉堡按钮来自汉堡包的主题。汉堡UI按钮是任何网站设计和布局的重要组成部分。你一定在网站或应用程序中看到过这个图标,通常被称为菜单。你可以很容易地在网站或应用程序的顶部找到这三条水平线,有时在左边,有时在最右边。汉堡UI按钮无处不在,易于识别,可以使您的界面看起来更干净,非常适合作为导航UI按钮。

加号按钮

添加UI按钮允许用户在列表中创建新帖子、添加联系信息、位置详细信息和更多项目。您必须在博客文章中看到这个UI按钮,它可以完全自由地选择并使添加的内容更加集中。因此,当用户点击添加UI按钮时,它将直接转移到创建内容的模式窗口。

消耗按钮

消耗UI按钮是加号按钮的扩展,单击时会提供多种选择。消耗UI按钮是网页的巧妙布局之一,它设置了无缝的交互过程,不会使屏幕超载。在旅游网站或应用程序中,消耗UI按钮允许用户添加旅行、日期、新项目或任何内容。通过这些UI按钮的设计,可以优化到达时间。

分享按钮

由于社交媒体渠道和网络的发展,共享UI按钮变得非常流行。人们喜欢分享创意和丰富的信息,从而为网站带来更多的用户。

因此,有必要在网站界面设计中添加一个共享按钮。通常,它会显示WeChat、微博、twitter或Linkedin等图标的品牌标志。没有必要给这些图标一个形状或颜色,因为它们必须保持原始状态才能更好地交互。通常,共享UI按钮放置在网站页面的底部或顶部。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/156510.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件测试/测试开发丨利用ChatGPT自动生成架构图

点此获取更多相关资料 简介 架构图通过图形化的表达方式,用于呈现系统、软件的结构、组件、关系和交互方式。一个明确的架构图可以更好地辅助业务分析、技术架构分析的工作。架构图的设计是一个有难度的任务,设计者必须要对业务、相关技术栈都非常清晰…

springboot是如何工作的

一、前言 现在java后端开发框架比较多的使用springboot框架,springboot是在以前的springMVC进行封装和优化,最大的特点是简化了配置和内置Tomcat。本节通过阅读源码理解springboot是如何工作的。 二、springboot是如何工作的 1、从启动类开始 /***服务…

【算法】染色法判定二分图

题目 给定一个 n 个点 m 条边的无向图,图中可能存在重边和自环。 请你判断这个图是否是二分图。 输入格式 第一行包含两个整数 n 和 m。 接下来 m 行,每行包含两个整数 u 和 v,表示点 u 和点 v 之间存在一条边。 输出格式 如果给定图是二分…

软考中项集成如何画图?计算题怎么考的?

2023下半年软考集成一共考6个批次,10月28日、29日软考集成考了第一、二、三、四批次,11月4日软考集成再考第五批和第六批。 先说一下通过10.28-29得出的软考机考注意事项: 1、草稿纸不能自带,考试现场会发放草稿纸,草…

day57--动态规划15

392.判断子序列 115.不同的子序列 第一题:判断子序列 给定字符串 s 和 t ,判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些(也可以不删除)字符而不改变剩余字符相对位置形成的新字符串。(例如&…

Redis的四种部署方案

这篇文章介绍Reids最为常见的四种部署模式,其实Reids和数据库的集群模式差不多,可以分为 Redis单机模式部署、Redis主从模式部署、Redis哨兵模式部署、Cluster集群模式部署,其他的部署方式基本都是围绕以下几种方式在进行调整到适应的生产环境…

关于 MapboxGL 在 Vue 中的简单使用

前言问题 关于我为什么使用了 在线的 js引入方法,而不是使用 npm 直接下载依赖问题,之前有一篇文章讲过原因:关于 Vue-iClient-MapboxGL 的使用注意事项 网上提供的 vue-iclient-mapboxgl 比较多,但是我这里使用的是 iclient-su…

图扑 HT for Web 手机端运维管理系统

随着信息技术的快速发展,网络技术的应用涉及到人们生活的方方面面。其中,手机运维管理系统可提供数字化、智能化的方式,帮助企业和组织管理监控企业的 IT 环境,提高运维效率、降低维护成本、增强安全性、提升服务质量,…

2021-arxiv-GPT Understands, Too

2021-arxiv-GPT Understands, Too Paper: https://arxiv.org/abs/2103.10385 Code: https://github.com/THUDM/P-tuning Prompt 简单理解 举例来讲,今天如果有这样两句评论: 1. 什么苹果啊,都没有苹果味&#xff0c…

zabbix6.4监控centos

1、关闭防火墙 setenforce 0 #关闭SELinux sed -i "s/SELINUX=enforcing/SELINUX=disabled/g" /etc/selinux/config #设置永久关闭SELinux systemctl stop firewalld.service #关闭防火墙 systemctl disable firewalld.service …

python脚本-读取shadow关键信息并爆破密码

python脚本-读取shadow关键信息并爆破密码 代码 import crypt from colorama import Fore,Styledef crack():# 密码爆破函数定义with open(/root/top1000.txt) as f:# 此处更改密码字典for passwd in f:passwd2crypt.crypt(passwd.strip(),salt)if passwd2 passwd_hash:prin…

黄金矿工小游戏

欢迎来到程序小院 黄金矿工 玩法:点击开始游戏,黄金和钩子,钩子会左右摆动,对准黄金位置点击鼠标左键钓起黄金加对应时间,钓起黑色四块减去响应时间,快去挖矿吧^^。开始游戏https://www.ormcc.com/play/ga…