首页

以后还敢说自己不会版式设计?

周周

作为一名专业的设计师,版面设计能力直接影响到该设计师水平。我们很多设计朋友在临摹的优秀作品中,往往只是被作品华丽的外表吸引了,比较少去思考设计背后的秘密。

那么在这里,我总结了版式设计原理的几个方面,结合一些具体例子实际操作演示,让对这块不熟悉的设计师朋友们能快速掌握版式设计。

目录

  1. 版式组成
  2. 构图平衡
  3. 设计原则
  4. 设计流程
  5. 案例演示

以后还敢说自己不会版式设计?

一、版式组成

主体:视觉焦点,主导着整个设计(可以是人/物/文字/图片),整个版面最吸引人的部分,相当于主角的作用。

文案:对主体的辅助说明或引导,毕竟有时候我们放一只小狐狸在旁边,用户也不能准确的知道它在说什么,配角的作用。推荐阅读:平面广告的版式风格与创新!

点缀元素:装饰元素,可有可无,具体根据版面需要;好的点缀元素能够渲染气氛,大部分的点缀元素遵循三角形原则,类似下图中的云朵,群演的作用。

背景:可分为纯色/彩色肌理/图片/图形等。

以后还敢说自己不会版式设计?

二、构图平衡

在设计中,平衡是实现统一的一条重要途径。如果上面所说的元素组合起来处于平衡状态,那么这个设计看起来就是统一的,就会给人一种整体印象。

因此,平衡是视觉传达设计的一个重要方面。版式平衡总共有3种分类,分别是:对称平衡,非对称平衡和整体平衡。

以后还敢说自己不会版式设计?

1. 对称平衡

对称是同等同量的平衡,对称式设计是一种静态的,可预见的,讲究条理和平衡布局的设计。对称构图相对比较易于创建,特点是稳定,庄严,整齐,安宁,沉静和古典。

以后还敢说自己不会版式设计?

2. 非对称平衡

非对称在不对等的元素间创设出秩序和平衡,非对称设计由于版式不可预见,所以空间是变化的。特点是动态的,灵活的和富有活力。非对称构图比较多,常见的有以下6种形式。

以后还敢说自己不会版式设计?

对角线构图:

文案摆放在版面的对角线方向,一方面避免了司空见惯的居中版面,一方面给中心主体留出了更多的创作空间;另外中心的图形也可以是对角线的设计,这样会让整个构图看起来比较平衡。

以后还敢说自己不会版式设计?

发射状构图:

点缀元素围绕中心的文案或者图形发射,这样的构图会让中心的视觉容易聚焦,视觉冲击感会更强烈。

以后还敢说自己不会版式设计?

像电商大促活动,淘宝和京东等等会经常使用发射性构图来营造大促活动的热闹火烈程度。

以后还敢说自己不会版式设计?

中心构图:

这是我们最常见的构图之一,文案和主体居中页面,注意的是位于版心的主体要尽可能的出彩,利用设计技巧吸引读者的眼光,这样才能避免平淡乏味。

以后还敢说自己不会版式设计?

s形构图:

文案或者图形放在线条转折的地方,整体呈一个 s 形。另外线条的起点和重点也同样是读者容易关注的地方,可以放一些重要的信息。这样的构图灵活,有趣,而且可以引导用户沿着 s 形轨迹阅读信息。

以后还敢说自己不会版式设计?

二分构图:

文案和主体分开,呈左右或者上下的构图形式,注意的是文案要采用对齐原则。这样的构图也是比较容易创建的。

以后还敢说自己不会版式设计?

形状构图:

主体和文案组合的形式可以是圆形,三角形,矩形等形状构图。注意如果是用三角形构图,最好呈倒金字塔结构,这样更加轻易引导用户进入下一个信息层。

以后还敢说自己不会版式设计?

3. 整体平衡(满版平衡)

整体平衡,是指图片充满整个版面,文案布局在上下,左右,中部的位置,特点是主要以图像为诉求,视觉传达直观而强烈。满版型构图,给人大方,舒展的感觉。

注意:在设计的过程中,这种类型的文字处理很容易显得「嘈杂」,因此为了避免拥挤的空间,适当删减些文字。

以后还敢说自己不会版式设计?

三、设计原则

对构图形式了解后,我们还要知道一些基本的设计原则,虽然这些原则我们可以在其他地方反复的看到,但是我在这里还是要强调一遍,因为它可以帮助我们在打破规则之前,必须清楚规则是什么。另外注意一点就是,这几个原则不是独立分开的,而是可以同时考虑和结合,不是唯一选择:

以后还敢说自己不会版式设计?

1. 对比

缺乏对比,作品会变得平淡乏味并且不能有效地传递信息。艾美奖设计师、Blind 公司创始人 Chris Do 说过 contrast is king(对比至上),运用好对比,可以在页面上引导用户的视觉,并且制造焦点。

以后还敢说自己不会版式设计?

一般产生对比的方法可以有:大小对比、粗细对比、冷暖色对比……不管是哪种对比,当你期望对比效果有效的话,需要大胆一些,明显一些,不要拿12号和13的文字做大小对比,这是没有任何意义的,不要畏畏缩缩,做设计也是一样。

以后还敢说自己不会版式设计?

2. 对齐

任何元素都不能在版面上随意安放。每一项都应当与页面上的某个内容存在某种视觉联系。在版面上找到可以对齐的元素,尽管它们可能距离比较远。需要注意的地方是避免同时使用多种对齐方式。

以后还敢说自己不会版式设计?

左边的海报采用了矩形构图,右边的海报采用了二分构图,但是文案都是找到了一条明确清晰的对齐线,这样让版面产生了秩序美。

以后还敢说自己不会版式设计?

3. 亲密性

同类相近,异类相远,相关的元素距离靠近,归组在一起,成为一个视觉单位,而不是多个孤立分散的状态,这样有助于组织信息,减少混乱,让结构变得更清晰。根据文案内容,进行合理的分组与归类。

以后还敢说自己不会版式设计?

左边海报文案分成了4组,清晰有条理,中心的主体和点缀元素也利用了亲密性原则,使得中心主体显得更饱满;右边海报主体采用了发射构图,整体呈倒置的金字塔形式,这种锥形容易引导用户阅读下一个信息层。

以后还敢说自己不会版式设计?

4. 重复

重复的目的是统一,并增强视觉效果。比如标题都是同一个字体或大小或粗细。但需要注意的是,要避免太多地重复一个元素,重复太多只会让人讨厌,要注意重复的「度」。太多的重复会混淆重点,都是重点等于没有重点。一般来说,呈均匀的重复式图案,是作为背景使用的。

以后还敢说自己不会版式设计?

左边海报中,我们的视线会被那一个不同的女孩吸引住,这个女孩和左上角的文案「敏感词万岁」相呼应,这种同质中的不同,即是变异元素,用来制作视觉焦点。

右边海报是葛西熏设计师为日本著名仲条正义设计的个人展海报,其中重复的形象是一个腮帮鼓起的小孩形象,不知道是在喝东西还是吐东西,这个具有冲击感的形象其实和这次展览主题「饮&呕吐」呼应的,设计师想表达仲条正义的创作于人生,正如这个重复的形象,不断吸收,不断推翻,最后不断创造。

以后还敢说自己不会版式设计?

5. 留白

留白是虚实空间对比的作用。适当的留白能让页面透气,有呼吸,给人舒适感。大量视觉信息堆砌时,每个元素都要经过眼睛扫描,大脑处理,当找不到重点的时候用户眼睛和大脑容易疲惫。在内容比较多的情况下,尽量在视觉上减少视觉分组;另外,多利用负空间创作一些巧妙的负空间。

以后还敢说自己不会版式设计?

左边在留白的同时,利用了负空间巧妙的将海报的主题「美食」和「美酒」结合起来。右边的海报是日本大师原研哉的设计作品,大量的留白空间更加显得中间寿司的精致,少而静的视觉元素提升了作品的品质感。

以后还敢说自己不会版式设计?

6. 变化

一成不变的元素会容易乏味无趣,版面也缺乏灵活感,如果将一些元素发生位置,大小或者颜色变化,打破版面呆板、平淡的格局,使得画面非常有层次感,不失为打破格局的好方法。

以后还敢说自己不会版式设计?

左边的海报如果将所有的元素归位,这将是一个文案和人物分开中规中距的构图,当他们的位置发生了一些位移,整个页面变得有趣多了。右边海报采用了 s 形构图,如果这些圆圈是一样的大小、颜色,可能没有多少人会有耐心的阅读下去。

以后还敢说自己不会版式设计?

四、设计流程

前面我们了解了版式组成的元素,构图和设计原则,那么我们在工作中怎么利用起来呢,下面介绍我自己的设计流程,每个人的流程都不一样,大家都可以根据自己的习惯来调整。

以后还敢说自己不会版式设计?

1. 需求沟通,确认主题

当接到需求的时候,第一步不要着急马上开工。先要找对需求的方向,才能提高工作效率,事半功倍。沟通主要注意几个方面:

需求的目的是什么?目标用户是谁?背景是什么?——对症下药

  • 这么多文案或者素材里面,哪个是一级二级?——划分信息层级,寻找重点

  • 风格上面有什么要求或建议?能否用3个关键词表达?——预期效果是否达成一致

Ps:关于第3步风格沟通,建议双方用图片交流和表达。毕竟每个人对「高大上」的理解都是不一样的,有的人认为是五彩斑斓的黑,有人认为是大量的留白。有了图片,我们可以去分析图片符合「高大上」的原因是哪些,从而提炼出具体的元素,将「感觉」具体化,这里也是运用到了情绪板设计的体系。

以后还敢说自己不会版式设计?

2. 确定构图形式,学会视线引导

根据前面的沟通和风格关键词,收集好用于表达信息的元素,包括图形图像文字等等,然后在草稿或者脑海中构思好,怎样的排布能让信息有效的传达出去。另外作为设计师要学会引导用户的阅读视线。比如你找到了一个抬头向上看的模特,你可以把文案放在海报上方,用户会习惯性地自然地沿着模特的视线看到文案。

以后还敢说自己不会版式设计?

3. 色彩搭配,5种平衡关系

关于配色,在网上大家都可以看到很多方法和理论,下面介绍这5种色彩平衡的方法个人觉得比较实用,也比较容易理解,大家要根据实际需求来运用合适的配色方案。

互补色——相互衬托

互补色就是色环上相对的两个颜色,海报中的绿色和红色就是这种关系,相互映衬,相互衬托,从而达到了一种平衡。

冷暖色——情感表达

当我们想表达强烈的情感时候,可以用冷暖色去对比,经常会在电影海报或者插画作品中看到。

深浅色——色彩层次

这里的深浅指的是黑白灰对比的重和轻,一般来说,色大而深显得比较重要,色小而浅显得比较次要,我们可以看一下前面讲构图那块展示的海报黑白版,会发现这个规律更加明显。

中性色和彩色——视觉聚焦

中性色指的是黑色,白色和灰色,也叫无彩色,当中性色充当背景色的时候,彩色部分会更加突出和聚焦。

纯色和花色——平衡多色关系

如果一张图中,主体本身颜色比较丰富鲜艳,背景色也五颜六色的话就眼花缭乱了,也就是经常说的辣眼睛,这时候一般采用纯色的背景来缓解视觉疲劳和平衡多色之间的关系。

以后还敢说自己不会版式设计?

以后还敢说自己不会版式设计?

4. 确定字体搭配

不同的字体有不同的气质,根据风格来选择合适的字体。如果遇到比较好看的字体,却不知道叫什么名字,可以找一些以图搜字的网站,比如求字网等等,避免伸手党。

黑体

工业现代感比较强的无衬线字体,给人感觉端正刚硬,具有力量感,多用于表达简洁或信赖感的主题。

宋体

细致优雅的衬线字体、苗条细长,特点是复古,多用于表达文艺或者时尚的主题。

圆体

圆体的笔画圆润,柔美,可爱,具有亲和力,多用于女性或儿童的主题领域。

书法体

书法体特点是潇洒大方,气势磅礴,具有历史感,多用于表达传统文化或者历史主题。

哥特体

哥特体是装饰性比较强的衬线字体,线条交接处和末端具有明显的粗细变化和装饰。特点是犀利、凌厉,多用于表达惊悚、魔法童话或者战争的主题。

艺术体

艺术体其实是泛指像素风格,手写字体,汉仪六字简等等具有强烈的艺术风格和设计感的字体。特点是轻松活泼,具有观赏性和趣味性。

以后还敢说自己不会版式设计?

以后还敢说自己不会版式设计?

以后还敢说自己不会版式设计?

五、案例演示

上面的案例大部分是平面展览或者电影海报,那么实际工作中的网页,banner、闪屏或者 ui 界面这些怎么办呢?其实方法都是一样的,版面设计的原理应用在各个方面。这里演示一个移动端 banner 设计案例吧。

以后还敢说自己不会版式设计?

首先,运营小姐姐的文案非常简洁,没有冗长到让我要分成一级二级三级;其次需求的目的也很明确,就是要突出2个素材和按钮;最后风格也没有奇奇怪怪的提议,只要和产品整体调性一致就好。

那么在这里要介绍一下产品的背景了,pins 是一款少女心拼图 app,界面简洁清新,多种布局模板和背景。很快的,我在脑海中简单地构思了一下构图的方式。其实3种构图形式都是可以的,但是为了更好的突出按钮和素材效果,我最后选择了对角线构图。

以后还敢说自己不会版式设计?

先在黑白稿的情况下把文案和主体布局好,让主次关系清晰;考虑到目标用户大部分是女生,使用了圆形字体,配色主要是参考了 pins 的 logo 的配色,少女心的品牌色;最后细节调整,加上一些点缀的元素,其中网格是 pins 比较受欢迎的背景。一个简单的 banner 就这样完成了。

以后还敢说自己不会版式设计?

当我们的工作内容无法满足做文字比较多的平面海报的欲望时,可以考虑自命题的练习。当时听到许巍《无人知晓》这首新歌的时候,有一些感悟和想法然后做了一些 C4d 素材,想利用它作为主体和歌名做一下排版练习:

以后还敢说自己不会版式设计?

在开始动手做之前我就想好了这次想做一个视觉直观而强烈的海报,再加上主体是文案和素材的结合,所以我才采用了满版构图。在黑白灰中将主角和配角的位置确定好,再去调整字体和距离。推荐阅读:版式必备的7招处理方法

以后还敢说自己不会版式设计?

然后调整主体中4个字和素材之前的交叉和重叠,细节调整后,我尝试了2个配色方案,一种是利用主体素材的颜色进行搭配,平静和谐;另外一种是红蓝配色,直观强烈。

以后还敢说自己不会版式设计?

总结

最后总结一下,我们在进行版面设计时候,要注意从这几个方面去不断调整和检查,同样当你看到一张海报的时候不知道怎么去思考和分析,也可以从这几个方面入手:

主题是否鲜明?视觉焦点是否突出?

  • 构图是否平衡?(3种平衡关系)

  • 设计原则是否合理运用?(6个设计原则)

  • 细节是否丰富? 是否有趣? 细节考验着设计师的情怀。(字体、色彩、光影等)

以后还敢说自己不会版式设计?

以上海报案例图片采编于网络,版权归属原作者。

来源:UID的小伙伴们

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

版式设计-文字

资深UI设计者

今天的这篇文章也将围绕着「文字」展开,相信大家看完后会对「文字」有一个全新的了解,也将明白文字对于版面的意义是巨大的,处理好它,基本上你的版面也就编排的差不多了。好了,下面我们开始今天的内容吧。

