10

用超多案例,帮你学会8个容易出效果的「线」设计方法

 3 years ago
source link: https://www.uisdc.com/line-segmentation
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

用超多案例,帮你学会8个容易出效果的「线」设计方法

我要投稿 编辑: 陈子木 作者:陈子木 可可洛 1天前 点赞 15 评论区 阅读本文需 7 分钟

当我们谈及版面的构成的时候,绝大多数的元素都可以清晰的归纳到「点-线-面」这个系统当中,而今天要聊的「画线分段」这一排版小技巧,毫无疑问是应该归结为「线」这个元素。

作为一个基础的核心排版元素,画线分段这一技巧中所涉及主要构成元素是「线」。线的玩法是千变万化的。「画线分段」的核心是在于,将线作为一种辅助性的元素,来帮助文本进行区分、分割,划分出区域和段落,强化视觉和语义,在功能和视觉上,重新找到平衡。

用超多案例,帮你学会8个容易出效果的「线」设计方法

在设计风格和特征上来说,「画线分段」在东亚三国的设计当中有着相对更多的使用场景,尤其日本设计当中,线条更是广泛而巧妙的运用技巧。将短短的线条玩儿出花来,让线条成为版面的线索和地图。

这篇文章会分两个部分来帮你梳理「画线分段」这一排版技巧,我们先梳理出它的 4 种核心功能,方便你可以根据实际的应用场景来进行筛选和调整,之后罗列出 8 种常见的设计玩法,这样就可以在不同的版面设计中应用起来。

4大核心功能

1、构建条理,创造韵律

当线条出现在边缘的时候,它是边界,当它出现在元素之间的时候,它是间隔。线条天然就具备有区分、割裂甚至粘合的作用。可以通过加入的画线,将文字分组,将信息理顺,从而强化整体的条理性。

用超多案例,帮你学会8个容易出效果的「线」设计方法

另外,线条丰富了元素之间的变化,如果控制好间隔,加入重复性的元素,添加规律性的变化,整个版面的韵律感会一下子提升起来。

2、强调文字,凸显内容

画线分段多数时候是跟文本结合起来使用的,尤其是标题。当文本被线条标识出来的时候,用户会更容易注意到它们,关注到它们。当然,在具体的强调方式上,画线分段式的排版有很多花样可供选择。

用超多案例,帮你学会8个容易出效果的「线」设计方法

3、视觉引导,强化节奏

在文本和文本之间,文本和其他元素之间增加线条,可以说是将原本的两者关系,上升成为一个更加多样的「三体关系」,可以很快消解原本单调直接的排版,让整体节奏感更强。在线条的指引下,让用户对内容的阅读和查看有更清晰的阅读路径,这种特质可以用来解决一些特定的排版和设计问题。

用超多案例,帮你学会8个容易出效果的「线」设计方法

4、强化结构,增加装饰

用超多案例,帮你学会8个容易出效果的「线」设计方法

将画线扩展到整个版面当中去,就可以辅助构建出整个框架,而这种框架结构一方面增加了视觉的结构性,还可以提升细节感,信息量以及装饰性。

8种常见玩法

1、横排画线强调

这可能是最为常见的一种用法。

在版面中使用最常见的横排标题,通过在文本的下方或者周围增加等宽的横向的线条,强调标题文本,让它和其他的视觉元素区分开来,简单,直接,有效。

用超多案例,帮你学会8个容易出效果的「线」设计方法

这种标识方式沿袭着我们一直以来阅读文字时候的标识习惯——画线。与其说这是一种排版策略,不如说它沿袭自我们一贯的「做笔记习惯」。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

有的时候,这种排版方式并不拘泥于标题,在小的文本区块当中,也可以灵活的使用,可以达到快速划分区域、帮助用户收束注意力,关注内容。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

2、竖排画线间隔

这可以说是第一种玩法的另外一种形态,只是相比于在西文当中,它天然地贴合传统的阅读习惯和东方审美。

