首页 > 网页教程 > 设计分享 > 设计分享:新手如何快速入门版式规划?

设计分享:新手如何快速入门版式规划?

时间:2019-09-14    来源:研习设K先生

@研习设K先生 :大家好,今天的课程题目是「让你秒懂版式规划」。很多刚刚入行的小伙伴,在一开始接手文案?#25509;?#24819;法着手去,经常会有困惑,客户或者文案给的乱糟糟的文字,怎么把它处理成一个良好的具有传播属性的画面呢?这也是今天课程想要去解决的问题。本篇教程分为以下几个部分,首先是如何快速的整理文案,其次,确立信息的优先级,然后,?#19968;?#35814;细的介绍几种常用的版面划分方式,这也是本节课的重点,最后再给大家分享一下作图之前,绘制手稿的思路。好的,话不多说,开始我们今天的课程吧。

提到整理文案,不知道小伙伴们有没有联想到,现在特别火的整理收纳术。估计有强迫症的同学看到整理后的?#35745;?#20250;非常舒服。

它同样是要求整理人拥有一个划分区域,归类物品和注意物与物之间距离的能力,是不是和我们整理文案很相似呢?

整理信息

开始设计之前先整理信息,很多时候我们接手的文案,都是零碎甚至复杂的,这个时候就需要我们在开始设计之前,先整理信息。

我们可以看看日本著名的设计师,佐藤可士和,他是如何利用整理术来处理信息的。

很多小伙伴,是不是在一拿到文案后就直接开始设计呢?

前期准备阶段,在我们一接手客户或文案给的文字资料时,我们对这个资料的认知是模糊的,有时候只是大体知道方向或行业是什么,这个时候就需要我们运用整理术,先来整理好文案。

信息整理完毕后,原来模模糊糊的文案,现在变?#20204;?#26224;可见,但是它们仍然是一个没?#26032;?#36753;顺序的状态。

这个时候我们就要把相关联的信息整理组合到一起去。

信息已经全部都按照关联性分好组了,我们就开?#23478;?#32452;一组进行整理,这个时候就需要我们设定好整理的优先级。在这里从一号三角形开始整理。

好的,现在每组信息里面的层级,我们也都划分的清晰明了了。

到了这一步我们,再仔细的了解一下文案,这几个组之间的关系是什么,在这里我们看到三角形加圆形等于正方形,也就是说这里面正方形组的信息是最重要的。

所以我们在开始做图的时候,就要把正方形组的信息放置在版面最显眼的位置,这样最有利于信息的传播。

通过上面的演示,我们学习到了,在正式开始设计之前,需要有前期准备信息阶段,信息整理完毕后观察信息,列出?#34892;?#20449;息,设定整理的优先级,理清因果关系,?#39029;?#26412;质,这6个步骤,来逐步的整理信息,这个过程也是设计师逐步明白客户需求和设计思路的过程。好的,那接下来通过案例部分,手把手教大家整理文案信息。

大多数情况下文案信息是不完整的,这个时候就需要我们自己进行一定的头脑风暴,去寻找和补全信息,就是把模糊的信息逐渐变?#20204;?#26224;的过程。

在我?#21069;研?#24687;补充整理完毕以后,我们开始分析信息,?#30740;?#24687;划分成一个一个小组。

在这里我们看到,高亮的文字很明显是配料表,我们把它与其他信息区分开。

这一部分的高亮信息,是甜品的介绍,我们同样把它与其他信息区分开。

这里由于有提示,我们?#26448;?#24456;快的区分出来,这个应该是属于注释的那个部分。

在这里我们把整理好的信息,分别拿出来标上符号,按照之前讲的顺序来进行整理。

现在来看一下第一组的文案,从文案中可以知道,这个关于甜点的配料表的信息。

整理完成后,大幅度的提升了信息的识别度。

我们再来看第二组,这是一整段关于甜品的介绍,一整段文字阅读起来,会产生一定的阅读困难,这里我们将文字断行。

信息整理完毕后,大大降低了阅读的?#20064;?/p>

当三组的文案全部整理完毕后,我们就很清楚的知道,这三组文案分别想要传达的内容了。它们分别是?#21495;?#26009;表,介绍和注释。

这里就需要我们理清它们三个的因果关系。我已经把所有可能的组合都列出来了,首先去掉以注释为主的信息组合。

现在,我们已经理清楚因果关系了,也就顺理成章的推理出来了它们的本质。

1. 重新整合

将杂乱的文字信息重新组合

在这里我给大家提供两个信息整理的思路,第一个就是「将杂乱的文字信息重新组合」。

我们还是以刚才整理好的配料表为例,现在的文字依然存在辨识度的问题,作为设计师,就要求尽可能的提高辨识度,这就需要继续整理这个文案。

我们将名称与重量重新组合,不同种类的信息进行成组区分,提升整体文字的识别度。

2. 提炼关键信息

第二个信息整理思路是将文本的关键信息提炼出来。

我们再一次观察这个甜点的介绍文案,发现这个文案可以分成四个部分,口感描述、外观描述、制作成分、流行趋势。在这里我们在外观描述中提炼出一段文字,作为这段话的摘要部分。

