搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
文字排版技巧——基础篇(分组和对比)
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
教程
原创
排版
对比
UI课程
发布时间:2020-05-08
关注
文字排版有三大基础理论知识,即对齐、分组、对比,关于排版的对齐原则在前面文章中已经写过,本期的重点是分组和对齐原则:也是最能体现文字编排层次感和设计感的两大原则。那么什么是分组?如何进行分组?需要注意什么?如何体现出对比?等等一连串的问题也随之而来!看似简单的四个字,实则犹如“武术秘籍中的内功一般”,重要程度可想而知!
分组,顾名思义:将有关联的元素物理位置上相互靠近,视觉上形成一个整体;而无关联的元素物理位置上相互分开,视觉上呈现分割整体的效果,比如现实生活中常见的:
学校教室里的课桌摆放,这里可以理解为分别用到了对齐和分组的原则;对齐体现在横向和纵向的位置关系,目的是为了体现整齐、统一;而分组则体现在教室中的这条“过道”,它将教室中原本密集的座位分布划分为两个小区域,目的是增强教室整体的通透性、空间层次感,避免给人太过拥挤、密集的感受。(也有利于老师检查作业)结合现实中的案例,在文字排版中,分组一样能起到很好的划分、切割、整合信息的作用,所谓分组实际上也是整合信息的过程,那么如何进行分组呢?下面举个例子:
左侧很明显,每一处文案信息都是均衡排布,也就是每条文案信息之间的间隔都相同,虽然运用了居中对齐的原则,但是整体给人的感觉还是有些过于紧凑、密集,这样会导致大大减弱整体文案信息的识别性和可读性,甚至会给用户形成一种厌倦感、不愿意阅读的现象;而右侧则是运用了分组原则,将一个完整的文案整体通过距离上的增大分成了两个小组,在视觉上给人的感受更加通透、减少了因信息太多而造成的压迫感,而且信息的层次感也相对更加明显;那么分组应该注意些什么?举个例子:
通过上侧案例我们不难发现,分组原则在文字排版中的实用性很高,分组即留白,留出来的是文案的喘息空间、是停顿点、是设计的专业,我们还应该注意:
第一:分组即对信息的整合,除了物理关系,其文案的划分也很重要,当文案与文案之间的关联很强时,则可以将他们归为一组。
第二:设计中的文字排版要始终有分组的概念,具体分几组要试情况而定,但是在一般情况下,文字排版分组最少分为两组,目的是为了提升文案信息阅读的流畅性、以及避免造成压迫感;而最多不要超过四组,目的是分组过多会给人一种松散、不够整体的感受!
第三:当文案信息太少且又要兼顾分组时,可以借助按钮、装饰元素、线条、形状等等用于体现文字排版的层次和分组。分组对于层次感和整合信息都有一定的帮助,但是还远远不够,我们还要借助对比原则进行更进一步的提升!
对比,可以理解为“视觉反差”,目的营造视觉感官上的变化,避免文字排版单调、主次关系不分明的现象出现;合理的运用对比原则,能很大程度上提升文案排版层次感以及设计感!而对比原则也能起到很好的整合文案信息的作用,也就是我们常说的放大、加粗、变色等等,其实就是在强调对比的重要性,凸显主次变化;常用的体现对比的效果的手法有以下几种:
这些对比手法都可以用在文字排版中,目的是为了更好的体现层次变化,可以用一种,也可以用多种,但是要兼顾信息的流畅性以及可读性,比如我们常说的,主文案要放大:就用到了大小对比的形式;重点文案加粗、变色:用到了颜色和粗细的对比形式;再比如在选择字体时给与主要文案以特殊的字体形式:则用到了形态的对比;还有一些游戏海报的设计中,大标题会做一些材质的区分等等,对比的目的是形成视觉反差,而视觉反差的目的则是让用户去注意那个与所有元素区别最大的视觉点,进而起到了突出、强调的作用,而与此同时,层次的变化也得到了体现!下面我们看一组简单的案例,仅用到前面所说的理论,将文字进行简单的编排:
案例中分别用到了大小的对比、形态对比、颜色对比,同时都做了最基础的分组;看似简单,其实都用到了排班的基础理论;分组增强了文字排版的通透性、对齐体现了整体性和整齐的效果;对比原则使得文字排版层次感更强,主次关系的体现是文字排版的重点,三点相互结合,一样可以将很简单的文案做的很丰富;在进行文字排版工作时,对比、对齐、分组是相辅相成的作用,而不是互相独立。
对齐、对比、分组作为文字排版的基础,要做到始终贯穿整个文字编排工作中,不管多么花里胡哨的编排形式,都是在此基础上去演变、改动的,所谓万变不离其宗,就是这个意思!现在可以找一些优秀的案例进行分析,分析他们是通过哪些形式体现这三大原则的,为什么要这么做?如果让你来做,你还有哪些想法?这是吸收别人作品优点以及学以致用的好方法,不妨多试试。当然,文字排版不仅仅局限于这些,还有哪些更实用的编排技巧,敬请期待进阶篇~~
UI课程作品
文字排版技巧——基础篇(分组和对比)相关作品
收藏
图标字体
收藏
APP设计
收藏
网站设计
收藏
网页设计
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More