搜狐首页 科技 法医秦明

手机搜狐

SOHU.COM

视觉系统中的按钮

建立一个长远的视觉系统的12点建议

我爱按钮们。我可以用按钮做很多事:进行下一步,做出决定,或者完成事务。有了按钮,交互变得焕发生机。

这就是为什么按钮们是一个设计系统里最重要的组成部分。非常简单,它们在指定的区域提供可以点击的简单标签。因此,按钮是你应用一种设计语言的基本特征的重要方式,之后你可以把特征扩展到其他更复杂的部分上。

这篇文章讲的是我在一个新生系统中着手设计主要按钮、次要按钮、以及一大堆其他类型按钮的时候所学习到的 12条经验。

主要按钮

1. 设定一个系统的风格基调

一个按钮就像是系统视觉风格中最纯粹的原子表达(译者注:原子是化学反应中不可分割的最小微粒)。它结合了三大属性——颜色、字体以及图像——这些成为了一个原子中不可分割的部分。按钮也引发了对空间的讨论:内部填充(特别是标签的左、右)和边距(与其他元素相邻)。最后,按钮甚至可以表达更深层次的东西,比如圆角(通过边缘半径),比如提升效果(通过边框阴影)。

要点:你应该赞同按钮是一个系统风格的首要展现。如果你把按钮的定义与颜色、大小、空间或其他细节等联系起来,那将会是很好的加分项。

按钮这样一个简单的元素包含了范围广泛的属性。

2. 设定一个语言基调

幸运的是,「点击这里」的讲法已经是过去式了。但我们仍然需要回答:一个按钮上的标签可以有多长?标签是用祈使句写的吗(比如「保存」或「关闭」)?我应该用一个对象(「文档」)来匹配一个动词(「保存」)吗?这些常用的标签有一些默认的用处么? 我们是否需要引入品牌声音?

要点:我发现按钮的价值是通过标签的引导来推动一个一致性的声音。当然,单词表和深层次的文案标准可以在具体的文档中找到,比如说语言和语调的指南。但无论如何,要把各种指引桥接在一起,按钮是一个绝佳的元素。

3. 在背景变得复杂时使用反转色

大部分按钮在白色的背景上都可以正常工作。但是当你把按钮放到一张照片上又会发生什么呢?或者深色的背景上呢?诶,它甚至可能被放到一个浅色的中性颜色上?你的按钮可以被用到任何地方吗?你可以更改主要按钮的颜色吗?

要点:请在一个清晰可见的背景上展示你的按钮,并且设定一个反转色备用——白色?一个完全不同的颜色?或是半透明?——在背景灰暗时使用。当在编排文档时,在一系列有普遍性的背景上展示备用的亮色或暗色来把标准搞清楚。

在不同的背景上展示按钮,看看它们看起来是不是都好

精选