D. 平面排版

(一)平面设计的目的

在做任何一个设计的前提包括网页设计、平面设计、排版设计,都要搞清楚我们做设计的目的,做设计不仅仅是为了单纯的追求美感,也不是为了炫技自己对工具对特效对样式排版颜色使用的娴熟,而是为了信息传达。为了让用户在最短的时间内GET到我们想表达的重点,那么就会运用到各种排版技巧和设计手法来为体会用户体验用户习惯和排版技巧。

所谓排版其实就是帮助用户整理信息的过程,能让用户第一时间捕捉到你想表达的重点,从而吸引用户继续浏览信息,以达到实用的目的,进而将使用量和好评度转换成实实在在的收益。

(二)平面构成

为了更好的进行剖析,我们将平面设计中的设计元素划分为三个层次,分别是:

1)主体信息

2)辅助信息

3)背景信息

下面我们就已这张首页轮播图为例来进行分析

在轮播图的设计中,我们通常会设置一个视觉焦点,这个视觉焦点可以是课程展示图,也可以是文案,总的来说就是我们最想突出、最想宣传的重点信息。视觉焦点的作用是当用户在浏览信息的时候能够第一时间GET到重点,使信息传达更加高效。文字的明度和饱和度要清晰,突出的重点用了不同颜色区别,使主体信息明确,一目了然

当主体信息明确传递给用户之后,为了使用户更深层次的获得肯定的感知,辅助信息层则是一个必要的环节。试想,如果没有从远到近的课程流信息,那么整个设计的传播效果是不是会大打折扣,不能让用户持续性的获得肯定的感知,就有可能会跳出导致失去了轮播图的效果。所以说辅助信息在平面设计中同等重要。

当用户对主体信息完成认知和肯定之后,保持用户持续感知的视觉信息则在于第三景别的背景信息层。背景信息的主要作用是烘托气氛,营造氛围,让用户对主体信息获得持续的感知。在上面的背景层主要是用蓝色的画布以及上面的星星点点的装饰来营造课程琳琅满目的氛围,刺激和引领用户想学习和传课程。

(三)排版技巧

上面说到的目的和平面构成分析了平面设计中“为什么”和“是什么”的问题,接下来我们来分析一下怎么做。根据平常工作中的积累以及查阅了一些资料,我整理汇总了几种工作中常用的平面排版技巧,包括三大基本排版技巧对比对齐和分组、重复、打造画面的层次感、平面设计中的辅助元素、平面设计中的字体设计、留白等等

1)排版技巧——对比

在设计中对比最主要的作用之一就是突出主体信息,能让用户捕捉到重点在哪里,我的主体是什么;因为有了对比的效果,也使得整体更加鲜活,不会给人很呆板的感觉。

对比,可以理解为“视觉反差”,目的营造视觉感官上的变化,避免文字排版单调、主次关系不分明的现象出现;合理的运用对比原则,能很大程度上提升文案排版层次感以及设计感!而对比原则也能起到很好的整合文案信息的作用,也就是我们常说的放大、加粗、变色等等,其实就是在强调对比的重要性,凸显主次变化;常用的体现对比的效果的手法有以下几种:

大小 长短 颜色 粗细 形态 材质

这些对比手法目的是为了更好的体现层次变化,可以用一种,也可以用多种,但是要兼顾信息的流畅性以及可读性,比如我们常说的,主文案要放大:就用到了大小对比的形式;重点文案加粗、变色:用到了颜色和粗细的对比形式;再比如在选择字体时给与主要文案以特殊的字体形式:则用到了形态的对比;还有一些游戏海报的设计中,大标题会做一些材质的区分等等,对比的目的是形成视觉反差,而视觉反差的目的则是让用户去注意那个与所有元素区别最大的视觉点,进而起到了突出、强调的作用,而与此同时,层次的变化也得到了体现!

对比 更吸引眼球,可以采用多种方式增加对比,字体粗细对比,颜色对比

