赞助商
立即赞助

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

UI设计3年前 (2021)更新 流光
2.7K 0 0

@Daidai丶呆 :图形是产品设计中被讨论得最的元素之一。视设计师使用不同形状的图形来表达物的样;互设计师选择不同形状的图形,决用户在某场下的诉求问题。其中争议最大,且被更互联网设计师使用的图形,是圆角矩形。而讨论是:样图形,圆处理与处理所传递信息有什么不?为什么圆成了趋势?

许人认为图形外框的样化趋势是由 CSS 技术的革新开始,但正确的时间点,应该是在 iPhone 4 被的一刻。

当中的差异:者通过技参数改变形状内以引起用户注意;后者通过传播真实产品塑造用户对于图形外观的全新认知。认知的转变,需作用于习惯与行,当中的核手段,就设。(参考滴滴类产品改变人的出行方式)

用户对于一款产品的认知,主要依据产品所能解决的实际问题以及外在形式。而计需要关注的点会更多,包括产品架构,流程,术等内容。同还需要站在用户视角观测产品是否易于使用,通常将其称为「用户心理模型」。类比于用户只需了解表是否正常动,能否准点报,计则需要理解表计框架,结构形式等详细内容。其中最重要的,还是一名计对内容的全局认知。

到图形外观的话题上,同样的道,人们对于产设计中的图形使已经逐渐想,好图形外观的形式如何已经重要,重要的是图形传递的信息本身。这样的认知稍显片面,对于设计师而言,图形圆角形式呈现的背后逻辑,表面上它表达的信息更为重要。解这一点之后,设计师再使圆角矩形传递信息,解上会更显深刻。

所以我后会围绕下这几个问题,来说明圆矩形意义:

  • 为么 iPhone 4 的发布是圆角矩形成为设计趋势的转折点?
  • 圆角矩形传递的信息有么同之处?
  • 头像与按钮为什么越来越多地使用圆?

圆角矩形为何成为趋势

虽然在 iPhone 4 发布,大多数的软件图标都还是拟物风,但它的图形外框大多是以圆角矩形的方式来理。在 iOS 系统,这种圆角矩形的载体已经成了其系统统一承载内容的形式。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

也许有人会问为什 Apple 选择了这的呈现方式,而不跟 Android 一,为了体现内容的丰性,让图标外框多化呢?因有个。

一是乔布斯认为有物件都有圆角,而相圆形与椭圆,圆角矩形反而是生中更为见的现象。

Andy Hertzfeld 在 Round Rects Are Everywhere 讲了关于圆矩形诞生故事。

Apple 的天才程序 Bill Atkinson 创立一种能够快速绘圆形与椭圆的方法,乔斯认为圆形与椭圆不错,但是圆角矩形更。而 Bill Atkinson 并不么认为,他得圆角矩形更难绘,且人们也不需要圆角矩形。是,乔斯回应道:「到处是带有圆角的矩形!」他指着房间里的各种物件,几乎所有地方以看到圆角矩形。他甚至说服 Bill 和他一绕着街区走一圈,指出他能找到的每个带有圆角的矩形。当他们看到带有圆角的禁止停车的标示时,Bill 终被乔斯说服,二天就拿出绘圆角矩形的方案。

之后,他们将其命「RoundRects」。接下的几月里,Roundrects 逐渐入用户界面的各部分,并很变得不可或缺。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

尤其 13 ,iOS 7 对圆角的新。它已与我们平时认的圆角矩形不同,这圆角的优化过程非常复杂,当中涉及的数学算法如果不专业的研究学者,可能无法理解其差异。

简来说,Apple 采用的圆角曲率所生成的图形,是更圆滑,无显切角的。这的圆角矩形在过渡上更滑,且在视觉上的体验也更融洽。

二是,为了打沉浸式体验,乔布斯认为应该 iPhone 的各个元素形式统一。

与上述圆图标相似是 iPhone 身。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

iPhone 身所呈现圆在制作工艺上,比软件图标圆更为复杂。而其内致表现形是为了打造沉浸体验,形成品品认知。而 iPhone X 世,是为了将这概念彻底落实。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

前提到,用户与设计师于款品认知是不。用户认识款品,首先关注是观表现,其才是被承载内容。所以用户 iPhone 以及其软件图标展示形已经形成认知,那么 iPhone X 全屏也是很自然结。

机身形态与软件形式的自结合,能够让用户更的接受产品的外在形式,且其面屏的设计也能更地被用户认。甚至被很人吐槽的 iPhone X 齐刘也是依据样的圆角形式来设计的,目的就是为营造统一的产品形态。

以至于其他一些产品机身的模仿,导致让人误以类似的业特性所产的第一直觉都「这一款 iPhone」,仔细一看知道,噢,原……

当一款真实的产品被人所受,以普遍使用在生活景中,其中逐渐营造出用户对圆角矩形的惯性认知,以至于它的可受度也逐渐提高。

这是我在开篇到说「iPhone 4 的发布奠定了圆角矩形成为设计流行趋势的基调」的原因。

到这为止是背景,下我们再深入聊聊特性。

圆角矩形所传递的信息特性

上节讲述了圆矩形兴起背景,然这是部分,圆矩形成为流趋势,不能说完全是为 Apple。有是,它自身本具备优势。

上面提到乔斯说服比尔,要有圆角矩形,因为生活中到处是圆角矩形。但是里有一个问题没有决,即「为什么生活中到处是圆角矩形」呢?

