搜索

论坛版块 MAKA教程 H5制作技巧

史上最全文字排版指南

跳转楼层 0 3269
MIN酱
x0

发表于 2016-8-30 23:12:08 | 显示全部楼层 |阅读模式
做设计的也好,做媒体的也好,都需要长期跟文字打交道。字体排版是最基础的一项编辑技能,但往往多数人都是凭直觉排版的。
甚至大部分人还认为这样的排版一点都不丑,只不过是美得不明显!
跟杂志、海报、网页等媒介一样,H5也是由文字和图片等基本元素构成的。字体排版极大程度影响着整个H5作品的视觉效果,所以我们第一思路不应该是创造美,而是回避丑

今天MIN酱要分享几个在平面排版时能突出中文美感的方法,至少可以令你的H5作品的质感往上提升一个档次~

NO.1 纯文字排版
颜色永远是让文字更突出的第一要素,通过放大字体其实就是在放大文本的色块面积。对于标题类文本选择较大的字体,与其他色彩较弱的文本进行区分。
640.jpg
但有时字体过大会显得粗糙,建议可选择带有衬线的字体,令文本质感更佳。
640.jpg
除了调整字体大小,把单色字体改为多色文本也是突出内容的最直接的方法。当然色彩搭配切忌杂乱,别整得像杀马特一样。因此,可以参考下图。
640.jpg
我们可以利用颜色的有序渐变,或者将文字内容进行刻意的色彩区分,从而放大主体色彩的可视比例,这样看上去就没那么low了~
除了改字体的颜色,还可以改字体背景的颜色!将文字反白处理,扩大色彩面积,效果也是棒棒滴。
640.jpg
在色彩与字号不变的情况下,含有数字与英文的文本通常会更受人关注。因为我们习惯了用符号的形式去理解它们,往往图形比文字更吸引人。
640.jpg
如果文本信息实在无法进行符号化处理该怎么办?那就人为的增加一些符号吧!
640.jpg
在移动互联网时代,人们更习惯于碎片化的阅读方式,所以创作H5时要尽量避免过多文字的堆积。

当内容无法删减,我们能做的就是通过工整的版式,让阅读者阅读起来更轻松。比如,通过断句、分行的方法,让文本段落看上去更优雅
640.jpg
对了,只剩几个字的时候就别换行了,强迫症看着难受!

NO.2 图文排版
一般H5页面都是需要文字与画面相互搭配的,这时应该如何排版才能提高文字的辨识度和美感呢?

很多人会以为是字体样式太少,所以出来的效果不好看。其实不然,有时是因为我们没有处理好画面中各元素的关系,字体放错了位置也会影响整体视觉。

640.jpg

从视觉美感上来说,右图明显是优于左图的。但右图跟左图最重要的区别并非字体的大小以及颜色,而是字体与画面的关系!

文字的摆放一定不是随心的,而是与画面中某些元素之间相辅助的
。MIN酱从用户案例中挑一些比较好的作品,都能验证这点。

640.jpg

利用图文之间的位置关系,适当留白之余也让画面处于力量均衡的状态。不会让读者觉得头重脚轻,也不会因为文字太多而失去阅读H5的耐性。

640.jpg


有时还需要根据画面的颜色来调整字体的颜色,强调主要信息,弱化次要信息
。下面这个案例很好的处理了背景图与文字的空间关系,简单但不随便。

640.jpg

如果还没熟练掌握以上方法,MIN酱还有最后一招,就是:页面居中!居中对齐会令图文排版相对整洁,绝不会出现大差错哈。

640.jpg

以上我们强调了文字位置比文字样式更重要。而当我们清楚文字摆在哪会更好看后,再来挑选或设计H5页内的具体文字。
我们一般遵循“越简单越好看”的原则,像微软雅黑这些经典的字体往往是最适合用户阅读的。
在同一个H5内千万别用超过3种字体,不然排版绝对丑!而且字体风格要统一,别一会用卡通手绘字体,一会又用毛笔字体…

640.jpg
上面这个H5的文字部分则只是用了一般的衬线字体,既工整又利落。搭配工笔画风格的背景,显得格外巧密而精细。

640.jpg
像这类古典风、山水风、中国风的设计,主标题选择线条更流畅平滑的字体,能更贴合画面意境。

640.jpg
还有不少用户喜欢用大字海报的形式来呈现信息,利用H5的图层关系让图文元素前后穿插,也会得到非常不错的排版效果~
文字不乱摆、字体不乱选,多找一些海报、杂志参考他们的排版结构,保证能让你的H5视觉妥妥的!
当然
前提是...
使用MAKA编辑器
50+款热门字体随心所用
轻松提升H5颜值
让你的H5更有个性


作者丨MIN酱

图片来源于MAKA模板商城