关于卡片圆角的思考

我们熟悉的苹果公司使用圆角卡片最早已追溯到1981年。当时， Apple 的天才程序员 Bill Atkinson 正向团队展示他是如何用一种聪明的方法可以在仅有 68000 处理器的 Lisa 和 Macintosh 机器上快速画出圆和椭圆。Steve Jobs 看了之后有另外的想法，他说：“圆和椭圆都不错，但是能画出带圆角的四边形吗？我们现在也能画出吗？” Bill Atkinson 回答说很难做到，而且他认为并不真需要圆角四边形。Steve Jobs 就立刻强烈回应了：“到处都是圆角四边形！看看这个房间周围就知道了！”并且还带着 Bill Atkinson 出去转看可以碰到多少圆角四边形，最后 Bill Atkinson 被说服，第二天下午就拿出了满意的结果。

目录

1. 手机工业设计圆角的应用

2. 手机系统UI的圆角应用

3. 人眼识别圆角更加容易

4. 圆角的安全性、亲密性

5. 圆角使得信息更易于处理

6. 总结

1.手机工业设计圆角的应用

首先我们纵观2018年当下各大厂商发布的手机，在工业设计上来看基本都采用了更加柔和的圆角设计。例如：iPhone、SAMSUNG、小米、VIVO等等

在屏幕设计上同样选择了圆角设计，在细节之处也保持了高度的统一，例如：在摄像头位置的连接处同样采用了圆角弧度作为过渡。我们以iPhone为例：

可见圆角设计的应用已经成为硬件工业设计的中的非常重要的设计语言。

2.手机系统UI的圆角应用

不止是手机的工业硬件设计上采用了大量的圆角，各大厂商的手机系统 UI 也大量采用了圆角设计。大家最熟悉的可能就是 iOS 系统里的圆角设计，自2007年随着 iOS 7 的发布，Apple 将 iOS 上的标志性的圆角标轮廓做了更新，将工业设计中的曲线连续概念应用到了视觉设计上，一直延续至今，在 iOS 12 全面应用。

除了 iOS ，Android 的各大厂商也纷纷使用圆角设计，例如：SAMSUNG 的 ONE UI，都是采用了圆角的设计语言。

以及国内的 MIUI 10 的系统界面设计同样使用了圆角作为设计语言。

3.人眼处理圆角更加容易

相对于其他图形，人类的眼睛更容易识别圆角矩形而不是直角矩形，因为人在眼睛的生理构造上中央凹（fovea centralis，是视网膜中视觉最敏锐的区域）在处理圆形时最快，而处理矩形边缘则需要涉及大脑中更多的“神经影像工具”。所以，人眼处理圆角更容易，因为它们看起来比普通矩形更接近于圆。

例如： App Store today页面，通过圆角的卡片设计用户可以快速识别内容，但如果换成直角的话则会提升它的识别成本。


在巴罗（Barrow）神经学研究所完成的关于“角（corners）”的科学研究发现，“角的突显性感知与角的度数的线性变化，锐角比钝角产生更强的虚幻的突显性”。换句话说，角越锐利，看起来就越显而易见。而角出现的越凸显，就越多对视觉过程产生影响。

例如：西瓜视频改版中，将“锐角”的播放按钮改成了“圆角”的播放按钮，较少了锐角对用户的视觉影响。

4.圆角更加安全

相对于锐角，圆角显得更加柔和，具有安全感。尖锐的图形或者物品更容易应用在警惕性的场景里，会给人予以警示或者伤害。例如：危险的标示

圆角自身的图形属性则更加柔和、舒适，给人一种安全感和亲密。例如：在设计玩具的时候会采用大量的圆角设计，来让家长对其放下戒备心，让家长觉得这是安全的，可以给孩子玩。试想哪个家长会给孩子一把刀子玩？

现在的少儿用户群体增长也带来了不可避免的趋势，针对少儿用户，由于群体的特殊性，少儿应用 app 中使用了大量的圆角设计，例如： ABC mouse 中控件都使用了大圆角的设计，使界面显得富有童趣，且安全可靠。

5.圆角使得信息更易于处理

a.圆角的引导性

圆角在使用地图或图表的场景中具有得天独厚的优势，圆角的弧度能够更加平滑、连续的引导用户的视线，符合用户的头部与眼睛的自然运动。而锐角则会迫使用户的视线进行转折，容易造成用户视线的停顿。

例如：北京的地铁地图，在折线处都采用了圆角设计，具有很强的引导性，来帮助用户快速查询各个地铁站点。

在一些具有引导性、指向性的图标中大量使用圆角曲线，例如：高德地图的导航界面，转弯的转折点使用了圆角作为过渡，引导用户视线。