对比的根本目的:是增强页面的效果和助于信息的组织。使用者能立即了解信息以何种方式组织,以及从一项到另一项的逻辑流程,不能让读者混淆和错误强调重点。

实现方式:字体选择、线宽、颜色、形状、大小、空间等来增加对比,对比一定要强烈。

2)排版技巧——对齐

每个元素之间与页面上的呈现整体规整,达到有序性。常用的对齐方式:左对齐、右对齐、居中对齐(左右对齐、上下对齐)。

对齐感觉就像是有一条无形的线把文字信息串联起来,起到一种引导客户阅读的作用!利于用户浏览信息,画面整体也更加整洁。在日常的设计工作中,文字排版对于整体设计的表达起着至关重要的作用,文字编排也是设计师的必修课之一,如何划分层次、突出重点、充分结合整体风格、将文字编排工作做得富有趣味性、设计感、吸引眼球、准确的传达信息等等,都是设计师所要做的,看似简单的几行文案,通过设计手法可以有成千上万种不同的编排形式,这就是文字排版的魅力所在!

设计的最终目的是通过视觉传达给用户信息,文案信息作为最直观的信息传达方式,在设计环节中起着至关重要的作用,文字排版就是将原本杂乱的信息通过设计编排手法实现其富有条理性、可读性、设计感的特点;要让用户在最短的时间内最大限度的捕捉有效信息,且也要能体现出设计感,而不只是枯燥无味的文字摆放;文字编排的过程也是信息归类、提炼重点的过程

一幅个是杂乱无章可寻,另一幅则是整齐的;整齐有规律的给人的感觉条例性更强、更具有整体性、更严谨、更加赏心悦目、易读性高

视觉规范最基础的要求就是:整齐、规范、有条理,这也是为什么很多设计中呈现返璞归真的态势,就是通过点、线、面的合理运用进行设计创作,而不是过多的追求特效、炫酷。

对齐方式的选择要结合画面的构图形式、视觉重心,也就是将文字排版与构图形式合理的结合 

居中式和上下式,因为上下式构图形式最常用的对齐形式就是居中对齐,这样才能更好的稳住视觉重心,所以上下构图形式多采用居中对齐的排版原则,如果强行采用左对齐或者右对齐的形式,会使得整体比例不协调、重心不稳!

前两种形式就是不可取的,所以构图形式在很大程度上也决定了文字对齐原则,而每种对齐原则给与画面整体的版式呈现也有很大的区别,结合三种对齐形式的特点与构图结构去选择最终的对齐原则也是最常用的一种参考!

对齐的目的其实就是在规整文案信息,对齐有利于信息传达以及视觉规范,当我们做文字编排工作时,要根据构图形式选择合理的对齐原则,每种对齐形式所传达的视觉感受也不同:左对齐、右对齐给人以整齐、严谨、划分明显的感受;居中对齐则属于更加活跃、可塑性强;而两端对齐更适用于文本段落,底部对齐以及顶部对齐在做海报时的装饰性文本会用到,

3)排版技巧——分组(亲密性)

分组,顾名思义:将有关联的元素物理位置上相互靠近,视觉上形成一个整体;而无关联的元素物理位置上相互分开,视觉上呈现分割整体的效果。。在文字排版中,分组一样能起到很好的划分、切割、整合信息的作用,所谓分组实际上也是整合信息的过程设置不同的间距来指示各项的接近程度和关系的重要性,亲密性可以令表达更清晰。

左侧很明显信息都是均衡排布,每条文案内容的间隔都相同,虽然运用了居中对齐的原则,但是整体给人的感觉还是有些过于紧凑、密集,这样会导致大大减弱整体文案信息的识别性可读性,甚至会给用户形成一种厌倦感、不愿意阅读的现象;而右侧则是运用了分组原则,将一个完整的文案整体通过距离上的增大分成了两个小组,在视觉上给人的感受更加通透、减少了因信息太多而造成的压迫感,而且信息的层次感也相对更加明显。。通过文字分组,把文案进行整合,这也是整理信息的一个过程,使得文字编排更加富有条理性,也增加了用户对信息的捕捉、读取速度。

