<rp id="9thzz"><acronym id="9thzz"></acronym></rp>
    1. <dd id="9thzz"></dd>
    2. 首页 > 网页教程 > 设计分享 > 图形设计分享:圆角矩形为什么能成为设计趋势?

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

      时间: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个最新的网页设计趋势:全屏背景图片、自定义插画等

      精彩推荐

      热门教程

      99热 久久99热视频只有精品 玖玖热爱视频精品 99热这里只有精品 久久re热这里只是精品