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

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

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词

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

另外,我们的视觉流向也会被画面中的目光朝向所影响。

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

我们现在要将BIG Cat 放到画面里面,放到什么位置最能让别人注意到?

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

放到这里虽然感觉也没问题,但是如果字再小一点,图片颜色再深一点就非常容易让观者遗漏此信息。

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

将“BIG Cat”放到猫咪目光的延伸线上则会非常容易使人注意到。

二、 素材的精致程度

素材的精致程度对版面的优劣也有非常大的影响,素材的精致程度主要体现在三个方面,分别是清晰度、契合度和表现力

2.1 清晰度

清晰度相信不用多说了吧,清晰度的优劣直接会影响我们作品的品质。

如下图中这类素材清晰度不够,排版就会毁于素材。

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

调换成足够清晰度的素材,画面也会精致很多。

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

2.2 契合度

契合度就是素材与主题的关联程度。

如果一个表现体育的主题你去找一张美食的图片,那么毫无关联程度,必然是错的。

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

上图左侧的案例文字是狗,但素材图却是个豹子,于是就成了契合度不够的典型。

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

同样是书法培训的海报,左侧的用到太多不相关的元素,庙宇、竹子、山川等等,与主题的契合度不够。而右侧的案例仅仅只用了书法笔触的素材,但契合度和表现力却比左侧好很多。另外,右侧文字的编排在接近性、连续性上也比左侧案例好很多。

2.3 表现力

表现力有多重形式,如创意性、光影出色、层次感强等等。

比如我们找一个舞者的素材,下图左侧这种就属于表现力不够的。

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

左侧的素材常见,造型、创意以及美感都差强人意,缺乏感染力自然表现力就不够。相比较,右侧素材的光影以及美感非常好,表现力就会强很多。

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

上图两案例也属于表现力非常好的素材,我们在做排版时,如果要用素材就要用表现力过关的素材,这样作品才会更有美观与设计感。

三、 字型选择的重要性

字型在我们设计中是非常重要的,甚至可以上升到设计之魂的高度。字型选择是否正确对版面的影响是决定性的。

在讲字型之前我们先看一个案例。

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

这个生命科学的海报看上去怪怪的,究竟怪在哪里呢?实际上,是字体应用不得当的问题。案例中用的是衬线体与宋体,而这两个都是传统型字体,表达不出生命科学所拥有的严谨感与现代医学的科技感。

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

当我们将字体换成无衬线体与黑体后是不是就顺眼多了。无衬线体更加现代,与要表达的主题气质契合。由此可见字型选不对,就很容易毁掉你的作品。要选对字型首先要对字体的气质有一定的了解,接下来重点介绍衬线体、无衬线体、黑体、宋体所具备的不同的气质。

3.1 衬线体与宋体

衬线体,即有衬线装饰特征的字体;宋体,即笔画有粗细变化,并且转折处有三角装饰特征的字体。衬线体与宋体一般都具有传统的气质,能够表现一定的文化感、历史感,并且具有强烈的人文主义感。

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

衬线体还可详细分为偏传统和偏现代的类型,主要是看他们的横竖笔画的粗细对比度与简洁程度区分。

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

左侧传统型衬线体粗细对比相差比较小,衬线也比较圆润复杂,衬线连接处呈圆角;右侧现代型衬线体粗细对比相差非常大,衬线连接处呈直角,简单直接。

偏传统衬线体的代表有Garamond、Caslon等,它们的传统气质非常强烈,适合传达传统、文艺、人文的气质与故事感。

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

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

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

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

说完偏传统的咱们再来说一下偏现代的。

偏现代衬线体的代表有Didot、Bodoni、Walbaum等,它们在保留衬线的同时又有很强的现代感,粗细对比也比较大,能够传达出优雅、女性、高端、时尚的气质,因此很多时尚杂志、女性产品选择此类型的字体。

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

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

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

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

既然衬线体分为传统衬线与现代衬线,那么宋体也是一样。

按照宋体装饰三角的复杂程度也可分为传统宋体与现代宋体。

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

常用的传统宋体有方正标宋、书宋、报宋、筑紫明朝、王汉宗明体等;而常用的现代宋体有方正雅宋系列、思源宋体、小塚明朝等。

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

传统宋体与现代宋体所传达的气质也有差别。传统的宋体更能够表现出文艺、故事、人文的感觉;而现代宋体则偏向传递女性优雅、时尚的感觉。

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

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

介绍完宋体与衬线体的相同与不同后我们再来说一下他们之间应该如何混合搭配。

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

搭配原则其实不难,总结就是一句话:

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

以这个搭配原则我们看一下下面这个案例。

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

第一组搭配为方正风雅宋与其自带的英文,ui设计教程,显然是不匹配的;第二组为方正风雅宋+Garamond,现代宋体搭配传统衬线体,显得也不伦不类,不和谐;第三组为现代宋体搭配现代衬线Didot,所以非常和谐。

 收藏