扁平按钮 vs 凸起按钮

Question

我想了解 "Flat button" 和 "Raised Button" 的基本区别。根据新的 Android 材料设计指南，我想使用 "Raised button" ，但我不知道它们是什么。有些网络论坛显示了一个被抬起来的按钮，但他们称其为 "Flat"。请问有人能告诉我这两者的基本区别吗？（具体外观上的差异）

- Usman Riaz

---

你想了解使用或实现方面的区别吗？ - Sami Eltamawy

只是想看看外观上的区别。 - Usman Riaz

我对FAB、FLAT和RAISED之间的区别感到困惑。 - Usman Riaz

Answer 1

这两个按钮都采用了新的扁平设计概念，而不是旧有的渐变设计概念。

这些概念过去给用户的感觉是这是一个可点击的按钮，而不仅仅是有文本或图像的彩色区域。

突起按钮

这是一种突起按钮，让人感觉它相对于表面的某部分是突起的。这使用户有了按下它期望产生特定动作的感觉。更优雅且提供更好的用户体验

示例

扁平按钮

这是扁平按钮。它只依靠改变表面颜色的部分来给用户一种感觉，即这是一个不同的地方，如果您单击它可能会产生不同的动作。

示例

FAB按钮

这是FAB按钮。(FAB代表浮动操作按钮) 它遵循Material Design中Raised Button的概念，但具有浮动功能。此FAB按钮可用于指示应用程序中的主要操作。

示例

选择使用哪种类型的按钮

选择按钮样式取决于按钮的重要性、屏幕上容器的数量和屏幕布局。- Material Design指南

根据Material Design指南，您可以根据以下三个因素选择使用哪种类型的按钮：

• 功能: 它是否足够重要和普遍，以成为浮动操作按钮？
• 尺寸: 根据它将放置在的容器和屏幕上的z空间图层数选择凸起或平坦。屏幕上不应该有太多对象层。
• 布局: 在每个容器中主要使用一种类型的按钮。仅在有充分的理由时混合按钮类型，例如强调重要功能。

可能的使用方式

• 对话框 -> 平面按钮
• 内联 -> 平面/凸起按钮
• 始终可用 -> FAB 按钮/持久化页脚按钮

- Sami Eltamawy

---

感谢 @Sami El-Tamawy +1。标记为正确答案。你能告诉我如何在 Android <=2.3 中实现 raised button 吗？不使用任何第三方库。 - Usman Riaz

@UsmanRiaz 这是一个不同的问题。你需要发布它。就个人而言，我不建议这样做，因为每个Android操作系统版本都有自己的设计理念，扁平化设计始于KitKat版本。你不需要这样做。<=2.3的用户可能会感到奇怪。 - Sami Eltamawy

那么“FAB button”、“RaisedButton”和“ElevatedButton”有什么区别呢？它们看起来很相似。 - maiakd

Answer 2

这两个按钮的功能相同，但外观不同。使用凸起按钮比普通按钮更具吸引力。我们可以在xml中设置该属性为android:elevation="8dp"。而且这个按钮被称为Fab而不是Flat。

- Logic

---

但是在旧版本中没有像高度这样的属性。2.3及之后的版本小于3。 - Usman Riaz

目前，Fab和涟漪效果以及许多其他Android L功能不支持旧版本。 - Logic

难道不建议使用凸起按钮吗？为什么要用浮动操作按钮？您能否描述一下浮动操作按钮和凸起按钮的外观？不需要太多细节，只需要简单描述即可。 - Usman Riaz

Fab仅用于外观。Android的Messenger应用程序具有Fab，我们可以通过单击+图标来撰写新消息，这很容易，并且它会保持浮动状态，不会给用户带来太多困惑，请参阅-https://play.google.com/store/apps/details?id=com.google.android.apps.messaging&hl=en。 - Logic

@UsmanRiaz，有相当不错的后移支持高程和涟漪效果。https://github.com/ZieIony/Carbon https://github.com/rey5137/material - Zielony