这样在阅读这段信息的时候,就可以更加容易的理解整段文字的内容了。

按照上面的步骤,一步一步整理,整个过程也加深了我们对文案的理解,那么既然已经明确了,一个文案中的重要信息是什么,下一步需要做的就是如何把这些信息传达出来,这也就进入了我们今天的第二部分的内容了,如何确立优先级。

3. 确立优先级

通过上面的学习可以准确的找到重要信息了,现在需要做的就是确立这些信息的优先级别。

这里有四个一样的苹果,我们并不能从画面知道哪个苹果是最重要的。我们把这个苹果放大,立刻就可以知道它优先级别是最高的。

这个道理同样适用在文字组上,单纯看这段文字,我们并不知道哪一句话是重点内容。

我?#21069;?#29031;同样的方式,把最重要的信息放大,就可以知道它们的优先级别。

这里有三台无人机,同样发现不了哪一个是最重要的。但是我们只需要改变这个无人机的位置,就可以知道它们的优先级别。

调整位置的思路,重新来修改文案,达到明确优先级别的目的。

在这里有三个在举重的人,同样都分不出来他们的优先级别。去过健身房的同学,应该深有体会,在健身房你能举起的重量越大,越能吸引别人的目光。现在给中间的人,举铁的强度加倍,是不是优先级别立刻就显现出来了!

我们继续以这段文字为例,可以是通过改变颜色或者增加字重,来改变文字的强度。

版面划分

通过上面的学习,我们知道了可以通过调整信息的大小,位置和强度来确定信息的优先级别,这个不仅仅只适用于文字信息,同样适用于?#35745;?#20449;息,这样在规划版面的时候,就可以按照信息的重要程度合理的放置信息了。根据版面中的信息的多少,版面划分的方式分为:二分法、三分法和四分法,通常来说重要的信息在版面中所占的面积和比例也是最大的,次要信息?#28304;?#31867;推,所占面积?#26469;?#20943;少,但并不是绝对的,这个同学们要明白。那么接下来,我们了解一些常用的版面划分的方式。

1. 二分法

首先我们来看一下二分法的几种形式。

在这张海报中,主视觉采用字叠图的方式作为主体,置于画面下方,占最大的面积和比例,其余文字放在上方,这就是典型的二分法画面。

2. 三分法

接下来,我们来看一下三分法,这里的信息层级也就进一步丰富起来。

这个画面中主视觉占版面最大面积,主要信息和次要信息也会一目了然。

这个画面同理,主视觉占据画面最大面积,主要信息和次要信息,虽然面积占比区分不大,但是通过文字的大小对比,?#34892;?#30340;确立了信息的优先级别。

在海报中三分法也是很常见的方式。

相关推荐
如何让网站首页设计得极具吸引力?
移动终端全新界面设计语言“Metro”简析
淘宝品牌名店的BANNER广告设计评价及分析(2)
优秀排版设计的8条建议
版式设计:深入浅出学会网格系统的应用
如何学会版式设计中的主要元素提取?
文字排版设计:如何设计出吸引视线的标题?
如何用超大字体元素应用在设计作品集类的网站?
分享:设计法则之恐惧留白 Horror Vacui
什么是“整体网页设计”?整体网页设计工作原理
版式设计:不一样的网页布?#31181;?#26041;块布局”
分享:99%的人在做网站设计时都?#20040;?#20102;留白!
留白设计:设计中的留白要如何做?
8种网页和APP背景设计趋势分享
设计分享:点线面在版式设计中的作用是什么呢?
版式设计:什么是“三率一界”?
完美构图之?#24179;?#20998;割在界面设计中的应用
新手教程:9款经典网页布局设计推荐
中文网页设计排版之破格的好例子
对齐是排版的基础技能 也是设计师的基本功
设计基础功!彻底掌握设计中的对比原则
设计教程:写给网页设计新手的10条实用法则
四大设计趋?#24179;?#20320;如何你玩转2015年网页设计
网站策划:帮你掌握图文排版的5个小技巧
腾讯设计实战!响应式Web布局的概念和实践方法
7个技巧帮你设计出用户体验极佳的网页表单
UI布局设计?#20309;?#31456;列表与内容详情页设计案例赏析
Web页面中的表格设计如何才能做得更好?
高用户体验的表单设计该怎么做?
网页首屏设计:让用户一见钟情的设计模式是什么?
UI设计教程:从零开始做APP之界面设计篇
跨屏幕的响应式设计如何做好用户体验?
移动端详情页设计:排版 构图 色彩 氛围点缀 字体怎么做?
电商设计教程:电商APP首页设计总结

精?#37322;?#33616;

热门教程

王牌战士上线了吗
手机app制作平台 重庆时时开奖直播 西宁按摩小姐联系电话 欢乐生肖注册 王者荣耀芈月被× 澳洲幸运5是正规彩票吗 电子游戏平台抢庄牌九 百老汇博彩 好运来电玩城安卓版 重庆时时5星走势图星