排版《玉女心经》之版面率&留白
许久不见,甚是想念~
各位父老乡亲们,寡人又来啦。
今个儿,咱们继续修炼排版神功!
今天,咱修炼版面率&留白!
按照惯例,同样先来看哈这俩问题~
带着问题去看,强制让众爱卿思考一波。
下面俩版面,哪个给人更精致的感觉?
那必须是「优雅含蓄C」。毕竟她优雅含蓄,是名媛(拼的),精致是人家基本功~
放下皮鞭,寡人认真了~
为啥「优雅含蓄C」更精致?主要是因为C留白更大!
留白大了,就给人更精致的感觉。
反观「热辣滚烫A」,太过饱满,留白比较小,自然精致感就差了~
这里寡人要插句话了~
往几期,不少爱卿在评论区争论,
像这种例子哪个更好~
拿这个例子来讲,
肯定就有爱卿说:“我喜欢A,所以C不好。”
或者,“我喜欢C,所以A不好。”
这呀,就理解错寡人的意思了。
风格本身是木有好坏滴,
根据项目选择合适的风格,
再根据风格设置相应的图版率、跳跃率、留白等要素,
才是咱这系列文章的奥义所在。
所以鸭所以,
根据主观喜好来争论好坏,Duck不必~
毕竟本猫几分钟(寡人就是快)出品的案例,
那必须都是相当华丽且优秀的,
能说明相应要素对版面的影响就够啦~
再看第二个问题~
下面俩卖菜的名片,你会找哪个来买?
那肯定是「大声吆喝A」 呀,
毕竟C爱答不理,没人喜欢~
好吧,看在各位在挥舞皮鞭,
寡人怕了,就容我解释一下~
「A」的留白较少,比较饱满,给人的感觉就很精神,很热情。
而且留白少也会给人更实惠的感觉!
买菜找「小A」,体验肯定棒!
而「爱答不理C」,看这名片真的是爱答不理呀!
大量留白,品质感虽然很强,
但,你一卖菜的搞这么高端干嘛。
看这名片我还以为要去买奢饰品!
总之看上去就很贵且不近人情,没法让老夫讨价还价,
所以拜拜了您嘞,俺还是去找「小A」买~
各位爱卿也看出来了,对他们版面感觉造成影响的就是留白!
但里面还有一个隐性的因素,那就是版面率。
咱家的就先来讲讲,撒子是版面率~
众所不知,
版面四周,
是有页边距的。
学名叫天头、地脚、切口、订口…
这些太繁琐,咱不管,就叫它页边距~
(化繁为简,乃大猫山人之绝学~)
除去页边距的部分就称之为版心~
版面率,就是版心的大小。
所以
版心大,四周的留白就小~
版心小,四周的留白就大~
如果
版心最大,那就是满版。
版心最小,那就是空版,也就是白纸一张。
满版的版面率为100%,空版的版面率为0%。
相信众爱卿都理解版面率了,那么版面率就说完了。
What?这就完了?
大胆!你竟然不讲版面率怎么用~
别急别急,版面率的大小对版面的影响,归根结底还是留白的问题~
所以理解了留白,也就理解了版面率!
不止是版面率。
前几回,在寡人的带领下,
众爱卿都修炼了表现力、图版率、文字&图片跳跃率。
但在这些影响版面的要素里,有一个共性,那就是——留白!
万变不离其宗,说的也是——留白!
理解了留白,前几回的知识点也就能更深刻的理解了。
告诉本宫,留白怎么用?
运用留白的关键,主要是理解留白多少对版面的影响。
你拿着蜡烛挥舞皮鞭,
“这么重要的东西,还不赶紧告诉本宫!”
别打,别打,这就告诉~
留白对版面的影响,众爱卿记住两点就可。
留白越大,越安静、越典雅,品质感越强。
留白越小,越活泼、越亲和,促销感越强。
根据这两点,咱先来看一下,留白跟前几回所学招式的关联~
文字跳跃率中有这么一例子~
A显得比B更为安静,因为A的文字跳跃率比B低,但本质是留白!
留白比B大,所以才显的比B更安静~
图片跳跃率中也有一例子~
同样是A显得更安静更典雅,因为图片跳跃率比B低,但本质依然是留白~
A留白比B大,所以依然显得更典雅~
图版率中又有一例子~
A的亲和力没有B高,除了图版率的因素,
同样是因为A的留白比B高,所以比B高冷,那是绝对当然的~
表现力中又又有一例子~
A比B高端,除了表现力比人物低,也是因为留白比B大~
看了就觉得我等P民,是买不起A的~
如果一个设计作品是满版,但图片中主体比较小,表现力低,也可以视为大面积留白哟!
像这个作品,严格意义上来说就没啥留白,毕竟整个版面都是图片!
但是人家图片是空旷的背景,
透气,表现力也就不高,自然就显得很宁静。
所以,
设计——还得感性与理性结合。
所以呀所以,
学设计,莫学成数理化,别像像记公式一样学设计,
老夫说:设计得灵活!
(像本猫一样,可以是糙汉子,也可以是萌妹纸,)
你又说了:“既然要灵活,那这些理论有啥子用?”
这些理论自然是起参考的作用。
(咱得站在巨(da)人(mao)的肩膀上,才能看的更远不是~)
拿这个海报来说,想让她更安静、更典雅得怎么做?
自然是继续增加留白,减少版面率了!
简单处理了下,凑合看看,重在理解~
像这个,图片经过裁剪,更小了。
留白也就增加了,版面率也就更小了
给人感觉也就更安静、更典雅了~
这呢,就是理论的指导作用~
哎呀,扯远了,咱话说回来,
继续讲讲留白那两点~
留白越大,越安静、越典雅,品质感越强。
所以呀,当你想传达这种气质的时候,就在作品中增大留白吧!
比如你想传达强烈的品质感,高端、买不起,就用大留白,如下~
比如你想传达安静典雅、或者让人想象的一种意境,也用大留白~
再来看第二条:
留白越小,越活泼、越亲和,促销感越强。
所以呀,想表现这种感觉,就在版面中减少留白占比吧~
比如,想要活泼点,就减少留白!
想要促销感强一点,也减少留白咯~
说了这么久留白,
寡人再说道说道~
固然留白很重要,
但留白不能完全取代,
前几回的秘籍招式。
做设计的时候,
用什么图,
什么图版率,
什么跳跃率,
留白设置多少,
这些综合考虑,
才是神功大成之关键~
看寡人说的这么明白了,
要不,各位爱妃~
咱把蜡烛和皮鞭撤了?
以上~
虽写了这么多,但咱也不知道咱这套《玉女心经》有木有把版面率&留白说清楚,
所以有木有说明白,留言告诉寡人吧!
这篇文风这么搞,咱就要这种不正经的,轻松愉快的氛围。所以,点个赞吧~
现实世界的画布——解读地图设计(上)
Part 1.地图的发展
地图作为记录地形传递路线信息的载体,在人类文明中一直扮演着重要的角色。其承载形式一直紧跟着时代技术的发展而变化,从石板、动物皮革,到丝绸、纸张。当互联网走进千家万户,地图也步入电子化时代。
相较于纸质地图,电子地图优势显著:更新速度快、获取信息效率高、更清晰、可交互等。电子地图(后文简称地图)的出现也影响着人们的出行方式,尤其当智能手机普及,我们可以随时查询地点、发起导航,再也不需要提前记下高速出口和转向路口了。
Part 2.地图在滴滴的重要性
滴滴拥有网约车、代驾、骑行、公交、自驾导航等众多业务,是一站式出行平台。而地图作为承载出行服务的重要载体,横向支撑着各业务线的发展。以网约车业务为例,调研结果显示绝大部分乘客都会关注并使用地图。
随着各业务线对体验的要求不断提升,单一的地图模式已经不能满足业务诉求及用户需求,需要进一步细分场景、精细刻画地图样式,于是地图的设计也变得愈发重要。
Part 3.解构地图
地图承载的信息种类复杂、数量巨大,初期可能会找不到设计切入点。我们可以先了解下它的定义和实现方式,或许就能从中找到答案。
定义:地图是依据一定的数学法则,采用地图语言,经过制图综合来表示地球表面的图形。
实现流程:
-
采集真实世界的地点信息,经过编译转化成数据
-
数据信息中包含了地点的坐标、分类、名称等
-
数据经过渲染形成可视化雏形地图
-
雏形地图经过设计最终变成策略完整、视觉美观的电子地图。
结合“从雏形到完整地图”这一步流程的实现方式,进而可将地图拆分为基础层、策略层和感官层。帮助各职能角色找到对应切入点。
基础层,指的是地图的数据和能力。数据大家已经有所了解了,能力指的是引擎渲染能力、定位能力、图像识别能力等。有了数据及各类能力作为基础,才能设计出信息精准、交互明确的地图。
策略层,则指的是如何使用这些基础数据和能力。地图数据量非常庞大,无法全部展示,需要结合不同的场景及用户需求,有重点的呈现。
感官层,便是我们给数据穿上的衣服,会根据品牌调性、对应场景诉求等去设计最终的配色、图标等。
解构地图后,我们不难看出,感官层是设计侧需要关注的重点层级。
Part 4.地图设计原则
– 元素分类
面对如此复杂的地图信息,为了梳理出清晰的思路,我们会对地图元素进行分类:根据数据的类别和呈现状态,可拆分为点、线、面三类元素。
点元素:地名、POI*等。数量庞大,是城市规模的体现,尤其POI信息,它是地图中颗粒度最细的位置信息。
线元素:道路、地铁线、水系线、铁路线、航线、边界线等。线元素呈现了道路的走向、区域的划分等,描绘出了城市的样貌。
面元素:陆地、草地、湖泊海洋、AOI*。面元素以色块形式出现,很大程度上决定了一张地图的色调。
*名词解释:POI, Point of Information的缩写,即“信息点”。一个POI可以是一栋房子、一个商铺。
*名词解释:AOI, Area of Interest的缩写,即“信息面”。指的是区域状的地理实体,如医院、小区等。
– 核心设计原则
从定义可以看出,地图是一种特殊的图形语言,是以上所有元素的集合体。相比我们所了解的UI设计、运营设计,地图有属于自己的设计原则。以下为大家总结了一些核心的原则:
1、符合制图学和公众认知
地图发展到现在已经成为了一门学科,我们会发现即使语言不通,拿到一张地图时也能看懂,这是因为有制图学和公众认知在规范着地图设计。如地图默认北向上、草地水系基本遵循物理世界的颜色、省界线是实线、停车场图标大多用P来代表等等。符合制图学和公众认知,大大降低了用户的学习成本和记忆负担,使地图可以作为一种世界通用语言流通起来。
2、保证识别度
地图属于信息类工具,其上出现的元素均需清晰可识别,保证可读性是最基本的设计原则。所以在设计时会限制颜色对比度、最小字号等,而具体规则会根据场景确定。
3、清晰有层次
地图的层次清晰包含了两个方面:信息主次清晰,视觉具有整体性。
信息主次清晰,地图信息庞杂,没有主次关系会影响用户的读图效率。在设计时需要考虑元素本身的特点、重要性,可通过颜色、icon/文字大小、线形宽窄等表达。做到同类元素有关联性,不同元素有差异性。同时,信息主次也会根据比例尺的变化有所调整。
视觉具有整体性,在滴滴的业务场景中,地图通常作为最底层组件出现,上层还会有很多业务组件。因此在设计时需克制用色,既要保证地图中各元素之间的区隔度,又要保证地图整体与其他业务组件拉开视觉层级。这样才能更好的突出当前业务模块的重点,提升整体的使用效率和体验。
4、细分地图模式
地图在各业务模块中应用广泛,用户需求也不尽相同,设计时需要根据使用场景区分不同模式。以网约车场景为例,业务信息始终处于上层,地图用来帮助用户定位、快速发单。因此,网约车场景的地图整体性强、色调偏冷、视觉层级后退,能更好的搭配网约车模块的整体设计,保证用户的操作效率。
5、具有品牌特性
品牌调性一直是滴滴设计层面非常关注的原则,品牌基因贯穿了所有产品,始终具有独特的视觉风格。遵循品牌的视觉语言,使地图可以更好的融合到产品中,保证了设计的统一性。
Part 5.还有后续哦~?
以上给大家分享了干货满满的地图基础知识和通用设计原则,希望帮助大家更好的了解地图设计。同时也请大家继续关注CDX创意设计中心公众号的下一篇文章,我们还会再奉上一篇更加实用的地图设计案例,结合本文中的设计原则,手把手教你如何从0到1设计地图。敬请期待!