主页 > N卫生活 >写给简报做不完的伙伴 >

写给简报做不完的伙伴

写给简报做不完的伙伴

如果你是一个三天两头就要做简报,或者是一个怎幺排简报就是觉得哪里不自然的伙伴,就花点时间来阅读这篇文章吧;这几篇文章会用一个系统化的方式带着你用…偷懒到不能再偷懒的方式来完成你的简报排版,然后接下来如果运气好的话可能还会看到一些和配色、字型搭配相关的有趣内容。

Hello,我是 Samuel 高玉璁,喜欢尝试新鲜的事物以及跨领域的合作;目前是一位对于设计与使用者体验相当有兴趣的 iOS 工程师 ,同时希望持续的写作能够带来更多的分享与讨论,有任何的问题或是单纯想聊聊都欢迎直接加 Facebook 来交个朋友喔。

咳咳,前段时间因为实在是太忙,所以文章的更新似乎有点慢下来的趋势,不过这次总算又有新的内容可以跟大家分享啦!

在準备这次简报的过程里面,不知道为什幺突然有个想法 →能不能利用「介面上常常会使用到的隔线系统或者 1/3 等分对齐的概念」来进行简报的排版呢?于是我就果断的关掉了 Keynote,打开了 Sketch,把 16: 9 的简报画面切成如下图 9×9 的区间:

写给简报做不完的伙伴

同样 9×9 的效果在 Keynote 里面可以透过打开选单中的显示方式 → 显示尺标,配合拖拉出来的参考线製作:

写给简报做不完的伙伴
 写给简报做不完的伙伴写给简报做不完的伙伴注:在实际排版上面也许会有更多更好的排版规则或者比例,因为小弟非设计相关领域背景出身,就让我们先一起用最简单的方式来做尝试吧! 单张图片的排版

在完成 9×9 的版面分配后,接下来的事情就变得相当简单 →

我先尝试把一个灰色的色块假装是图片放置到简报的画面上面:

 写给简报做不完的伙伴

试着破坏色块来做出一点简单的变化:

 写给简报做不完的伙伴

接着让我们来加上文字的内容,注意, 在刚开始尝试排版时尽可能的让文字跟画出来的格线是对齐的 ,如此一来画面的整体稳定性会更强。

写给简报做不完的伙伴

 最后让我们把格线关掉,然后放张图片上去来看看实际的感觉如何 →
写给简报做不完的伙伴 

嗯…感觉图片很重要;我们可以发现,透过这样简单的原则,画面的主体就可以很乾净地呈现在画面上方。

随着熟练度的增加,同样是一张图片的样式,我们可以来试试看不同种类的文字排版:

写给简报做不完的伙伴

试着把标题换个方向进行排列:

 写给简报做不完的伙伴

这边需要特别注意的小细节像是需要微调画面中「中标题跟图片的间距」:

 写给简报做不完的伙伴

不管是把元素对其格线的右侧、左侧、上方还是下方的边缘,由于格线本身固定的距离与比例,它能够持续的帮助你的画面维持一定的稳定与协调性。

让我们试着为画面加上图片跟不合逻辑的内容:

写给简报做不完的伙伴

各位伙伴在这边可能会觉得「内文叙述」的位置与图片重叠的部分,导致文字的阅读性不佳;我们可以试着调整一下位置,把不是那幺重要的「图片说明」与「内文叙述」调换一下位置:

 写给简报做不完的伙伴

即使仍然有一点图片跟文字重叠的部分,但受到图片影响的程度已经大幅度的下降,对于我而言,保留一点两者的重叠,製作画面的冲突感也是个不错的选择;当然,考虑到简报设计的基本原则,在大多数的状况底下我们都不应该摆放过多的文字在画面中,不过在内容的调整跟资讯的呈现上面,Facebook 上面已经有很多相当棒的简报社群可以 Follow,这边就不再另外多提:

简报小聚

简报艺术烘焙坊

透过相同的基础概念,製作了这次讲座简报的封面:

  写给简报做不完的伙伴   写给简报做不完的伙伴

还有讲座课程中实际观察的页面:

 写给简报做不完的伙伴

喂,你以为讲到这边就结束了吗?还早还早,让我们来继续看下去 →

多张图片的排版 I

除了单张图片搭配文字的排版之外,在简报排版的过程中,还有更多需要搭配多张图片,或者多个文字区块的排版需求;在这边我们先以多张图片的排版为例,相同的 9×9 格线图也可以轻鬆的用来规划多张图片的排版:写给简报做不完的伙伴

在格线系统的排版里面, 并非所有的单一元素都需要保证是完完整整对齐四边格线的, 我们主要需要考虑对齐的元素是「群组性的元素」,以上图为例,撇除文字的排列不谈,由于三张图片在画面上被视为一个群组,因此我确保了这个群组的内容是稳定的被摆放在画面上方。

「群组性的图片排版」也包含像是下图这样的类型一:

 
写给简报做不完的伙伴
类型一格线

写给简报做不完的伙伴

或者我们可以试着让图片的位置贴齐版面的边缘,透过调整照片的重心,製造一些画面拉伸的视觉感受:

 写给简报做不完的伙伴

写给简报做不完的伙伴

