打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
好文丨好看不如耐看,四步打造幻灯片精致感(上)

精致者,

精于术,达于雅。

幻灯片亦如此。

设计的精致在于心思细腻,独具匠心的优雅与创意,是对信息再编译后的萌发新意

好的片子从来都追求整体和谐,局部突出,重点清晰,细节考究以及图形化表达五点,将这些要素的融合,最终便能给人以精致之感。

精致感说起来有点抽象,

但它也可以是具象的表现。

回到那个问题,

什么是精致感?

这里,我们用拆字法逐层解剖精致感的内核。

精致从字面理解可以有三层含义:

选取和设计最为接近的第三个阐释——精细雅致,我们将精致拆分为精细和雅致两个方面,前者关注考究细节,后者追求雅致格调。

综合来看,精致感往往体现在设计作品的细节、协调度以及整体的完成度上。



01.

准确和精确

优秀的页面设计应该是精确到像素


一个页面看上去不舒服,常常是细节出了问题。

让一个画面变精致感首先就得去掉这种突兀的不和谐,这就要求从微观的层面去处理图形、字体、线条、图片等版式构成要素。

这些元素是幻灯片的设计分子。

只有每个构成分子都符合正确规则,由其建构的物质(页面)才能稳定和谐。

从元素样式到位置分布,页面构成元素的规则非常多。

我以内容处理标准元素细节参数为依据分为准确和精确大类。

精确性关注角度、位置、时间、间距、衔接等微小细节点,而准确性关注由文字层级处理和图片配合的契合度问题。

这里选取几种典型细节做简要说明。

1)衔接处:精细处理

页面设计中都希望一张全图解决问题,但图片质量往往不如意,需要进行多图的拼合。

拼合处理就带来了图片间的衔接问题。

比如下面世茂案例,

@世茂前海中心

原图将前海中心置于右侧做为主体,为了平衡左侧空间和营造氛围采取了两图拼接的处理。整体蓝金色调性十足。由于拼接的两图颜色区分较大,未作特别处理,文字直接覆盖在接缝处,整体看比较单薄。

我们在接缝处引入金色渐变条纹作为修饰,增强过渡的边界感,同时也起到为中间文字引导视线的作用。

@世茂前海中心

从整体视角上看也会更为精致,特别是第三份接近纯黑色背景的页面

画面整体前后对比

色块本身都具有很强烈的填充、装饰、提升画面细节感的作用,当我们作品不够精致时,不妨试试运用这类修饰性元素。

修饰性元素除了色条外,还常使用光效和线条。

比如这种英雄联盟的海报,将光效用于多角色之间的分割上,对黑金质感起到非常好的增强效果。

@League of Legends Campeones

如果把光效去掉,可以看到人物间融合整体性更高,但两边的切割很硬,显得不够精致。

@League of Legends Campeones

对边界的修饰,除了突出页面某区块或者个体元素外,还可以增强画面整体感,实现图文的精妙过渡,最典型的就是水墨笔画效果

@RED VOQZ

另外还可以对画面的左右边界做模糊处理,让元素融于背景以增强氛围感。

@华润集团

对链接精细处理重点在于对画面的分析,如果拼合的两个体视觉区分过大,则用元素修饰增强差异感;如需要突出画面主体,那么可以模糊边界,提升整体感。

这种处理手法,也可以做反向应用,通过边界处的完美接合,实现画面的整体贯通。

比如下面这张电视页面,极光由星空一直延续至屏幕上,浑然一体,仅由亮度简单划分出电视边距,呈现出电视屏幕“方寸之间,万千世界”的美妙。

@小米电视

2)角度:两线之交,寻找最优值

角度是画面构成的隐形常客。

从版式结构到元素分布,从线条方向到图形组合,往往都会出现角度身影。

在几何数学中,角由两条线构成。

