精致者, 精于术,达于雅。 幻灯片亦如此。 设计的精致在于心思细腻,独具匠心的优雅与创意,是对信息再编译后的萌发新意。 好的片子从来都追求整体和谐,局部突出,重点清晰,细节考究以及图形化表达五点,将这些要素的融合,最终便能给人以精致之感。 精致感说起来有点抽象, 但它也可以是具象的表现。 回到那个问题, 什么是精致感? 这里,我们用拆字法逐层解剖精致感的内核。 精致从字面理解可以有三层含义: 选取和设计最为接近的第三个阐释——精细雅致,我们将精致拆分为精细和雅致两个方面,前者关注考究细节,后者追求雅致格调。 综合来看,精致感往往体现在设计作品的细节、协调度以及整体的完成度上。 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. 模拟光 又称“效果光”,模拟某种真实效果而添加的辅助光线。 常用产品的气动、电流、运动、操作等原理演示中。
提取自然中的某种光效特征,用软件或画笔来仿真,让画面更为生动通透。 最常用的有极光、彗星流光、星球轮廓光等,这类光的使用能让原本相对呆板中正的页面变得更为有趣。 2)阴影修饰:最真实的空间代入 如果说光是黑暗里绽放的烟火,那么阴影就是白日中害羞的精灵,含蓄低调但无处不在。 阴影能使物体突破平面,构造真实的三维空间与相对位置,同时阴影的使用也使让页面显得更为细腻。 @畅呼吸 光与阴影是相伴共生的孪生兄弟,二者相互搭配,让空间质感达到新高度。 @小米手机 |
|