高手的版式三部曲系列:文字篇

首先来看几张不同类型的海报,第一张文字占比较高,第二张图片占比较高,第三张文字与图片占比是五五开。

然而不管是属于哪种类型的,它们的核心目的都是在传达信息。因为对于一张海报来说,我们不光会看还会去阅读它们。

高手的版式三部曲系列:文字篇

平面设计就是通过文字来「说话」的。

高手的版式三部曲系列:文字篇

而在广告设计中,图片的占比会非常高,因为广告多以图片为主,通过图片我们能大致的猜测出设计师想要表达的东西是什么。

高手的版式三部曲系列:文字篇

总结一下:广告设计多以图片为主,意在通过图片传达概念;而平面设计则多以文字或图片为主,意在通过文字传达信息。

高手的版式三部曲系列:文字篇

那么作为信息传达的载体,字体就显得格外重要了。下面我会从字体的分类、字体的搭配、字体的气质与设置细节着手,慢慢带领大家去认识字体,首先我们来看看字体的分类都有哪些。

高手的版式三部曲系列:文字篇

中文字体大致可分为:黑体、宋体、圆体、书法体与卡通体等。

高手的版式三部曲系列:文字篇

其中书法体又细分为:楷书、行书、草书与隶书等。

高手的版式三部曲系列:文字篇

在列举的这些字体中,最常用就是:黑体、宋体和圆体,而在书法体中,最常用的是楷书与行书。为什么说这些字体常用呢?因为在许多优秀的设计作品中,这些字体的出现概率都非常高,尤其是黑体与宋体。

高手的版式三部曲系列:文字篇

下面说一下英文字体,大致可以分为:衬线体、无衬线体、手写体与展示字型等。

高手的版式三部曲系列:文字篇

其中最常用的就是:衬线体与无衬线体。理由与中文一样,它们也是使用率很高的字体,其次还有一个原因就是在以中文为主的设计中,它们与中文字体搭配起来比较契合。

高手的版式三部曲系列:文字篇

拿黑体来说,与之搭配的英文字体就是无衬线体,因为它们的笔画特征相似度很高。

高手的版式三部曲系列:文字篇

宋体搭配的就是衬线体,因为宋体的笔画特征是有粗细变化且有装饰线,而英文的衬线体也刚好有与之相似的地方。

高手的版式三部曲系列:文字篇

而圆体则是搭配拥有相似特征的无衬线体。

高手的版式三部曲系列:文字篇

因为常用的书法体通常使用毛笔书写,所以在笔画特征上没有与之相匹配的英文字体,大多数时候我们会选择用衬线体来搭配,具体原因我会在后面的字体气质环节为大家讲解。

高手的版式三部曲系列:文字篇

虽然也有别的搭配方式存在,但我给大家提供的这些都是最常用和最安全的。说完字体搭配问题后,下面我们来看看这些字体,所包含的气质又有哪些。

高手的版式三部曲系列:文字篇

首先是黑体,它具有科技感与现代感,这是由它简洁干练的笔画特征决定的。

高手的版式三部曲系列:文字篇

其次黑体也能表现出运动与时尚的感觉,因为运动与时尚本就是偏现代的词汇。

高手的版式三部曲系列:文字篇

接着是宋体,它具有文化与历史的气质,这个比较好理解。

高手的版式三部曲系列:文字篇

而除了能表现出历史与文化感之外,宋体还能表现出清新与雅致的感觉,这是由宋体的笔画特征决定的,横细竖粗且末端带有装饰,与优雅精致的感觉十分契合。

高手的版式三部曲系列:文字篇

圆体的特点也是非常明显的,在看到它时脑海中的第一印象就是可爱与卡通。

高手的版式三部曲系列:文字篇

除了刻板印象外,圆体那种圆滚滚的笔画给我们的感觉还有安全和易亲近,所以圆体也能用来表现儿童与温暖感觉的题材。

高手的版式三部曲系列:文字篇

一说到书法体,能直接联想到的关键词就是传统与历史,因为书法的演变就是我们汉字发展的轨迹。然后我们回过头来讲一下,为什么书法体可以和西文中的衬线体搭配。

高手的版式三部曲系列:文字篇

原因就在于衬线体也具备书法体的某些气质,比如传统、文化、历史等。与书法体在早期的东方一样,衬线体在早期的西方也是主要的字体之一。

高手的版式三部曲系列:文字篇

温暖、人情味儿,说到书法体可能很难联想到这两个词,但是书法体确实具备这种气质。跟黑体这种棱角分明的字体相比,书法体是手写出来的,它的笔画特征给我们的感觉就是有「温度」的。

高手的版式三部曲系列:文字篇

在字符面板中,除了选择字体与改变字号以外,这两个区域相信大家用的还是比较多的,它们分别是:行距设置与字距设置。

高手的版式三部曲系列:文字篇

拿行距来说,在使用时有几个比较常用的设置方法,比如用当前文字的字号乘以1.2、1.732或是2。不过,通过这个方法所算出来的数值只是一个参考,也就是说你可以在这个基础上做些调整。

高手的版式三部曲系列:文字篇

比如:在计算出的数值的基础上进行递增或是递减,这时你要做的就是用眼睛去观察,觉得大了就减少一些,觉得小了就增大一些。

高手的版式三部曲系列:文字篇

其中,用字号乘以1.2适用于标题。

高手的版式三部曲系列:文字篇

比如上方那个标题的字号是40pt,那么行距的数值就是用40乘以1.2等于48。下方这个是在此基础上做的一个调整,稍微增大了一些行距。

高手的版式三部曲系列:文字篇

字号乘以1.2适用于标题,而用字号乘以1.732或2则更适用于小字号的文字,比如内文。

高手的版式三部曲系列:文字篇

上方是用字号乘以1.732的例子,字号是9pt,用它乘以1.732得出来的数值是15.588,四舍五入取个整数得到的行距就是16,下方这个是用字号乘以2得到的效果。

高手的版式三部曲系列:文字篇

大多数情况下我建议大家用字号乘以1.732的行距,大小比较适中。

高手的版式三部曲系列:文字篇

跟行距不同的是,基本上来说字距是无需调整的。当然还是那句话,要靠自己的眼睛来衡量,如果你觉得字与字之间离的很近的话,那么可以增大一些字距,反之,则可以减小一些。

高手的版式三部曲系列:文字篇

高手的版式三部曲系列:文字篇

其次就是,当你遇到一些偏轻松慢节奏的设计,比如典雅清新类的文学小说时,就可以适当的增加一些字距来营造这个感觉。

比如这两张海报,左边的是经典的居中结构,右边的是包围结构,构图都是可以的没有任何问题,但为什么看起来还是怪怪的呢?因为文字组没有刻画好。

为了让大家能更深刻地体会到文字组对于版面的意义,修改了这两张海报,其中构图不变只改文字组。

高手的版式三部曲系列:文字篇

这个修改前后的对比还是非常直观的,可见文字组对版面的影响有多大。如果说构图是版面的骨架的话,那么文字组就是版面的五官,骨架再好五官不行结果也是可想而之的。

高手的版式三部曲系列:文字篇

文字组分为:左对齐、居中对齐、顶对齐以及两端对齐。

高手的版式三部曲系列:文字篇

其中与左对齐与顶对齐对应的有:右对齐与底对齐。

高手的版式三部曲系列:文字篇

给大家找了一些各种对齐方式的案例。这是左对齐的形式。

高手的版式三部曲系列:文字篇

这是右对齐的形式,与左对齐相比右对齐属于不常用的对齐方式,主要是出于易读性的考虑,但并不是说不能用。

高手的版式三部曲系列:文字篇

这是居中对齐的形式,最经典的对齐方式之一。

高手的版式三部曲系列:文字篇

这是顶对齐的形式,是文字竖排时最常用的对齐方式。

高手的版式三部曲系列:文字篇

这是底对齐的形式,跟顶对齐相比也是属于不常用的对齐方式。

高手的版式三部曲系列:文字篇

最后是两端对齐的形式,横排与竖排都可以使用这种对齐方式。

高手的版式三部曲系列:文字篇

如果作品看得足够多,应该见过这种形式的组合,它同时包含了多种不同对齐方式,我们称其为「对齐组合」。

高手的版式三部曲系列:文字篇

比如我们可以借鉴结构,以这个文字组为例,它的结构是这样的:两端对齐、中间的文字字号大,上下的文字字号小,按照这个套路我们来试着做一个组合。

高手的版式三部曲系列:文字篇

在编排前,我们先阅读一下文案,通过文字可以得知,这是一个与篮球明星有关的内容,气质上来说会偏现代一些。

高手的版式三部曲系列:文字篇

所以字体可以选择一款黑体,英文部分则搭配一款无衬线体。

高手的版式三部曲系列:文字篇

根据之前总结到的这些特征,下面就可以开始编排文字了。

高手的版式三部曲系列:文字篇

按照那个组合的套路,我们先将两端对齐中较大字号的文字给编排出来,而标题信息无疑是非常适合用来放大的。

高手的版式三部曲系列:文字篇

接着再将上方和下方的小字号文字给编排出来。

高手的版式三部曲系列:文字篇

其中要注意的就是这段文字的行距,我参考了logo的高度来进行设置。而整个组合中,字距是基本没有进行调整的。

高手的版式三部曲系列:文字篇

值得一提的是,在两端对齐的文字组中,这种小大小的形式非常好用。因为它的节奏变化丰富,所以大家在做两端对齐的文字组时不妨试试。

高手的版式三部曲系列:文字篇

这就是借鉴结构的效果了,精髓在于要多去分析别人的形式与套路,并从中获取做组合的灵感。除了能借鉴结构之外,我们还可以借鉴标题字数+结构,是什么意思呢?

高手的版式三部曲系列:文字篇

以这个组合为例,它的标题有7个字,整个组合是由顶对齐与两端对齐构成的一个对齐组合。

高手的版式三部曲系列:文字篇

它的组合结构为小中大,按照这些特点我们来尝试借鉴。

高手的版式三部曲系列:文字篇

这是要用到的文案信息,通过阅读文案可以得知,这是一个关于炸鸡套餐的内容。

高手的版式三部曲系列:文字篇

通过去看kfc的各种物料,发现运用黑体的场景还是比较多的。

高手的版式三部曲系列:文字篇

所以,在字体搭配上选择用黑体与无衬线体。

高手的版式三部曲系列:文字篇

根据之前总结到的这些特征,下面就可以开始编排文字了。

高手的版式三部曲系列:文字篇

按照小中大的特点,依次将信息给编排出来。

高手的版式三部曲系列:文字篇

完成后可以在组与组之间,添加一根小线段用于连接,以起到过度的作用,如果大家现在回过头去看原图的话,也能发现这一特征。

高手的版式三部曲系列:文字篇

其中,标题的行距就是用标题的字号乘以1.2算出来的。

高手的版式三部曲系列:文字篇

字距我也做了调整,因为默认0的字距看上去有些拥挤。

高手的版式三部曲系列:文字篇

可以看出跟原图相比,在不破坏组合结构的情况下,针对文字信息的编排是做了些调整的,比如:原稿最左侧是两行顶对齐的小文字,在借鉴时将它换成了logo,因为我们是要借鉴它的结构,而不是为了跟原稿做的一模一样,具体还是要根据我们的内容来合理编排。

高手的版式三部曲系列:文字篇

首先我们来看这张图,一个标准的两端对齐、组合结构与之前那个是一样的,中间的字号大,上下的字号小。

高手的版式三部曲系列:文字篇

除去这些外还有一个小特征就是,在大字号中间还有一层小字号的文字。

高手的版式三部曲系列:文字篇

接着我们再来看这张图,它的特点就是图片叠压在了文字的上方。至于它的结构我们可以不用考虑,因为结构已经找好借鉴了。

高手的版式三部曲系列:文字篇

这是要用到的文案与图片。通过文字可以得知,这是一个关于介绍昆虫的图书,且配有一张插图。这个插图的风格是手绘形的,偏写实一些没有那么的卡通。

高手的版式三部曲系列:文字篇

结合这些特点我选择的字体搭配方式是,宋体配衬线体。

高手的版式三部曲系列:文字篇

因为字体搭配这部分我又借鉴了一些相关风格的书,发现它们的字体搭配方式用宋体比较多。

高手的版式三部曲系列:文字篇

分析完文案找到字体搭配方式后,在结合之前总结的一些组合特征,我们就可以开始编排了。

高手的版式三部曲系列:文字篇

先将中间比较大的那层文字给编排出来,然后在它中间处置入一个小字号的文字。

高手的版式三部曲系列:文字篇

中间层编排完成后再来编排上下层的文字,字号不用太大,整体注意好两端对齐。

高手的版式三部曲系列:文字篇

调整字距的地方有两处,首先是标题,调整的原因在于默认值我觉得有些小了,其次是标题中间的那行文字,调整它的原因在于不想字号放太大。

高手的版式三部曲系列:文字篇

因为是两端对齐的结构,不调整字距的话。标题中间那行文字只能通过放大字号来达到目,然而这个效果并不是我想要的。

高手的版式三部曲系列:文字篇

综合考虑,选择了这个,最后,把图片置入进去叠压在文字的上方。

高手的版式三部曲系列:文字篇

图叠压在文字上有一个无法避免的问题就是,被压住的文字会出现无法识别的情况,英文还好但是中文却不行,因为在这个组合中,中文是用来阅读的文字,英文仅充当装饰用。

高手的版式三部曲系列:文字篇

既然中文是重要的信息,那为什么还要去遮挡它呢?因为有提示,通过这两个字你也能猜出来被压住的文字是什么。

高手的版式三部曲系列:文字篇

这就是借鉴结构+表现手法的例子,多一张图片的加入,混合借鉴后的效果与原稿的相似度就会降低。

高手的版式三部曲系列:文字篇

下面我们来看这张图,它既有顶对齐又有两端对齐的感觉,像这种组合我将它称为顶部两端对齐。

高手的版式三部曲系列:文字篇

它的组合结构也是一个小大小的形式。

高手的版式三部曲系列:文字篇

分析完上一个组合后,再来看看这个组合,值得借鉴的地方有两处,首先就是整体的结构,其次就是字体搭配。由于已经借鉴了上一个组合的结构,所以这个组合要借鉴的就是字体搭配。

高手的版式三部曲系列:文字篇

在原图的这个字体搭配中,英文是最好判断的,这个字体是衬线体,中文则比较陌生了,既不像黑体也不像宋体。

高手的版式三部曲系列:文字篇

感觉是被设计过的,不像是字库里的字体,我通过观察发现,它既有宋体横细竖粗的笔画感觉,又有黑体干净利落的特征。

高手的版式三部曲系列:文字篇

所以,我在字库字体中找到了一款具有类似感觉的字体:姚体。

高手的版式三部曲系列:文字篇

在字体搭配上选择用姚体搭配衬线体。这里需要强调的一点是,在挑选字体借鉴的过程中已经考虑到了与文案的气质相匹配的问题,下面我们就来看看文案。

高手的版式三部曲系列:文字篇

标题叫「遇见你之前」,给人的感觉比较文艺,而姚体我们前面也分析过了,它是具有宋体特征的,而且笔画细长,整体给人的感觉就是比较文艺的。

高手的版式三部曲系列:文字篇

分析完成后,结合之前总结的组合特点就可以开始编排了。

高手的版式三部曲系列:文字篇

第一步,还是按照小大小的感觉将组合给编排出来,注意好顶部两端对齐。

高手的版式三部曲系列:文字篇

