江苏龙网

  1. 首页 > 人文 > >

你对圆角所有的困惑，这里都帮你解答了( 二 )


那为什么相比直角 ， 圆角自自诞生以来便被产品广泛运用 ， 成为了经久不衰的设计趋势？究其原因还得从圆角本身的特性讲起 。
二、圆角的特性
关于圆角本身的特性大致可以分为以下三个：
1. 亲和感
从远古时代开始 ， 人类便意识到形状的尖锐程度所带来的实际意义；人类在木棍上绑上磨尖的兽骨、岩石作为武器以刺穿猛兽；但是相对应的 ， 他们又畏惧猛兽的利齿、亦或是拿着同样武器的敌方部落刺穿他们的身躯 。
人类对这类尖锐物体本能的警惕感一直传承至今 ， 即便在现实世界中 ， 绝大多数物件的制造都会为了避免尖角割伤用户的手指 ， 而为其注入圆角的工艺 ， 让尖角变得圆润平滑；因此带有圆角的矩形往往会给予用户足够的亲和感、安全感 。
你对圆角所有的困惑，这里都帮你解答了
本文插图
【你对圆角所有的困惑，这里都帮你解答了】 2. 辨识
我们对圆角的认知除了源自远古时代趋利避害的本能 ， 人眼本身也同样更偏爱圆角 。
Visual Perception一书的作者 ， Jürg N?nni曾经研究并提出观点：人的视网膜对于正圆形的处理速度要显著高于对边角的处理速度 。
这是由于人类的视网膜中存在一块视觉最敏锐的区域——中央凹 ， 它处理圆形的速度最快 ， 而处理边缘则需要用到大脑中更多的“神经影像工具” 。
而圆角矩形在视觉上比直角矩形更接近圆形 ， 因此人眼处理圆角时则更加容易、更快得辨识 。
3. 视觉引导
回到形状本身 ， 它们也自带了“视觉引导”的属性 ， 拿圆形直角矩形、圆角矩形和圆形举例：
你对圆角所有的困惑，这里都帮你解答了
本文插图
圆形以及圆角矩形不存在任何的尖角 ， 没有任何突出的焦点 ， 圆周以及圆角矩形的四个圆角会产生一个向中心过渡的趋势 ， 引导视线集中到形状每部 。
但是 ， 矩形的四个顶角则形成了四个视觉焦点 ， 人眼看矩形时 ， 他们的视线其实倾向于发散而非聚焦（当然 ， 易于发散的缺点也同样导致了矩形在视觉上更加难以辨识） 。
因此 ， 直角矩形本身倾向的发散感和疏远感 ， 使得大多数的产品更乐于采用圆角矩形甚至全圆角矩形来作为ui的主要形状；接下来 ， 我从按钮、头像以及卡片这三类常见的元素来讲解圆角的应用及原因 。
三、按钮篇
1. 全圆角
按钮作为UI中的核心交互组件 ， 它的任何细节都对用户及商业价值起着至关重要的作用 。
而在按钮中存在着一种名为CTA（Call To Action ， 行为召唤）的按钮 ， 它存在的主要意义就是诱导用户采取某种行动 ， 比如购买、关注、订阅等 。
大多数的CTA按钮采用了全圆角的形状 ， 就是为了通过全圆角的强聚焦特性来引导用户快速注意并聚焦到按钮中的文字 ， 提高他们执行点击行为的可能性；比如各大电商平台的banner ， 就经常用到全圆角的按钮 。

你对圆角所有的困惑，这里都帮你解答了
本文插图
另外 ， 一些页面中的引流入口也会借助全圆角按钮；常见的如第三方平台的知乎、简书和知识星球 。
你对圆角所有的困惑，这里都帮你解答了
本文插图
不过相比知识星球 ， 知乎和简书引流的做法相对就更加明智 ， 它们的CTA按钮直接做成了悬停 ， 不论用户滑到哪儿都可以随时注意到并进行点击（知识星球则将“下一篇”这个功能做成了悬停 ， 但是这个功能仅仅在web网页中存在 ， 确实有点匪夷所思） 。
值得注意的是 ， 京东的引流按钮仅仅以直角的形式嵌入到了Noticebar ， 而且跟随滑动而非悬停；更夸张的是 ， 美团和Airbnb直接去掉了引流按钮 ， 甚至连唤起功能都没加入 。


推荐阅读


上一篇：淮北市|安徽省投资集团公司原董事长杜长棣被公诉

下一篇：降幅为|15股股东户数连降3期以上 最多已降15期