用超多案例,帮你学会8个容易出效果的「线」设计方法

在中文版面中采用竖排画线间隔式排版,非常适合标题和小段文本的呈现,大段的文本呈现还是不建议使用这种版式。一方面,这样的设计结合相对传统的元素,可以更加轻松地营造出古早、雅致的气息和氛围、另一方面,它打破日常习惯的版面(也就是横排),可以很快地抓住观看者的注意力,但是又不影响阅读(大段的文本还是有影响),可以达到颇为良好的设计效果。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

当然,在西文当中也可以这么使用,只是要注意几点,如果是短小的单词,可以横排文字+竖排画线,如果是较长的文本,则只能让文本旋转90度来搭配竖排画线了。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

3、倾斜视线引导

相比于之前两种,倾斜式的画线分段处理,带有更加显著的视觉引导性,这时候的画线不仅切分出了区域,而且可以引导观看者的视线走向,整个版式可以变得更加多样,打破横平竖直的桎梏,变得更加多样和有趣。

用超多案例,帮你学会8个容易出效果的「线」设计方法

比如可以连接文本,告诉用户怎样去查看和阅读:

用超多案例,帮你学会8个容易出效果的「线」设计方法

比如可以直接倾斜地切分出区块:

用超多案例,帮你学会8个容易出效果的「线」设计方法

还可以构建出近乎喊话一样的漫画效果:

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

相比之下,这样的交叉切割式的画线分段更抽象,甚至在版面上创造出交汇点,同样也起到了强调标题的作用:

用超多案例,帮你学会8个容易出效果的「线」设计方法

而这样的画线分段就是我前面说的,圆弧式的切分,充满了有机感:

用超多案例,帮你学会8个容易出效果的「线」设计方法

4、微妙的虚线切分

相比于实线的分段处理,弱化处理之后的虚线更加微妙,有着更强的融入感,这意味着虚线可以更加灵活地加入到版面当中,无论是划分区块还是充当引导,都更加轻松,不会显得突兀。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

5、加粗画线强调

加粗之后的画线,显得存在感更强。这个时候的画线不仅仅有着划分的作用,它的视觉重量会逼近文本乃至于图案等视觉元素,这时候它可以充当占位符和视觉锚点而存在。它的强调作用大体分为两种,一种是在进行分隔的同时,作为区块的视觉标识存在,一种是作为填补区域布局的占位符来使用。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

下面就是典型的使用加粗画线来作为视觉锚点:

用超多案例,帮你学会8个容易出效果的「线」设计方法

6、构建形体框架

当你使用横竖画线,将文本乃至于其他视觉元素,部分包裹起来的时候,它的形体感会进一步加强,接近框架一般的存在,不过由于不完全的封闭,又保持了足够的呼吸感,保证了视觉上的结构性,又不至于呆板无趣。只要你能保持克制地使用,可以非常有意思。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

7、富有韵律的装饰

最有趣也最富有创造性的玩法,可以说就是用画线来进行装饰。可能这样使用似乎有点偏离「分段」本身的作用,但是它更多地是「打破整块的留白」,来实现视觉韵律感。

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

比如这张海报中使用倾斜的画线和文本共同构建出来的效果,同时具备了装饰、强调、实现引导,甚至在几何结构上,借助和画面人物的形体平行,做到了奇妙的呼应,不复杂却相当有看头:

用超多案例,帮你学会8个容易出效果的「线」设计方法

8、结合肌理强化风格

画线同样可以成为强化风格的组成部分,比如结合笔刷、肌理效果,让画线本身可以和本身的设计风格进行融合:

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

用超多案例,帮你学会8个容易出效果的「线」设计方法

画线分段是小技巧,在多数版面里面都可以起到锦上添花的作用,尤其当你没有想法的时候。当然如果你对于这样的版式技巧感兴趣,可以看看往期的其他版式技巧:

点赞 15
收藏 31

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK