8个版式设计的干货技巧

用户头像
东莞/平面设计师/8年前/1074浏览
8个版式设计的干货技巧
用户头像
mayetta

关于布局的技巧

版式设计八大技巧。

版式设计技巧之一:使用长线(比较常见的用法,如果使用的不得当就会出现死板)

作用如下:

1 区隔信息

利用长线把不同类型的信息区分开,根据实际情况选择使用虚线还是实线,觉得黑白单调可以使用彩色。优点:区隔信息看起来更清晰,方便读者阅读,更规整,不至于太凌乱

1d41595ef840a8012193a3efef18.jpg

如果一个版面内的信息层级关系很多,我们可以使用细线和粗线进行划分

fc42595ef8baa8012193a3b5175d.jpg

上图使用红色虚线 ,优点:虚线看起来没有那么生硬

2、装饰

我们在排版时经常会遇到这样的情况,信息并不是很多,也不适合图标,整个版面单调 平淡。可以利用长线来丰富版面,增加美感和设计感。

18c3595ef942a8012193a34c3f0e.jpg

斜线经常被当做剪刀用,俗称“一剪没”

d369595ef98ea8012193a3d00681.jpg

上图文字顶部增加的直线使该排版看起来更专业。

3 建立固定版式

在画册或海报中,一般会有一些固定不变的信息放在顶部或底部,作为模板出现,利用长线来辅助建立这些固定版式。

99ac595efa3ba8012193a31b4d24.jpg

在画册排版时设计一个固定版式,可以让版式看上去更精致

8cde595efa74a8012193a3b9e5ab.jpg

用长线建立版式的同时可以起到分隔信息的作用。

4 强调

在文字下面加直线起到强调的作用,就行看书划重点一样。聚焦目光。

3667595efabba8012193a35ac717.jpg

线条的直弯随意,没有要求

版式技巧二、短线(没有长线普遍但更好用。特别是在网页设计,UI设计,名片设计)

作用如下:

1 区隔信息

短线较长线灵活些,不会造成太规矩的效果。虽然是短线,受众会脑补把它延长。

d487595efbcaa8012193a3003e05.jpg

当然,信息较短,用短线更合适些。

6c25595efc7fa8012193a3786f9f.jpg

上图的短线除了起到分隔信息外还有点缀的作用。

2 装饰

短线可以起到装饰作用,放在文字信息前面,或者相应留白区域选择合适颜色。可以有效增强版面ae84595eff58a8012193a38cb016.jpg

在文字的下一行位置加短线

c36b595eff79a8012193a385bffe.jpg

在文字的对应空白区域加短线

3 归类

用一条短线把一部分信息归为一类,一般采用竖线,如图所示。但是要更好看些,在信息类别比较多的版面中很实用。

27bf595effe6a8012193a340647c.jpg

在目录中使用短线最合适不过了

b10f595f0010a8012193a3a0a6ea.jpg

这个短线较长

版式设计技巧三、使用色块(很容易营造时尚感,经常用在画册和网页设计中)

作用如下:

1 划分区域

在画册或网页设计中,可以用色块划分区域,一个色块代表一个信息。如果色块较多时可以让他们呈现一定的节奏感,比如:渐变/统一

2af5595f00fca8012193a3dedce1.jpg

色块在划分区域的同时还能把一些看起来比较零散的信息组合起来。

656e595f0123a8012193a3d3e6c2.jpg

上图的是三个色块使用了不同的颜色,且有意上下错开创造节奏感。

2 突出重点

突出重点信息方式很多,把它放在色块也是一个不错方法,文字和色块要使用对比色。

e959595f017fa8012193a3e2edc9.jpg

上图的色块为了突出折扣信息

79fe595f019ba8012193a3551f30.jpg

上图的色块为了凸现标题

3 分离背景

当在图片上排文字时,由于图片的明暗关系不是太平均,会影响阅读。在文字底部增加色块是一个不错选择,如果把背景图调成黑白,再使用颜色鲜艳的色块效果会更好。

1d1c595f0220a8012193a3684253.jpg

e198595f0232a8012193a36ee7b4.jpg

如果想保留背景图片的完整性,可以适当降低色块的透明度,或者使用正片叠底效果。

4丰富设计形式(装饰)

色块本身具有强烈设计感的元素,如果用色块来构图,比如用几个色块组合成一个图形,或者通过色彩搭配的对比,都可以做出很漂亮且有特色的设计

5f2d595f02d7a8012193a3f321b8.jpg

上图的色块其实是左上角品牌标志的延展,构图很特别

4edf595f03fda8012193a35b42aa.jpg

上面这款包装顶部的橙色在大面积白色对比下显得十分明眼,成为了包装的亮点

版式设计技巧四、使用线框

