墙裂干货!排版优劣的三大要素学习UI(3)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

墙裂干货!排版优劣的三大要素学习UI

这一组也是一样,只有第三组传统宋体+传统衬线体最为和谐。尽管第一组自带的英文也可勉强划分到传统衬线里面,但他的笔画特征与中外完全不同,因此也非常难匹配。

所以搭配的时候不仅要气质相匹配,其笔画特征也应该是相似的。

3.2 无衬线体与黑体

无衬线体,即没有衬线修饰的字体。

黑体也是没有三角形装饰特征的字体,ps教程,相较于衬线体与宋体而言,其更为简约、现代,能够表达理性、利落的特质。

墙裂干货!排版优劣的三大要素学习UI

无衬线体根据其字母的结构关系可以分为常规型、人文型、几何型三类。

墙裂干货!排版优劣的三大要素学习UI

其中常规型无衬线体是最常见最普通的,可以说是最没个性的;人文型无衬线体的笔画并不是等宽的,而是有过渡过变化,S、C等字母的切口也是宽的,给人的感觉很秀丽、优雅,同时又具有一点文艺气质;几何型无衬线体更像是用几何形状切出来的,给人的感觉很简约、时尚、现代。

常见的常规型无衬线体有Helvetica、Univers、DIN等,它们给人的感觉是现代、理性、严谨的,同时也是最没个性的。

墙裂干货!排版优劣的三大要素学习UI

墙裂干货!排版优劣的三大要素学习UI

因为其没有特别的个性,所以字体的包容性非常广,有话云:当你不知道用什么字体时,就用Helvetica。由此可见其用途广泛程度。

人文型无衬线体的代表为Gill Sans、Optima、Stone Sans等,它们给人感觉是理性与感性并存,是很有温度的一类字体;它们也能传达优雅、秀丽、人文的气质。

墙裂干货!排版优劣的三大要素学习UI

墙裂干货!排版优劣的三大要素学习UI

几何型无衬线体的代表有Ftura、Avalon、Avant Garded等,这种字体有强烈的几何感,显得很现代、高端。

墙裂干货!排版优劣的三大要素学习UI

墙裂干货!排版优劣的三大要素学习UI

相对于无衬线体,黑体的分类就比较简单了,按照有无喇叭口的原则只将其分为常规型黑体与人文型黑体。无喇叭口的黑体为常规型,有喇叭口的为人文型。

墙裂干货!排版优劣的三大要素学习UI

常见的常规型黑体有思源黑体、微软雅黑、汉仪旗黑、方正兰亭黑等;常见的人文型黑体有默认黑体和冬青黑体。

墙裂干货!排版优劣的三大要素学习UI

墙裂干货!排版优劣的三大要素学习UI

黑体与无衬线体的搭配比衬线体和宋体要简单,只需要选择精致的字体,并统一好字重和笔画形式便可。

四、 案例演示

此部分我们用“东方艺蕴”的海报来作为案例,来看看如何运用以上的知识点运用到版面设计中去。

首先我们看一下同学的原作极其所存在的问题。

墙裂干货!排版优劣的三大要素学习UI

第一点,是所用的素材不够精致,不管是层次感还是表现力都非常的差。

第二点,是字形选择上的错误,中文与英文的搭配也并不合理。

第三点,是接近性原则没有处理好,版面的层级关系也没有划分好,所以显得很碎且杂乱无章。

知道问题后我们来逐一解决就可以了。

问题一:“素材的精致程度不够”

首先来看第一点,素材的精致程度。

墙裂干货!排版优劣的三大要素学习UI

随着此素材层次感和表现力都不太好,但也并不是完全没救,我们只需要在PS里处理一番,提高其层次感和表现力。

墙裂干货!排版优劣的三大要素学习UI

处理后素材的层次感通过浮雕效果表现了出来,增添一些东方韵味。对其色阶、对比度的调整更使其表现力增加了几分。

虽然调整好了,但素材的负空间比较多,比较零碎,所以我们可以为他加入一个底,最好贴合着形体来,我这里加了一个渐变的圆形,形式贴近中国特色民族传统工艺之一的刺绣,与活动主题契合不少。

墙裂干货!排版优劣的三大要素学习UI

现在主体非常饱满了,但后面的圆形缺乏层次感,为了解决这个问题我们可以去找一些纹理的素材叠加上去。

墙裂干货!排版优劣的三大要素学习UI

墙裂干货!排版优劣的三大要素学习UI

当我们把纹理叠加上去后,其视觉表现更丰富了,层次感也比之前强很多,至此素材精致度的问题已经得到了解决。

Ok,我们可以将处理好的素材置于版面之中作为主体,如下:

墙裂干货!排版优劣的三大要素学习UI

现在主体在版面中的大小已经调整的比较合适了,剩下的我们只需要在主体以外的区域编排上文字信息便可。

在此图中能够放置文字信息的区域也就只有上下两部分,如下:

墙裂干货!排版优劣的三大要素学习UI

问题二:“中西文字体搭配不合理”

了解文字编排的位置之后,我们需要解决第二个问题,也就是中西文字体搭配的问题。

在做之前,我们首先应思考其表达的主题是什么,是传统的感觉还是现代的感觉、该用黑体还是宋体?东方艺蕴明显是东方的艺术展,非常有文化感与艺术性,所以黑体与无衬线体肯定是不合适的,我们应该选择能够表现文化属性的宋体类字形。在宋体字形里面我们也要避开具有时尚、现代气质的,而要选用传统的、有文化性的字体——传统宋体。

墙裂干货!排版优劣的三大要素学习UI

确定好中文宋体的类型之后我们还要去确定英文字形,根据我们上文所说的传统配传统的法则,上面三个搭配中只有王汉宗明体与Garamond的搭配最为合适。

字型都确定好后便可以进入排列文字信息的环节。

墙裂干货!排版优劣的三大要素学习UI

问题三:“接近性原则、层级关系没有处理好”

首先,把主标题放上去,但主标题字与字直接空隙太大,有些散,怎么解决这个问题呢?

墙裂干货!排版优劣的三大要素学习UI

根据我们上文所说,在字与字之间加入连接性的符号就可以了,这样建立了连续性,使其成为了一个视觉组合。

墙裂干货!排版优劣的三大要素学习UI

其他的信息也按照接近性的原则排列上去,注意相关联的信息互相接近;不相关的信息互相远离。

现在,版面的结构已经成型了,剩下时间日期这里显得有些散。

墙裂干货!排版优劣的三大要素学习UI

同样我们也为其加入连接性的符号组织到一个视觉单元里去,那么其整体的效果就会好不少。

墙裂干货!排版优劣的三大要素学习UI

深灰色背景太单调了,所以我们可以另找一个密一点的纹理素材叠加上去。

 收藏