b.圆角的内指向性

在卡片上的应用中，由于边缘圆角向内指向矩形的中心更加明显，所以更加凸显卡片内的内容。如图例：

当多个卡片并排时，带圆角的卡片具有更强的内部指向性，且相邻的两条线差异化较大，我们可以清楚分辨他们的边界线，所以更加容易被分辨；而同样大小的直角矩形的内部指向性较弱以及临近的两根“线”更加相似，分辨起来会相对困难一些。

例如： nice 的好货页面，通过简单的修改我们再次比较一下直角与圆角在实际中的应用，我们可以看到，在识别直角卡片的时候我们需要耗费更多的精力，而圆角卡片则不要耗费过多的精力，且由于圆角的内指向性，圆角卡片能够更好的承托卡片内的内容。

6.总结

1. 人眼的中央凹在处理圆角的时候更加快捷方便，而锐角则会对眼睛造成过多的影响，不易处理。

2. 圆角更加具有安全感和亲密性，这一点我们可以联想到生活中对我们具有伤害性和威胁的物品，例如剪刀、危险标示等等。

3. 圆角的弧度符合人眼和头部的自然运动，具有良好的引导性；在卡片中能够清晰区分卡片的边界，且圆角具有优秀的内指向性，更加凸显卡片中的内容信息。

参考链接：

Material Design 2来了？比圆更圆，圆了又圆

从图标转角论亲和力的差异 【含图标教程】

无框界面

用户体验设计之圆角和直角

浅析圆角特征在产品设计中的应用-严伟杰

从圆角角到圆角

西瓜视频 3.0改版总结

海盐社（公众号）
作者：姜正

赞 (0)

相关推荐

  • 搜索功能的设计思考

    小编:搜索功能是每个APP不能或缺的功能.相信你们㛑用过不少应用的搜索功能.但是,什么样的搜索功能是好的设计?如何评价搜索功能的好坏?以及如何做搜索的交互引导设计?都是一门学问.这篇文章,作者细致地介 ...

  • PPT怎么设计漂亮的图形卡片?

    PPT中可以设计很漂亮的图形,比如三维立体图形,想要设计一个联系我们的卡片,该怎么设计恩?下面我们就来看看详细的教程. 1.新建一个宽屏16:9比例的空白文档,也可设设计为一个4:3比例的文档.一个空 ...

  • AE圆角矩形怎样怎么快速修改圆角大小?

    今天我们介绍的都是教程书本上学不到的知识,全都是笔者在工作中自己摸索并总结出来的珍贵经验或者是挖掘出来的一些隐藏功能. 1.打开After Effects CS6,新建一个合成Comp1. 2.选择矩 ...

  • 如何将PPT中插入的数据图表的版式设置为卡片效果

    如何将PPT中插入的数据图表的版式设置为卡片效果

    今天给大家介绍一下如何将PPT中插入的数据图表的版式设置为卡片效果的具体操作步骤.1. 首先我们打开电脑上的PPT软件,进入主页面,2. 现在幻灯片中插入一个填充为白色的无轮廓圆角矩形3. 将矩形的形 ...

  • 对设计与设计师“价值”的思考

    我在之前的文章里提到过,国内的UED圈子现状非常浮躁,门槛不高,混日子的忽悠也多,但与此相对的,UED人又很追求自己的"价值"被他人欣赏.看重,而不是被当成只会画画icon的死美工 ...

  • UI日历组件（在思考中看教程）

    小编话:在UI设计中,我们应该要学会"在思考中看教程".今天给大家带来的是@伯毅狼的UI日历组件的PS教程,狼哥认为:伸手党就该剁剁剁.无论学习什么,我们都不可只做纯粹的拿来主义者 ...

  • 滴滴车主端5.0全新升级设计思考总结

    为每一位,行驶在路上的你 前言 "我每天出车8-10个小时" "一天能接十好几单呢" "帮了别人还赚了钱,这活儿很自由" - 作为滴滴的设计 ...

  • 关于Dashboard（仪表盘）设计思考（上篇）

    前言 @文刀 在企业类应用服务(SaaS).检测工具(手机安全助手).量化自我工具(智能手环)等后台管理系统中,使用Dashboard可以帮助用户监控和分析数据,快速获取重要信息.但如果对Dashbo ...

  • 通过收藏夹迭代思考：视觉设计师应拥有的体验思维

    面对纯工具型产品时,作为一名视觉设计师很容易陷入两种境地--脱离产品.用户本身做天马行空的视觉设计进入一种自我陶醉的状态,从而产出过于形式化不符合工具类产品特征的设计:或从产品中难以寻找到视觉价值以至 ...