接着在组与组的缝隙处加入线条就完成了。

高手的版式三部曲系列:文字篇

在这个组合中标题的行距与字距,默认状态下是左边这样的,字距还好,行距却非常大,这个时候你就不能套用之前讲到的倍数去算行距了。那样行距只会越来越大,所以这里我们要根据视觉效果来调整。

高手的版式三部曲系列:文字篇

这样,一个借鉴结构+字体搭配的例子就完成了。

高手的版式三部曲系列:文字篇

这是要用到的文案与图片素材,首先,老规矩分析一下文案,选择与之契合字体。书名叫《流星之绊》,还是比较文艺的。

高手的版式三部曲系列:文字篇

根据这个书名,搜索了一下原书的样子,在这三个不同的版本中,所感受到的气质有:温情和雅致,在字体的选择上与之较为契合的有:书法体与宋体,这两个字体的选择在这三个不同的原版本中也都有体现。

高手的版式三部曲系列:文字篇

打算用宋体,与其搭配的英文首选就是衬线体了。

高手的版式三部曲系列:文字篇

这是第一个要借鉴的对象,可能有人会说这不像文字组,这确实不是文字组,但并不代表它不能被联想成文字组。

高手的版式三部曲系列:文字篇

高手的版式三部曲系列:文字篇

比如它的结构是由一个顶对齐与一个左对齐构成的对齐组合,而且下方的那个左对齐文字是放在了顶对齐的负空间处的。

高手的版式三部曲系列:文字篇

其次,顶对齐的文字字号较大,下方左对齐的文字字号较小。

高手的版式三部曲系列:文字篇

这就是根据那张图所总结出的一些组合特征,下面我们就根据这些特征来编排文字。

高手的版式三部曲系列:文字篇

先排出顶对齐的文字,然后在其负空间处置入左对齐的文字信息。

高手的版式三部曲系列:文字篇

排到这发现右下角还有块小缺口,既然是要做一个对齐组合的话,那么就要把它填满。

高手的版式三部曲系列:文字篇

关于顶对齐的中间部分为什么要这么做,是因为标题的字数不足以作出顶对齐的感觉,为了解决这个问题,选择重复了一次标题并且将它的笔画打散了,而打散的灵感来源于「流星」,它们就像流星一样散布在天空中,不知道什么时候就会掉落下来。到这为止是书封的上半部分,下面我们来编排下半部分。

高手的版式三部曲系列:文字篇

这是要用到的借鉴图,它也是一个由顶对齐与左对齐构成的对齐组合。

高手的版式三部曲系列:文字篇

除了这个外它顶对齐部分的文字跟左对齐的比,也是属于较大的。

高手的版式三部曲系列:文字篇

这是从那个组合中,总结出的组合特征,与上一个几乎一样。

高手的版式三部曲系列:文字篇

按照总结出的组合特征,将文字给编排出来。

高手的版式三部曲系列:文字篇

其中顶对齐与这段左对齐的文字,它们的行距是用字号乘以1.732算出来的,字距则是做了些微调整,因为当文字缩小后,它的字距在视觉上看着也会变小,所以我在默认0的基础上将字距增加到了50。

高手的版式三部曲系列:文字篇

这就是根据那两张图片所借鉴出来的文字组了,下面把它们置入进版面中。

高手的版式三部曲系列:文字篇

整体是一个上下结构的,这种类型在构图中属于上下构图。这也是为什么会找那两张图来当参考的原因,因为提前已经考虑好了构图。

高手的版式三部曲系列:文字篇

接下来做烘托氛围的工作,先把底色换成夜空的黑色,然后配上图片。

高手的版式三部曲系列:文字篇

接着更换字体的色彩恢复识别性,其中黄色的部分是为了与白色部分做区分。

高手的版式三部曲系列:文字篇

然后给腰封换上色彩以恢复下方的文字的识别性,再挑选一些信息,在它们的下方配上黄色,目的是为了与上方的色彩做呼应。

高手的版式三部曲系列:文字篇

最后,将书脊编排出来,这个案例就编排完成了。

高手的版式三部曲系列:文字篇

以上就是版式三部曲之文字篇的所有内容了,回顾一下,由两个部分组成。第一部分是:字体的分类、字体的搭配、字体的气质与设置细节。具体包括:字体有哪些不同的类型、在选中字体的类型后,要如何选择与之搭配的英文字体。字体气质主要讲的是,不同类型的字体都有哪些味道,它的意义在于当你确定好项目的风格后,可以根据不同字体的气质,快速的找到与项目定位契合的字体。

文章来源:优设    作者:研习设

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


「上下构图」的排版技巧

资深UI设计者

构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面,使作品不仅具有美感,还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化,进而给观者带来不同的心理感受。同的心理感受。本期分享的是上下构图的使用方法,此构图形式具有良好的视觉效果,也比较容易掌握,是非常实用的构图方式。

什么是上下构图

上下构图形式是将版面分割为上下两部分,或让画面中的元素整体呈现出上下的分布趋势,主空间承载视觉点,次空间承载阅读信息,呈现的视觉效果平衡而稳定。

用超多案例,帮你掌握「上下构图」的排版技巧

最典型的上下构图由「上图下字」或者「上字下图」两部分构成,图片及文字各占据一部分,互不干预,能清晰明了的传达出版面的信息。

用超多案例,帮你掌握「上下构图」的排版技巧

主空间还经常使用图形化的标题文字充当画面主体,可以很好解决画面缺少图片层级的问题。

用超多案例,帮你掌握「上下构图」的排版技巧

上下构图空间划分比较固定,为了得到丰富的视觉效果和良好的设计感,需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版,元素之间的对比、点线面的运用、巧妙的留白等。

用超多案例,帮你掌握「上下构图」的排版技巧

构图比例

进行上下构图设计时,可以根据版面内容的信息体量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等。在设计时也可以反复进行调整,直到找到最为合适的构图比例。

1. 1:1分割

把画面平分为上下两部分,形成对称均衡的分割构成。

用超多案例,帮你掌握「上下构图」的排版技巧

1:1分割比例构成方式,多用于版面中两部分内容处于并列或对立的关系。

用超多案例,帮你掌握「上下构图」的排版技巧

2. 黄金分割

「黄金分割比例(1:1.618)」被认为是最具美感的分割比例,具有严谨的艺术性、和谐性,蕴藏着丰富的美学价值。

用超多案例,帮你掌握「上下构图」的排版技巧

在设计中有意识地运用黄金分割比例进行设计,可以营造出富有美感的版式效果。

用超多案例,帮你掌握「上下构图」的排版技巧

3. 白银分割

「白银分割比例(1:1.414)」是日本率先采用的一种分割比例,目前广泛运用在版式设计的布局中。

用超多案例,帮你掌握「上下构图」的排版技巧

与黄金分割相比,白银分割次空间占据的比例更大一些,能够承载的信息量也更多。

用超多案例,帮你掌握「上下构图」的排版技巧

4. 2:1分割

采用2:1的比例,图片主体在画面中占据主导地位,视觉焦点更清晰。

用超多案例,帮你掌握「上下构图」的排版技巧

主要的信息(标题)常融入图片中放在主空间成为画面主体,阅读性文字则放在次空间。

用超多案例,帮你掌握「上下构图」的排版技巧

5. 3:1分割

3:1分割的比例与2:1比例相似,但图片在画面中占据主导地位更强,主空间承载视觉点,次空间承载阅读信息。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

通过比例,可以让版面分割更严谨。但没有那个比例关系绝对正确,需要根据画面的项目调性、信息体量、信息功能与图文主体而定。如使用其它比例分割的优秀案例:

用超多案例,帮你掌握「上下构图」的排版技巧

空间调整

把图文按比例分别编排在版面上下方,是比较严谨规范的构图方式,但是为了避免版面的呆板,可以通过调整版面空间变换出多种编排形式。如以下几个案例:

缩小图片和文字空间,使留白处形成外空间,增加层次感。

用超多案例,帮你掌握「上下构图」的排版技巧

在背景(绘画作品)上重新划出新的空间,形成内外空间对比,既丰富了画面层次,又让版面变得生动有趣。

用超多案例,帮你掌握「上下构图」的排版技巧

通过图片文字的错位排版和负空间的巧妙留白,让原本呆板的上下构图变得灵活多变,充满个性。

用超多案例,帮你掌握「上下构图」的排版技巧

让图片位置重心偏移,打破均衡稳定的构图形式。标题的破图处理,也增加了版面的灵活性与丰富性。

用超多案例,帮你掌握「上下构图」的排版技巧

在上方空间上划分出新的空间,这样的手法可以很好让空间具有多变性,也可以让我们的设计更加灵动。

用超多案例,帮你掌握「上下构图」的排版技巧

灵活运用

上下构图的框架看似比较固定,但是也能通过设计手法,变换出多种编排形式,巧妙破除上下分割的单一性与呆板感。

1. 曲线分割

把生硬的直线改为呈现出动态的曲线或斜线进行画面的分割,版面显得更生动活泼。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

2. 图片裁切

把方形图片裁切为其他形状,使上下构图没有明显的分割线,也可以呈现出良好的视觉效果。

用超多案例,帮你掌握「上下构图」的排版技巧

3. 文字破图

使用文字串联起上下两个空间,破除上下构图版面的单一性。

用超多案例,帮你掌握「上下构图」的排版技巧

4. 元素串联

利用图形、色块等元素串联空间,让主次空间建立起联系,具有丰富的视觉效果和良好的设计感。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

5. 图片退底

把图片主体进行退底处理,重新营造场景,弱化空间的分区。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

6. 空间留白

使用留白破除两个空间的间隙,拉开画面的空间感,具有良好的视觉效果。

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

用超多案例,帮你掌握「上下构图」的排版技巧

总结

  • 上下构图是将版面分割为上下两部分,或让画面中的元素整体呈现出上下的分布趋势,主空间承载视觉点,次空间承载阅读信息,呈现的视觉效果平衡而稳定,是非常实用的构图方式;
  • 进行上下构图设计时,可以根据版面内容的信息体量划分画面的空间,常用的版面分割比例有:1:1、1:1.618、1:1.414、1:2、1:3等;
  • 为了避免版面的呆板,可以通过调整版面空间变换出多种编排形式;
  • 可以通过曲线分割、图片裁切、文字破图、元素串联、图片退底、空间留白等手法,变换出多种编排形式,巧妙破除上下分割的单一性与呆板感。
文章来源:优设    作者:艺海拾贝Design

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


日期排版没灵感?我总结了10套排版案例

资深UI设计者

版式设计在我们的设计中是非常重要的技能,无论是UI设计还是平面设计,都会运用到版式设计相关的知识,在版式设计中最常见的就是图文排版、文文排版。一张图片一段文案在不同的需求情况下我们都可以排版出很多种样式,每一种样式展现出来给人的感觉也是不一样的,美的排版总是会使人眼前一亮,也会使整体的设计更耐看。

排版也是会根据重要程度划分层级,我们都知道主题文案都需要醒目,让人一眼就能看到,这样才能达到宣传的作用,当然仅仅只是展示主题文案也是远远不够的,达到主题排版,主图排版,小到副标题排版,我们都需要精心的排版,还可以更精细到小到辅助文案以及图形的排版,而今天我们就来看一下日期这样的文案我们可以怎么排版呢?

日期在一些重要的活动中也是比较重要的信息,比如展会时间,我们需要突出时间,不能用极小的文字排版在角落,用户不注意的地方,这样会给人一种焦虑的情绪,既然是展会活动,那么用户关心的是展会的主题是什么?活动时间是什么时候?活动地址在什么地方?所以这些重要的信息就需要重要突出。而在一些做纪念性的日期我们就可以小化(例如我自己记录自己的学习打卡练习)

案例分享

我们常见的日期有年、月、日、时、分、秒,接下来我们就通过对日期的展现做一些不同的排版方式,通过与日期的普通排版方式做对比,我们就可以看出微小的日期排版对整体的设计展现也是有很大影响的。

简单的日期排版我们通常就只是将年月日对齐排版就算完成了,但是这样的排版方式会影响整体画面的美观,我们对于小文案也需要花一定心思去整理以及排版出更精细的样式,这样给用户的感觉就会觉得你的每一步设计都是用心设计的,并且为了整体的美观,我们 也不得不从细微之处出发。

日期排版01

例如下面对于日期的排版,TIME这个文案有时候我们也可以去掉,因为用户看到时间就会明白这是什么,在一定的情况下也是可以去掉的,当然有时候为了整体页面的展示效果,我们也可以加上,便于排版,左边只是将年、月、日并排,时间节点作为一个点排列,下面的文案我们可以根据实际情况选择一些特殊的提示文案做装饰

而通过对左边简单的日期排版进行改版后,我们会发现右边的日期排版会显得更美观,排版更精妙,也有更多的细节之处,例如2020后紧接着年(YEAR)的提示,08后面标识是周六(SAT.),年月日和时间节点也同时做了层次区分,这样更有利于阅读。

日期排版没灵感?我总结了10套排版案例

日期排版02

对于上面同样的日期文案,我们还可以排出右边不同的样式,整体采用横排的方式,将年、月、日同排,时间段缩小处理,使时间之间也能有层次感

日期排版没灵感?我总结了10套排版案例

日期排版03

下面的日期是年、日期段、时间段的组合,左边的排版显然是比较常规的分层排版,却主要突出了2020,而一般时间我们在这一年将要发生的事,我们更关心的是哪一天那个时间点,而右边的排版主要突出时间段/点,更能让用户看到自己关心的事件。

日期排版没灵感?我总结了10套排版案例

日期排版04

下面这一组日期是有不同年份的,所以我们在排版的时候可以突出显示年份,这样在排版的时候就可以注意层级关系,排除层次感

日期排版没灵感?我总结了10套排版案例

日期排版05

这一组日期是比较简单的,只有一个时间点,没有时间段,如果直接按照左边这样的日期排版方式,显然整体看着就很单薄,把这样的日期排版方式融入到版式整体画面中,也一定会显得毫无设计感,而我们只需要将简单的日期经过简单的排版,从年、月、日、时,从上至下依次排列,这样就可以显得信息有层次感,并且阅读也不会有困惑,加上精致的icon做装饰,这样的日期排版就显得更耐看。

日期排版没灵感?我总结了10套排版案例

日期排版06

这一组日期也很简单,只有月、日、时,都是属于时间段的信息,通过分析这个时间,月都是10月,是相同的,所以我们可以将月份单独拿出来,作为共用信息,这样就可以精简画面重复的信息,依然采用月、日、时这样从上至下的顺序排列,时间小化,但是利用色块突出,也不会柔化时间点的阅读,再通过一条线的连接,将斜线和时间icon相连,形成一个有趣味性的时间装饰,这样的排版更容易吸引用户的眼球

日期排版没灵感?我总结了10套排版案例

日期排版07

下面的日期也是年、日期段、时间段的组合,和第三个日期排版的案例类似,所以存在同样的问题,左边的排版显然是比较常规的分层排版,却主要突出了2020,右边改版后,我们同样弱化年份(2020),提取相同的月份(8月),突出显示日期

日期排版没灵感?我总结了10套排版案例

日期排版08

这一个和第五个也是一样的,左边都是年、月、日、时的时间点,没有时间段,第五个我们是采用竖排的方式,而这里我们改版后采用的是横排的方式,突出显示月、日,让整体的层次更加清晰

日期排版没灵感?我总结了10套排版案例

日期排版09

下面这一组时间改版,我们主要采用错位竖排的方式,像这样的排版方式,我们可以多用于一些比较有设计感或者比较唯美的画面中,显得每一个小的点,都有用心设计,并且也符合这样的气质