当画面的複杂度提升时,也可能产生类似这样的排版:

 写给简报做不完的伙伴

透过这种结合元素彼此之间的对齐、格线的对齐、格线的中点的排版来提升画面的协调性,产生来类似下图的结果:

注:再次强调,其实这并不是一张好的简报→ 内容杂讯过多,不应该让观众花费过多的精神在阅读你的简报内容。写给简报做不完的伙伴

多张图片的排版 II

接下来让我们来试试看让色块的排列不要那幺的拘束,透过上下交错,色块面积的差异,我们可以轻鬆的做出类似下图的排版:

写给简报做不完的伙伴

搭配实际的文案,初步的概念是将版面排成下图:

注:「互动设计」的部分是对齐最右侧排的中心点 写给简报做不完的伙伴

在后续的过程中我依序加上修饰的框线、图片的切割,以及微调图片的位置,最终完成讲座的另外一张投影片:

 写给简报做不完的伙伴

除此之外,我们也可以试着来让图片彼此重叠,你可以选择加上跟底色相同的边框,或者单纯对齐格线压在底图上面,製造一些视觉上面的新鲜感 →

 写给简报做不完的伙伴

简单调整后产生下面这张投影片:

 写给简报做不完的伙伴

再来,让你的想像力再往下一步前进,我们试着让色块不要只是透过矩形的方式呈现,如果稍微让它倾斜一点会产生什幺样的效果呢?注意喔!即使是倾斜的排版,我仍然是让灰色的区块切齐格点或者 1/2 格点的位置:

写给简报做不完的伙伴

将图片跟文字内容加进去以后我们就可以产生类似下图的成果:

写给简报做不完的伙伴

 讲到这边,相信大家也发现到格线的组合其实相当多样化,并不是就被限制在那 9×9 的区块当中;格线在这边就像是一个扎实的地基,让这栋房屋再怎幺的歪…都不会倒;在元素的摆放上面,你可以尝试不规则的摆放,尝试圆形、正方形、L 型、甚至 T 型的组合来玩出各种的可能性: 写给简报做不完的伙伴

由于讲座的内容与介面设计相关,加上各位伙伴可能三天两头就有 Pitch 的需求,画面上肯定不会缺少这看起来很厉害的苹果系列各种装置;在编排投影片时我就先试着把 iPad, iPhone 和 Macbook 加入格点的排版当中,试着提前规划可能的版型,加到画面中的装置同样也是根据格点来进行摆放:

写给简报做不完的伙伴

写给简报做不完的伙伴

实际製作的投影片内容:

 写给简报做不完的伙伴 在加入装置的过程中,比较有趣的点在于装置「里面的画面」;例如下面这张投影片,我刻意让 Macbook 的「萤幕画面边缘」对齐格点,透过纯文字的排版与边框的距离,产生了有聚焦效果的空白区域: 写给简报做不完的伙伴

然后我就…连 Macbook 线图都偷懒不换了 →

 写给简报做不完的伙伴
文字的部分呢?

有些伙伴可能会有些疑惑?刚刚拉出来的灰色色块,难道都只能摆放图片吗?No No No,同样的色块区域,其实是可以使用文字搭配 Icon 或纯文字的方式来取代的 → 像是下图的感觉,我特别再加上框线凸显「新鲜的肝」的重要性…

注:这边由于「设计师」与「必备三神器」两个标题的大小落差过大,对齐格线这件事情相对的较为困难,所以我另外调整了「必备三神器」的位置来让画面整体显得更加协调。

写给简报做不完的伙伴

不同的可能性:阶层

如果觉得格线系统的可能性都已经被你融会贯通,做梦都会梦到色块扭来扭去的话…让我们用设计介面的精神,加上不一样的阴影效果吧!相信对于介面设计有概念的伙伴对于 Google 的 Material Design Guideline 肯定不会太陌生,同样的格线系统,搭配阴影之后又产生了不一样的可能性:

写给简报做不完的伙伴

再加上文案、颜色之后的视觉如下:

写给简报做不完的伙伴

 

讲到这边,相信各位伙伴对于排版的部分应该也有些基础概念啰!老实说,我一开始原本是想要做渐层系列的简报…但因为不想再写渐层系列的文章,就变成这样了;好啦!排版的部分到目前为止算是告一个段落啰,之后我会再整理一些内容更新到这篇文章里面;在下一篇文章的里面,我们会来聊聊这份简报中的字体、颜色的选择,以及一些我自己平常会使用到跟简报相关的资源。

下篇预告: 要做出简单、乾净的排版,在实际动工前或者动工刚开始的前几张投影片时,就要设定好整份简报的 Style Guideline,这次的简报内容也是一样,在完成大约前三张投影片之后,我就稍微规划了简报字型跟视觉色的内容,至于我是如何规划出这份 Style Guideline 并应用在简报里面呢?我们在下篇的文章中再来好好聊聊吧!写给简报做不完的伙伴

最后最后,来跟大家宣传一下小弟利用闲暇时间跟几个伙伴:Shou、Simon、Yalen 跟 Jack 共同开发的产品 KAPI 找咖啡,Android 与 iOS 版本已经正式上架啰!还请大家多多支持!

没在更新的粉丝团

iOS 版本下载连结

写给简报做不完的伙伴

上一篇: 下一篇: