按钮的UI设计:按钮风格演变及规则 已回复

会员ID:交互视角 女 35岁 时间:2016-10-13 03:02:27

按钮是交互设计中普通和常用的元素。尽管按钮看起来是一个非常简单的UI元素,按钮的设计在过去的几十年里改变了很多。但按钮的交互设计总是关于识别度和清晰度。

本文将概述按钮设计的演变,搞清楚为了设计出有效的按钮,需要遵循的最重要的准则是什么。

风格的演变

立体的按钮

早期操作系统的按钮依靠外观的浮雕和阴影和周围的文字区分开。这种设计方案基于简单的原则:使用边框、渐变,阴影从背景和内容中凸显出来,这样使得按钮很容易识别出来是可以点击的。

Windows95的对话框使用了深色投影和强调创造出3D效果,帮助用户解释了视觉层级,明确哪些元素是可交互的。

拟物化的按钮

在数字媒体设计中,拟物化是把UI元素设计成看起来像实物,无论是从质地上还是把按钮设计成看着像真实按钮。拟物化设计帮助用户通过对实物的认知来理解如何使用界面。如下图计算器,设计试图通过人们对计算器实物的认知来读懂数字界面。

扁平化设计的按钮

近期UI设计的最重要的转变之一就是从拟物风转向扁平化,去掉了3D效果。和拟物化设计不同的是,扁平化设计试图探索出一条不通过模拟实物的外观来表达数字媒体的视觉。因此,设计摒弃了笨手笨脚的用来按时可点击功能的视觉线索。

当一切都是扁平化的,用户该如何知道哪些是按钮呢?

用户仍然需要视觉暗示来知道页面上哪里可以点击:视觉上的暗示帮助用户更好地使用界面。颜色在扁平化设计中是尤为重要的,因为当使用扁平化按钮时,颜色将会是帮助用户识别的主要标识符。

似扁平化设计和悬浮按钮

似扁平化设计是原始(或极度)扁平化设计的演进。这种风格是近似扁平化,但是采用细微的阴影、强调和图层来界面的层级。谷歌的Material Design设计就是似扁平化设计,恰到好处的展示了界面的层级,诞生了新的按钮:悬浮按钮。这类按钮悬浮在界面的最上部,让用户集中精力于主要的操作。悬浮按钮作为行动按钮(促进用户操作),意味着将用户操作最频繁的按钮放在特定的屏幕上。

谷歌地图就是使用悬浮按钮的很好例子。用户在地图上最主要的操作就是找到方向,所以悬浮按钮在这里就意义非凡。

另一个好的使用悬浮按钮的例子是印象笔记。除了近扁平化的UI设计,app在导航条上使用了细微的投影以及悬浮按钮(“新增”按钮)。

 

幽灵按钮

2014年UI设计最显著的趋势之一就是幽灵按钮。幽灵按钮是指透明的只有边框的按钮,比如矩形或方形的。按钮标题通常是“空的”、“无修饰的”的按钮幽灵按钮通常是有很细的边框,按钮上显示的是纯文本。

幽灵按钮的诞生于扁平化设计的演变,苹果公司发布了iOS7之后幽灵按钮开始流行起来。iOS上的许多按钮都是幽灵按钮。简单扁平的矩形配上简洁的字体,很符合扁平化的风格。

幽灵按钮最常出现在动作指令按钮上,看起来很简洁。Specular网站就是运用这种按钮的好例子。

按钮设计的基础惯例

在开始设计按钮之前考虑好如何让设计表达按钮的可点击性。用户怎么知道该元素是可点击的按钮,应该做到如下:

按钮要设计得看起来像按钮(看形状)

让用户很容易与按钮交互(看尺寸和边距)

给按钮以明确的标签(看标签)

运用颜色对比来知道用户操作(看颜色)

请确保界面按钮的一致性,这样用户就能识别你app或网页的每一个页面UI元素中的按钮。

形状

按钮的形状应该是方形的还是圆角的是绝对要讨论到的问题,取决于网页或app的风格。方形的按钮的存在已经有很长一段时间了,用户很熟悉这种按钮。

调查显示,圆角按钮有助于加强信息处理,集中用户注意力于按钮中心。

你可以更加创新一点,使用其他形状的按钮,比如圆形、三角形或者甚至是自定义形状,但请记住这些按钮会有更多的风险。

尺寸和边距

按钮的尺寸对于用户识别按钮也起到非常关键的作用。你既要考虑到按钮的尺寸,也要考虑到可点击元素的边距问题。

尺寸当点击操作成为app或网页的主要输入方法时,你可以依据麻省理工学院联系实验室的研究来选择按钮的合适尺寸。麻省理工学院联系实验室研究表明,人指垫的平均大小为10-14毫米,指尖为8-10毫米,所以手指的最小点击区域应该设置为10毫米*10毫米。

这并不是防止用户出错的完美尺寸,而是最小化出错的数量的同时兼顾到其他重要的特性(比如屏幕信息密度)

当鼠标和键盘是主要输入方式时,按钮的尺寸可以稍微适应ui界面的密集度。

边距按钮之间的边距有助于分离控制,给你的用户界面呼吸的空间。

标签

你需要为按钮选择一个合适的标签。标签的选择应该基于最小惊讶准则:如果一个必要的按钮的标签令人费解时,有必要换掉标签。

有一个经验法则——根据用户的操作来命名按钮,附加用户操作后会发生什么以暗示用户。

下图的例子可以看出,当用户尝试下载文件至网盘时,对话框就会出现。这段信息提供了单独一个标题为”很棒”的按钮。这个标题可能使普通用户产生困惑,因为你不知道点了按钮后该发生什么。

颜色

当挑选一个调色板,记得考虑如何用颜色来导航和理解操作:

运用颜色和对比来帮助用户看到和理解app的内容,和正确的元素进行交互,理解操作。如下图的例子,我们可以使用红色的按钮执行潜在的有危险性的操作。

让最重要的按钮(尤其是运用在操作执行按钮上)一眼看起来就是最重要的按钮。比如,亚马逊网站使用有明显差异的黄色按钮引起用户注意,做出正确的操作。

总结

每一个按钮(传统的或现代的幽灵按钮或悬浮按钮)都是用来引导用户执行我们想让用户执行的操作。把网站或app想象成与一个繁忙用户的对话。按钮在此扮演中重要的角色——一个顺畅的互动使对话免于(比如找不到正确的按钮)产生终端,甚至最坏的结果,产生破裂。

谢谢!

 

 

 

 

原文地址:http://babich.biz/buttons-in-ui-design-the-evolution-of-style-and-best-practices/

评论 ( 683 条评论)
科普问题免费提问
无需注册,10分钟内回答