设计控件整理-按钮

在站酷上UI设计优秀的牛人很多。然而在我亲身实践的时候却发现，中后台界面设计并不简单。像UI、平面、视觉这种热度高的方向，好的教程可以说是很多很多，从配色、板式、表现、创意到情感设计应有尽有，非常详细，自学起来及其方便，基本上是手把手教学。

然而中后台设计的自学资料是真的难找，据我所知有很多同学都是在市面上成熟的设计语言上，直接取设计控件，改一改就交差了，适应性和延展性都有所欠缺。如果从前往后自己亲手做一遍，或者功能更新需要拓展，很有可能是做不出来的。

在网上看的教程，因场景的不同很难投入到实际使用（看完不明觉厉，点赞告辞）。

本篇文章希望从最基础的原理说起，把那些日常容易忽略的点提出来。为日常设计落地提供帮助。

——以下是正文——

1.按钮的作用

按钮有很多很多种，但功能大体分为两种：

真的，几乎只有这两种

2.按钮的分类

大量的日常使用经验，使我们的潜意识中知道，不同状态的按钮是干什么的，即使不是设计师，也能使用的非常流畅。作为设计师，需要在设计时遵循这一规则，降低用户的学习成本。

按钮的样子、颜色、大小等会随产品的风格而变化，没有绝对的对错。要注意的是：不要引起歧义。

3.实际运用

实际运用中，我们的大脑不用思考它是什么种类的按钮，就能直接知道它的状态。这就是用户习惯的养成，设计时应注意不要轻易打破这一习惯。

这里用设计师常用软件PS举例，得益于ps的优秀界面设计，按钮无歧义且图标表达易懂、文字表达到位，设计人员使用时并没有想这么多，就能熟练的做出操作。

4.制作技巧

这里分享两个制作时的技巧，方便统一与快速修改。实际设计时，先统一规范，后高速执行。统一规范时不要拘泥于数据（例：在4px的网格中，不要过度纠结中型按钮是高32还是36px），原则是：看着舒服&没有歧义。

5.展示技巧

这里一些展示技巧，也包含我在日常使用时遇到的一些“看着不舒服，用着有歧义”的案例。这些案例不能说是绝对错误，但会让人用着不舒服。

结语

本文没有覆盖所有场景，仅举出常见案例，帮助设计快速响应产品需求。

控件是死的，适合产品的，才是好的。切记生搬硬套。