日期排版没灵感?我总结了10套排版案例

日期排版10

这一组日期只有年、月、日。左右两边的排版看起来很相似,但是通过对细节的调整,例如2020的弱化,间距的把控,星期几的友好提示,这样就会使整个日期排版看起来更精细、耐看。

日期排版没灵感?我总结了10套排版案例

案例实操

我们通过对上面日期的排版分析和总结,会发现小小的日期排版也是很关键也很追重要的,所以下面我们将通过一张海报案例,来真正体现日期排版对整体画面的重要性。

海报主题是选择的立秋,虽然立秋以及过去两天了,但是我又学会了这个立秋新的排版技巧,所以我想将这一技巧分享出来,但是这里就不详细讲解海报的设计过程了,主要还是分享日期排版对整体画面的影响作用

这里就简单的说一下海报设计的思路,海报主题是立秋,所以我现在一片黄色的枫叶作为画面的主视觉,画面整体体现秋天的感觉,一片黄灿灿的画面,给人感觉就像是秋天到了,画面元素简约,只选择了一片枫叶加上它的投影,体现空间感,主题文案排版在枫叶上,与枫叶融为一体,这样用户得分第一视觉就会被主图吸引,同时看到主题相关文案,下面的其它文案通过从|秋|字垂落的竖线,分别右对齐以及左对齐,显得画面规整

日期排版没灵感?我总结了10套排版案例

第一张海报的日期排版就是采用普通常规的排版方式,我们会发现这样的日期排版方式,在整个画面中会显得有点僵硬,并且左右两边不对称的关系,会显得右边偏轻,使画面的平衡感缺失,也正是日期的排版太粗糙的原因,导致整张海报的精细度大减。

日期排版没灵感?我总结了10套排版案例

样机效果

日期排版没灵感?我总结了10套排版案例

我们保持其它元素以及排版都一致,只改变日期的排版方式,我们就会发现右边的海报整体给人的感觉更精美,平衡感更强烈,所以我们在做设计的时候不要忽略每一个点。将每一个点都细心的设计,这样的作品才会更耐看。

总结

版式设计是我们设计中最基本的知识,我们在做设计的时候,通常会注意主题主图的排版,而经常会忽略哪些不是很重要的信息,但是我们在分析文案信息的时候,也需要考虑整体设计的目的,有时候日期信息也是非常重要的信息,所以我们在做排版的时候,也需要认真考虑日期与整体需求的关系,并且日期排版风格也会影响整体的气质。


文章来源:优设    作者:设计小余

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

色彩搭配只是色相变化?应更注重明度与纯度

周周

不管是平面设计、品牌设计,还是UI设计,配色都是一个基础,决定着作品的视觉效果。这篇文章就从色相、纯度、明度(色彩的三大属性)三个角度,展开谈谈色彩的搭配。

设计师必知的20个幻灯片实用设计技巧

资深UI设计者

设计师必知的20个幻灯片实用设计技巧

很多时候,设计师需要在公开场合借用幻灯片演示设计作品,或者给客户展示的设计方案,又或者是需要在文章当中,展示作品,选取配图。如果你希望你的展示和演讲更加具有吸引力,那么可能需要针对这些视觉素材进行处理,让你的观众或者读者,被内容吸引,被信息打动,能够 Get 到你所要表达的东西。

今天这篇文章,梳理了 20 个对关于幻灯片/演示文稿的处理技巧和经验总结,希望能够帮到你。

1、厘清演示的目标是什么

设计师必知的20个幻灯片实用设计技巧

在创建任何用来展示的幻灯片之时, 你首先要搞清楚一个问题——你的目标或者目的是什么。明确了这一点,才能做好下一步的设计。

2、对你的观众有所了解

设计师必知的20个幻灯片实用设计技巧

除了了解自己的目标,你还要搞清楚你的观众或者你的受众是做什么,有什么特征,对什么感兴趣,会具备什么样的动机,这样你在设计的时候,才能够更加具有针对性。如果是甲方,那么甲方是什么样的人?你是否要提供一个具有代入感的故事,在最后再进行报价是否合适?搞清楚观众,后面的问题你就有答案了。

3、演示越短小精悍越好

设计师必知的20个幻灯片实用设计技巧

如果你的幻灯片准备得过长,那么最好大概每20分钟就需要中断,适当休息一下,或者调整演示内容的媒体形态,让你的听众可以借此修整,并重新集中注意力。

4、讲故事有助于保持观众注意力

设计师必知的20个幻灯片实用设计技巧

讲故事能够更好地同用户建立联系,保持用户的参与感,集中注意力。如果用户无法集中注意力,那么你的展示和设计做得再好都没有用。你可以参考一些常见的、有效的叙事框架,拿捏好关键的因素:

关键角色:客户、用户、组织、团队等;
核心问题:挑战、痛点、风险等;
框架指南:产品、公司、服务等;
完整历程:解决问题的愿景、具体执行计划等;
抵达成功:光明的未来、最终的成就等;

5、目前人类注意力时长为8秒

设计师必知的20个幻灯片实用设计技巧

这意味着,如果你的幻灯片当中的内容,下面的观看者无法在 8 秒内消化,那么它可能就失去效果,并且用户会快速分心。

6、减少文本,增加视觉效果

设计师必知的20个幻灯片实用设计技巧

幻灯片要简短,不要让它像书本一样堆满信息,你应该提供最快速有效的简短展示,减少文字,增加辅助的视觉效果,帮助用户集中注意力。

7、构建文本层级

设计师必知的20个幻灯片实用设计技巧

如果你的文本内容无法进一步增减,那么你需要做的就是梳理出它的层级关系,让字体的层级来辅助观看者更快 Get 到其中的信息。我们习惯于快速扫视,而不是逐字阅读。

8、确保文本的可读性

设计师必知的20个幻灯片实用设计技巧

凸显重要内容,控制好字号大小,排版结构,让观看者能够清晰阅读内容。过于鲜艳的色彩会产生视觉频闪,对比度过低会让可读性极差。

9、始终记住哪些信息是要分享出来

设计师必知的20个幻灯片实用设计技巧

在实际的展示的过程中,展示者在电脑上看到的,和最终在大屏幕上演示的内容是不一样。演示给下面观众的内容一定要简约直观,而更多的辅助信息只需要显示在展示者自己的电脑上,作为提示即可。

10、突出重点

设计师必知的20个幻灯片实用设计技巧

提取最重要的信息点,使用更大的展示性的字体来呈现,这是有助于让这些信息脱颖而出的,而不是简单地、没有筛选地铺陈出来。

11、善用信息图

设计师必知的20个幻灯片实用设计技巧

信息图和简单的数据展示有着极大的差别,信息图所展示的信息更易于被观看者理解和吸收,使用信息图还能让整个展示过程更加视觉化、富有创意。

12、不要纠结于幻灯片的数量

我经常会听到这样的要求:「这套幻灯片只能有7个页面,同时我们不能删除任何内容。」

千万不要将内容塞到固定数量的幻灯片当中,那是没有任何意义的。一套用来演示的幻灯片的数量应该是可以增删的,它们的数量取决于你所要展示内容的多少,以及呈现的方式。对于绝大多数的展示和演讲而言,20~30 张幻灯片是一个合理的数量。

13、将留白空间翻三倍

设计师必知的20个幻灯片实用设计技巧

留白是制作幻灯片时最容易被忽略的元素,通常而言,我在修改幻灯片的时候,将留白的空间放大三倍,视觉上的呼吸感就正正好好。

14、避免使用不自然的照片

设计师必知的20个幻灯片实用设计技巧

好的图片素材,通常会有着相对充沛的感情和自然的叙事。在你的幻灯片当中,需要采用更加富有真实感的照片,以营造真实的叙事感。不幸的是,这种设计知易行难,绝大多数的图库所提供的照片都缺乏这种应有的真实感。当然, Unsplash.com 所提供的照片,相对而言会好一些,而且是免费的。

15、使用一致且妥帖的样式

设计师必知的20个幻灯片实用设计技巧

影响幻灯片视觉样式的因素有很多,主题、受众、品牌等等等等,都会有影响。但是不论情况如何,你都应该让整个幻灯片所采用的字体、图标、配色、插画的样式始终保持一致。其中,最常用的方法是定义整个幻灯片的模板,来协助你保持一致性。

16、控制节奏感

设计师必知的20个幻灯片实用设计技巧

不要把幻灯片用信息全部填满,可以在其中插入一些可以帮助观看者「中场休息」的幻灯片,它可以起到过渡作用,也可以帮助观看者不用一直紧绷着情绪。

17、使用转场动效和动画

转场动效和动画可能会成就你的整场演示,也可能让它沦为一场灾难。我的建议是,尽量让动画和动效微妙一点,让它们紧贴内容,对信息提供支撑,而不是喧宾夺主。

18、帮助用了解整个演示的进度

设计师必知的20个幻灯片实用设计技巧

对于较长且复杂的演示,让观众看到进度条,了解整个演示的进程是非常有必要的,当他们感受到演示的进程,就能体会到掌控感和安全感。

19、排练和记录同样重要

做好幻灯片之后,一定要自己排练一下整个过程,走一遍之后会让你对于整个演示过程中,哪里有问题,哪里要改进有更清晰的认知。借助排练来排查问题,迭代展示,非常有必要。

20、将设计思维贯彻到演示文稿中

当然,设计幻灯片和设计 APP、网页是截然不同的,但是设计思维层面上,这几个领域确实完全相通的。你可以借用各种设计规则和方法来将幻灯片设计得更加合理优秀。

文章来源:优设    作者:Taras Bakusevych

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

如何做好Banner设计?

资深UI设计者

「空间陈列法」是说先构建一个空间,然后将主体元素用合适的形式陈列出来。

这是随着手机兴起而真正流行起来的一招,因为PC时代都是宽大的横屏设计,适合展现视野开阔的大场面,像大漠、海边等等,而「空间陈列」作为小场景,在PC端就显得不大气,因此使用较少;而手机端却刚好相反,瘦长竖屏就适合表现长焦特写的小场景,像微距下的花鸟鱼虫等等,这时「空间陈列」就用的恰到好处。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

如图所示,同样的产品展示图,在PC端就显得单薄,版面空缺,整体不饱满;而在手机端则用的刚刚好,确实这种长焦特写、微距放大的陈列小场景就是手机屏的最爱,所以在手机时代,空间陈列图才会呈现井喷式增长。

其实合成、三维和摄影都可以实现「空间陈列」,但本书还是以合成为主,而合成的难点就在于如何将产品和空间进行自然融合,不能有违和感。

若想合的天衣无缝,第一步就是要做到「透视准确」,而透视作为构图中的重要知识点,可以说是无处不在,在前面的章节里也多次提及。我们只有掌握透视的变化规律,才能准确表现出元素的空间关系,如果透视不对,那空间将会失真,下面就来详细讲讲这个理性知识点——透视。

焦点透视

日常生活中,当我们看周围事物时,会有远近、高低、长短、宽窄等不同,这是由于距离、方位等差异在视觉中呈现的不同反映,这种现象就是透视。透视学的出现可以帮我们非常科学的表现各种空间感和立体感,它广泛用于绘画、建筑、环艺、设计等诸多领域,而常见的透视共3类:空气透视、散点透视和焦点透视,这3类的侧重点各有不同。

空气透视又称「色彩透视」,由于空气介质的存在(雨、雪、雾、烟等),使人们看到近处景物比远处的轮廓更清晰、色彩更饱满的视觉现象,例如下方海报中的「烟雨蒙蒙」,这种近实远虚感就是典型的空气透视,随着镜头拉远,山川也变得越来越模糊。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

散点透视则是中国画特有的一种透视类型,例如下方的《清明上河图》就是这类透视的代表作,在这五米长的画卷中,很难找出画家的具体观察位置,好似在移动中作画,每到一处画一部分,最后拼接起来,这种视点不断移动的画法就是散点透视,散点透视适合表现景色的波澜壮阔,重在写意,体现一种气势和意境。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

而焦点透视才是本文重点,它是透视学中的核心理论,也是西方绘画所遵循的透视原则,最早研究透视就是从这里开始,如果散点透视是「写意」,那焦点透视则「写实」,一切都以客观还原为准。

例如名画《最后的晚餐》,所有视线都汇聚一点(称为灭点),营造出一种立体空间感,这些就像自己身处画面中央所看到的逼真景象。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

而我们在设计中常说的透视也都指「焦点透视」,这是我们需要掌握的重中之重。记得高中学习素描时,老师就说画静物要「近大远小」,其实就是对焦点透视最为形象的描述,例如草地上的奶牛,离我们越近就越大,越远则越小,正是这种近大远小的透视变化才使场景有了空间和层次。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

观察视角

在介绍焦点透视前,我们先说说透视中一个很重要的影响因素——观察视角。视角即指人眼(称为视点)在观察事物时视线之间所形成的角度。

如下图所示,其实就是人眼观看角度的变化,常见有3种:当我们平视前方时就是「平视视角」;仰头看时则是「仰视视角」;低头看时便是「俯视视角」。

其中平视时人眼和物体形成的假想连线称为「水平视线」,这是判断视角高低的参考线。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

当我们将产品放入空间时,就要根据陈列形式选择合适视角,从下方的示意图中能看到,三种视角给人的感受都不相同:

  • 平视有种方方正正感,给人一种非常自然的观察感受,虽然中规中矩但视觉舒服;
  • 仰视则能体现产品的高大和气势,用来烘托价值感;
  • 而俯视最接近我们日常看桌面小物品的视角,很真实也很亲切,同时还凸显了产品的立体感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

而上图的仰视和俯视都属于小视角,即产品视线和水平视线的夹角较小,这是设计中的常见视角,大概就是把头微微抬起或低下时看到的场景,这时画面最自然也最舒服。反之若视角过大,即头抬的很高或压的很低时,这时产品的形变就很夸张,显得刻意、不舒服。

说完3种视角,现在正式讲解焦点透视,一般根据物体灭点的数量不同,焦点透视又分3种:平行透视(一点透视)、成角透视(两点透视)和斜角透视(三点透视),它们都有各自的透视效果和适用范围,但若铺开讲会很复杂,因此下面就结合「空间陈列」进行介绍。

1. 平行透视

用立方体简单说明,就是有一面与画面平行,这时物体的厚度边线若向内延伸,最后都会汇聚到1个点上,因此又称「一点透视」。这是最简单也最易掌握的一种透视形式,其中汇聚点称为「灭点」,而灭点所在的那条线则是「视平线」,即与人眼等高的一条水平线。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

再来看看平行透视在生活中的场景呈现,如图所示,将各种景物进行前后连线并延伸,最后都是汇到一点才消失。平行透视适合表现场景纵深,给人一种正式感和平和感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

电商中的产品展示也一样,例如下方示意图中,不管哪种视角,产品和立方体都是正对观众,让人觉得摆放角度正正好。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

总体来说平行透视只有1个灭点,变化并不多,视觉表现单一,没有太多的空间变化,基本就是从正面来表现整个场景,因此上手简单,只要确保前后连线都汇聚一点即可,这样画面各元素也会显得整齐。但有时这种正视会让画面缺少层次感,显得很平,此时可尝试俯视视角或者强化背景的空间纵深。

下面展示平行透视在3种视角下的应用案例,注意观察不同视角下的产品呈现和透视变化,虽然微妙,但每种视角确实给人不一样的视觉感受。

平行平视

