首页 > 网页教程 > 设计分享 > 图形设计分享:圆角矩形为什么能成为设计趋势?

图形设计分享:圆角矩形为什么能成为设计趋势?

时间:2019-10-18    来源:呆呆U理

@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 的发布奠定了圆角矩形成为设计流行趋势的基调」的原因。

到这为止还只是背景,下面我们再深入聊聊特性。

相关推荐
前瞻:2012年Web设计和开发的15个最新趋势
2013年web开发者最需要了解的开发趋势和技能
2013年最受欢迎的20大网页设计趋势分享
最新的七个WEB设计趋势及其生存技巧预测
展望2015年网页设计趋势
网页设计师必看:2015全球网站设计趋势推荐
最值得关注的21个网页设计趋势:单色网站、视频背景等
四大设计趋势教你如何你玩转2015年网页设计
从日本设计机构看日本的网页设计文化与趋势
2015上半年最具代表性的网站设计趋势TOP 10
不一样的角度!老外设计师眼中的国内设计趋势
盘点2015下半年网页设计的9大趋势
读懂十大未来设计趋势,别让你的设计白费力气
明年最值得关注的16个网页设计趋势
年度总结:最新视觉设计六大趋势分享
底部导航设计、Box元素、竖线元素3种最新网页设计趋势
网页设计新趋势:非对称布局、感知化设计、自定义字体等
这5种网页设计趋势已经过时,你还在用吗?
海报式首页、渐变式文本等3种网页设计趋势分享
网页设计趋势:斑点和气泡元素、“悬浮的”矩形元素等
13个最新的网页设计趋势:全屏背景图片、自定义插画等

精彩推荐

热门教程