第一:分组即对信息的整合,除了物理关系,其文案的划分也很重要,当文案与文案之间的关联很强时,则可以将他们归为一组。第二:设计中的文字排版要始终有分组的概念,具体分几组要试情况而定,但是在一般情况下,文字排版分组最少分为两组,目的是为了提升文案信息阅读的流畅性、以及避免造成压迫感;而最多不要超过四组,目的是分组过多会给人一种松散、不够整体的感受!第三:当文案信息太少且又要兼顾分组时,可以借助按钮、装饰元素、线条、形状等等用于体现文字排版的层次和分组。

目的:实现组织性,尽管其他原则也能达到这个目的,不过利用亲密性原则,只需简单的将相关元素分子一组建立更近的亲密性,就能自动实现条理性和组织性,如果信息很有条理,将更容易阅读,也更容易被记住

如何实现:统计眼睛停顿的次数数一数页面上有多少个元素,如果页面上的项超过3-5个,就要看看哪些孤立的元素可以归在一组建立更亲近的亲密性,使之成为一个视觉单元。

4)排版技巧——重复

重复就是作品中的视觉要素要在整个作品中统一,包括色彩方案、字体字号、文本行距、项目符号等,也可以是某种个视觉符号

左侧这个每段标注的符号不同,有圆有菱形有三角,正是不够统一,没有做到用同一元素

相同的大小和粗细--每一页地步增加一样粗细长短的线–相同的项目符号   重复让页面具有一致性,创建重复元素可以从标题和子标题入手是一个很常用的。

根本目的:统一,增强视觉效果,如果一个作品看起来很有趣,往往也是更易于阅读。

如何实现:重复可以认为是保持一致,需要把现有的一致性更向前推进一步,将一直的元素(比如说标题),让每一项标题下面加一条粗线。。再看看可以加一些纯粹的设计元素来提高 设计效果并提高信息的清晰度。。

避免的问题:要避免太多的重复一个元素,重复太多会让人讨厌,要注意对比的价值。

5)排版技巧——页面的层次感

1、 明确元素设计目标

页面中的每一个元素都有存在的目的和意义的,

2、考虑用户浏览模式

3、功能性优先

4、善用留白

5、使用黄金分割

6、利用栅格

7、色彩添加

8、字体排版层级

9、Web三层级和手机二层级

6)平面设计中的辅助元素——线条和几何图形

在平面设计中根据设计需求,线条和几何图形的运用非常普遍

7)排版页面中的字体

结构:汉字字形的骨髓结构

重心:字体视觉中心点的高低

字重:字体笔画的粗细

中宫:字体结构的松紧

字怀:笔画中留白的部分多少

字面:字体所占字面框的字面率比例大小

以上字体结构基本知识如果想详细了解可自行百度。

8)留白

顾名思义,留白就是在作品中留下相应的空白突出主题

留白的作用之一就是突出主题;其实原理很简单:降低次要元素对于主题的影响,在视觉上给与主题充分的主导地位。

留白提高通透性

关于这一点可以用生活中的一个例子来解释,试想你站在一个和你身高等高的屋子里面是不是会很倔很压抑,同样在平面设计中适当的留白会让画面更加通透,有更充足的空间进行呼吸。

留白能提升品质感

一般高端品牌的设计都会采用大量留白的极简风格进行设计,这也是留白的妙用

1)平面设计之明确性。平面设计是通过点,线,各种商品的表面绘制交织油墨草案,板块效应,使打印更一般的黑白照片必须清晰、肯定

2)平面设计之信息性。平面设计需要设计者对事物有深刻的见解,能够通过重点表达其特性,是大众能够更加简单的理解某项事物。

