P汤写下这篇心得,是最近阅读***的《版面设计的原理》一书有感。
P汤在《演绎生动Excel图表》中受到#秀图表#的启发,同时也有@Lonely_Fish发起的@麦田计划 以及@拆书帮 的带动,于是制作了《西方语系字体》信息图表,发觉在制作过程中的版面设计优化过程很有分享意义。
因此本文采用P汤用PPT制作《西方语系字体》信息图表的其中一部分的制作步骤,作为分享,同时也向各位大神求经。
一、确定各种需要呈现的内容。
例子中,P汤要排版的内容,是P汤用PPT制作《西方语系字体》信息图表的其中一部分,确定了这种模板后,对于整个信息图表的设计有很大好处。
例子中,排版内容是介绍西方语系字体中的“old style”介绍。
其中:
1、 “根据‘衬线体线条宽度的差距’分类”,是old style和modern style的分类标准,作为备注呈现;
2、 “OCEAN”,是作为衬线体old style的经典例子(old style中,字母O显示出非对称的倾斜,而其他字母具有衬线);
3、 “①具有传统的亲切感,与②易于阅读,常出现在长篇文章中”,是衬线体old style的特点与使用范围;
4、 “formal与traditional”,是衬线体old style的呈现风格,其中formal约占30%,traditional约占50%,所以在设计中要想办法将其呈现。
二、选择需要重点突出的内容。
版面设计的重点,不是为了表达技术的高超,而是为了让受众更容易、更准确地接受到需要传达的正确内容。所以在所有美化之前,我们需要将版面设计需要突出呈现的内容通过字体、大小、粗细、颜色或者象征等方式作出编排。
例子中:
1、 作为标示的“old style”需要突出提点,起到提示作用,所以加入淡淡的背景填充;
2、 “OCEAN”需要突出细节,显示出与modern style的区别,所以采用大号字体和相对应的字体,并且为了方便讲解,同时加入了倾斜的虚线;
3、 “formal与traditional”通过进度条的方式象征呈现,直观、美观;“根据‘衬线体线条宽度的差距’分类”作为备注,字形可以较小,字体采用易于阅读的微软雅黑与全文向对应,体现统一性;
4、 “①具有传统的亲切感,与②易于阅读,常出现在长篇文章中”作为补充的提点,可以与备注进行同样处理,使得整个排版详略有当。
三、搭配恰当颜色衬托内容。
第三步只有一件事:配色。颜色的搭配不是一件容易的事,或者说是它是一件易学难精的事情。P汤配色还没有特殊的独到之处,因此例子中,采用的是Office2010的PPT中设计→颜色→质朴(主题颜色)。淡蓝色色系让人看着舒服,同时与OCEAN的含义搭配比较和谐。
其中:
1、 需要突出的“OCEAN”采用明度较低的深色,“old style”的文字框采用比背景更深色的填充效果起到突出效果;
2、 “formal与traditional”配色中,背景与字体颜色相间,提高阅读性。
另外,Office2010的PPT中,有一个比较方便的功能。设计过程中,“设计→颜色”后,只要原本采用的是主题颜色填充,我们就可以通过移动鼠标到特定主题上改变对应的颜色。
如:由“质朴”主题颜色,改成“中性”主体颜色。
四、排版创新的尝试步骤。
这是P汤在例子中,排版创新上进行的一个尝试,可以说,个人觉得是一个失败之作。P汤在创作时,曾经将所有元素胡乱搭配,采用一些有根据的方法,但却没有结合整体,所以做不出相应、完善的效果。
其中:
1、 右上角元素和左下角元素贴边,“OCEAN”用填充突出,并将所有元素放进边框中;
2、 “OCEAN”的填充,左边框突出了版心,P汤自认为这样能产生突破版面的效果,给人刺激感,实际上这种方法的确可以,但在例子中,或说在《西方语系字体》的信息图表中,这种方法没有得到很好的应用,反而使整个《西方语系字体》的信息图表版面造成倾斜这种让人不安的效果;
3、 备注“①和②”,贴近“formal”与之等高,紧凑且详略得当。
实际上,将版面这样排版后,P汤发现整个排版方面非常不适合人的阅读习惯。明显的,这种设计下,受众第一眼看到的是“OCEAN”,其次目光移到“old style”和备注上,在明白了本字体的分类后再次将目光投送到“OCEAN”,最后才投放到右下角。
因为视线移动的反复造成的阅读厌烦,是这个排版的失败之处。
五、吸取教训符合规律的调整阶段。
第四步中,P汤发现视线移动的反复是这个排版的失败之处,因此作出了调整。
其中:
1、 “old style”和备注放在左上角,同时因为二者具有逻辑上的联系,因此紧凑地放在一起,顺应了逻辑上的“old style是根据 ‘衬线体线条宽度的差距’分类”这一内容,而且二者突出了边框也有突出;
2、 “OCEAN”放在中间,突出细节,并且引导和承接视线的移动;
3、 “①和②”、特定二者放在右下角,作为视线的终点,也体现了自身作为补充的地位。
例子中,P汤认为上图已经属于较好的设计优化,而为了规整,P汤做了少许调整,其中:
1、 左上角放入边框中,使得整个信息图表具有统一性,但多了一份稳重的同时也多了一份呆板,却又避免了杂乱,实在需要大师们解答优劣;
2、 右下角二者放出了背景框外,使得画面稳重中带有突破,同时减少了上图只有美化意义的、容易令人误解的排版。
这个地步为止,整个版面设计优化已经完成了。上两幅图P汤认为属于较好的设计优化,但具体哪种更好,则更应该看哪种情况更适合采用了。
删除广告链接部分---apirl2008 |