当画面为平行透视和平视视角时,这时的观察位置很正。如下图所示,空间和产品都显得有些平整,虽然场景的立体感较弱,但视觉舒服协调,表现起来也相对简单。注意平视的「视平线」基本位于主体元素的中心处,即是说人眼此时正对前方物体的中心,这样才会有平视效果。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行仰视

当画面为仰视时,一般视角都不会太大,微微仰视即可,这样视觉才舒服。如下图所示,其实和平视比起来,小角度仰视的透视变化并不明显,没有夸张形变,但依然能体现空间和产品的高大。此时「视平线」位于主体中心靠下的位置,这时人眼明显是从下往上看。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行俯视

如果觉得画面的层次感和立体感不够,那就尝试下俯视视角,如下图所示,由于俯视时我们能同时看到物体的顶面和正面,这样就能表现物体的厚度,立体感也明显增强。而画面的「视平线」则位于主体中心靠上的位置,这时人眼就是从上往下看,但同样属于小角度俯视。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

2. 正俯视

平行透视的俯视还有一种特殊情形——正俯视,即视角为90°的俯视,这时我们是从物体的正上方低头往下看,如下图所示,当产品平放桌面时,正俯视能清晰看到产品的全貌。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

在空间陈列中这是一种常见视角,上手简单,展现清晰。例如下方案例中,俯视下的产品摆放非常灵活,根据构图需求可以工整 ① 也可以随意 ② ,并且产品多以正面展现为主,整体直观、舒服。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

以上都是产品的陈列案例,其实正俯视有时也会用于场景呈现中,如下图所示,视点位于场景的正上方,有点类似无人机的俯瞰拍摄,这种看似「刁钻」的视角能给画面带来独特的戏剧效果,令人印象深刻。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

空间平行透视

除了3种视角,这里还要介绍一种平行透视的常见形式——空间平行透视,这种形式即画面的正前方有个类似方盒的纵深空间,而人物或产品就放置在空间里。

如图所示,该形式也有视角的3种变化,但为了确保视觉的自然舒服,仰视和俯视也都是小角度的上下摆动,所以产品的透视变化并不明显,场景呈现也没有很夸张。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

为何要将该形式单独列出?因为它非常适合手机端的竖屏构图。

手机不像PC,无法通过宽屏来表现视野开阔的大场面,手机屏更适合长焦特写的小场景,但这样有时就会显得左右拥挤不透气,这时「空间平行透视」就刚好取长补短,通过「深度」刻画将狭窄空间的纵深感体现出来,最终使观者视线在前后维度上有了延伸和舒展。

该形式正是利用平行透视的纵深性,才缓解了手机屏的拥挤感。下面分视角列举案例,要注意不管平视、仰视还是俯视,空间里的所有元素最后都要汇聚一点,这样透视才合理,纵深效果也最好。

3. 空间平视

3种视角中,空间平视最常见,因为这种方方正正的空间展示最适合手机的竖屏构图,看着最舒服,上手也简单,易于搭建。在平视下,由于没有视角的高低变化,空间基本位于人眼的正前方,无任何偏移,摆放角度非常正,构图给人一种稳定感,元素也没有夸张形变,组合方便,真实自然。

对于「空间平行透视」,「深度」刻画很关键,我们要根据版面构图选择合适的深浅。例如下方案例中:① ② 的深度浅,空间相对封闭,适合展现小空间,给人温馨感和趣味性;而 ③ 的深度深,空间开阔,适合展现大空间,这样能让视线更舒展,画面更透气。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

4. 空间仰视

在仰视下,我们是抬头向上看,这时空间显得高大,给人强烈的气势感。如下图所示,视平线贴近地面,像是我们蹲着向上看,这种仰望视角,建筑和人物都很高大,再加上强烈的纵深感,虽然空间左右依然狭窄,但上下和前后维度却变的非常开阔,画面通透。

空间仰视能渲染氛围,提升场景的戏剧效果,突出视觉冲击力,但要注意仰视视角不能太大,否则夸张的仰视效果反而给人一种压抑感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

5. 空间俯视

在俯视下,视平线处于空间中心的上方,类似我们站在高处往下看,如下图所示,这时空间显得立体,远近的各类元素也能得到清晰展现,层次分明。

俯视适合展现空间的全局观,也让各物体有着丰富的体积感。除非有特殊的构图需求,不然和仰视一样,俯视视角不能过大,否则俯视就变成俯瞰,会产生遥远的距离感,空间也压缩的厉害,进而导致形变和失真。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

成角透视

还是拿立方体举例,就是物体与画面形成一定夹角,这时物体的所有边线分别向各自方向进行延伸,最后会在视平线上形成一左一右2个灭点,因此又称「两点透视」。这类透视最接近我们日常的观察角度,即是说大部分时候,我们看到的物体都属于成角透视。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

虽然成角透视只比平行透视多了1个灭点,但2个灭点的位置却很灵活,这样空间的透视变化也更加丰富。

例如下方是我们经常看到的景象,虽然都是典型的成角透视,但 ① 是2个灭点都在画面外,这时建筑给人的感觉结构平稳,立体感强,侧重写实;而 ② 则是1个灭点在画面内,另1个在画面外,这时空间右侧的透视形变较大,产生纵深感,整个场景更有张力和冲击。

其实还有第3种情形是2个灭点都在画面内,但由于空间会产生夸张形变和失真,因此总体少见,不再举例说明。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

再看看成角透视下的产品展示效果,如下图所示,不同于单面展示为主的平行透视,成角透视则以展示物体的两面为主,这样立体感更强,构图也更稳定。注意在成角透视中,画面所有的竖向边线都是平行,不会产生灭点。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

相比平行透视,成角透视在表现上更复杂一些,一般都以2灭点在画面外的情形为主,这时透视最舒服。注意要想画面只产生2个灭点,那当中的所有元素都需排列整齐,这也是成角透视的常用做法,此时画面会显得整齐统一。下面列举3种视角下的电商案例,其中以仰视和俯视最为常见。

1. 成角平视

平视下的成角透视相对少见,因为使用成角透视就是为了凸显物体的立体感,但平视由于视角很正,恰恰就会显得立体感较弱,这时2种效果会有矛盾,影响场景的协调性。例如下方的2个案例中,产品看着就有些平整,和方形盒子以及立方体稍显冲突,但整体视觉真实平和,没有形变。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

2. 成角仰视

仰视下的成角透视就显得刚刚好,如下图所示,所有元素均用2个立面展示,加上透视形变,这时空间的立体感强,产品和立方体也都有明显的体积感,视觉平稳、饱满,而且还能体现产品形象的高大,凸显价值感。

注意2个案例中,视平线上都只有2个灭点,这是因为产品和立方体的排列都很整齐,反之若无序排列,就会产生多个灭点,这样画面会显凌乱,视觉不舒服,所以在表现成角透视时,尽量确保所有元素都能整齐排列。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

3. 成角俯视

在成角透视中,俯视视角最常见。因为该视角下的物体可以展现3个面,能进一步强化元素的立体感和方位感,如图所示,物体的空间关系明显,层次分明,构图也平稳。

一般成角俯视适合小场景陈列(若是大场景则垂直方向会发生严重形变,这就是后面要讲的「斜角透视」),刚好这是手机屏的擅长,小空间配上小角度俯视会给人一种亲切感,类似长焦镜头的特写画面,很好的拉近了观者的心理距离,因此属于手机端的常用构图。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

空间成角透视

成角透视的优势在于画面立体、稳定和写实,这些优势刚好适合空间的立体呈现,如下图所示,成角透视即可用于室内塑造 ① 也可用于外形搭建 ② ,类似我们站在空间侧面看整体,此时空间立体、饱满,结构有张力。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

但由于成角透视都是在画面两端形成灭点,所以该透视下的空间更适合横构图,但手机屏却是竖构图,对于横向拥挤的竖长屏,成角透视就会有些施展不开,左右狭窄,无法像横版那样开阔的展现空间,也没有平行透视那样看着规整,因此使用较少。

斜角透视

物体与画面存在一定夹角,并且在2点透视的基础上,再加入了高度变化,这样垂直方向的连线会向上或者向下汇聚,最终画面形成3个灭点,又称「三点透视」。相比成角透视,斜角透视其实就是让本没有交集的竖线有了交集,这样垂直方向就有了强烈的汇聚感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

斜角透视的形变夸张,常用于大型物体的仰视或高处俯瞰,类似广角拍摄。

如下图所示,该透视能表现出建筑或空间的宏大感,并且越宏大透视就越强烈。这时画面的夸张构图会显得观者渺小,给人一种压迫感,也让场景有着极强冲击力,同时带来了更加刺激的视觉感受。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

其实只要观者在场景中显得很小,这时看到的画面就会产生斜角透视,例如当我们仰望高楼时,相对高楼而言,渺小的我们就会看到斜角透视。

但如果产品展示采用斜角透视时,就会有一种强烈的不真实感,因为相对产品来说,我们并不渺小,所以日常是不会看到这样的场景,这种场景更像是「昆虫视角」,如图所示,斜角透视下,虽然画面不真实,但会有种特别的戏剧效果。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

另外斜角透视没有平视视角,因为平视物体的竖向边线依然平行,不会在垂直方向产生第3个灭点,因此仍属于成角透视。总之只有在大角度仰视或俯视大型物体时,才会看到斜角透视。

这种形变强烈的夸张透视虽然生活中相对少见,但电商中用的还真不少。还记得我们在第2章讲创意方法时提过的「独特视角」吗?其中一个方向就是使用斜角透视。

这种透视可以体现物体的巨大(仰视)或者场景的宏大(俯视),正是这样一种不真实也不自然的视觉感受,反倒给人一种强烈的气势和冲击,画面极具张力的构图往往能脱颖而出,并在第一时间抓人眼球,吸引注意,所以成角透视特别适合大促主题的场景搭建和氛围营造,下面分视角举例。

斜角仰视

视能让物体显得高大,而斜角仰视则让物体显得「巨大」。如图所示,2个案例中的产品都十分「巨大」,通过这样一种「刁钻」视角和夸张手法渲染出了产品气势,使产品显得分量十足,同时也提升了视觉冲击力,整个场景都变的大气。其中 ① 由于版面有限,有个灭点没有标示出来。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

斜角俯视

当我们站在一个很高的地方俯瞰周围,或者用无人机在高空航拍,这时看到的景象就是斜角俯视。如图所示,尽管竖构图并不适合展现辽阔的大场面,但在斜角俯视的帮助下,2个案例依然体现了场景的宏大,视觉冲击强,这种居高临下感使人视野开阔。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行斜角透视

斜角透视中还有一种特殊情形——平行斜角透视,就是当空间或产品的一面与画面平行时,此时不管透视多强烈,画面也只有2个灭点。

如图所示,当立方体的一面正对视点时,侧面便从2个主立面减为了1个,这时除了垂直方向的1个灭点外,原本视平线上的2个也就成了1个,虽然只剩2灭点,但本质仍属于透视强烈的斜角透视。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

既然是与画面平行,那和平行透视有何区别?

下面看张空间对比图,能看到2者的形变差异还是相当大:左图为平行透视,像是我们在看一个小方盒,亲切、自然、真实;而右图则是平行斜角透视,更像是我们在仰望一个巨大空间的入口,充满戏剧性,并有压迫感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

其实对于手机端,「平行斜角透视」才是斜角透视中的常用形式,因为它的摆放角度很正,这种正面观察很适合手机端的竖屏构图,而且前后的纵深刻画也能缓解版面的左右拥挤,另外画面纵向的汇聚感还能迅速吸引注意,给人一种巨大冲击力和强烈氛围感,其中仰视比俯视更加常见。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行斜角仰视

近几年这类透视越来越多见,因为它既适合竖构图,也能提升画面的形式感和表现力,非常利于促销主题的氛围打造。

如图所示,整个画面就像是我们站在宏大场景的正中央仰望时看到的景象,各元素摆放很正,虽有压迫感,但空间和产品都显得非常高大,张力十足,能让用户牢牢聚焦,同时也产生了强烈冲击力,更易在用户脑海中形成记忆。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

平行斜角俯视

在这类透视下我们会感觉自己拥有高高在上的「上帝视角」,元素摆放同样很正,视野辽阔,场景宏大。但过大的俯视视角会对场景进行一定压缩,再加上俯瞰产生的遥远距离感,这样就显得元素有些「小气」,无法体现仰视下的高大,因此画面的刺激感没那么强烈,总体相对少见。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

3. 小结

以上便是焦点透视的3种类型,我们再来回顾下各自的使用情形,如下图所示,这是一张3种透视的转换示意图,都是仰视视角,旁边小人则是观察者的大小示意:

  • 当立方体的一面正对观察者时,就是「平行透视」,这时除了物体厚度的边线会汇聚1点,其余边线均无交集;
  • 而当立方体旋转一个角度,任何一面都不正对观察者时,就是「成角透视」,这时横向边线会向各自方向汇聚成2点,竖向边线则无交集;
  • 此时若将立方体变的巨大,大到需要仰望,就是「斜角透视」,这时在2点基础上,本无交集的竖向边线将汇成1个新点。

希望通过这张示意图能帮大家更好理解什么时候该用哪种透视,总之小场景搭建一般以「平行透视」和「成角透视」为主,而恢弘的大场景则以「斜角透视」为主。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

当然现实里的透视远不会这么单一,根据物体不同的摆放位置以及不同的观测距离,很多时候同一画面也会存在多种透视,例如平行透视和成角透视就经常组合出现。

电商设计也一样,例如下方案例中,整个空间是平行透视,而里面的盒子则是成角透视,这时视平线上会有3个灭点,其实若产品的摆放再凌乱些,还会出现更多灭点,但这种无序组合会让空间塑造变的复杂,看着也不规整,因此并不推荐。

但要注意不管画面的透视多复杂,当中的视平线却只能有1条,并且无论水平方向有多少个灭点,最后也都会落在视平线上。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

除了以上3种透视外,其实还有4点透视(超广角透视)、5点透视(鱼眼透视)等等,但都过于复杂,用的也很少,这里就不做展开。对于电商里的「空间陈列」,3种透视已够用,它是我们塑造空间的基础,如果一开始的透视错了,即便配色、光影做的再出彩那也无用。

总有人说透视难掌握,其实只要我们在生活中多观察、多留意身边物体的透视变化和规律,及时总结,那这种理性还原就不难做到。当然设计终归还是理性与感性的双重表达,所以透视虽要遵循,但切忌生搬硬套,视觉协调即可。

讲完了焦点透视,我们知道了空间塑造的基本原则,下面就来说说都有哪些陈列场景。

陈列场景

相对PC来说,手机端受屏幕所限,陈列场景其实没那么复杂,核心是要先构建一个空间,然后让产品以合适的视角及透视在空间里呈现出来,而这个空间场景则要和主题氛围、产品气质都高度匹配。

一般来说,手机端常用的陈列场景有4类:盒子陈列、台面陈列、自然陈列以及舞台陈列,选择哪类则要看哪个场景对产品的烘托效果最好。

1. 产品组合

在介绍每个场景前,我先说说关于产品组合的2原则,因为很多时候在空间摆放的产品数量较多,这时它们的组合形式就变的尤其重要,稍不注意就会显得画面杂乱无章,不够协调,而且凌乱的摆放也会降低产品的品质感,缺少吸引力。关于组合原则,核心有2点:大小合理以及三角构图。

大小合理

如果将多个产品摆一起,则要确保它们之间的相对大小符合现实中的真实差异,现实中尺寸大的产品就要相对大些,而尺寸小的产品就要相对小一点,这样才会真实并经得起推敲。

