html 圆角矩形背景,圆角矩形背后的含义｜深度解析

圆角矩形为何成为趋势

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

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