图形是商品设计中被讨论得最多的元素之一。视觉设计师用不同形状的图形来表达事物的多样性;交互设计师选择不同形状的图形,解决用户在某场景下的诉求问题。其中争议大,且被更多网络设计师用的图形,是圆角矩形。而当中的讨论点是圆角矩形为何能成为设计趋势前者是通过技术参数来改变形状内容以引起用户注意;后者是通过传播真实商品塑造用户对于图形外观的全新认知。认知的转变,需用途于习惯与行为,而当中的核心方法,就是设计。(参考滴滴类商品改变人的出行方法)
用户对于一款商品的认知,主要依据商品所能解决的实质问题与外在形式。而设计师需要关注的点会更多,包含商品构造,步骤,技术等内容。同时还需要站在用户视角观测商品是不是易于用,大家一般将它称为「用户心理模型」。类比于用户仅需知道手表是不是正常走动,能否准点报时,设计师则需要理解手表设计框架,结构形式等详细内容。其中非常重要的,还是一名设计师对内容的全局认知。
回到图形外观的话题上,同样的道理,大家对于商品设计中的图形用已经渐渐理想化,好比图形外观的形式怎么样已经无关紧要,要紧的是图形所传递的信息本身。如此的认知稍显片面,对于设计师而言,图形以圆角形式呈现的背后逻辑,比表面上它所表达的信息更为要紧。理解这一点之后,设计师再用圆角矩形传递信息,理解上会更显深刻。
所以我后面会围绕下面这几个问题,来讲明圆角矩形的意义圆角矩形为何能成为设计趋势「到处都是带有圆角的矩形!」他指着房间里的各种物件,几乎所有地方都可以看到圆角矩形。他甚至说服 Bill 和他一块绕着街区走一圈,指出他能找到的每一个带有圆角的矩形。当他们看到带有圆角的禁止停车的标示时,Bill 终于被乔布斯说服,第二天就拿出了绘制圆角矩形的策略。
之后,他们将它命名为「RoundRects」。在下面的几个月里,Roundrects 渐渐进入用户界面的每个部分,并非常快变得必不可少。
特别是在 13 年,iOS 7 对圆角的更新。它已经与大家平常觉得的圆角矩形不同,这个圆角的优化过程很复杂,当中涉及的数学算法假如不是专业的研究学者,可能没办法理解其差异。
简单来讲,Apple 使用的圆角曲率所生成的图形,是更圆滑,没有明显切角的。如此的圆角矩形在过渡上更平滑,且在视觉上的体验也更融洽。
其二是,为了塑造沉浸式体验,乔布斯觉得应该让 iPhone 的每个元素形式统一化。
与上述圆角图标一样的是 iPhone 机身。
iPhone 机身所呈现的圆角在制作工艺上,比软件图标的圆角更为复杂。而其内外一致的表现形式就是为了塑造沉浸式体验,形成商品的品牌认知。而 iPhone X 的问世,就是为了将这一定义彻底落实。
前面提到,用户与设计师对于一款商品的认知是不一样的。用户认识一款商品,第一关注的是外观表现,第二才是被承载的内容。所以当用户对 iPhone 与其软件图标的展示形式已经形成认知,那样 iPhone X 的全方位屏也就是非常自然的一种结果。
机身形态与软件形式的自然结合,可以让用户更好的同意商品的外在形式,且其全方位屏的设计也能更好地被用户认同。甚至被不少人吐槽的 iPhone X 齐刘海也是依据如此的圆角形式来设计的,目的就是为了打造统一的商品形态。
以至于其他一些商品在机身上的模仿,致使叫人误以为类似的工业特质所产生的第一直觉都是「这是一款 iPhone」,仔细一看才了解,噢,原来是……
当一款真实的商品让人所同意,以常见用在生活场景中,其中渐渐打造出用户对圆角矩形的惯性认知,以至于它的可同意度也渐渐提升。
这也是我在开篇提到说「iPhone 4 的发布奠定了圆角矩形成为设计时尚趋势的基调」是什么原因。
到这为止还只不过背景,下面大家再深入聊聊特质。
圆角矩形所传递的信息特质
上节讲述了圆角矩形兴起的背景,当然这只不过一部分,圆角矩形成为时尚趋势,不可以说完全是由于 Apple。还有一点是,它自己本就拥有的优势。
上面提到乔布斯说服比尔,要有圆角矩形,由于日常到处都是圆角矩形。但这里有一个问题没解决,即「为何日常到处都是圆角矩形」呢?
玩 3D 工具的人应该了解,在 C4D 等软件里,想要对一件物体创建圆角一般是选择「倒角」,再控制「段数」,之后通过「平滑」选项,将角度变得更为圆滑(当然还有其它方法)。目的是在渲染的时候不至于让物体看着太尖锐,色泽也更通透。
在日常,物件棱角假如过于锋利,则看上去不够安全。工业角度,圆角/倒角可以让物件更好组装。相比棱角过于尖锐以至于叫人感觉冰冷,圆角的设计反而叫人更能感觉到温度。所以对于推崇自然至上的乔布斯,在选择元素时,也会期望能贴近生活。
从视觉,触感,便捷等原因能获悉真实物件的圆角优势,但优势是不是适用于图形元素呢?
这里有个相通点,即虚拟图形倚赖于视觉而存在。人眼在接收图形信息时,对圆角矩形的认知会优于直角矩形。由于人眼结构中辨识力最强的部位,会优先辨别图形的视觉中心。而圆角与直角矩形有什么区别就是内容速度的辨别差异。
之所以存在这种差异,主如果由于图形存在视觉引导有哪些用途。圆角由于其平滑的四边,将用户的视线过渡到图形中心,而直角矩形由于尖锐的特质,致使人眼在图形辨别上容易发散。因此,在图形元素的选择上,为了让用户聚焦,圆角则获得了设计师的喜爱。
所以之后在其它设计系统与设施上,更多圆角类图形也被投入用。特别是在各类 App 与网站制作中,圆角矩形更是被广泛应用于头像、按钮等元素上。
头像与按钮的圆角含义
伴随网络商品的普及,大家对于商品界面的审美意识与体验意识渐渐提升,界面的视觉呈现也成了网络公司所看重的对象。头像作为商品界面中用于身份信息辨别的主要元素,一直是用户与设计师最为关注的内容之一。
因此,对头像外框形状的选择特别小心。当中最为容易见到的主要有两类圆角矩形为何能成为设计趋势圆角矩形为何能成为设计趋势?标题网址: