扁平按钮与凸起按钮

2024-04-24

我想知道之间的基本区别Flat button and Raised Button。根据新Android材料设计指南 我想使用凸起按钮,但我不知道它们是什么。网络上有一些论坛显示一个凸起的按钮,但他们称之为“扁平”。

谁能告诉我两者之间的基本区别? (具体看)


Both Button正在遵循新的平面设计概念代替旧的概念渐变设计概念。

那些用来给用户这样的感觉的概念是可点击按钮不仅仅是带有文本或图像的彩色区域。

凸起按钮

这是Raised Button这给你的感觉是它的一部分相对高于表面。这让用户感觉他/她可以按下它来期待特定的操作。更优雅,提供更好的用户体验

Example

平按钮

这是Flat Button。这仅依靠改变部分表面颜色来给用户感觉这是一个不同的地方,如果你点击它可能会给你不同的动作。

Example

FAB按钮

这是FAB Button。 (FAB 代表Floating Action Button)这遵循相同的概念Raised Button在材料设计中,但具有浮动功能。此 FAB 按钮可用于指示应用程序中的主要操作。

Example

FAB Button example

选择要使用的按钮类型

选择按钮样式取决于按钮的首要地位、屏幕上的容器数量以及屏幕布局。 -材料设计指南 https://material.io/guidelines/components/buttons.html#buttons-button-types

根据材料设计指南 https://material.io/guidelines/components/buttons.html#buttons-button-types,您可以根据以下 3 个因素选择使用哪种类型的按钮:

  • Function:作为浮动操作按钮是否足够重要和普遍?
  • 方面:根据容器所在的容器以及屏幕上有多少个 z 空间层来选择凸起或平坦。屏幕上不应该有很多层的对象。
  • Layout: Use primarily one type of button per container. Only mix button types when you have a good reason to, such as emphasizing an important function. Choosing the button type to use - Pyramid

可能的用途

  • 对话框 -> 平面按钮
  • 内联 -> 平面/凸起按钮
  • 始终可用 -> FAB 按钮/持久页脚按钮 https://material.io/guidelines/components/buttons.html#buttons-persistent-footer-buttons
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

扁平按钮与凸起按钮 的相关文章

