UI设计中的视觉表现技巧(8)

来源:网络   作者:热心网友   发布时间:2017-10-08    浏览次数:562

考虑一下,如何用视觉感知的方法来解决这个问题。



这种圆角在标准圆之外有一个额外的区域,使直线与曲线连接的地方没有那么生硬。



仔细观察这两个圆角之间的区别。



现在我们可以将这种方法应用于圆角矩形的按钮。



我猜你可能已经注意到右边的按钮有更平滑的圆角,对你的眼睛来说更舒服。


iOS图标也是如此。如果用简单的圆角工具是做不出这种圆角的。在我们深入讨论这个话题之前,我们先来看看下图两个不同的圆角矩形。



第一个是在sketch中创建的圆角矩形。第二个形状是超椭圆形,也称为Lamé曲线。它是由法国数学家GabrielLamé发现的,根据不同的公式,可以做出看起来像圆角矩形的形状。



Marc Edwards提出了Lamé曲线的公式,形成了光滑和视觉上完美的形状。iOS 7之后的图标都是基于它的。



后来,这种形状通过添加黄金比例和网格来规范化,用于指导绘制图标的设计师。



使用超椭圆形状的主要优点是它们更加圆润和光滑的外观,但是也有缺点,就是这些非标准的形状难以直接应用到实际的界面中。


程序员可以组合多个SVG,在代码中添加特殊的公式或脚本,或者使用iOS为其应用程序图标使用PNG蒙版。


针对设计师而言,有一个简单的调整圆角的方法。只需要将圆角矩形转换为轮廓,进入形状编辑模式,并手动将曲线手柄彼此靠近。



与传统意义的圆角矩形相比,这种超椭圆形更为生动,这对于绘制视觉准确的图标来说很重要。



划重点:

1. 标准的圆角看起来像是人造的,你可以很容易的看到直线突然变成曲线的点。

2. 视觉过渡自然的圆角需要特殊算法或手动调整形状。



123456789共9页
联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:ui干货

相关推荐

http://www.shejixf.com/shejijiaocheng/shejililun/6713.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通