3)平面设计之艺术和装饰。平面设计是以设计为内容布局,有良好的视觉语言是非常重要的。想法和创意是在设计的第一步,也是设计作品进行思维活动了。有一个明确的主题,布局和结构是设计性能。因此,布局设计是设计师,艺术修养和技术知识。

4)平面设计之趣味性。平面设计需要有趣味性,通常使用的是夸张的漫画手法。通过连锁形式,向大家展示一些抽象,难以理解的事物。平面设计就是将这些的“超现实”事物的真正魅力展现给大家,使大家很容易的理解和接受。

5)平面设计之无限创意。光是拥有趣味和艺术还不够,平面设计还需要创意。如果设计已经没有多少令人兴奋的内容,那么大家可能会对内容产生疲劳。布局充满了脑洞,信息有更加强大的媒体播放了画龙点睛的表现技巧,从而更具吸引力,打动人。

6)平面设计之整体性和协调。平面设计的版式其实是传播信息的桥梁,是追求完美的形式必须与思想内容,这是基础的设计布局的主题是一致

问题:

设计画面显乱,该如何解决

1、运用对齐原则

2、串联式绝缘苏,圆角都是圆角,方形都是带尖

3、颜色统一避免太多。颜色的多样性带来的是视觉上的不统一,这也是为什么配色时尽量做到色相不超过三个的原因

4、视觉重心平

页面太空怎么解决

1、用水印的效果,调整背景文字的透明度,一个大文字字母或者一片文字字母

2、合理运用个辅助小元素做修饰,短横条线组 星星点点

3、增加视觉变化(给图片的物体做投影、运用纹理背景)

4、掌控图文比例 要表达的是什么,例如手机产品一比一在左文案在右,可以把手机斜着放满文字在手机上(局部放大法)

页面留白问题

1、留白是为了突出主题,

2、搜索引擎的主页都采用了简洁的方式大量留白

3、通透性、空间感,更易于用户接受,给人的感觉也更加舒适

4、留白是万能的!其实并不是所有的作品都需要大面积的留白,比如:有气氛类的活动、节日、功能性很强的

5、留白就是留下空余的空间,并不是必须白色,这个空间可以是天空,可以是虚化的景物,也可以是干净的地面,总之留白处要干净、简洁,不能误导读者的视线,应该很自然

用到的图片示意:

