ios 设置特定圆角和边框线 iphone圆角矩形 您所在的位置:网站首页 苹果的圆角矩形是什么 ios 设置特定圆角和边框线 iphone圆角矩形

ios 设置特定圆角和边框线 iphone圆角矩形

2024-07-11 14:12| 来源: 网络整理| 查看: 265

圆角矩形为何成为趋势

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

ios 设置特定圆角和边框线 iphone圆角矩形_html 圆角矩形背景

也许有人会问为什么 Apple 选择了这样的呈现方式,而不跟 Android 一样,为了体现内容的丰富性,让图标外框多样化呢?

原因有两个:其一是乔布斯认为所有物件都有圆角,而相比圆形与椭圆,圆角矩形反而是生活中更为常见的现象。

Andy Hertzfeld 在 Round Rects Are Everywhere 中讲了关于圆角矩形诞生的故事。

Apple 的天才程序员 Bill Atkinson 创立了一种能够快速绘制圆形与椭圆的方法,乔布斯认为圆形与椭圆都不错,但是圆角矩形会更好。而 Bill Atkinson 并不这么认为,他觉得圆角矩形更难绘制,且人们也不需要圆角矩形。于是,乔布斯回应道:“到处都是带有圆角的矩形!“ 他指着房间里的各种物件,几乎所有地方都可以看到圆角矩形。他甚至说服 Bill 和他一起绕着街区走一圈,指出他能找到的每个带有圆角的矩形。当他们看到带有圆角的禁止停车的标示时,Bill 终于被乔布斯说服,第二天就拿出了绘制圆角矩形的方案。

之后,他们将其命名为「RoundRects」。在接下来的几个月里,Roundrects 逐渐进入用户界面的各个部分,并很快变得不可或缺。

ios 设置特定圆角和边框线 iphone圆角矩形_Apple_02

尤其是在 13 年,iOS 7 对圆角的更新。它已经与我们平时认为的圆角矩形不同,这个圆角的优化过程非常复杂,当中涉及的数学算法如果不是专业的研究学者,可能无法理解其差异。

简单说就是:Apple 采用的圆角曲率所生成的图形,是更圆滑,无明显切角的。这样的圆角矩形在过渡上更平滑,且在视觉上的体验也更融洽。

其二是,为了打造沉浸式体验,乔布斯认为应该让 iPhone 的各个元素形式统一化。

与上述圆角图标相似的是 iPhone 机身。

ios 设置特定圆角和边框线 iphone圆角矩形_Apple_03

iPhone 机身所呈现的圆角在制作工艺上,比软件图标的圆角更为复杂。而其内外一致的表现形式就是为了打造沉浸式体验,形成产品的品牌认知。而 iPhone X 的面世,就是为了将这一概念彻底落实。

ios 设置特定圆角和边框线 iphone圆角矩形_圆角矩形_04

前面提到,用户与设计师对于一款产品的认知是不同的。用户认识一款产品,首先关注的是外观表现,其次才是被承载的内容。所以当用户对 iPhone 以及其软件图标的展示形式已经形成认知,那么 iPhone X 的全面屏也就是很自然的一种结果。

机身形态与软件形式的自然结合,能够让用户更好的接受产品的外在形式,且其全面屏的设计也能更好地被用户认可。甚至被很多人吐槽的 iPhone X 齐刘海也是依据这样的圆角形式来设计的,目的就是为了营造统一的产品形态。

以至于其他一些产品在机身上的模仿,导致让人误以为类似的工业特性所产生的第一直觉都是「这是一款 iPhone」,仔细一看才知道,噢,原来是…

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

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

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



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有