而有些设计师在组合产品时,也不管大小的真实差异,放进版面后就很随意的放大或缩小,最后出来的组合要不就大小一样,要不就比例失真,这些都会给用户一种强烈的不协调感和不真实感。

下面再看一组对比图,明显大小一样的左图会有不适感,也缺少层次;而大小合理的右图则更有美感也更舒服。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

其实大小合理的最终目的是希望整体结构错落有致,就像右图一样,这种有高有低的组合才能体现韵律感和结构美。所以如果可以选择,那我们就选择一些尺寸差异较大的产品,尽量避免出现大小差不多的情况。

当然如果必须陈列大小一样的产品,那也可以通过透视或者辅助元素来改善,例如空间里的近大远小、立方体加高都能改变高度一样的情形。

三角构图

当我们选好不同大小的产品后,就要注意它们的组合形式,千万不能乱堆一气,不同的摆放会形成不同结构,而每种结构又会给人不同感受。我们在「图形分割」中讲过「正三角」具有很强的稳定性,因此当产品采用正三角构图时,会让人觉得版面平稳、视觉舒服。

如图所示,所谓三角构图,其实就是将尺寸大的产品放中间,而尺寸小的产品放两边,这样不但构图稳定,而且画面也有节奏和变化。可以说「三角构图」就是空间陈列里最常用的构图方式,而本节展示的所有案例中,大部分也都是三角构图。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

明确了产品的组合原则,知道了如何陈列才舒服,下面就正式讲讲空间陈列的4类场景。

2. 场景

盒子陈列

「盒子陈列」就是在盒子里面放产品,而盒子多以礼盒为主,使用场景和主题相对单一,基本用于送礼之意的专题页。创意虽然普通,但却不易出错,是种相对安全的表现方式。当然若能在盒里加些小心思,画面也会很出彩,像我之前看过一个新年Banner,就是礼盒里装着一个大家庭在吃年夜饭的温馨场景,这样的新组合便让人眼前一亮。

另外若能提升礼盒刻画的精致度,那画面也会有不错的设计感。而盒子外形也不只有方形,常用的还有圆形和异形。观察视角则以小角度俯视居多,因为这个视角最接近我们日常看礼盒的真实情形,盒内产品在俯视下能看的一清二楚,展现也立体。

盒子陈列的难点在于当盒内要摆放很多产品时,如何能让产品真实、自然的呈现,这需要我们既注意摆放的合理性,也能准确表现透视,还要刻画出产品的明暗变化,总之只有把握好产品的空间感、立体感以及光影感,画面才会舒服协调。

方形盒是最常用的盒子类型,毕竟也是生活中最常用的礼盒外形,结构感强而且易表现。如下图所示,礼盒都是成角透视,且左右灭点都在画面之外,这样结构最稳定,立体感也强。注意盒里的产品呈现,特别是俯视视角下,产品越多越要注意它们是否协调统一,透视、光影等细节一个都不能少,把控不到位就会显得凌乱,画面别扭。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

圆形盒比较少见,因为和立方体比起来,圆柱体的透视没那么强烈,结构感偏弱,但圆润的外形能使画面变的柔和,给人一种亲和力和温馨感,如图所示,由于圆形盒没有明显块面,所以不管透视还是光影,刻画起来都相对简单。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

异形盒是指外形为不规则形状的盒子,总体也很少见,但易出彩。形状用的好便能打破「盒子陈列」的常规感,使画面变的新颖有创意。

例如下方案例中,不管是心形、猫头轮廓还是圣诞树,都能成为画面焦点并引人注意。另外盒子呈现均用了「正俯视」视角,其实除了小角度俯视外,这种视角也很常见,因为该视角下的产品陈列清晰完整,盒子外形也能直观显示,的展现了其外形的特别之处。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

台面陈列

在空间陈列的4类场景中,「台面陈列」用的最多,适用范围也最广,可以说电商中的大部分主题和产品都能使用,算是一种真正白搭的表现方式。

「台面陈列」就是在空间里搭建一个「台面」,然后在上面放置相关产品。由于该手法还是以放大特写的小场景为主,元素形变不能太大,因此画面常用平行透视和成角透视,视角则很灵活,跟着构图走,3种(平视、俯视、仰视)都有。「台面陈列」上手简单,场景多变,其中的关键元素——台面需要根据主题、场景进行灵活变化,常见有2类:桌面和几何体。

桌面很好理解,就是桌子顶部的陈列面,所有产品都放置其上。由于桌子是家里常见家具之一,因此桌面陈列往往能传递一种「家」的温暖和温馨。

可能有人觉得「桌面」形式有些单一,其实远没那么简单,我们不要固化思维,要能灵活变化桌子的样式和装饰,例如方桌还是圆桌?木桌还是大理石桌?光面还是铺桌布?这些都是可变量,再加上视角和周围环境的变化,总之形式可以很丰富。

如图所示,桌面陈列尤其适合各类美食的组合呈现,这时整个场景贴近生活,颇有带入感。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

就是将各种几何形体作为陈列产品的台面,几何体相对抽象,表现场景更多元,因此比具象「桌面」更加常用。

如图所示,几何体一般都是组合出现,特别适合多产品陈列,简约大方,能烘托出产品的品质感。同时通过高高低低的大小排列也能表现出画面的结构美以及层次感,总之是一种 「上手简单、易出效果」的表现方式。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

常用几何体有「立方体」和「圆柱体」,它们适合陈列,高度调节方便,使用灵活。

如下图所示,整体表现并不复杂,就是将各种产品放在几何体上。但作为画面的核心元素,这时几何体的形态、排列、视角和透视就变的非常重要,我们要根据创意需求和产品气质选择最合适的展现方式,而这些展现本身就有不错的形式感。

几何体陈列既能营造空间关系和简约气质,也能让用户聚焦产品本身,因为它的外形简单,不抢产品,不像一些复杂元素或场景,虽然视觉丰富但最后却让产品淹没其中,这样就本末倒置。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

自然陈列

「自然陈列」需要先创建一个合适的自然环境,然后再将产品以合适方式融入其中。相对其他场景,自然环境显然复杂一些,呈现手法常以「合成」和「插画」为主。因为产品都是实物拍摄,为了风格统一,自然环境会偏向写实风格,这样2者结合才协调。

从下方案例能看到,「自然陈列」常用于季节感受或者产地溯源等主题,画面通过「自然场景」营造出天然健康的绿色氛围。而场景中的元素繁多,呈现复杂,这就需要我们具备优秀的整合能力。

对于「自然」塑造,视角以平视和小角度俯视居多,但画面由于没有太多的几何型物体,所以透视没那么严谨,核心是注意近、中、远景的层次区分,还有光影的合理添加。如果这些把控不到位,就很可能出现场景杂乱、缺少层次、没有带入感的粗糙画面,最终沦为各种素材的乱堆一气。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

以上列举的都是以花草树木为主的自然环境,确实绿色场景在「自然陈列」中用的也是最多,但除了绿色场景外,有时也会用到其他环境。如下图所示,像海底 ① 、沙滩 ② 、海面 ③ 、冰山 ④ 也是适合陈列的自然场景,特别是夏季主题会经常用到。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

舞台陈列

最后一类「舞台陈列」常用于大促主题的气氛营造,这类场景不挑类目,任何产品放在「舞台」上,灯光一打,色彩再斑斓些,都能营造出热闹的促销氛围。

如图所示,舞台外形以圆形居多,因为圆形的透视感较弱,构图灵活,而且也符合大家对舞台的第一印象。舞台视角则很灵活,3种均很常见,核心是和产品视角保持一致。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

关于「舞台」塑造,还有2处需要注意的地方:

舞台外形除了最常用的「圆形」外,还有半圆形、方形和六边形等等;舞台造型也可以很丰富,并不局限于常规的表演舞台,各种造型都可尝试,例如上方左四图就是现代感十足的三维舞台,总之我们要根据创意和风格塑造相匹配的陈列舞台。

另外就是灯光运用,可以说这是「舞台陈列」和其他场景的最大区别,但灯光也不是越多越好,太多反而显得眼花缭乱,其实能渲染出绚烂气氛即可。而有光就有影,在灯光照射下,产品一定要有准确的光影呼应,这样才不会显得突兀。例如上方案例中,仔细观察灯光下的产品呈现,能看到产品表面都产生了被灯光照射后的色彩、明暗等变化,这些细节刻画才让画面更真实,融合更自然。

3. 实战案例

本次案例会用胶原蛋白口服液作主体元素,然后用这4类场景(盒子、台面、自然、舞台)来设计4张不同视角、不同风格的Banner,让大家看看在不同场景下,如何将产品融入其中。先展示案例会用到的3种产品视角, 下方案例会根据不同的场景视角选择对应素材。

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

如何做好Banner设计?先掌握这个高手都会的空间陈列法!

总结

「空间陈列法」的内容量挺大,主要分成了「焦点透视」和「陈列场景」2大部分来介绍,其中焦点透视是立体「空间」的塑造基础;而陈列场景则是产品「陈列」的具体环境。

常用场景有4类:盒子陈列、台面陈列、自然陈列和舞台陈列,每种陈列都有各自适用的主题和氛围:「盒子」常用于温馨的送礼主题;「台面」则能根据不同主题灵活应变,属于百搭场景;而「自然」则适合季节或者溯源主题,体现天然清新感;最后的「舞台」则用于氛围浓烈的大促主题。不管哪种场景,都要确保产品和空间的视角、透视相一致,这样场景才会真实协调。另外多产品陈列时,还要注意它们之间的大小比例以及摆放结构,其中三角结构最常用。总之在手机时代,「空间陈列」是一种真正适合小屏竖构图的表现方式。

文章来源:优设    作者:贤辈

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

今天影院复工,带你看2020电影海报大合集!

资深UI设计者

千呼万唤始出来,犹戴口罩半遮面

要说上周什么消息最激动人心,那绝对是全国7月20日低风险地区电影院重开无疑了

今天影院复工,带你看2020电影海报大合集!

消息一出,蛰伏数月的电影爱好者们,纷纷倾巢出动在央妈的评论区里为电影提前打Call。

今天影院复工,带你看2020电影海报大合集!

各种网络段子也是应声齐飞:什么待业电影院员工急售餐车抢复工;上座率不超30%,情侣们也得分开坐

今天影院复工,带你看2020电影海报大合集!

想必各位鸭脖听闻也是激动难耐特别是海报设计师们,终于不用因为没活儿继续挨饿了

趁此机会,先来看看电影海报,一来可解相思之苦,顺便排一排雷,还能边挑边学设计技巧,三全其美,岂不快哉:

7月上映电影

1. 误杀

重映时间—7月20日

近年来难得一见的国产剧情好电影,单从海报上就可见一斑。

「看1000部电影」不能助你飞黄腾达,却能让你将世人的眼睛玩弄于股掌,既然生活是一部电影,那就没有什么是不能人为去剪辑的。

今天影院复工,带你看2020电影海报大合集!

表面上束手就擒的一家人,实则齐心协力,暗度陈仓。

今天影院复工,带你看2020电影海报大合集!

如果你认为孩子画的案发现场,将成为如山铁证,那么恭喜你,人都还没进影院,就已经陷入了导演的叙事诡计。

今天影院复工,带你看2020电影海报大合集!

2. 第一次的离别

上映时间—7月20日

发生在新疆男孩与母亲间的温情故事,母亲患病无法言语,更时常离家出走,两小无猜的男孩女孩,毅然穿越漫漫黄沙,踏上寻母的道路。

今天影院复工,带你看2020电影海报大合集!

沙漠中,只要三个人影在孤独地行走路的尽头,究竟是与人别离,还是要跟童年别离,或许,二者都是。

今天影院复工,带你看2020电影海报大合集!

3. 璀璨薪火

上映时间—7月20日

作为非物质文化遗产纪录片的海报一只饱经风霜的粗糙的手,谈不上精妙创意,甚至颇有些质朴。

今天影院复工,带你看2020电影海报大合集!

但别忘了,正是这一双双沉稳的手,日复一日,年复一年守护着国人傲立世界的文化的骄傲。

今天影院复工,带你看2020电影海报大合集!

4. 妙先生

上映时间—7月31日

年度话题大作《大护法》的姊妹篇有关「善良」的深刻讨论,如果每次拯救恶人,都要牺牲好人,那这种所谓的拯救,究竟还值不值。

今天影院复工,带你看2020电影海报大合集!

温馨提示,内有大汉「聚众赏菊」是成年人画给成年人看的动画片。

今天影院复工,带你看2020电影海报大合集!

5. 呆瓜兄弟

上映时间—7月31日

从1976年开播的第一集就让观众捧腹大笑的木偶短片。

今天影院复工,带你看2020电影海报大合集!

40年后重聚的不光是这两只呆瓜更是荧幕前的观众与自己的童年。

今天影院复工,带你看2020电影海报大合集!

8月至12月上映电影

1. 我想静静

上映时间—8月07日

号称「国内首部动物喜剧电影」海报却疑似「宠物店」素材打底。

今天影院复工,带你看2020电影海报大合集!

以上动物皆不会出现在电影中怕不光是「首部宠物喜剧」更是「首部魔幻现实主义作品」

今天影院复工,带你看2020电影海报大合集!

2. 荞麦疯长

上映时间—8月25日

神似一年一度感动中国的构图展现着上世纪90年代,三个相互交织串联的青年人生。

今天影院复工,带你看2020电影海报大合集!

在人们热衷讨论00后、05后的当下导演将镜头对准70、80,在建的东方明珠,既是时代的挽歌也是对一代青年人美好未来的赞美。

今天影院复工,带你看2020电影海报大合集!

3. 我在时间尽头等你

上映时间—8月25日

偶然间获得的超能力让男主能够回到过去,挽救爱情却被命运捉弄,始终都不得圆满

今天影院复工,带你看2020电影海报大合集!

与《时空恋旅人》同样的科幻题材海报当中,也有十分相似的一场雨,希望如同《流浪地球》,国人能再次拍出不输经典的高水准。

今天影院复工,带你看2020电影海报大合集!

4. 小妇人

上映时间—8月待定

女性可以柔弱,也可以拥有高傲的头颅南北战争中的四姐妹,在清苦生活中活出了不一样的坚强人生。

今天影院复工,带你看2020电影海报大合集!

5. 急先锋

上映时间—8月待定

角落里熊熊燃烧的美国核动力航母身后高耸入云的迪拜塔,没有一处不在透露着这是部大制作。

今天影院复工,带你看2020电影海报大合集!

从沙漠到瀑布,剧情搭不搭且不说至少光是海报就搭了不少真金白银。

今天影院复工,带你看2020电影海报大合集!

邻里美好的一天

上映时间—8月待定

一心想揭露社会阴暗丑恶的新闻记者处处与人为善的老好人,矛盾的二者相遇,会是场何样的闹剧。

今天影院复工,带你看2020电影海报大合集!

上一秒促膝长谈,下一秒皮鞋横飞「邻里间的美好」或许本身就是伪命题。

今天影院复工,带你看2020电影海报大合集!

6. 许愿神龙

上映时间—8月待定

上海少年误打误撞唤醒沉睡神龙却发自己与龙有着上千年的代沟,西式画风,中式温情,一人一龙的冒险故事,值得一看。

今天影院复工,带你看2020电影海报大合集!

7. 无名狂

上映时间—9月25日

一部诞生于摩点众筹的众筹电影片名叫《无名狂》,海报却写满了赞助的网友的名字。

今天影院复工,带你看2020电影海报大合集!

