当前位置: 首页 >文章 > 没想到用这么简单的案例,就可以把这个复杂的知识点讲明白!
收藏
分享

没想到用这么简单的案例,就可以把这个复杂的知识点讲明白!

举报菜心设计铺菜心设计铺发布于 2021-04-08716阅读0点赞
这个复杂的知识点用简单的案例就可以讲明白...

关于“节奏感”这个词,大家应该经常听说,不论是音乐,还是画面的设计,我们都喜欢用“要有节奏感”来形容,最近我发现图标设计也需要“节奏感”!

今天的大纲如下:


1.什么是节奏感

2.粗细的节奏感

3.长短的节奏感

4.疏密的节奏感

5.总结


1.什么是节奏感

其实节奏感有很多种,比如大小的节奏,粗细的节奏,长短的节奏等等

举个例子:



这张图片,色块的宽度是100px,而色块之间的间距也是100px,这就使得整个画面很平均,没有节奏感!


而下图就不一样了:



色块的宽度是100px,但色块之间的间距变成了50px,这就使得整个画面增加了一些节奏,变得稍微活泼一些。


其实不论人的视觉还是听觉,都一样,都需要刺激,而节奏感就能达到刺激的效果,接下来我们就用实际案例看看,图标设计是如何利用这个设计细节的!



2.粗细的节奏感

在实际在图标设计上面,这个知识点是如何运用的呢?


我们来举个例子,如下图:



我们可以看出来,白色矩形的宽度是19px,而白色矩形之间的间距是3px,二者形成一定的对比、节奏感,使整个图标看着舒服很多。


那如果两个粗细一样会是什么感觉呢?看下图:



是不是平庸很多,而且图标看着很散!


再看个例子,我们看下图:

 



左面的是国内一个知名app内的“更多”图标,右面是谷歌inbox内的“更多”图标,也不能说谁好谁坏,我们只能说客观来讲,右边的间距符合“节奏感”的规律,如果是我来执行这个图标,我会用右边的方法来做,让线条粗细和线条间距不一样,形成对比、节奏感!


但是,我们也不能拿几个例子就覆盖所有场景,还是得具体情况具体分析哈!


3.长短的节奏感

长短的节奏感大家应该最熟悉,我们在看听音乐的时候,前面的音乐一半都很平,频率变化的就会很缓慢,一道高潮部分,变化就会很大,很有节奏感了!

例如苹果手机中的语音备忘录图标:



高的线条很高,短的线条又很短,形成很强节奏感,如果二者区分不明显会是什么样子呢?

对,就是下面这样:



看起来对比不够,总感觉没伸展开,没有美感与设计感,也就是没做到位!


4.疏密的节奏感

图标疏密也一定要有节奏感,而且很重要,不然真的会很难看。

比如下面这几个从网上找到的图标,其他几个疏密的变化都还比较舒服,突然第四个中下部那里就比较拥挤,导致疏密的节奏感不够和谐统一:



疏密的节奏感是比较容易被大家忽视的,一旦忽视,就会看不清问题,总感觉整体不够舒服,但是又不知道问题出在哪里,所以这个点一定要重视。


5.总结

当知道这种节奏、对比的原理之后,我们会发现,很多图标的设计当中有含有这个原理,随便举个最简单的例子,比如手机导航栏上面的这两个图标:



都会多少带有节奏感的知识点,大家可以多多观察,发现更多新的感悟,互相交流。


本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号: 菜心设计铺



0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,794人)

【6月】7天轻松入门C4D小练习
距离开班仅剩3天118人已报名
【6月】人像后期案例实操训练营
距离开班仅剩11天49人已报名
【7月】7天轻松入门C4D小练习
距离开班仅剩23天1人已报名
猜你喜欢
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习90000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了22,207
并提交了95份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 90000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证