线条是点的延伸,隐藏着方向性,不同角度的线会产生迥异的画面感受。

  • 水平线
    具有平静、延伸、简单、广阔,给人放松感。
  • 垂直线
    具有挺拔、坚毅、力量上升的感觉,产生一种男性美的表现。
  • 斜线
    能产生加速、不安、运动的感觉。
  • 曲线
    具有运动、圆滑、完整、变化,给人种合理、规律的感觉。

我们用手机的设计展示页来解释角度的问题。

相同的图文元素,仅仅由手机图样的角度差异就造成了完全不同的画面效果。第一张硬朗而空阔,第二张相对中正,第三张画面柔和而饱满。

角度对画面的影响常常通过其他参数来实现,手机的案例就是通过影响图版率而产生视觉差异。

可以看到垂直角度越大,手机占据的空间就越小,空白区域越大,反过来,当角度接近45度时,手机占据的空间达到最大,画面最为饱满。这种现象在超宽屏幕中愈发明显。

另一个例子,两手机在中间形成一个X型图样,在角度较大时,两侧会很空。

@华为手机

适当调整角度大小,画面就饱满很多,两机争锋的尖锐感得到增强。

至于曲线,在宽画幅里曲率越大越为和谐,也更加开阔。

上面两张图,在饱满度和画面张力方面下图会更好,但就星空场景而言上图明显更为真实大气。

3)图文:既要并茂,更要相符

现在幻灯片制作者,只要掌握了基本常识都知道:

文字单薄,图片来凑。

图片的视觉形象能弥补文字描述的不足,从而做到图文并茂,表现十足。

现在很多幻灯片教程乃至发布会keynote都在做无意义融合,创造粗糙细节来拼凑设计感。

比如下面这个案例,图文的处理不和谐,文字金色样式很精细,但背景图片过于粗糙。图文表意不符,基本没有太直接联系。

图片来自网络

另外一个比较好的图文配合例子,来自鹅厂。

以展望为题,从人视角出发,用辽阔的道路和远方天际光线作为修饰,相对切题。

四张星空图片融合,大气恢弘,边界过渡处理非常和谐。在色系上,红黄蓝紫齐备,有红火有深邃,某种程度上也暗合一整年里的复杂经历。

左侧宫殿建筑,契合故宫概念,右侧流光四溢,正如灵感迸发。

星空爆炸,也表现出全新期待的动态势能。

图片的准确使用,图文的完美契合,会让人不自主产生“妙啊~”的感受。

譬如前几年间,由环时互动运营,在微博独领风骚的杜蕾斯品牌。


@杜蕾斯微博 / 环时互动

文字造概念,图片造情趣。

图文配合非常秒,内涵十足但不至于色情到突破常人的接受度。

另一个李维斯的例子。

以“最贴身的牛仔裤为题”,不同图片配合完全呈现出迥异的海报效果。

第一级,以裤子入题,一条牛仔裤自由奔跑,运动舒适。

第二级,从贴合入手,由物及人,用穿着紧身牛仔裤的曼妙女郎女性展示“贴身“含义。

第三级,不拘泥于牛仔裤,从贴身联系到身体,创造一个身体S曲线来表现“贴身”。深邃而高级,精致感十足。

综合来看,这里面暗藏了图文配合的三个层级:

  • 展示
    单纯摆放和文字内容弱相关的图片
  • 解释
    图片对文字的核心概念做出贴切解释
  • 创造
    超越文字概念本身,创造独特意义

图片是文字符号的具象,描述言语无法表现的真实故事或光怪陆离。

文字说明是图片形象的延续和画面内容的升华,交待画面无法表现的信息量。

文字高歌,图片伴舞。

二者相辅相成,才能共同创造具备表现力的视觉画面!

4)信息层次:无层次不耐看

耐看,一方面说明着设计被观看时间长;

另一方面意味着画面层层递进,暗藏精妙,给人留以探索感。

这就是画面的层级。

在幻灯片里,层级又可以简单分为文字信息层级和图形图像层级。

前者决定阅读顺畅度,后者影响画面可看度。

