浅析版式设计中的“疏密”关系

用户头像
重庆/网页设计师/9年前/3423浏览
浅析版式设计中的“疏密”关系
用户头像
artboy555

我们常常听到一些老师或设计大神在点评某个作品时会说到画面缺少疏密关系或是缺少节奏感。那么疏密关系或节奏感是怎样在设计中体现的呢?

我们常常听到一些老师或设计大神在点评某个作品时会说到画面缺少疏密关系或是缺少节奏感。那么疏密关系或节奏感是怎样在设计中体现的呢?



一.什么是疏密

“疏密”顾名思义就是稀疏、密集,在设计中它们就是一组对比。“密”给人一种紧张感、窒息感和厚度感,如下图:

c75c589ff43ba8012060c88d04a9.jpg


而“疏”则给人一种空间感、轻松感和秩序感。如下图:

19b1589ff45ba8012060c8e63257.jpg


这两种关系相互互动才能产生和谐的气氛,如画面中仅存在一种形式就很容易形成过于单调而缺乏变化的作品了。



疏密关系在网页中的应用


A.banner中文字的疏密关系   初学者在疏密对比上常犯的错误就是给的字符间距不宽不窄,给人感觉很松垮,这是不妨收紧一些字间距,放大另一段文字的字间距。

2653589ff476a801219c77c68f72.jpg


如上图中文字部分,作者缩小了主标题的字间距,而放大副标题的字间距,这样就有了疏密关系的对比,疏的更疏,密的更密,显得画面更加和谐。反之,如果副标题的字间距缩小和主标题一样呢:

de41589ff493a8012060c8af822c.jpg


以上可以看出文字之间的疏密关系对比对整个画面的影响,太过拥挤的文字使得画面层级关系凌乱,且不利于文字的阅读。

如果把主标题的字间距放大又是什么结果呢:

4f49589ff4b7a8012060c8e3c5ae.jpg


过于松散的文字又不利于观众的阅读。所以,把握好文字的疏密关系会给你的画面带来稳定感。


B.网页版式中的疏密关系  版式的疏密关系其实就是板块之间的疏密关系对比,一个板块排得密集,下一个板块就相对于上一个板块显得松散点。

8dfd589ff763a8012060c87d0b00.jpg


如下图所示,banner的内容较少,显得稀疏,那么下一个板块文字多,图片大就显得密集。

425f589ff7a1a8012060c89fc8fe.jpg


再到下一板块,图小,文字少又显得稀疏。

0415589ff7c1a8012060c8381285.jpg


以此类推,整个版面都是稀疏、密集、稀疏、密集来搭建的。整个页面就像一首歌曲有平缓又有高潮,从而形成了我们常说的节奏感。所以疏密关系贯穿于整个设计之中,有疏就有密,有密就有疏,它们是相互影响,相互搭配的。而疏密关系也是在同一画面中相对而言的,必须根据具体画面具体应用。

在设计中,大家可以找一些好的设计进行疏密关系的分析,并在自己的设计中有目的的进行训练,掌握好疏密关系你的作品才能具有可看性,具有真正的节奏感。现在有很多的培训机构只将设计软件作为教学的重点而忽略了设计的理论培养,使得很多同学只知软件应用而不知设计其根本。做的东西都是一些效果的堆砌,缺乏设计感。所以大家在学习设计的时候,要更深入的了解设计的本质,没有设计理论做支撑,不管软件再熟练都不能做出成熟的设计。

   

    火星时代教育:程佳

     部分图片来自网络,如有侵权请联系作者立即删除。

   


21
举报
|
24
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
平面插画设计女孩喝咖啡
倒计时,海报,平面
空的平台平面和自然景观
中国传统纹样创新图案设计
牛奶乳液层次平面平铺平面
牛奶乳液层次梯田平铺平面
海底世界插画
金色颗粒质地的平面
平面插画情侣/矢量
金色颗粒质地的平面
空的平台平面和自然景观
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
平面风格黄绿色系花朵装饰
古风平面仕女与瓷器
平面书法字手写
平面人物插画
城市园林平面布局航拍
平面设计 吊牌设计
金色颗粒质地的平面
城市园林平面布局航拍
玄关入门地毯印花图案红地毯
金色颗粒质地的平面
“知识宅急送”外卖,快递,平面,海报,素材,教育
金色颗粒质地的平面
中秋节可爱呆萌平面兔子蛋黄月饼贴纸素材
你可能喜欢
大家都在看
登录注册