随机推荐

  • 我的用于邮寄表单的 php 脚本无法正常工作

    我正在尝试设置一个表单 将附件与电子邮件内容一起发送 但我不知道我在做什么 我对 PHP 完全陌生 刚刚学会了通过尝试和错误以及互联网上的教程来完成基本的邮件表单工作 但是 当涉及到附件时 现在我完全不知所措了 而且 尽管 PHP 脚本应该
  • Blazor 客户端 (WASM) 应用程序洞察

    Application Insights SDK 是否适用于 Blazor WASM 我正在尝试连接我的应用程序 但它不发送任何指标 即使在实例化 TelemetryClient 时 它也只是挂起 与 Blazor 服务器端不同 您不能只将
  • NSURLRequest http协议版本

    这是我今天提出的一个非常简单的问题 是否可以设置特定的HTTP协议版本NSURLRequest对象 例如 1 0 或 1 1 我在 telnet 上谈论的一个例子 pavlov pavlov telnet ya ru 80 Trying 8
  • BouncyCastle 类上的 NoClassDefFoundError

    在使用 BC 类的 Web 应用程序上一段时间后 我遇到了 NoClassDefFoundError java lang NoClassDefFoundError org bouncycastle util Pack at org boun
  • 错误:[ng:areq] 参数“MyCtrl”不是函数,未定义

    我是 Angularjs 的新手 我正在学习教程 但我在标题中遇到了错误 HTML 代码 div div div div
  • Outlook 添加、文本框、删除\退格键不起作用

    我开发了一个 Outlook 插件 自定义任务窗格 在用户控件中带有 Web 浏览器 当我在网络浏览器的文本框中写入内容时 退格键或删除按钮旁边的所有功能都运行良好 但我无法使用这些键 我是否遗漏了什么 我迟到了几年 但我设法解决了这个问题
  • 使用 SQL 语句更改忽略表添加列(如果不存在)

    我想向 mysql 表添加一个新列 但如果该列已存在 我想忽略该列的添加 我目前正在使用 ALTER IGNORE TABLE db tablename ADD COLUMN column name text NULL 但这会引发错误 ER
  • 错误:$compile:tpload 无法加载模板 Http 状态:404

    当我尝试使用 Angular 运行本地项目时 我从 Chrome 收到 404 状态 我不确定问题出在哪里 并且我已经尝试过类似问题的建议答案 这是我的指令文件 use strict ngdoc directive name stockDo
  • cmake:在 CMakeLists.txt 中选择生成器

    我想强制CMake使用 Unix Makefiles 发电机来自 CMakeLists txt 中 这是我现在使用的命令 cmake G Unix Makefiles 我希望是这样的 cmake 当在安装了 VC 和自定义工具链的 Wind
  • 在引导响应页面中如何将 div 居中

    我需要使用 bootstrap 将 div 放置在页面的中心来创建响应式页面 如下面提到的布局所示 Bootstrap 5 更新 使用弹性盒进行简单的垂直网格对齐 import url https cdnjs cloudflare com
  • 如何在 shell 函数中获得“set -e”的效果和用处?

    set e 或以 bin sh e 对于出现问题时自动轰炸非常有用 它使我不必对每个可能失败的命令进行错误检查 如何在函数内获得与此等效的内容 例如 我有以下脚本 该脚本在出现错误时立即退出 并显示错误退出状态 bin sh e echo
  • 根据内部数组中的值对外部数组进行排序,javascript

    我有一个包含数组的数组 我想根据内部特定列中的值对外部数组进行排序 我敢打赌这听起来有点令人困惑 所以我将直接跳到一个例子 初始数据 var data row 1 col1 2 row 1 col2 c row 1 coln row 2 c
  • 分析跟踪新 Web+App 中的自定义事件

    我曾经使用以下命令跟踪自定义事件 API 命中 google analytics and PHP via cURL 但现在分析正在弃用这种方法 我知道新的分析 Web App 用于跟踪此类事件 但我找不到任何可以让我跟踪这些事件的东西 我当
  • React Native项目没有index.ios.js或index.android.js

    你好 我是 React Native 的新手 我按照下面的链接构建了我的第一个项目 但发现没有 index ios js 或 index android js 可供我编辑 https facebook github io react nat
  • 如何在gnuplot中绘制带有彩色边框的矩形

    我想在我的图中画一个空矩形 到目前为止我有 set style rect back fs empty border lt 3 set object 1 rect from 1 1 to 2 2 我有一个带有虚线的矩形 如何更改线条的颜色 l
  • F# 中的异步 EF 查询

    在使用 EF6 的 C 中 我可以轻松地进行如下异步操作 using var context new MyDbContext var item await context SomeEntities Where e gt e Id 1 Fir
  • 如何在窗口窗体中制作圆形标签?

    众所周知 标签通常是正方形或长方形 我真的需要制作圆形标签 谁能告诉我这是否可能 或者至少为我指出正确的方向 抱歉 只是为了把事情说清楚 我想要一个圆形标签 不仅仅是在屏幕上画一个圆圈 您可以设置 Label 的 Region 属性 var
  • 在 CentOS 6.4 中意外删除了符号链接 libc.so.6。如何获得 sudo 权限来重新创建它?

    我不小心删除了符号链接 lib64 libc so 6 gt lib64 libc 2 12 so sudo rm libc so 6 然后我不能使用任何东西 包括ls命令 我输入的任何命令都会出现错误 ls error while loa
  • 如何使用 USPS 验证给定地址?

    我想向 USPS 验证给定的地址 地址 城市 州 邮政编码 如果提供的地址是有效地址 则返回结果 如果不是有效地址 则返回无效地址 那么我怎样才能在 C Net 中做到这一点呢 美国邮政服务 USPS 通过其地址信息 API 提供此服务 U
  • 扁平按钮与凸起按钮

    我想知道之间的基本区别Flat button and Raised Button 根据新Android材料设计指南 我想使用凸起按钮 但我不知道它们是什么 网络上有一些论坛显示一个凸起的按钮 但他们称之为 扁平 谁能告诉我两者之间的基本区别