关于文字的信息层级,我在「 从文本到图形,PPT信息可视化处理的3个层次 」一文中有详细阐述。



我们以信息在画面中的重要性和必要性两个维度建立四象限图,形成「重要——不重要」「必要——不必要」的四种类别。


这里先解释下必要和重要的区别。

如果要素是必要的,那么指它是达到结果的必然条件;相对的,重要是指发挥关键作用的影响因素。

简单来说就是,必要是必须要保留,而重要则是需要重点突出。

对于必要又重要的信息,

无须多想,放大加粗!例如一级标题和关键数字。

对于必要但不太重要的信息,

比如品牌logo、页面序号等,我们不希望用户注意到他们,但是这些信息又不得不存在,那么就要弱化展示这些信息。

另外一种重要但不必要的信息,

主要是指解释说明性的内容,这类信息有些可有可无,要依据相应的情形增删。

不重要也不必要的信息

不用犹豫,直接删除即可。


以上是理念解释,我们用实例来详细说明画面的层级问题。

重要数字内容放大加粗,次要数字缩小加上一定透明度,解释性文字使用没有白色明显的灰色和蓝色。文本信息非常简单,层级也很清晰。

图形图像层级方面,以大楼作为视觉主体,Logo用于弱化修饰,低可见度的元素作为背景增加细节,文本和图形穿插编排,整个页面层次非常好。

文本信息层级方面,主要语句用两种字重拉出层次,主要数字突出,解释性文本弱化。

图形图像层级方面,创造了2.5D的柱形作为焦点图形使用,背景沿袭科技元素的使用,Logo多角度变化。亮部在柱形的浅蓝处,暗部在背景的深蓝处,色彩层次也很好。


这页使用了一个建筑作为背景,Logo的线条穿插修饰,文本的信息层次一如往常。

简单总结,文本的层级处理在于实现三点:

  • 第一,重点信息第一眼吸睛
  • 第二,核心标题和正文可见
  • 第三,解释性内容适度弱化

02.

丰富和细腻

光影修饰,无中生有

1)光效修饰:自然生动有质感

光效是营造页面质感的密钥,通过对几种光的使用,可以让背景、画面主体更加精致。主要的光效类型有:修饰光、背景光、轮廓光、模拟光、自然光等。

a. 修饰光

对物体的局部添加的强化塑形光线。

常用在发布会的产品精修中以增强产品质感,体现工业设计的精致感。

b. 轮廓光

指勾画物体轮廓的光线,以逆光、侧逆光为主。

多见于暗色产品类的整体露出。

或者是人物的剪影,在弱光下形成人物轮廓,同时保留了部分轮廓细节。



c. 背景光

灯光位于被摄者后方朝背景照射的光线。

在设计处理上,以画笔对背景进行提亮,通常用来突出主体或美化画面。



d. 模拟光

又称“效果光”,模拟某种真实效果而添加的辅助光线。

常用产品的气动、电流、运动、操作等原理演示中。


e. 自然光

提取自然中的某种光效特征,用软件或画笔来仿真,让画面更为生动通透。

最常用的有极光、彗星流光、星球轮廓光等,这类光的使用能让原本相对呆板中正的页面变得更为有趣。


2)阴影修饰:最真实的空间代入

如果说光是黑暗里绽放的烟火,那么阴影就是白日中害羞的精灵,含蓄低调但无处不在。

阴影能使物体突破平面,构造真实的三维空间与相对位置,同时阴影的使用也使让页面显得更为细腻。

@畅呼吸

光与阴影是相伴共生的孪生兄弟,二者相互搭配,让空间质感达到新高度。

@小米手机


本文经授权转载自公众号魏不贰
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
职场PPT必备的7种“思维武器”
版式设计,这样做才高级!
看完这篇,才发现自己真的不懂极简PPT!(醍醐灌顶)
版式设计四大原则
4个被忽视的冷技巧,却让你制作PPT的效率翻倍!
别再说你不会排版,
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服