App 按钮的背后，这些学问你都不知道

qfwl · 发表于 2017-4-13 04:29:44

A 君导语：每个 app 里面会遇到「按钮」，在发展的过程中，按钮是怎样变化的？怎样设计按钮才合理？AppSo（微信号 appsolution）这篇文章便为你解答。
按钮是交互设计中一个常见基本元素。尽管按钮看似一个非常简单的用户界面（UI）元素，在过去几十年，其设计也经历了不少发展和演变。但万变不离其宗，对于按钮的用户体验（UX）设计仍关乎于辨识度和清晰度。
本文简要概述了按钮设计的发展演变，并提出用户体验好的按钮设计应遵循的最佳实践。

一、按钮设计的发展演变
1. 3D 按钮
自初以来，操作系统按钮一直通过浮雕和阴影来区分外围背景。这种设计方案是基于一个简单原则——通过边框、斜度和阴影使按钮在背景内容衬托下显得醒目，这样就方便将其识别为一个可点击的元素。

注意按钮是如何凸显的

Windows 95 对话框使用了厚重阴影和高光来制造 3D 效果，以辅助用户识别视觉层次，并了解哪些元素是交互元素。

凸显的交互元素看似能（通过点击鼠标）按下去

2. 拟物按钮
就数字设计而言，拟物化是指 UI 元素的设计与现实物体相像的一种方式，它可以是对现实物体材质外观的复制，也可以是模拟真实按钮使其看似像实物按钮。拟物化设计借助用户对某物的先验知识使其理解如何去使用新的交互界面。
下图中对计算器的拟物设计即通过用户对计算器实物的先验知识，从而帮助用户在数字环境中更好地去认识和使用它。

图片来源：theultralinx

3. 扁平按钮
如今 UI 设计的一个重大转变是逐渐从拟物化设计向扁平化设计过渡，设计效果也不再有 3D 效果。
与拟物化设计不同的是，扁平化设计被视作探索数字媒体的一种方式，其不再试图去「还原」实物的材质外观。因此，其摈弃了起初用来告诉用户哪些元素可点击/可操作的厚重视觉线索。

整齐排列的扁平按钮

苹果 iOS 系统的计算器 App

当整个用户界面都是扁平化设计，用户如何知道按钮在哪里呢？
用户仍需要通过视觉指引（帮助用户理解如何使用界面的可感知线索）来知道页面上可点击/可操作的地方。因此，颜色在扁平化设计中相当重要，因为若使用扁平按钮，这些颜色将是帮助用户识别按钮的主要标识符之一。
4. 近扁平化设计及浮动操作按钮（FAB）
近扁平化设计是在原扁平化设计（或超扁平化设计）基础上的一种演变。这种设计几乎是扁平化的，但又在设计中通过细薄阴影、高光和叠层在用户界面制造出立体效果。
Google 的质感设计（Material Design）语言即是一个按正确次序使用这些立体效果的近扁平化设计案例，它创新出一种全新按钮：浮动操作按钮（Floating Action Button，简称 FAB）。
这些按钮置于用户界面顶层，并吸引用户进行进阶操作（Promoted Actions）或主要操作（Primary Actions）。它们作为行为号召按钮（用以促进进阶操作），是用户在某特定屏幕上最常用的单一操作。
Google Maps 是正确使用 FAB 的一个典例，用户在地图上最主要的操作行为是找到方向，所以Google FAB 的设计方式就能说得通。

Android 系统上的 Google Maps

另一个在 UI 设计中使用 FAB 的范例是 Evernote 。尽管 Evernote 的 UI 几乎近扁平化，其在导航栏添加了细薄阴影，同时也使用了 FAB （新建笔记）。

安卓系统上的 Evernote 应用

注：相关网站建设技巧阅读请移步到建站教程频道。

		自动登录	找回密码
密码			立即注册

App 按钮的背后，这些学问你都不知道

相关帖子

浏览过的版块