设计师必须知道的6个排版小技巧

发表于 讨论求助 2023-06-05 09:59:46

童鞋们晚上好,明天又是上班日,今晚给大家翻译一篇有关排版设计的轻松易读教程,希望对大家有所帮助!

  

我们知道,排版设计首先就要重视信息层次感的区分。就比如下图所示的经典三段式层次区分法则:标题、引言、和正文三个部分的大小、色块区分:


所有文字信息的组合与区分,最关键的作用就是为了引导读者从整体往细节里阅读,越是合理科学的排布,越能使读者拥有舒适的阅读体验。


那么,怎样才能在易读性上越做越好呢?我们先来看一个栗子:下图从左至右是同样信息的不同排版方式,我们一眼望去就能够感觉到:左边的信息因为没有多少视觉、色块与字体设计的区分,所以没有层次感可言,我们阅读起来就费劲,内容主旨不易凸显:

此时,如何在设计中制定有效的视觉层次变得很重要。首先可以将文本信息分割为三个部分:


一级层次:通常,内容和信息中最需要传递给读者的部份。在视觉设计中,这是需要让读者第一眼就能看见的信息。


二级层次:相对一层等级的辅助信息如引言,在引导读者方面起到开门的作用。


三级层次:占据篇幅最多的文本信息,相当于三部分中的正文,是围绕第一层次展开的详细内容。


再举一个栗子:以下的网站商品页中藏着简约不简单的设计技巧,这是一个典型的分成三段层次的信息排版设计。 商品名(Major Black Headphones)是视觉上的一级层次,商品价格是第二层次,商品详情即是第三层次,字体的大小、宽高和粗细疏密值得参考。


视觉信息整理的基本方法就如同美国建筑设计大师查尔斯·伊姆斯(Charles Eames)讲的名言那样:信息整理就像一个层层打包的快递盒,再微小的那一层盒子也要清楚尺寸的具体数字,这可以用来比喻字体的具体尺寸。

 

在视觉设计中,最大的眼球冲击力不是来源于一行很大的字,而是来源于N行大小不一的字句的合体。下面具体来讲一件整理信息层次的小技巧!

 

1、字体的大小、疏密调整。


文字的大小调整,因为要拉开不同文字之间的对比度,最简单的方法通常是从最大的字体尺寸开始,越往页面下方走,文字大小也随之递减,这一招用在多文字网页设计中会有效果。

   

下图所示的参考样本,左侧与右侧分别用到了笔触肌理不同的字体设计, 另外一白一红的色块区分也更能起到分开层次的作用。 有层次对比度的字体才适合与背景大图相结合 


2、不同风格的字体可以尝试混搭,但最好不要超过三种

  

文字字体的设计要素,分配不同作用时等有效。 以下的样品中,都是同样的サンセリフ字体被利用,利用不同的权重。 标题标题最粗的比重来看,利用设计的阶层中,最重要的情报。 


3、为文字信息加上颜色,背景白或灰即可~    

 

字体的风格和颜色分量一样,在特定的点证人席上看到的技巧之一。 颜色自身所拥有的意义也被表达,所以设计的品牌形象和目的、氛围和互相确认吧。

 

这是一张咖啡厂商举办的活动邀请函,自然的大地色字体使用起来很符合品牌的调性以及活动理念。

  

而在另一个范例,也就是下图中,蓝黄撞色的字体组合就非常清晰地区分了主次层级:


4、空白处也要注意细节的配合

 

以下图为例,采取划分线的方式充分利用留白空间,确保商品标签在小小的平面区域内能够达到视觉上的基本平衡:


充分利用好空白空间,还需要注意字体不要过小,因此在设计的时候,我们要站在读者的角度,首先得要让自己感觉阅读不吃力,才能继续谈用户体验。

 

设计的时候,读者要的压力吧。 适当的留白空间,确保设计的平衡也抽出时间吧。 


5、在信息量庞杂的情况下,依然可以先分出三大层级区域

  

特别是信息视觉图这样文字信息庞杂的设计,还是可以先用三个层级划分,接着再往细里分:

 

6、万花丛中一点绿的方法

 

以下图为栗,我们可以看到文字设计工整而且排列方式基本一致,这种时候,适当加入倾斜式的字体排版,会有意想不到的好效果诞生!这样可以缓解视觉疲劳,让眼球感受不完全一样的亮点。

希望这6点拙见能为大家带去一点点启发,今天学堂君先到这里,晚安!

 

想提升技能涨薪水?还不赶紧关注!▼

发表
26906人 签到看排名