不会排版的来看看,序如何运用对比制造秩

2021-11-23    lanlanwork

咕噜噜

今天我们讲版式中如何运用对比制造秩序

图片

图片

首先如何理解秩序,我们用点的示例放置,当展现在画面中出现无序的形态时,会显得没有规律性,而以螺旋状的方式放置时就明显感受到了画面的舒畅和秩序感。

图片

两者同样以圆为形态,秩序感的形成却截然相反。

图片

秩序感的体现就像建筑和摄影中对于画面布局的形态与物体之间的关联起到微妙的动态变化。

图片

在整个呈现过程中,我们就需要运用秩序里的大小对比、空间对比、粗细对比和颜色对比的关系。

图片

我们用一个小案例来诠释对比的作用

 

1.大小对比

 

图片

首先运用大小对比,这是正常文案放置时的排版结构,文字的大小比例都是相等的。

图片

我们将文字的主次进行了拆分、强化了大小关系,这时文字的比例从原来的大小相等到互相有了不同变化。

图片

强化了对比后,我们看下效果,能明显感受到对比后的阅读逻辑性了有了一定提升。

图片

 

2.空间对比

图片

将主题中的文字放大并改变字体后弱化显示,再将原有内容放置到前面,在四周增加一些装饰信息作为点缀。

图片

通过对比后的效果,可以看出主体内容得到了一定的空间层次,整体也显得丰满一些。

图片

 

3.粗细对比

图片

通过筛选出优先重要信息,将内容作出粗细之间的明显区分,这样的方式可以帮助用户在阅读画面时有更好的着重点,也有了明显的阅读顺序。

图片图片

 

4.颜色对比

图片

改变主题颜色或者一些需要强化记忆的文字,能让整体的版式即显得完整,又多了一些阅读体验感。

图片

图片

我们刚才通过了多种对比,可以看出秩序性在整个版式中的重要,规律的变化也从来都不是毫无逻辑的呈现。

图片

 

示范案例

图片

为了让大家更容易理解和运用起来,我们再用一个案例来展现秩序性在版式中的使用方法。

首先填充红色为背景色,将主标题文字放大,副标题缩小。

图片

改变字体和颜色,利用英文拉开字间距放到主标题上形成了对比和颜色之间的关系。

图片

再复制主标题文字放大移动到背景上,改变字体颜色形成为背景之上的层级

图片

通过元素、图形、背景肌理、素材等去强化与文字版式之间的空间层级关系。

图片

这样一来,不仅文字信息有了非常清晰的逻辑表达,画面上也得到了视觉呈现的丰满和秩序性的动态规律。

图片

 

原文地址:修先森撩设计

作者:修先森

转载请注明:学UI网》不会排版的来看看,如何运用对比制造秩序

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档