玩 3D 具的人应该知道, C4D 软件里,对一件体创建圆角通常选择「倒角」,再控制「段数」,之后通过「平滑」选项,将角度变得圆滑(当然还其它方式)。目的渲染的时候不至于让体看起太尖锐,色泽也通透。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

活中,件棱角如果过于锋利,则显得不够安全。业角度,圆角/倒角可以让件好组装。相比棱角过于尖锐以至于让人觉得冰冷,圆角的设反让人能感受到温度。所以对于推崇自然至的乔布斯,选择元素时,也会希望能贴近活。

从视觉,触,便捷等因素能了解真实物件的圆角优势,但优势是否适用于图形素呢?

这里有个相通点,即虚拟图形依附于视觉而存在。人眼在接收图形信息时,对圆角矩形的认知会优于直角矩形。因为人眼结构中辨识最强的位,会优先识别图形的视觉中心。而圆角与直角矩形的区别就在于容速的识别差异。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

之存在这样的差异,要是因为图形存在视觉引导的作。圆角因为平滑的边,将户的视线过渡到图形中心,而直角矩形因为尖锐的特性,导致人眼在图形识别上容易发散。因此,在图形元素的择上,为了户聚焦,圆角则获得了设计师的青睐。

所以后在其它设计系统与设备上,更多圆类图形也被投入使用。尤其是在各类 App 与网页设计,圆矩形更是被广泛应用于头像、按钮等元素上。

头像与按钮的圆角含义

随着互联网品普及,们于品界审美意识与体验意识逐渐提高,界视觉呈现也成了互联网公司所视象。头像作为品界用于身份信息识主要元素,是用户以及设计师最为关注内容。

因此,对头像外框形状的选择尤其谨慎。当中最为常见的主要有两类:圆形、圆角矩形。所以在进行选择时,设计师除针对两类图形依附界面身的视效果外,还需整考量图形与界面元素的融合程度进行综合分析。至直角矩形,目前很少见到其用头像的设计上。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

以圆形的表现形式而言,其周围没有任何节点与棱角,给人以灵动、均衡、平滑、优美的感受,通常在带有设计感或内容元素为富的产品上出现, ins、微博、乎等。相比圆形而言,棱角尖锐的直角矩形给以人沉着、冷静、拘谨、冰冷的感受,所以很少产品将其为展示型头像开放给用户使用。而圆角矩形正中和两者的气质,也成很产品选其为头像的原因。通常类头像出现在设计为简约的界面上,微信首页的用户头像。

无论圆形,还圆角矩形,其终目的无非身份识别以及彰显性。节聊过,圆角识别会引导用户倾向于图形的视觉中,作辨识身份的信息,并不需仔细审视,只需速识别即可。所以只点击用户时,会以矩形形式完整呈。

这有一个点是,当圆角矩形以头像形式出现在界面中,通常是以图的方式呈现。因此,当图集中于素复杂的界面中,圆角矩形牺牲了构图结构,略了四边内容背景反而成为了优势,息细节显少于直角矩形,以至于在界面上帮助用户更快识别头像内容,判断图形有用息。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

所以在头像的形状选择上,圆角矩形的优势会显高于其图形。而圆形圆角矩形的差异就是上述提的,要根据界面素的丰性、计等因素进行抉择。

但是这里还有个思考点,就留个各位自己思考了。如果仔细观察各类产,寻圆形头像与圆角矩形头像的区别,那么在头像尺寸上,可看到一些秘密。

原本我想再以按钮为例解读圆异,不过仔细回顾内容后自认为已经常详细,相信各位自己也能去做好分析,所以不增长篇幅了。有兴趣学,可以自己做波分析。

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

小结

简单总结一上面的容:

  • 第一节讲解了圆角矩形在计上成为流行趋势的背景;
  • 第二节告诉各位圆角矩形在信息传递上的优势;
  • 第三节以头像为例将前知识落地分析。

圆角本身只是一个很小的元素,就像他设计论、方法一样,我们可忽视它背后的论,但作为设计师,对于这些细节的追求应该是持续且专注的。

欢迎关注作者微信公众号:「呆呆U理

圆角矩形为什么能成为设计趋势?高手给了这篇深度分析!

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

通常每年进入下半年之后,设计趋势通常都会呈现出一种比较稳定的状态,不太会出现很独特的变化。不过,在具体的设计项目当中...
2018设计趋势
文章将分享 ISUX 设计趋势报告的第三部分,关于对角色服务的见解。 在本文中,我们将分享对于最近又逐渐流行起来的角色服务...
2019设计趋势
编者按:Google I/O 大会之后,Material Design 也好不意外地随之进行了更新,作为目前最主流也是对当前设计影响最大的一种设...
Google
在过去的三个礼拜,我研究了科技创新对设计产生的影响和变化,并输出了以下三份设计趋势报告,得到了很多设计朋友的支持和认...
插画设计
进入2018年之后,再来审视今年的整个 LOGO 设计趋势,会比之前的预测要清晰了不少。通过对过去几个月的新 LOGO 设计的观察,...
ogo设计
在本文中,我们将分享 ISUX 设计趋势报告的第二部分,关于对 IP 行业的见解。因为在产品或服务的应用中可以提供亲切而积极的...
IP形象
@Daidai丶呆 :想要理解「输入框」的校验规则,就要先对「输入框」的框架做好拆解。这篇文章将从框架到校验做全方位的梳理。 ...
交互设计
编者按:在上一篇《2021年平面和视觉流行设计趋势》当中,资深设计师 Iveta Pavlova 总结的12个平面设计趋势,这篇同样来自于...
2021设计趋势