kotlin设置按钮不可点击_按钮设计的小技巧-上集

译自： https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23

我喜欢按钮，我可以用按钮干很多事情，比如进入下一步，发布评论，完成某件事。正是因为有了按钮的设计，生活中的互动才更加精彩。

这就是为什么按钮可以说是一个设计系统中最重要的组件。简单来说，按钮是一个在一定区域内可点击的一个小标签。而且按钮是你设计中会用的一个基本组件，可以将其与其他组件相组合以设计出更加复杂的组件。

下面是我在新兴系统中学到的关于一级按钮，二级按钮以及其他类型按钮相关的12个技巧。

一级按钮

#1 设置系统的风格基调

按钮是一个系统关于视觉设计的最纯粹，最原始的表达，它包含了三种典型属性：颜色，字体，图标（Color，Typology，Iconography），且是一个不可拆分的最小设计元件。按钮在空间布局上引发了一些争议，如内边距（尤指左右边距）和外边距（与其他设计元素之间的间隔）。当然，按钮还有一些其他更复杂的属性，比如圆角（通过改变边界半径来实现）和立体效果（通过边缘阴影实现）。

Takeaway：按钮设计是系统样式的主要代表之一。如果你定义了颜色，大小，间距或者其他更加细致的属性，那你的设计可以加分。

作为一个基本组件，按钮有很多属性

#2 设置按钮里文本的规则

幸运的是，“Click here”已经成为了过去时。但是我们仍然需要一些答案：按钮标签的极限长度是多少？按钮里的文本标签是否是必不可少的，比如“保存”，“关闭”？我是否应该使用动词搭配操作对象的形式，如保存（动词）-文档（名词）？对于常用操作，是否有规范性标签设计？我们是否需要插入一个品牌形象？

Takeaway：在有按钮的地方添加标签指南，保持设计的一致性。当然，在Voice and Tone文档中可以找到单列列表和详细的编辑标准。但是，按钮是将指南相互联系在一起的桥梁。（通过点击文字按钮/Text Button进行各分类之间的切换）

#3 当背景色变得复杂的时候，倒置按钮设计

在白色背景上，大多数的按钮都看起来不错，但是当你把它放在一张图片上会变成什么样呢？或者在暗色背景上，又会变成什么样呢？放到一个浅中性颜色的背景上呢？任何场景中都能复用一种按钮么？你可以尝试更改一级按钮的颜色么？

Takeaway：将你的按钮展示在多种场景中，并为其设计可替代（倒置）方案，通过改变它的配色（白色，或者其他的颜色），或者透明度以便于展示在暗色背景中。当编写文档的适合，展示浅色和暗色两种形式以运用在大部分常见背景中。

在不同背景类型中的按钮样式，有好有坏

#4 每页限制一个，除非重复主要/一级操作

按钮呼应着操作。对于高频或重要的操作，我们经常使用一级按钮来捕捉用户的注意力。直到我们无法确定优先级，整个页面上堆满了一级按钮。

但在一些案例中，所有的功能都是一级功能且优先级平行，这时采用一级按钮是合理的，比如网易严选产品搜索列表页的“加入购物车”按钮，或者设置页中一堆平行的选项。

网易严选

Takeaway：明确什么时候一个页面中可以有多个一级按钮，什么时候不可以。

#5 设计并定义按钮的交互逻辑

按钮是最原始的交互，并随着交互动作而变。如果你给开发人员的文档中仅仅只是展示当页面载入时按钮的展示形式，这肯定是不够的。实际上，应该由设计师去定义按钮在不同状态下的展示形式：默认状态，悬浮状态，焦点状态，点击/激活状态，加载状态，禁用状态。

Takeaway：将不同状态的按钮嵌入一个页面，现场演示动态Demo，不需要用户进行触发操作可自行播放。设计文档并非一个寻宝游戏，应将所有信息简单直白的展示出来，可参考Material Design。

#6 混合元素之间的弹性设计

将按钮与图标相结合能够便于用户快速识别，并理解其含义。我认为按钮是预期可点击的区域中的一种标签。当你增加了一个元素，哪怕是一个简单的图标，按钮的原始布局不应该被拆解。当出现一些难以预测的元素，你会发现一些让人讨厌的问题，比如布局，内部间距。尤其是当按钮包含了文字标签，图标和一些其他元素时，你会想要让它们规整一些。

Takeaway：按钮的设计其实是可以更弹性的，它可以增加一些图标，标签，甚至别的内容，并且不会因此而出现布局，间距的问题给用户带来麻烦。

PS：我是结合原文加上个人理解进行翻译的，如果有不当的地方，欢迎指正！
编辑于2020-08-26