守望者

小编:现在大部分的App设计都逐渐采用了圆角设计,让我们来看看,究竟是什么原因促使这件事情的发生。。。

Steve Jobs 说服 Bill Atkinson 画出圆角矩形

早在1981年,当时 Apple 的天才程序员 Bill Atkinson 正向团队展示他是如何用一种聪明的方法可以在仅有 68000 处理器的 Lisa 和 Macintosh 机器上快速画出圆和椭圆,Steve Jobs 看了之后有另外的想法,他说:“圆和椭圆都不错,但是能画出带圆角的四边形吗?我们现在也能画出吗?” Bill Atkinson 回答说很难做到,而且他认为并不真需要圆角四边形,Steve Jobs 就立刻强烈回应了:“到处都是圆角四边形!看看这个房间周围就知道了!”并且还带着 Bill Atkinson 出去转看可以碰到多少圆角四边形,最后 Bill Atkinson 被说服,第二天下午就拿出了满意的结果。 
 
淘宝广泛使用圆角卡片
再到21世纪的你,年年都逛淘宝双十一,在浏览心仪的宝贝的时候,不知道你有没有发现淘宝界面默默的完成了进一步的改版,对比之前的“99划算节”现在的界面中圆角卡片已经在产品中得到了广泛的运用。为什么淘宝会选择圆角卡片作为自己重要的设计组件?它的优势是什么? 
 

圆角卡片的优势

1. 设计趋势

正如 Steve Jobs 在1981年所说:到处都是圆角四边形看看这个房间周围就知道了!我们可以纵观近年来各大厂商发布的旗舰手机,在工业设计上的角度来看基本都采用了更加柔和的圆角设计。例如iPhone、SAMSUNG、小米、VIVO等等……

在屏幕设计上同样选择了圆角设计,在细节之处也保持了高度的统一,例如iPhone在摄像头位置的连接处同样采用了圆角弧度作为过渡。可见圆角设计的应用已经在工业设计的中的成为了非常重要的设计语言。
 

2. 眼睛更易识别

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

例如在 App Store 中 today页面,每天推送的内容通过圆角的卡片设计呈现给用户,可以快速识别当前模块,但如果换成直角的话,我们发现相对于圆角卡片它的识别成本明显增加。
 

3. 感觉更安全

圆角自身的图形属性则更加柔和、舒适,给人一种安全感和亲密。而尖角则给人一种尖锐、具有攻击性的感觉,我们可以回忆一下日常比较尖锐的物体,例如剪刀、刀子、警示牌等等,都会给人造成伤害或者警示他人。

在设计玩具的时候会采用大量的圆角设计,来让家长对其放下戒备心,让家长觉得这是安全的,可以给孩子玩。试想哪个家长会给孩子一把刀子玩?

 

4. 信息更容易处理

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

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

5. 便于实行组件化管理

圆角卡片有利于实行组件化管理,首先圆角卡片作为组件化主要载体之一,具有良好的延展性,能适应不同的使用场景,例如淘宝首页和微淘页面,前者作为整个 App 主要流量入口、后者担当内容社区的角色,两者功能相差甚大,但通过圆角卡片都能满足两者的需求。

其次圆角卡片通过对内容进行规划组织使得各业务线的内容更加统一,内容之间的层级更加明显,信息之间有明确的主次顺序关系,逻辑关系更加清晰,便于用户识别。
  

划重点

1. 圆角卡片更容易被人眼识别
2. 圆角给人感觉更加安全
3. 圆角卡片具有内指向性,人们对于圆角卡片更容易识别
4. 圆角卡片的广泛使用便于组件化的管理
  
  
原文地址:海盐社(公众号)
作者:姜正

转载请注明:学UI网 » 乔布斯和淘宝都喜欢的圆角卡片

登录收藏
 
你可能喜欢的:
探索企业级产品情感化设计探索企业级产品情感化设计
产品的风格到底是什么来决定的?(下)产品的风格到底是什么来决定的?(下)
2019年海外设计趋势回顾2019年海外设计趋势回顾
如何快速又精准的确定产品风格?(上)如何快速又精准的确定产品风格?(上)
深耕“用户界面”(上篇)- 界面表现层自查深耕“用户界面”(上篇)- 界面表现层自查
PRD分享:「网易云音乐-登录/注册模块」产品需求文档PRD分享:「网易云音乐-登录/注册模块」产品需求文档
行为召唤:终极生存指南行为召唤:终极生存指南
触摸键盘的设计解析 | 智能化工具产品触摸键盘的设计解析 | 智能化工具产品
十万个为什么设计系列02-内容个性化十万个为什么设计系列02-内容个性化
腾讯动漫8.0——用户为本腾讯动漫8.0——用户为本