4000-888-103

资讯动态关于卡片圆角的思考资讯详情

关于卡片圆角的思考

2019-11-19 14:55:21

 

目录

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来了?比圆更圆,圆了又圆 https://zhuanlan.zhihu.com/p/35063573

从图标转角论亲和力的差异 【含图标教程】 https://www.zcool.com.cn/article/ZNDcwNTI4.html

无框界面 https://zhuanlan.zhihu.com/p/24771017

用户体验设计之圆角和直角 http://blog.sina.com.cn/s/blog_5d7170af0101dnpk.html

浅析圆角特征在产品设计中的应用-严伟杰 http://www.doc88.com/p-9592118891884.html

从圆角角到圆角 https://mp.weixin.qq.com/s/j3iAigMJitiIT2yfBHF3CA

西瓜视频 3.0改版总结 https://www.zcool.com.cn/work/ZMzExMTcxMDg=.html

 

关键词:h5页面链接 h5科技页面 h5服务页面

上一页 下一页

0
↑ 回到顶部

热门推荐

发送
//www.weibenh5.com/newhome/images/longyang2.jpg