圆角按钮的设计 · Cheems的博客

按钮可以说是Web页面中最基础的元素。最近学习了一些关于按钮的设计，还挺有收获的。

主要按钮和次要按钮

主要按钮在页面中的作用是强引导用户，表示了页面最想让用户进行的行为。所以这样的按钮不宜出现多个。例如，在视频网站中，发视频/关注订阅/购买会员大概率使用主要按钮。我浏览了各种主流网站，发现主要按钮的设计非常统一：和整个页面产生鲜明对比的按钮颜色，以及大概率使用完全圆角按钮。

下面是我截取的一些网站的主要按钮：

而次要按钮既可以表示可进行的操作，也可以和主要按钮组合使用，为用户提供其他选项，如下图的X中关注按钮旁边的其他按钮。次要按钮的一般设计是描边的样式，也可以是带下划线的文字按钮。

圆角和直角究竟有什么区别？一些人热衷于大圆角，一些人却更喜欢直角按钮。其实这里没有设计的对错，只有主题的区分。

有一个知名的心理学实验：bouba/kiki实验。提问者给出一个尖锐的形象和一个柔和的形象，然后问实验者bouba对应哪个，kiki对应哪个。绝大多数人都认为bouba对应柔和的形象，kiki对应尖锐的形象。

有趣的现象是，这种心理直觉也会带到性格上。曲线构成的形象更容易让人联想到温柔，平和，易接近，无害等特征。而尖锐棱角的形象更容易让人联想到硬核，实力强劲等特征。

这就给了设计师发挥的空间。我们从品牌logo也可以窥见一二。传统工业，注重硬实力的企业logo往往比较尖锐，而自媒体平台往往比较柔和。

X可能是个例外，这可能是马斯克长期在工业领域形成的审美。说实话我更喜欢小蓝鸟的图标

再回归到页面上，到底使用圆形按钮还是方形按钮？答案已经很明显了。

不过这里还是要提一些圆角的优势：

我们的大脑相比于折线似乎更容易处理曲线的事物，折线给我们一种拐弯的别扭感。比如我更喜欢在流程图中使用贝塞尔曲线而不是折线。

而且圆角的卡片在大量堆叠时，效果会比直角更好，更有利于分辨。这可能是因为圆角指向矩形的中心，因此我们可以更容易聚焦到矩形内部。而且完全直角的矩形相连，很容易让人分不清某条边到底属于哪个矩形。这可能也是现在很多网站都不再使用绝对的直角了，多少会带2px的圆角。

所以我们应该大面积使用大圆角甚至完全圆角按钮吗。

Google的Material Design喜欢大圆角。这也体现在他们旗下的各种产品上。但说实话，我不喜欢完全圆角按钮的横向堆叠，我感觉这浪费了很多空间，造成一种不适感，不过还好这些都是次要按钮，背景颜色都很淡，因此也可以接受。

按钮可以带图标，这里就简洁提一嘴：图标的大小要么和文字高度一致，要么就明显比文字高，不要用比文字小的图标。下面是几个例子：

另外，如果是纯图标按钮，应该考虑图标的视觉中心，例如“下载”图标是个上轻下重的图标，直接图片居中看起来其实并不在中间，应该往上移一点才合适。