色块和相框有相同的地方,但区别也不小,首先线框没有色块那么有视觉冲击力,其次因为线框没有颜色,所以更适合把图片也一同框起来,而色块用来承载文字信息,

有三个用处:

1 信息分组

用线框来把版面内的信息进行分组,跟色块的用法是同样的意思。

fd93595f1f5da8012193a3dd1729.jpg

上图右侧用相框把信息分为三个组,粗一点的彩色线框还很时尚

da01595f1f96a8012193a3cb8429.jpg

线框的风格应该与设计的整体风格一致

2 信息组织

零散的信息可能会造成版面混乱,用线框把临近的信息框在一起是一种有效的方法

418d595f1fe9a8012193a388bbe4.jpg

9ba1595f1ff8a8012193a31f93fa.jpg

在密集恐惧症的版面中,还好设计师用线框收住了信息区域附近的一片净土

3 装饰

根据版面尺寸,设计元素,合理的使用线框可以使作品更有设计感和美感,如:用图片贯穿线框,塑造一种突破束缚的感觉,或者把线框直接作为版面边缘的装饰线条花边等。

9ff4595f210da8012193a34ee25e.jpg

用卡片的设计中用细线装饰在边缘,有点小小的文艺气息

4aeb595f2141a8012193a341c1d7.jpg

利用规则的线框与图片错开制造冲突。

版式设计五:把文字排成一个特殊的形状

较方方正正的文字更有视觉冲击力,看上去更灵活,不过太花哨的形状会降低文字的阅读性,要慎用

d9d5595f21c5a8012193a38709ef.jpg

f53d595f21d3a8012193a3921d28.jpg

上图的文字排成平行四边形,虽然算不上太特别,但是也造成了一种不稳定的感觉,在周边文字的搭配下显得个性十足

版式六、文字绕排

把文字绕着外轮廓进行排版,这种手法在画册杂志报纸的排版中比较常见,要求文字要足够多。使用文字绕排时,图片要用异性效果比较好,而且图片要尽量大一些,此方法最适合创造视觉冲击力

3e78595f2287a8012193a3bb35ad.jpg

上面的版面不仅运用了文字绕排,同时还用了大小对比,稀疏对比,留白等技巧。

9c94595f22baa8012193a3400591.jpg

上面报纸中的图片选的非常好,既有空间感和动感,文字与图片也结合很紧密,营造一张车从报纸中出来的感觉。

8ac8595f231fa8012193a3dc7a72.jpg

版式七、对齐

因为对齐排版制造一种稳定,整洁,统一的感觉,最重要的便于阅读,几乎任何排版中都会用到。看似简答的技巧暗藏巨大的学问

7bfd595f23b1a8012193a3cb4896.jpg

跟我一起唱:左对齐,右对齐,上对齐,下对齐,左右对齐,居中对齐。

ea1c595f23e4a8012193a309a38d.jpg

上图的设计师有对齐强迫症,不过效果不错。

版式技巧八:文叠图

跟使用色块不同的是,文叠图不需要使用其他元素的辅助,而是直接把文字叠在图片上,所以必须要保持文字的可识性,而且不要把所有的文字都放在图片内,而是只放一部分,与图片形成交叉的关系,所以这种排版的优势在于对比效果强烈,且让文字与图片形成了紧密的互动,不会有个字的孤立的感觉

b404595f2645a8012193a3f4b1a5.jpg

采用不规则的异性图片来处理也不错,图片颜色最好不要太多太艳

42a8595f2684a8012193a30ebc78.jpg

整齐的文字与矩形的图片交叉叠加,即平稳协调有种冲破束缚的感觉

每一个技巧的使用都有目的性,要么为了美观,要么为了阅读方便,而不是为了炫技,所以在分析每个技巧时我都说明了之所以这么做得好好处,这是需要大家真正去理解的。

7
阅读原文
|
举报
|
24
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
【新年UI图标】30个图标
3D渐变流体抽象矢量UI背景图
高级感金属拟物 UI设计组件库
【新年UI图标】游戏/娱乐icon
UI通用设计素材1
高级表盘系列UI源文件
钱包ui模板
【新年UI图标】珠宝icon
UI界面 组件
UI应用平面图标
新能源APP应用UIKit
我的钱包-UI界面设计-app
【新年UI图标】钱包icon
拟物风质感写实UI卡片合集源文件
手表表盘UI系列
新拟态风格 UI设计组件库
【新年UI图标】优惠券icon
智能家居中心 简约 UI设计组件库
【新年UI图标】银行卡icon
抽象液态渐变UI背景模版
盲盒APP UI设计
科技医疗透明柜UI界面设计
【新年UI图标】影音icon
你可能喜欢
大家都在看
登录注册