网页设计 & 灵感 » 上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

发表于: 网页设计 & 灵感. 评论 (2)
Sponsor

设计总是离不开构图。构图相当于一个天平秤。能快速将视觉元素安排在合适的比例上,从而形成平衡的视觉感。

我们都知道,构图可以划分为不同类型的构图,例如上下构图、左右构图、对角构图和四周围绕构图等。而这些构图,文字又是按什么形式布局?是不是应该也会有规律可循?下面来浅谈一下如何将上下构图变化出不同的编排形式。

上下构图

上下构图是属于比较容易理解和掌握的构图。我们同样在三分法中建立构图,首先确定主体元素的位置。

上下构图有什么规律?用一些真实案例来告诉你

如果版面元素有图片和文字,那么可以把图片作为主体,放置在版面的上方或下方,然后再跟其他重要信息构建从上往下的阅读视线,从而形成的上下构图。虽然这种构图简单,但是也可以变化出不同的编排形式。

上下构图有什么规律?用一些真实案例来告诉你

例如上面四张海报

你能发现有什么规律吗?

○ 横向编排

文字横排是常用的编排方式。下面这几张海报就是使用了典型的上下构图,文字横向编排。但是横排也会分几种情况处理,首先是“两端全部对齐”编排。

● “两端全部对齐”编排:

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

当文字以类似“两端全部对齐”的形式编排时,很容易给我们产生一种严谨规范感,也容易显得呆板。为了避免过于呆板,我们需要注意文字间大小层级的变化,来提升画面的层次感。反正就不要过于“平”,必须让文字大小给对比起来。

● “左/右对齐”编排:

 

除了以上这种密密麻麻的文字横排布局,当然要给它留出白,将部分文字进行向左或右的对齐,就能留出对齐后的负空间。

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

● “居中对齐”编排:

为了更多变化,文字居中对齐也行。不过需要注意长篇幅的文段不适合这种居中对齐。不然的话会造成阅读疲劳,甚至影响画面的美感。

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

● “分栏”编排:

另外就是对文字进行分栏。首先根据信息量划分栏数,例如5栏,如果主体为图片,可以放在版面上方。那么文字就根据分栏来放置信息了,这样的话打破刚才保守的通栏编排,让版面视觉更丰富。

上下构图有什么规律?用一些真实案例来告诉你

这些海报同样用了分栏的方式编排,不仅能划分信息区域,还能营造留白效果。

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

○ 竖向编排

除了刚才的横排,其实竖排也可以。而竖排的话更符合文化感的主题,或者优雅的调性氛围。

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

○ 横竖向编排

如果想有更多的变化,可以结合文字的横竖编排,来丰富版面的视觉效果。这种编排方式我们经常也会看到,也是比较通用的一种。

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

上下构图有什么规律?用一些真实案例来告诉你

其实上下构图,不止这些编排形式。这些就要回归之前我们说的图片、文字、颜色三要素了,需要综合考虑,才能变换不同的版面效果。

从上面的案例解析可得,即便是一种构图形式,只要掌握文字不同的编排形式,再少字少图也能让画面具有不同的视觉效果。

感谢阅读!

作者 | 周妙妍
来源 | 版式设计很简单(id: format_design)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

+ 添加评论2 Responses to “上下构图有什么规律?用一些真实案例来告诉你”

  1. 李大帅 - 回复

    您好,请问站站主可以做一个站内搜索的栏吗,方便大家搜索站内资源。谢谢

    • 设计 达人 -

      好提议,已加入到改版需求。


{ 发表评论 }