围绕万历年间两大刺客门派所展开的一场场腥风血雨,平静海报之下,山呼海啸,风雨欲来。

今天影院复工,带你看2020电影海报大合集!

尚未定档的电影

除此之外,还有不少电影尚未排期,全年随时可能上映。其中自然也不缺乏优秀的海报创意,比如从路人视角,见证抗战历史的《八佰》。

今天影院复工,带你看2020电影海报大合集!

克味十足,容易联想到哈利波特系列的《刺杀小说家》

今天影院复工,带你看2020电影海报大合集!

单靠海报配色就能让人陷入迷惑的《抵达之谜》

今天影院复工,带你看2020电影海报大合集!

颇有08年阿迪达斯海报味道的《夺冠》

今天影院复工,带你看2020电影海报大合集!

今天影院复工,带你看2020电影海报大合集!

用风卷云涌展现中式诸神之战的《封神三部曲》

今天影院复工,带你看2020电影海报大合集!

居然还能拍出第二部的《爵迹2》

今天影院复工,带你看2020电影海报大合集!

正看是海浪,倒看是山峦的《一直游到海水变蓝》

今天影院复工,带你看2020电影海报大合集!

近看是悬崖,远看是枪口的《悬崖之上》

今天影院复工,带你看2020电影海报大合集!

六小龄童老师参与动捕制作今年下半年…可能会上映的《真假美猴王》

今天影院复工,带你看2020电影海报大合集!

希望别播完片头就播staff名单的《一秒钟》

今天影院复工,带你看2020电影海报大合集!

能把牛顿从棺材里吓活过来的《神秘访客》

今天影院复工,带你看2020电影海报大合集!

进退两男、男上加男、满身大汉的《唐人街探案3》

今天影院复工,带你看2020电影海报大合集!

生死一线间淡定到面带微笑的《紧急救援》

今天影院复工,带你看2020电影海报大合集!

以及万众期待的封神宇宙大片《姜子牙》

今天影院复工,带你看2020电影海报大合集!

好了,以上就是2020年将要上映以及可能上映的电影的海报大合集。看完了这些精彩的海报焦急的等待之情是否缓解了一些?

倒也正应了那句老话,只要熬过低谷,后面都是更好的一天。

文章来源:优设    作者:你丫才美工

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

宋体字设计很难?来看这份平面高手的系统性指南!

资深UI设计者

宋体字可以说是我们现在最常用的字体之一,一方面他与黑体一样,具有非常良好的可读性和易辨性,另一方面,他又比黑体更具有历史感和东方韵味,我们可以看到很多的教材、书籍内文或者官方文件,都是用的宋体字,甚至许多设计都会用一些比较有表现力的宋体字作为标题。所以可想而知,学习设计宋体字对我们的帮助有多大。正所谓欲知大道,必先知史。所以在讲如何设计宋体字之前,我们先来扒一扒宋体字的历史吧。

宋体字设计很难?来看这份平面高手的系统性指南!

虽然说宋体字叫做宋体字,但是如果要追溯宋体字的起源,我们还得从唐朝说起。

宋体字设计很难?来看这份平面高手的系统性指南!

唐朝时期,佛教在中国开始盛行开来,唐朝皇帝甚至派出唐僧师徒四人前往西天取经。

宋体字设计很难?来看这份平面高手的系统性指南!

于是便出现了「抄经生」这种人肉印刷机。这篇经文便是当时唐朝的抄经生所抄写的,他们需要使用规整统一的楷体,文字的开头在同一水平线,而且每一列的字数统一规定为17或者19个字,方便字数的统计,像这一篇经文每一列就是17个字。

宋体字设计很难?来看这份平面高手的系统性指南!

可是即便出现了大量的抄经生,依旧满足不了人们对经书的需求。于是聪明的中国人开始印刷经书,将经文刻在木板上,就可以实现大量的印刷了。

宋体字设计很难?来看这份平面高手的系统性指南!

可是楷书刻起来是很不方便的。一方面,书法家写的楷书讲究起承转合、抑扬顿挫,不同的人写出来的字风格差异十分明显,例如颜真卿和赵孟頫他们所写的「宋」字就明显不同,即便用笔临摹都很难了,更别说雕刻出来了。

宋体字设计很难?来看这份平面高手的系统性指南!

另一方面楷体由于是书写的字体,所以大多数笔画都是带有弧度的,而在木板上刻字,曲线是非常难刻的。

宋体字设计很难?来看这份平面高手的系统性指南!

宋体字设计很难?来看这份平面高手的系统性指南!

于是他们逐渐将曲线刻成直线,把笔画的弧形特征降低,也将楷体中相同的笔画进行规范了,这样的字体便是宋体字的前身。

宋体字设计很难?来看这份平面高手的系统性指南!

宋体字设计很难?来看这份平面高手的系统性指南!

我们可以看一下宋朝时期的刻本,这是南宋时期陈宅经籍铺所刊刻的《朱庆馀诗集》。这时,撇、捺等笔画的弯曲程度大大降低了,而竖笔和横笔也基本上变成笔直的直线了。不过宋朝时期刻本体的横画依旧是倾斜的,从中依然能很明显地看到楷体的痕迹。那么为什么宋体字会形成横细竖粗,横画后带三角形饰角的字形呢?

宋体字设计很难?来看这份平面高手的系统性指南!

那是因为刻字的木板上是带有木纹的,如果垂直木头的纹理刻的话,笔画会比较容易断,需要加粗一些。而如果是顺着木纹刻的话,就没那么容易断,所以可以相对细一些。可是为什么是横画细,竖画粗呢?反过来不行吗。

宋体字设计很难?来看这份平面高手的系统性指南!

那是因为在大多数的汉字中,横画都是比竖画多的。上海交大的郭曙纶教授对20902个汉字进行了统计,发现这些汉字的总笔画数量多达268479个,而其中横画有82682个,占30.8%,而竖画有51459个,占19.2%。可见,在汉字中横画是比竖画多的。所以如果将横画刻粗,竖画刻细的话,可能会使得字体过挤而不美观。

宋体字设计很难?来看这份平面高手的系统性指南!

虽然说横画顺着木纹,比较不容易断,可是横画的两端还是会比较容易磨损的,所以工匠们一般会将横画的两端稍微刻大一些,形成饰角。

宋体字设计很难?来看这份平面高手的系统性指南!

在明朝,宋体得到了进一步的简化,原本复杂精细的刀刻技法简化成了横、竖和斜三种,所以刻字工匠的门槛大大降低了,宋体字得到了真正的普及。我们同样来看一下明朝时期的刻本,这是明朝时期汲古阁刻印的《道德指归论》,这个时候的宋体横画已经基本变成水平了,虽然笔画依旧比较张扬,但是已经少了许多楷体的影子。所以从明朝时期开始的刻本体才能算作真正的宋体。

宋体字设计很难?来看这份平面高手的系统性指南!

也是在明朝时期,宋体字传到了日本,所以现在日本将宋体字称为明朝体。

宋体字设计很难?来看这份平面高手的系统性指南!

清朝是刻本最多的一个朝代,而宋体字在中国真正被确定统一称为「宋体字」也是发生在清朝。

宋体字设计很难?来看这份平面高手的系统性指南!

宋体字设计很难?来看这份平面高手的系统性指南!

了解了宋体字的历史后,我们可以发现宋体字的意义并非只是美观和易读而已,他是经过中华民族近千年传承、优化和改良的文化结晶,他的身上有着厚重的文化气息。也难怪中国、日本、韩国等受中华文化影响的国家会对宋体有独特的偏爱。接着我们就正式进入设计宋体字的教程部分,首先我们来了解一下宋体字的主要特征。

宋体字设计很难?来看这份平面高手的系统性指南!

从楷体字转变为宋体,主要产生了三个特征,第一个是横平竖直,也就是说横画是水平的,竖画是垂直的。第二个特征是横画比较细,竖画比较粗。第三个特征是笔画上出现了三角形的装饰角。

宋体字设计很难?来看这份平面高手的系统性指南!

可是随着字体设计的发展,对于宋体的定义已经越来越模糊了。例如上面的这三种字体,虽然他们不完全满足宋体的特征,可是它们都能算作是宋体。所以我们也不需要对宋体下一个死定义,免得我们在设计字体的时候被定义所束缚住了。

宋体字设计很难?来看这份平面高手的系统性指南!

可是仿宋体是不能够算是宋体字的。我们看仿宋体是不是觉得他和宋朝时期的刻本非常像呢?因为仿宋体是在民国时期,丁善之和丁辅之模仿宋刻本所设计出来的字体,所以仿宋体模仿的是宋朝刻本,而非宋体字,那么仿宋体当然也就不能算在宋体的行列里了。

宋体字设计很难?来看这份平面高手的系统性指南!

接着我们来分析一下宋体字的气质。由于宋体诞生于明朝,具有非常悠长的历史,而黑体是在民国时期才产生的,所以宋体相对于黑体更能体现传统感、文化感的气质属性。

宋体字设计很难?来看这份平面高手的系统性指南!

所以我们做现代风格的设计的时候,可以使用黑体。

宋体字设计很难?来看这份平面高手的系统性指南!

而做比较具有传统风格的设计则可以用宋体。当然也并非说宋体就没办法做现代感的设计,通过对宋体体饰和中宫的设计,我们完全可以做出一款现代型的宋体。

宋体字设计很难?来看这份平面高手的系统性指南!

先来说一下中宫,我们在之前的教程里说过,中宫越大,越显现代感,而中宫越小,则越有传统感。在宋体里也不例外。

宋体字设计很难?来看这份平面高手的系统性指南!

我们再来看看这两个「東」字,很明显也是左边的「東」字更现代一些,而右边的「東」字传统一些。这两个字的区别在于体饰的不同。体饰越少越简洁,宋体就越显现代;体饰越多越复杂,就越显传统。

宋体字设计很难?来看这份平面高手的系统性指南!

另外几何形的体饰也会给宋体带来现代感。

宋体字设计很难?来看这份平面高手的系统性指南!

而传统宋体字的体饰则是具有手写感的,线条比较圆滑。

宋体字设计很难?来看这份平面高手的系统性指南!

根据体饰和中宫的不同,我们可以大致地将宋体分为三大类。中宫小、体饰多且具有手写感的宋体归类为传统型宋体,中宫大、体饰少且为几何体饰的则归类为现代型宋体。而具有一定手写感的体饰,且中宫偏大的宋体,则归类为中间型的宋体。

宋体字设计很难?来看这份平面高手的系统性指南!

除了中宫和体饰之外,我们还经常调整笔画粗细去适应宋体字不同的用途。首先我们先来讲讲正文的宋体。一般正文的字号都是比较小的,如果横画过细的话,会使得横画几乎看不见了,而如果横画过粗的话,笔画又会糊在一块了,所以为了让宋体字在小字号下也能清晰的显示,一般横画和竖画的粗细会控制在1:2到1:3左右,最大一般也不会超过1:4。

宋体字设计很难?来看这份平面高手的系统性指南!

不过我们设计正文字体的机会还是比较少的,大多数时候我们都是需要设计比较具有张力的标题字。这个时候我们就可以尝试拉大横画和竖画的粗细差距。当横画和竖画的粗细差距非常大的时候,可以产生较强的视觉冲击力。画面中这三款标题宋体,都用了细横画搭配粗竖画。

宋体字设计很难?来看这份平面高手的系统性指南!

有时候我们也可以反其道而行之,将横画加粗,让横画与竖画差不多的粗细。这样我们就可以获得一款非常醒目的宋体。这样的宋体有点像比较粗的黑体,既有醒目的特点,也保留了宋体优雅的属性。

宋体字设计很难?来看这份平面高手的系统性指南!

当然,具有张力的标题宋体也并非一定要通过控制横竖笔画的粗细来塑造,通过设计一些有张力的体饰,同样可以让宋体字变得具有表现力。设计体饰是设计宋体字非常重要的一个环节,因为宋体字的大多数笔画是存在许多体饰的,我们除了要将体饰设计得好看之外,更重要的是让不同的体饰和谐共存。如果一个宋体字里存在的体饰都风格不一,那么这个宋体字看着就会不伦不类了。下面我就给大家介绍一个我比较常用的,设计宋体字体饰的方法。

宋体字设计很难?来看这份平面高手的系统性指南!

在做字之前,我们要先确定我们想要做的字体的气质,是传统的,还是现代的?文艺的还是可爱的?又或者是其他的气质。因为我们前面也说到,体饰和中宫都会影响字体的气质,所以我们必须要确定了气质之后,才能动手去设计字体的中宫和体饰。

宋体字设计很难?来看这份平面高手的系统性指南!

另外还要确定字体的用途,需要比较有张力的标题字体,还是需要具备阅读舒适性的正文字体,那我们也能确定文字的笔画粗细。

宋体字设计很难?来看这份平面高手的系统性指南!

确定好了风格之后,我们就可以开始设计笔画了。那么我们先来回顾一下,汉字里的八个基本笔画,我们可以先把这八个笔画的体饰特征都设计好了,再去拼凑我们想要的字。

宋体字设计很难?来看这份平面高手的系统性指南!

一般来说,我们设计宋体会先从横画开始设计。因为确定了横画之后,体饰的风格、体饰大小、笔画粗细等很多东西就都可以确定了。

宋体字设计很难?来看这份平面高手的系统性指南!

其实宋体中的体饰都是来源于书法中的顿笔,所以我们来看看书法中,横画是怎么写的,书法中的横在起笔和收笔处分别有一个顿笔。这两个顿笔分别对应着宋体横画首尾的两处体饰。对于宋体字来说,横画末尾的这个体饰是非常重要的,他对整个字体的气质影响非常的大。

宋体字设计很难?来看这份平面高手的系统性指南!

我们前面已经介绍了这两种衬角分别具有现代感和传统感。

宋体字设计很难?来看这份平面高手的系统性指南!

而这一个的衬角是一个比较圆润的圆形,他可以用来做比较可爱的宋体。

宋体字设计很难?来看这份平面高手的系统性指南!

这一个衬角和刚刚的就正好相反,非常的非常尖锐,适合用来做比较恐怖的宋体。

宋体字设计很难?来看这份平面高手的系统性指南!

还有一点要注意的是,如果竖画越粗的话,横画的衬角一般也要相应的变大一些。

宋体字设计很难?来看这份平面高手的系统性指南!

因为宋体的横画本来就已经很细了,如果衬角还非常小的话,横画很容易就会被忽略掉了,横画末端的这个三角形起到了一定强调横线的作用。当然如果是故意要设计成小衬角或者无衬角的话就另当别论了。

宋体字设计很难?来看这份平面高手的系统性指南!

横画做好之后,就可以开始设计竖画了。在书法中,竖画在起笔处会有一个顿笔,而收笔的地方会稍微往左侧偏一些,这样分别形成了宋体中竖画起笔和收笔的两处体饰。

宋体字设计很难?来看这份平面高手的系统性指南!

那么我们应该怎么用横画推导出竖画呢?横画和竖画关联度最大的地方在横画三角形衬角和竖画上方衬角的这个地方。例如这一组都是直线加切角。

宋体字设计很难?来看这份平面高手的系统性指南!

而这组都是曲线加圆角。

宋体字设计很难?来看这份平面高手的系统性指南!

另外我们还能将这两个地方给联系起来,因为他们都是起笔的位置。如果横画的起笔是水平的话,那么竖画的起笔就应该是垂直的。

宋体字设计很难?来看这份平面高手的系统性指南!

而如果横画的起笔是往外扩的话,那么竖画的起笔也可以往外扩张。

