小按钮,大学问

小按钮,大学问

在我们日常使用个人电脑以及手机等各种移动设备过程中,按钮或许是最不起眼但却是使用最频繁的。对于一个产品来说,作为最基本的交互控件的按钮统一风格是必须的。很多时候,一个按钮风格统一的产品甚至可以让用户仅仅通过按钮就可以辨认出来。下面这张图片是 18 个产品的按钮控件样式,来做个测试吧,看看你能分辨出几个?

测试答案

做完测试了吧,文字答案在文章底部,或点击我查看图文版答案。

按钮的作用

从上面测试中可以看出,按钮是一个网站或一个应用除了 Logo 之外最容易辨认的元素,因此一组经过设计过的独一无二的按钮可以建立并保持用户对网站或应用的忠诚度。

什么是好的按钮?

一.  统一按钮尺寸

对于一个网站或一个应用中的按钮来说,或许在宽度上有大有小,但在高度上是应该统一大小的。如果你想设计一组符合行为召唤(call to action)的按钮的话,那么这一点是必须要遵守的。

二. 统一按钮风格

要想打造一组统一风格的按钮,首先要在外观上保持一致。如果部分按钮有圆角的话,那么其他按钮最好也要都有同样的圆角效果(圆弧的半径也要保持一致);如果部分按钮有内陷样式、渐变或纹理的话,其他的也要保持相同的风格。

三. 最多三种颜色(除非你是微软)

对于一组良好设计的按钮来说,有三种区分明显的颜色就足够了,它可以满足绝大多数界面的需求。

1. 选择一种颜色作为一级命令按钮底色,如 Google 的蓝色搜索按钮以及 Twitter 的黄色注册按钮。

2. 选择另外一种颜色作为二级命令按钮底色,二级命令按钮虽然也重要但不能与一级按钮形成冲突。

3. 而第三种颜色,也是最后一种颜色可以将它应用到其他按钮中去,如“取消”、“设置”以及导航按钮等。

小按钮,大作用

对于按钮的作用,或许亚马逊的购买按钮(Add to Cart)最为人熟知,这个黄色的条状按钮不仅是用户眼中真正的“亚马逊 Logo”,其背后的“一键式下单”(One-Click)功能在交互设计史也有着重要的地位。此外还有 Facebook 的 Like 按钮也在同样改变着互联网世界

--------------------GeekPark's split line--------------------

测试答案:

1. Google 2. Twitter 3. Facebook 4. Microsoft 5. Pinterest 6. Yahoo 

7. Instagram 8. Flickr 9. Spotify 10. Rdio 11. Svbtle 12. Medium 

13. Basecamp 14. Square 15. Amazon 16. Quora 17. LinkedIn 18.Path

测试分析:

你一共辨认出几个产品/公司呢?下面是测试对应结果的分析。

0 个     :恭喜你,你是一个正常人;

1-5 个  :是不是被 G*W 关照了?

6-10 个 :不错的成绩哦;

11-15个 :身体还行不行,赶紧趁今天天气不错出门晒晒太阳吧;

16-18个 :太厉害了!你是一个不折不扣的网虫。

图形设计按钮控件
下载极客公园客户端
iOS下载
反馈