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

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

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

挑战真实场景对话——小爱同学背后关键技术深度解析
本文来自 PaperWeekly 和 biendata 组织的企业 AI 技术实战讲座.作者为小米人工智能部的崔世起,崔老师以著名的"小爱同学"为实例,详细介绍了全双工关键技术及其 ...
app图标圆角角度_怎样使用sketch绘制标准APP图标圆角矩形背景？
主要是做UI设计时ICON背景板的一些操作方式,例如以下图标的背板.可以看出不单单是圆角矩形,而是有点胖胖的圆角矩形,那这种矩形要怎么简便省时的操作. 用sketch绘制的效果我简单会分为3种常见背板 ...
canvas 圆角矩形，背景圆角矩形
//画布的圆角矩形 // **// * 绘制圆角矩形//* @param { Object } ctx - canvas组件的绘图上下文//* @param { Number } x - 矩形的x坐标 ...
定制圆角带背景色的矩形边框
Android系统本身提供的TextView组件并没有边框,我们可以为TextView设置一个9-patch格式的背景图来提供边框.AndroidSDK提供了一个Draw-9-patch工具,专门用于 ...
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理以上是效果方法如下: 1:用photoshop打开原图,并取消背景锁. 2:选"工具栏"的"圆角矩形 ...
CorelDRAW中将矩形变圆角的方法
CorelDRAW是个很好的排版工具,在做一些折页.贺卡.宣传册的时候经常会添加一些圆角的设计,使用CorelDRAW软件现实图形圆角化的方法都很多,本文小编分享CorelDRAW X8中如何将矩形变 ...
微信小程序 canvas type = 2d 绘制海报心得（包括怎么绘制图片和圆角图片和圆角矩形等）
微信小程序 canvas type=2d 使用心得为了方便这里我封装成了一个component 然后说说怎么使用最新的方法(使用方法类似于html中的canvas可以进行参考)获取--canvas ...
ai如何做倒角和圆角_AI怎么将直角矩形设置成圆角-AI将直角矩形设为圆角的方法 - 河东软件园...
Adobe Illustrator(AI)是Adobe公司旗下专门应用于设计行业的软件,因为AI的操作并不难,所有越来越多的人喜欢使用这款软件进行一些设计作业.某些时候用户在设计作业上面绘制直角矩形, ...
GoJS自定义圆角矩形的圆角角度
自定义圆角矩形的圆角角度,默认角度p1=5. go.Shape.defineFigureGenerator("RoundedRectangle", function(shape, ...

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

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

最新文章

热门文章