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按钮放置在网站页面的底部或顶部。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

被这7款在线涂鸦画板惊艳到,手残也能画出涂鸦大片!

作为一名涂鸦爱好者或者手帐达人,你是否在寻找好用的在线涂鸦画板软件呢?涂鸦画板软件释放了创造性的无限可能,让你能够将想法转化为令人惊叹的视觉效果,并轻松地与客户、同行和全球观众分享你的作品。 在这篇文章中,…

如何将微信视频号的视频保存到手机相册?

微信视频号是近年来微信推出的一项功能,它允许用户通过手机拍摄和分享短视频内容。然而,许多人纷纷表示他们想要保存微信视频号上的视频,以便在离线时观看。但一直以来这个需求腾讯一直没有开放随后也取消了复制视频链接功能,为此…

审核 Microsoft SQL Server 日志

手动审核数据库活动是一项艰巨的任务,有效完成审计的最佳方法是使用简化和自动化数据库监控的综合解决方案,该解决方案还应使数据库管理员能够监控、跟踪和即时识别任何操作问题的根本原因,并实时检测对机密数据的未经授权的访问。 什么是 S…

NI USB9218国产对标51.2 kS/s/ch,2通道C系列通用模拟输入模块

51.2 kS/s/ch,2通道C系列通用模拟输入模块 NI‑9218专为多用途测量而设计。 它使用针对特定测量的适配器提供了对加速度计、供电传感器、全桥和电压测量以及四分之一桥、半桥、60V和电流测量的内置支持。 每个通道可单独选择,因而用户可在各个通道上进行…

可靠的互联网兼职平台,平常可以做副业充实生活

在互联网时代,越来越多的人开始通过网络来寻找兼职副业的机会,能够更灵活地安排自己的时间,实现自己的收入增值。那么找到一个正规可靠的线上兼职平台就是一个比较重要的事情,这里分享几个正规靠谱的线上兼职副业平台,…

YOLOv7优化:独家创新(Partial_C_Detect)检测头结构创新,实现涨点 | 检测头新颖创新系列

💡💡💡本文独家改进:独家创新(Partial_C_Detect)检测头结构创新,适合科研创新度十足,强烈推荐 SC_C_Detect | 亲测在多个数据集能够实现大幅涨点 收录: YOLOv7高阶自研专栏介绍: http://t.csdnimg.cn/tYI0c ✨✨✨前沿最新计算机顶会复现 🚀🚀🚀YOLO…

基于深度学习的人脸性别年龄识别 - 图像识别 opencv 计算机竞赛

文章目录 0 前言1 课题描述2 实现效果3 算法实现原理3.1 数据集3.2 深度学习识别算法3.3 特征提取主干网络3.4 总体实现流程 4 具体实现4.1 预训练数据格式4.2 部分实现代码 5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 毕业设计…

自适应H5樱花个人网站引导页导航源码SEO增强版

懂前端和 PHP 技术想更改前端页面的可以看:网站的前端页面不好看,你可以查看 index 目录,内有参数 txt 文本里面记录了前端页面所使的关键 JS 代码和 php 代码,只需要稍加复制粘贴修改到新的前端页面就可以了!主目录的…

Cesium笔记(0):Cesium简介和本地运行

一、Cesium介绍 是国外一个基于JavaScript编写的使用WebGL的地图引擎开源程序,可以免费用于商业和非商业 二、特点 支持3D,2D,2.5D形式的地图展示可以自行绘制图形,高亮区域,并提供良好的触摸支持支持绝大多数的浏览器和mobile动态地理空间…

代码随想录Day32 动态规划01 LeetCodeT509 斐波那契数列 T70 爬楼梯 T746 爬楼梯的最小消耗

前言:动态规划基础 动态规划首先可以解决的问题有背包问题,打家劫舍问题,股票问题,子序列问题等,主要是将一个大的问题切分成多个重叠的子问题,所以动态规划一定是上一个状态递推过来的,有一个重要的状态转移方程,但是这也并不是解题的全部,我们将动态规划的题目基本分为五步来…

