您的位置 首页 > 数码极客

【qq邮箱图标】关于按钮圆角的困惑,这篇文章全部给你答案

编辑指南:生活中圆角的设计随处可见,为什么相比直角,圆角自诞生以来就被广泛使用,成为经久不衰的设计趋势?这篇文章的作者对此发表了自己的看法,与你分享。

之前的干货分享了CTA按钮的位置和尺寸属性,很开心看到一些朋友的正向反馈。

今天,我们来继续分享CTA按钮的圆角属性。

提起CTA按钮的形状,我们印象中基本能想到三类:矩形、圆角矩形和全圆角矩形。这三类按钮形状本质的区别就在于圆角的不同。

那么问题来了,CTA按钮为何会有圆角的差异?圆角背后有哪些特性和适用情况?

别急,且让我们先从圆角的历史说起。

一、关于圆角的一些历史

互联网中的圆角矩形最早源自于1981年的Macintosh。乔帮主希望这种美好的形状能够出现在正在研发的苹果系统中,他说服了工程师比尔·阿金斯特实现了圆角矩形的绘制技术,并为其命名为RoundRects。之后,这个美妙的形状便被沿用到了苹果所有的用户界面当中。

值得一提的是,在iOS 7代之前,图标的圆角曲率并非连续的,每个圆角与边缘的衔接处都会带有明显的切边。

苹果受工业设计的启发,将工业中的曲线连续概念应用在了ui中,以连续、渐变式的曲率来将让圆角矩形变得更加圆润、平滑。同时,这种更新也与同一时间发布的iphone5c的边角工艺设计达成了统一。

你以为苹果对圆角的执着止步于此了吗?并没有~

到了2017年,圆角甚至被直接运用到了手机屏幕本身。当手机机身、屏幕、dock和图标,每一处的圆角以近乎于等比数列的形式依次追随时,就形成了一种充满魅力的秩序感、和谐感。而这种被称为全面屏的工艺也被各大厂商们竞相效仿。

到了去年的6月份,苹果将自己对圆角的执念带到了Bigsur OS的系统中。Bigsur的设计语言里,几乎所有的系统图标都变为了圆角矩形,呈现出了非常高度的一致性。

并且,原本的小圆角全部放大处理。比如dock栏、按钮、窗口圆角、甚至是文件夹的图标,他们圆角全部得到了放大。总之,macOS整体的设计风格越来越像iOS靠拢。

相比完全扁平化的iOS图标,macOS的图标也多出很多的拟物细节,比如反光、高光、投影、以及邮箱图标上的一行生怕被你看到的超小文字“Apple Park CALIFORNIA 95014”,这是Apple Park的地址。当然这些不在此篇讨论范围内。

既然提到苹果,就不得不提到苹果的死对头——盖茨兄的微软。

其实早在远古时代的XP,就出现了圆角设计,乃至后面的vista和win7。

但是到了WP时代,微软为了与苹果做出风格差异,以完完全全的直角来融入到触屏端的设计语言,而这个语言也成为了微软最具代表性的特有风格——metro(modern UI)。

在metro下,所有的图标彻底得脱离了拟物的范畴,它们全被一巴掌拍扁,变为了地铁标志牌一样的完完全全的直角矩形色块。

直至后面得到显著优化的win10以及17年推出的Fluent Design,这种风格才算是真正得被用户们认可和接受。不过,由于直角本身过于方正锐利,导致这种风格犹如”钢铁直男“一样缺乏细节和美感,因此喜欢这种风格的用户依然是少数。

有意思的是,在前年20H1版本的win10界面中罕见得回归了久违的圆角,这也意味着微软彻底放弃了自己坚守近10年的直角阵营,正式向主流的圆角风格妥协。

为什么相比直角,圆角自诞生以来便被广泛运用,成为了经久不衰的设计趋势?究其原因还得从圆角本身的特性讲起。并且也正是出于这些内在特性影响了CTA按钮不同的形状使用。

二、圆角的内在特性

关于圆角本身的特性大致可以分为以下三个。

1. 亲和感

从远古时代开始,人类便意识到形状的尖锐程度所带来的影响。

人类在木棍上绑上磨尖的兽骨、岩石作为武器以刺穿猛兽,但是相对应的,他们又畏惧猛兽的利齿、亦或是拿着同样武器的敌方部落刺穿他们的身躯。

人类对这类尖锐物体本能的警惕感一直传承至今。

在现实世界中,绝大多数物件的制造都会为了避免尖角割伤用户的手指,而为其注入圆角的工艺,让尖角变得圆润平滑。

圆角代表了安全,直角代表了危险。这个心智模型(敲黑板!!这个模型很重要!!不知道的童鞋可以翻看我之前的文章~)根深蒂固得驻扎在我们的大脑中。因此带有圆角的矩形往往会给予用户足够的亲和感、安全感。

比如之前设计圈热议的小米更新logo事件,尽管超椭圆的形状和圆角矩形还是有些区别的,但是这种圆润的形状让整个调性变得更加接地气了,说专业点儿,叫alive了。

2. 辨识度

我们对圆角的认知除了源自远古时代趋利避害的本能,人眼本身也同样更偏爱圆角。

Visual Perception一书的作者,Jürg Nänni曾经研究并提出观点:

人的视网膜对于正圆形的处理速度要显著高于对边角的处理速度。

这是由于人类的视网膜中存在一块视觉最敏锐的区域——中央凹,它处理圆形的速度最快,而处理边缘则需要用到大脑中更多的”神经影像工具“。

而圆角矩形在视觉上比直角矩形更接近圆形,因此人眼处理带圆角的形状时更易辨识。

3. 视觉聚焦

形状本身也自带了“视觉引导”的属性。拿圆形直角矩形、圆角矩形和圆形举例:

圆形以及圆角矩形不存在任何的尖角,没有任何突出的焦点,圆周以及圆角矩形的四个圆角会产生一个向中心过渡的趋势,引导视线聚焦到形状内部。其中以圆形聚焦性最强;

但是,矩形的四个顶角则形成了四个视觉焦点,人眼看矩形时,他们的视线其实倾向于发散而非聚焦(当然,易于发散的缺点也同样导致了矩形在视觉上辨识速率更慢)。

因此,直角矩形本身倾向的发散感和疏远感,使得大多数的产品更乐于采用圆角矩形甚至全圆角矩形来作为CTA按钮的形状。

三、CTA按钮的形状

1. 全圆角按钮

由于圆形本身最强的聚焦性和辨识性,很多CTA按钮会倾向于使用全圆角的形状。

最典型的就是线上营销互动和各类付费业务的行动按钮,大多会采用全圆角按钮的形状来迅速抓取并聚焦用户的注意力,提升用户采取点击行为的可能性,继而提升转化的可能。

即便是那些偏理性、冷静、高端调性的产品,在必要的时候也会尝试使用全圆角的形状来呼吁用户点击。比如寺库、支付宝、知乎。

2. 按钮圆角与用户行为

可能很多小伙伴会因为设计的一致性而陷入一个错误认知:产品中所有的按钮圆角必须保持一致。

我之前也是这样,认为既然是按钮,那就必须形成规范,不然界面会变得混乱不统一。

关于作者: admin

无忧经验小编鲁达,内容侵删请Email至wohenlihai#qq.com(#改为@)

热门推荐