新世纪孙鹏飞带你整理平面排版相关推荐

  1. 新世纪10年100个好东西 淘宝、QQ、伟哥入选

    10年100个让我们生活更美好的东西,它们是科技的胜利,更是人性的胜利 网站类 1.Twitter.com 只有两种人会不喜欢Twitter,话痨和日报记者.前者会发现140字无法透彻表达观点,后者则 ...

  2. 安卓手机如何投屏到电视上_【新世纪教育】手机如何投屏到电视安卓和iOS通用!...

    新世纪教育提醒您: 为了保护视力,有更好的视觉体验,将手机里的视频.图片或者直播课程投到电脑或者电视的大屏幕上,效果无疑会更加的好!! 今天就给大家整理了一下安卓和iOS手机的投屏方法,需要的话直接收 ...

  3. 新世纪周刊:美剧的今世与前生

    http://ent.sina.com.cn 2006年11月01日18:31 新世纪周刊   "美剧"是中国人对美国电视剧集的简称.上世纪80年代,一部拍摄于1970年的< ...

  4. oracle 查询各科前3名_好消息!新世纪女排教练战绩排名出炉,前3名中国人占据两席...

    文/梅长苏 新世纪这20年来,能够带领女排球队获得世界冠军的主教练一共有10人,今天就为这10位女排教练按照战绩来排个名,中国女排主教练郎平.前主教练陈忠和都榜上有名,从成绩来看,两个人的执教能力是数 ...

  5. 信号与系统奥本海姆第二版_【中山大学电通信通信号与系统考研】自编的两张小卡片带大家整理一下《奥本海姆·信号与系统》的知识架构...

    建议有时间的同学看看以下的视频,讲解的比文章详细些. [中山大学信号与系统考研]<奥本海姆·信号与系统>教材读不下去?抓不住重点?自编的两张小卡片带大家整理一下知识架构.考研的,本科学习的 ...

  6. 玉田新世纪计算机学校,玉田新世纪中等专业学校2021年招生简章

    不少家长都在考虑学生中考后选择就读什么学校,报读什么专业.为了让更多的家长些能够了解,小编为同学们整理了玉田新世纪中等专业学校招生简章,供同学们参考. 玉田新世纪中等专业学校招生专业:计算机应用.会计 ...

  7. Java:新世纪时代的召唤--启航

    Java:新世纪时代的召唤--小白成长历程 C语言时代 一次反抗: 一鸣惊人 开拓疆土 帝国的诞生 Java的特性和优势 简单性 面向对象 可移植性(跨平台性) 高性能 分布式 动态性 多线程 安全性 ...

  8. 计算机学院教师老带新总结,教师老带新新教师总结报告

    教师专业发展是教师成长的重要内容和途径,关于教师专业发展的研究已成为一种显学.然而,在实际的教学要求.教师专业发展和教师专业发展的研究中今天学习啦小编给大家整理了教师老带新新教师总结,希望对大家有所帮 ...

  9. 【有道专辑】-【时尚の音乐五周年贺】美国新世纪钢琴家: Painted Echoes - (画的回声) Tim Glemser 蒂姆.葛兰森(2011)

    专辑英文名: Painted Echoes 专辑中文名: 画的回声 艺术家:Tim Glemser 蒂姆·葛兰森 音乐分类:新世纪音乐 New Age 专辑风格:减压音乐 Relaxation,冥想音 ...

  10. 新世纪计算机专业英语,新世纪研究生公共英语教材阅读A课文翻译完整版.pdf

    新世纪研究生公共英语教材阅读A课文翻译完整版 Unit 1 一个小男孩的梦想 马克 吐温 1 我小的时候,我们那密西西比河西岸的村镇上,玩伴们都只有一个水恒的志愿.那就 是当轮船上的水手.我们也有其他 ...

最新文章

  1. 和12岁小同志搞创客开发:手撕代码,点亮LED灯
  2. 网站服务器的解决方案有,Web网站服务器DDOS攻击的解决方案
  3. CCF NOI1010 邮寄包裹
  4. 当“天天酷跑”遇上“Python程序员” 另类演绎团战新玩法(学到了学到了~)
  5. 高德最佳实践:Serverless 规模化落地有哪些价值?
  6. 细胞转染的操作步骤及注意事项
  7. aspose java_Aspose.Cells for Java
  8. linux mysql 5.6.23_MySQL 5.6.23升级到MySQL 5.7.9
  9. python面向对象三大特性6大原则_【Python学习笔记】面向对象三大特性
  10. c语言 mysql 查询数字_c语言mysql查询数据库
  11. 新鲜出炉的2012年8月桌面日历壁纸免费下载
  12. 冒泡排序详解(C++)
  13. setuna快捷键_Setuna 办公截图神器
  14. 计算机保研夏令营预推免
  15. Pspice轨迹命令
  16. 2016--MatConvNet Convolutional Neural Networks for MATLAB
  17. Cocos2d-x 着色器
  18. 七绝高手都有哪些?中国历史上10大七言绝句诗人排行榜
  19. 如何激发员工的积极性
  20. 电力安全教育之临时用电

热门文章

  1. 佳博打印机如何设置热敏打印
  2. linux合并ts文件吗,UNIX LINUX MACOS shell 下载合并*.ts视频
  3. Win10 Word背景默认是绿色的怎么取消?
  4. AI创作现状与未来发展浅析
  5. Microsoft Dynamics NAV成本原理讲解
  6. 探索在Android中使用Emoji Font的方法
  7. python操作mysql批量插入
  8. 产品经理面试,设计攻略
  9. Advanced Auto Layout
  10. dac生成信号频率取决于_关于高速AD/DAC测量及设计中82个疑难问题的解答