宋体字设计很难?来看这份平面高手的系统性指南!

我一般还会将竖画的起笔和收笔的的地方关联起来,如果起笔是垂直的,那么收笔我也会设置成垂直的。

宋体字设计很难?来看这份平面高手的系统性指南!

而如果起笔往外扩的话,那么收笔我也会往外扩形成书写曲线,这样整个竖画能看起来平衡一些。

宋体字设计很难?来看这份平面高手的系统性指南!

接着来设计横折。书法中在这个转折的地方会有一个顿笔。所以在宋体的横折处也会形成一个装饰角。

宋体字设计很难?来看这份平面高手的系统性指南!

其实横折这个笔画在设计好横画和竖画之后基本就已经出来了。只要将他们组合在一起,然后将横画的衬角往回缩小一些,横折就做好了。

宋体字设计很难?来看这份平面高手的系统性指南!

讲完了横折我们顺便也讲一下这种口字的结构好了。口字结构由刚刚做好的横折加上一个竖线和一个去掉三角衬角的横线组成。然后我们需要做一些细微的调整。竖笔体饰的这个地方需要往上收一些,不要漏出来,这样的笔画看着能干净一些。

宋体字设计很难?来看这份平面高手的系统性指南!

然后竖画入笔的地方也要往上提一些,让左右两边的体饰能够平衡。

宋体字设计很难?来看这份平面高手的系统性指南!

最后加上横画,把衬角的部分裁去,注意两个竖线需要出头一些。这个口字就完成了。

宋体字设计很难?来看这份平面高手的系统性指南!

然后来做撇和捺。书法里的撇起笔的地方有一个顿笔,所以宋体里,撇有一处体饰。

宋体字设计很难?来看这份平面高手的系统性指南!

书法里捺则在起笔和收笔处各有一处转折。所以宋体里,捺则有两处体饰。

宋体字设计很难?来看这份平面高手的系统性指南!

撇基本上可以从竖线轻易地推导出来,因为他们的起笔都是一样的,只要稍微调整一下起笔的角度就可以了。

宋体字设计很难?来看这份平面高手的系统性指南!

而捺与撇是正好相反的,起笔细,收笔粗,所以捺的起笔需要缩小一些,但是需要保证这两个地方是相同的。而捺的收笔是一个比较独立的地方,只需要风格保持大致一致就好了。

宋体字设计很难?来看这份平面高手的系统性指南!

接着来做提。在书法中,提的起笔一般是会有一个顿笔的,这一个顿笔与竖的起笔的顿笔是类似,所以在宋体中,提的起笔会有一个与竖类似的体饰。

宋体字设计很难?来看这份平面高手的系统性指南!

提与竖起笔的体饰是差不多的,只是方向不同而已。

宋体字设计很难?来看这份平面高手的系统性指南!

最后就只剩下点和钩两个基础笔画还没设计了。这两个笔画和别的笔画之间的联系不太大,同样也只需要保持整体笔画风格一致就好了。不过点和钩之间却存在着一定的联系的。最主要的是体现在这个地方,如果是尖角,那么点和钩最好都统一为尖角。

宋体字设计很难?来看这份平面高手的系统性指南!

而如果点是圆滑过渡的,那么钩最好也是圆角。

宋体字设计很难?来看这份平面高手的系统性指南!

另外还有如果点的这个位置是比较饱满的话,那么钩转折的位置也应该设计得饱满一些。

宋体字设计很难?来看这份平面高手的系统性指南!

而如果是瘦瘦的点,钩转折的位置也要相应的瘦一些。

宋体字设计很难?来看这份平面高手的系统性指南!

最后还有一个需要统一的地方,就是撇、点、钩等笔画的收笔必须要保持一致。可以是圆角、还是切角、尖角或者是其他特殊的角,收笔的大小也应该统一。

宋体字设计很难?来看这份平面高手的系统性指南!

不过我们设计宋体字时,也并非一定要百分百遵循这一套设计方法,因为这一套设计理论是结合书法所推导出来的,而随着时代的发展,宋体字的形式和定义也不断被拓宽,例如一些比较新型的宋体,都会省略掉竖、撇、捺等笔画的体饰,让字体显得更简洁一些。所以如果大家想做一些比较创新的宋体字,而非传统严谨的字体的话,大可以放开手脚去设计,最终只要保证美观和和谐统一就好了。

宋体字设计很难?来看这份平面高手的系统性指南!

我们在将所有笔画都设计完之后,就可以将笔画拼起来了,可是如果我们设计的笔画比较没有特点,最后拼凑出来的字体也就显得有些中规中矩,缺乏视觉张力。那么接下来我就给大家介绍几个让宋体字比较有张力的常用方法。

宋体字设计很难?来看这份平面高手的系统性指南!

第一个是在宋体字的笔画之间加入连接线,模拟写字的连笔效果。

宋体字设计很难?来看这份平面高手的系统性指南!

由于宋体字是用刀刻出来的字,基本上是不会有连笔的存在,而加入连笔线条就可以缓和宋体字刀刻的僵硬感,让文字显得更灵动。

宋体字设计很难?来看这份平面高手的系统性指南!

第二个方式是将设计好的笔画松散的排列。

宋体字设计很难?来看这份平面高手的系统性指南!

因为宋体具有文艺的气质,而将笔画松散地排列能够体现一种慵懒的文艺感,和宋体的气质是非常契合的。

宋体字设计很难?来看这份平面高手的系统性指南!

不过这种方式最好能与词义吻合,例如团圆这个词应该是笔画凝结在一起更能符合团圆的词义,像这样做得松松垮垮的味道就有些不太对了。

宋体字设计很难?来看这份平面高手的系统性指南!

第三个方式是省略横画。由于宋体字存在着三角衬角,所以即便省略掉了横线,依旧能够通过三角衬角判断横线的位置。

宋体字设计很难?来看这份平面高手的系统性指南!

所以省略横画对宋体的识别度影响不大,并且能够增加宋体字的图形感。

宋体字设计很难?来看这份平面高手的系统性指南!

第四个方式是断笔。

宋体字设计很难?来看这份平面高手的系统性指南!

刚刚我们讲到了宋体存在着三角衬角,所以省略掉横画也不会过多的影响识别度。那么在断笔这里也是一样的道理,我们最好选择断开横画,因为这样对字体识别度的影响最小。

宋体字设计很难?来看这份平面高手的系统性指南!

也许有的人听到这里会觉得,这才是课程的重点。其实并不是的,这里教给大家的四个增加张力的手法只是辅助工具而已,不是说我先随便瞎设计一个字体,然后再套用这几个方法去增加形式感,我认为这样的方式只是在遮丑而已,而作为设计师的我们更应该追求骨骼和体饰的美感,而非一味遮丑。那么教程部分就到这里结束,下面给大家示范一个案例吧。

宋体字设计很难?来看这份平面高手的系统性指南!

我们这节课的案例就是做韦礼安这首猫咪共和国的单曲封面。这是我从MV开头截的图。我们可以看到MV中猫咪共和国这五个字是手写的,给人一种可爱随意的感觉。那么我们这节课就尝试用宋体字来体现这种感觉。

宋体字设计很难?来看这份平面高手的系统性指南!

那么我们对这款字体的定位就很明确了,是一款可爱的标题字体。

宋体字设计很难?来看这份平面高手的系统性指南!

我们先在屏幕上打上猫咪共和国五个字作为字体骨骼的参考。这里我选择了思源宋体,因为思源宋体是一款现代型的字体,中宫比较大一些。太过紧凑的中宫不适合我们塑造可爱、随意的感觉。另外一个很重要的原因是,思源宋体虽然高贵,但是免费,如果我们改动的程度不大,也不会造成侵权。

宋体字设计很难?来看这份平面高手的系统性指南!

为了让字体更憨一点,我们可以将文字压扁一点点,营造出一种老子一米五的感觉。然后就可以降低透明度,开始在这个参考骨架上秀一波操作了,接下来我们就一个笔画一个笔画地来设计。

宋体字设计很难?来看这份平面高手的系统性指南!

首先因为是标题字体,所以我们希望做一个横画和竖画都差不多粗的宋体,这样会比较醒目一些。然后因为气质是可爱的,所以我把体饰设置成圆圆的,胖胖的。

宋体字设计很难?来看这份平面高手的系统性指南!

我们用横画推导出竖画。体饰方面基本上就直接照搬了横画的体饰,因为横画的风格很明显了,竖画保持一致就可以了。

宋体字设计很难?来看这份平面高手的系统性指南!

接着做横折。我们先将横画和竖画凑一起看看。这样会有两个比较大的问题,一个是竖线的体饰凸出来了一块,另一个是横画和竖画的衬角叠加在一块显得太大了。所以我们需要将衬角缩小一些。

宋体字设计很难?来看这份平面高手的系统性指南!

接着做口字结构,我们将竖画放好之后,发现不用调整也挺平衡的,所以我们就直接用这一个口字。

宋体字设计很难?来看这份平面高手的系统性指南!

然后撇和捺的起笔我们也可以直接用竖画的起笔推导出来。

宋体字设计很难?来看这份平面高手的系统性指南!

值得注意的是,我们可以看一下这个撇,为了凸显这个笔画的可爱,所以我们笔画的粗细变化其实是很小的,为的是让收笔的地方比较钝一些,显得更人畜无害。

宋体字设计很难?来看这份平面高手的系统性指南!

同样为了营造字体可爱的气质,我将捺的收笔也设计成圆弧收笔,而并非普通宋体的尖锐收笔。

宋体字设计很难?来看这份平面高手的系统性指南!

接下来我们应该是要做提笔画的,可是我们发现这五个字里并没有提,所以我们就跳过他,直接做点和钩了。同样为了保证风格的一致,这个点的粗细变化也不大,而且头特别钝。

宋体字设计很难?来看这份平面高手的系统性指南!

宋体字设计很难?来看这份平面高手的系统性指南!

点和钩之间是有关联的,这三组地方分别互相对应。

① 端点应该都比较大,比较钝一些;

② 圆滑地过渡;

③ 屁股的地方比较饱满一些。

宋体字设计很难?来看这份平面高手的系统性指南!

将做好的笔画放上去,接着还需要做一些调整,因为我们现在用的还是思源宋体的骨架,这个骨架和我们设计的笔画并不一定搭。我对字面大小,视错觉等进行了一定的修正,然后还将中宫稍微扩大了一些。这时候我们会发现,调整过后的这组字依然显得太过正经,还是摆脱不了思源宋体正文字的属性,而我们想做的字应该是可爱、慵懒的标题字。

宋体字设计很难?来看这份平面高手的系统性指南!

不知道大家还记不记得我们刚刚讲的宋体字四种增加张力的套路。很明显松散笔画这种方式最适合随机慵懒的感觉,那么我们来试试看。

宋体字设计很难?来看这份平面高手的系统性指南!

我们先将这五个字的字距拉开一些,方便我们调整笔画。然后将笔画松散地排列开。

宋体字设计很难?来看这份平面高手的系统性指南!

接着我们还需要做一些调整,这样看起来太粗糙了。我们将点、撇、捺等笔画调短一些,让他们具有点的感觉。因为点的构成具有随机和活泼的气质。

宋体字设计很难?来看这份平面高手的系统性指南!

然后将重心往下压,因为重心靠下的字体会显得比较憨一些,那么我们这一组字就完成了。

宋体字设计很难?来看这份平面高手的系统性指南!

最后我们用这个字来做一个版面,先建立一个单曲封面125mm*125mm的画板,并设置5mm的页边距和7*7的网格。

宋体字设计很难?来看这份平面高手的系统性指南!

然后我们放入一张猫的照片作为版面的主体,占据右下角的5.5栏。

宋体字设计很难?来看这份平面高手的系统性指南!

接着我们将做好的字体放在左上角,和右下角的猫做对角线的呼应,可是这么摆放好像还是不够好玩。

宋体字设计很难?来看这份平面高手的系统性指南!

所以我们加入英文和线条做成一个文字组合。

宋体字设计很难?来看这份平面高手的系统性指南!

最后在版面的左下角加入其它信息,这个单曲封面就做好了。

宋体字设计很难?来看这份平面高手的系统性指南!

效果还不错吧。

最后我们来总结一下这节课。首先我们给大家扒了一下宋体字的历史,知道了宋体字诞生于明朝,可是最早能够追溯到唐朝。接着分析了宋体字的特征和气质,宋体字相较黑体字具有传统、文化的属性,可是也能通过对体饰、中宫的控制,设计出具有现代感的宋体。然后我们教给了大家一套设计宋体字体饰的方法,最后是四个增加宋体字张力的常用手法。那么我们这节课就到这里,我是千树,我们下次再见。

文章来源:优设    作者:研习设

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

为什么很多设计大神都喜欢用斜线排版?

资深UI设计者

线是平面构成的三大要素之一,在各类设计中都有着广泛的应用,而其中的斜线更是设计师非常喜欢的元素,相比水平和垂直的线,斜线更特别、更具动感,下面我们来看看斜线有哪些主流且强大的用法。

区隔信息

区隔信息是斜线最常见的用法,通常用来区隔左右、左上和右下两部分的信息,用斜线区隔的内容不需要对齐排列,这样看起来更灵活一点。

在海报设计中就经常用斜线来区隔年月日等日期信息。

切割元素

很多简单的元素完整呈现出来时会显得很普通,这时依据斜线将其切割可以增加设计感,即切除元素的局部,只保留元素剩余的部分以及斜线,元素被切割后的不完整性会增加元素的独特性和神秘感,所以更容易让人眼前一亮。

PS:切割的时候要注意保留元素的美观性和识别性。

装饰

由于斜线具有一定的动感,通过重复排列后又具有节奏感,且线本身占面积比较小,不会对画面造成太大干扰,所以很适合用作装饰元素,斜线主要是从以下几方面来起到装饰作用的。

1. 增加动感

一些以文字为主且文字是水平或垂直排列的设计,可能会因为太过常规或缺少对比而缺乏动感,这时在文字周围增加一些平行的斜线,使其与主体形成方向对比,就可以大大提升该设计的动感。

2. 增加氛围

比如在一些促销设计中,如果画面中缺少装饰元素的点缀,那么促销的氛围也可能会有所欠缺,这种情况下,我们也可以通过增加斜线来改善,这里使用的斜线可以有粗细和颜色的变化。

PS:斜线的方向要统一。

3. 增加细节

比如很多画面的背景太单调,我们就可以把重复排列的斜线放进背景里做底纹,这样的背景感觉更丰富,而且用斜线做底纹不会对主体造成太大干扰。

PS:把斜线排成一个圆,具有不错的装饰效果。

平衡

在排版时可能会遇到这样的情况,比如我们想采用某种形式排版,但由于缺少内容或图片轮廓有限制,所以这么排会引起版面的失衡,这时可以用斜线来填充空白,以达到版面平衡的效果。

创造形式

由于设计的版面通常都是矩形的,以至于斜线天生就显得比较特别,所以在设计中合理的使用斜线可以增加其设计感。

例如下面这张海报作品,如果没有中间的斜线它也会是一件不错的版式作品,但是有点常规,所以设计师用一根斜线穿过整个画面,打破了这种常规,给这件作品带来一种不一样的感觉。

PS:贯穿画面的斜线不能影响文字的识别性,且不能从人物的脸部穿过。

总结

最后总结一下,斜线的主要功能有:区隔信息;分割元素;装饰;平衡;创造形式。光说不练假把式,大家在排版时记得多尝试一下斜线。


文章来源:优设    作者:葱爷

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档