几何

最近看了篇文章,是关于设计中的圆角和直角如何选择的,标题为“圆角or直角?UI设计师必看法则!”。

乍一看上去不是写给初学者的就是标题党的感觉,但凡事问个为什么的心促使我点了进去,读完之后感觉这么好的文章竟然败在了标题上,恰巧我们平台也在圆角和直角的选择上有一些思考,因此结合实际经历来和大家一起解读这篇文章。

 

文章中四个模块以疑问句的形式出现:

圆角识别度更高?

应该使用全圆角吗?

什么时候不用圆角?

圆角的美学;

 

1.圆角识别度问题中解释说

1.圆角对视觉更加友好

这第一条是个非常浅显的道理,开篇这么薄不禁让我菊花一紧。从我个人观点出发,我觉着这一点并没有充分说明白,其实生活中很多圆角的场景,放到产品里是一种隐喻。举例来说:

(1)iPhone6以后的机型和小米3对比,从握持感上来说必定是iPhone更舒适,更符合人体工程学;

(2)墙角的防撞弧相比尖锐的桌角,不那么锐利的圆角带给你的是安全和放心

所以把这种生活中舒适、安全、友好的隐喻是可以一定程度上可以转化传递到产品上,毕竟设计来源于生活,也是拟物/隐喻时代诞生的根基

2.识别视觉差异

圆角卡片上,易区分的边缘会引导我们的眼睛识别视觉差异,

相反的,有棱角的卡片看起来是统一的,不太可能引起我们的注意。

原作作者在这特别注明了此项研究的来源「在文章《Why Rounded Corners Are Easier on the Eyes》中指出,巴罗神经学研究所进行科学研究发现,“角落的感知突出性与角落的角度呈线性关系。

锐角产生比浅角度更强的虚幻显着性。换句话说,角落越尖锐,它就越亮,看起来就越难。」感受下下图,应该可以参悟出在这段注释的道理;

 

2.应该使用全圆角吗?

通过上文可以知道,感受上用户可以更容易“看得到”圆角的组件,那么在合适的操作上用全圆角的样式将用户的注意力引向了行为召唤是很可行的办法「行为召唤——Call To Action Design,透过设计让用户自己想到要做某种行为,而不是要求、强迫用户去做。」

文中举例Spotify,如下图:

鲜明的品牌色+全圆角的样式总有一种点击欲,这大概就是行为召唤吧

 

3.什么时候不用圆角?

文中指出“看起来像标签”、“全圆按钮在显示嵌套选项时失败”和“全圆形按钮不适合堆叠”的时候不宜用圆角。

我从我的角度上来讲,既然是设计语言,那么能继承的一定要继承,但一定要明确,这个继承是继承“共性”而非样式。

举个例子,之前我所处的其他业务线的设计同学有指出“为什么toast要有两种样式,为什么不统一一下?要么就全圆角嘛,要么就圆角矩形嘛,不要搞这么复杂的。”

乍一听好像很有道理,但其实是站不住脚的,语言讲究的是共性,而非样式。按照这个来看只要继承了圆角属性的组件,我都视为合理。

再打个比方:世界上分三种人-黄种人、黑种人和白种人,区分三者的一定是肤色和血统,而非长相,设想下如果所有的黄种人长成一个样子将会是多么的可怕!

 

4.圆角的美学

文中举例当下的设计趋势,chrome的搜索栏圆角变化,从乐观、开发和简约上叙述了一番;这块我看来就仁者见仁智者见智了,主观的东西怎么说都有道理嘛,就不赘述了。

综上所述在我司(及所有平台)这个APP里圆角将是设计语言中重要的组成部分。

当然除了上文说的之外,未免还有圆角大小这个问题,那么用多大合适呢?目前卡片圆角在375的1x尺寸中,6px的圆角既可以被2整除又可以被3整除,适配起来也毫无压力。

当然在特殊的地方也允许有特殊的用法,原则上也是能够快速适配的数值为最佳。

对于视觉定义这块接下来还会有更多的模块,最近一段时间要持续更新了/(ㄒoㄒ)/~~ 

 

原文地址:Nana的设计锦囊(公众号)

作者:Nana的设计锦囊

转载请注明:学UI网 » 设计语言中的圆角与直角

登录收藏
 
你可能喜欢的:
设计师该如何创新?设计师该如何创新?
【学UI网分享课】来了!准设计师筹备研讨会就在9月12日!!【学UI网分享课】来了!准设计师筹备研讨会就在9月12日!!
摹客专访|专访腾讯高级交互设计师WingST摹客专访|专访腾讯高级交互设计师WingST
动态界面,下一个突破口?动态界面,下一个突破口?
阿里云智能 NPS 工具 - 助力产品口碑提升阿里云智能 NPS 工具 – 助力产品口碑提升
设计进阶 | 一文带你了解最全数据指标设计进阶 | 一文带你了解最全数据指标
如何通过A/B Test,捍卫自己的设计方案?如何通过A/B Test,捍卫自己的设计方案?
从微信公号的改版聊聊内容创作从微信公号的改版聊聊内容创作
【蓝湖大咖访谈】华为UCD中心体验设计总监刘冰:体验与商业不矛盾【蓝湖大咖访谈】华为UCD中心体验设计总监刘冰:体验与商业不矛盾
产品使用体验如何量化与管理?— 阿里云 UES 全面揭秘产品使用体验如何量化与管理?— 阿里云 UES 全面揭秘