【java学习—十一】泛型(1)

文章目录 1. 为什么要有泛型Generic2. 泛型怎么用2.1. 泛型类2.2. 泛型接口2.3. 泛型方法 3. 泛型通配符3.1. 通配符3.2. 有限制的通配符 1. 为什么要有泛型Generic 泛型,JDK1.5新加入的,解决数据类型的安全性问题,其主要原理是在类声明时通过…

Android原生项目集成uniMPSDK(Uniapp)遇到的报错总结

uni小程s序SDK 集成到Android原生项目:老项目中用到的库较多,会出现几种冲突问题,总结如下: 报错1: Execution failed for task :app:processDebugManifest. > Manifest merger failed with multiple errors, see logs Andro…

【文献分享】基于线特征的激光雷达和相机外参自动标定

论文题目:Line-based Automatic Extrinsic Calibration of LiDAR and Camera 中文题目:基于线特征的激光雷达和相机外参自动标定 作者:Xinyu Zhang, Shifan Zhu, Shichun Guo, Jun Li, and Huaping Liu 作者机构:清华大学汽车安…

论文翻译-ImageNet Classification with Deep Convolutional Neural Networks

[toc] 前言 AlexNet是是引领深度学习浪潮的开山之作,即使是我们现在进入了ChatGPT时代,这篇论文依然具有一定的借鉴意义。AlexNet的作者是多伦多大学的Alex Krizhevsky等人。Alex Krizhevsky是Hinton的学生。网上流行说 Hinton、LeCun和Bengio是神经网…

go-gin-vue3-elementPlus带参手动上传文件

文章目录 一. 总体代码流程1.1 全局Axios部分样例1.2 上传业务 二. 后端部分三. 测试样例 go的mvc层使用gin框架. 总的来说gin的formFile封装的不如springboot的好.获取值有很多的坑. 当然使用axios的formData也有不少坑.现给出较好的解决办法 以下部分仅贴出关键代码 一. 总…

ORANGE室内高尔夫—韩国室内模拟高尔夫原装进口真实体验身临其境

ORANGE室内高尔夫—韩国室内模拟高尔夫 真实体验 身临其境 室内高尔夫的产品优势: 1. 实际高尔夫球场的限制:室内高尔夫可以弥补室外高尔夫球场数量有限的问题,使得更多人能够享受高尔夫运动。 2. 天气和季节的限制:室内高尔夫可…

苹果AirTag平替产品选择,国内外支持苹果Find My芯片功耗全面对比

2021年4月20,苹果在春季产品发布会上推出了全新的产品类型- AirTag,将哆啦A梦的追踪徽章带到了现实。这个小产品当年并没有像其它苹果新品那样一朝爆红。随着年轮缓缓而坚定地前行, AirTag也缓缓而坚定地前行,并被越来越多的人接受和喜欢。 深入思考AirTag背后的产品逻辑和实现…

前端基础之JavaScript

目录 一、JavaScript概述 二、JavaScript引入方式 三、JavaScript语言规范 四、JavaScript语言基础 五、JavaScript数据类型 数值(Number) 字符串(String) 布尔值(Boolean) null和undefined 对象(Object) forEach() map() 六、运算符 七、流程控制 八、函数 函…

10.31日模拟赛总结

文章目录 考试时间及策略考试结果考试反思题解A.进步科学B.吉吉没急C.老杰克哒D.季积晓淆 考试时间及策略 没啥好说的,因为好像都不会。所以全场感觉都在罚坐,很痛苦。 考试结果 30 0 50 5 85 考试反思 T1:T1是个神奇状压&#xff0…

vsCode安装CodeRunner插件输出中文乱码问题

1 vsCode下载 vcCode官网地址:https://code.visualstudio.com/ 2 安装CodeRunner 通过Ctrl Shift P 找到 settings找到code-runner.executorMap,在 settings.json 中加入 "code-runner.executorMap": {....."python": "s…