您现在的位置:   首页 >> 优客智库 >> 产品设计

你对圆角所有的困惑,这里都帮你解答了!

发布人:www.yunke.ai 发布时间:2021-01-01 124 次浏览

编辑导语:圆角设计在生活中是比较常见的,在手机、网页端等等我们都能看到各种圆角设计,特别是苹果手机的软件设计都为圆角;为什么设计师喜欢用圆角?本文作者对此做出了详细的介绍,我们一起来看一下。

圆角无处不在,不论是banner中的按钮、彰显身份的头像,还是承载内容的卡片。

但是,圆角的背后到底是什么样的逻辑?或者直白点说,为什么这里是圆形头像,那里是矩形?这里出现了全圆角按钮,那里却不是?

如果你和我有一样的困惑,希望我的这篇文章能帮到你。

一、圆角的历史

其实,互联网中的圆角矩形最早源自于1981年的Macintosh。

乔布斯希望这种美好的形状能够出现在正在研发的苹果系统中,他用生活中带圆角的桌椅、甚至是街头带圆角的标志牌成功说服了工程师比尔·阿金斯特实现了圆角矩形的绘制技术,并为其命名为RoundRects;之后,这个美妙的形状便被沿用到了苹果所有的用户界面当中。

你对圆角所有的困惑,这里都帮你解答了!

值得一提的是,自那个彻底转型扁平的ios7开始,所有的圆角矩形得到了特殊意义上的优化。

在7代之前,图标的圆角曲率并非连续的,每个圆角与边缘的衔接处都会带有明显的切边;苹果受工业设计的启发,将工业中的曲线连续概念应用在了ui中,以连续、渐变式的曲率来将让圆角矩形变得更加圆润、平滑;同时,这种更新也与同一时间发布的iphone5c的边角工艺设计达成了统一。

你对圆角所有的困惑,这里都帮你解答了!

苹果对圆角的执着并不仅仅停留于此。

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

你对圆角所有的困惑,这里都帮你解答了!

既然谈到苹果,就不得不谈到苹果的老对头——微软。

其实早在远古的XP时代就出现了圆角界面设计,乃至后面的vista和win7;但是到了WP时代,微软为了与苹果做出风格差异,以完完全全的直角来作为触屏端的设计语言,而这个语言也成为了微软**代表性的特有风格——metro(modern UI)。

在metro下,所有的图标彻底得脱离了拟物的范畴,它们全被一巴掌拍扁,变为了地铁标志牌一样的直角矩形色块;向来追随苹果脚步的微软思想超前得引入扁平化的概念,这也加快了拟物时代向扁平时代的过渡的进程(虽然当时的win8由于忽略了占据绝对比例的非触屏设备用户的体验,而被喷得体无完肤。)

你对圆角所有的困惑,这里都帮你解答了!

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

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

你对圆角所有的困惑,这里都帮你解答了!

那为什么相比直角,圆角自自诞生以来便被产品广泛运用,成为了经久不衰的设计趋势?究其原因还得从圆角本身的特性讲起。

二、圆角的特性

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

本页面均来此互联网页面如有触犯其他或者第三方利益请联系站长删除 137865155@qq.com