如翼视点
如翼曾经做过哪些事情?如翼的发展怎样
版式解析三框法
发表时间:2019-05-29

有序而统一的排列效果,阅读顺序清晰明朗,能在有限的空间内把不同的元素内容统一结合起来,是版式设计中必不可少的效果类型。当前版式使用的是标题、配图、文案三者的统一排列效果。

使用条件:在一个版块中表达多个同级属性的时候可以选择的版式类型。

版式特点:版式的核心特点是统一且规律的模块排列。把繁复的模块通过排列的形式逐一的展示,增强阅览的逻辑性和顺序性,有助于对内容更清晰的理解。

注意细节:①排列型版式不但要注意形式上的统一,还要注意表达上的规律性,尤其在有明确先后顺序的情况下(尽量表达一个完整的故事性)一定不能轻易打破这种规律。比如例图的顺序,先来交代生长的环境,然后是人工的采摘与制作,最后是成品的冲泡,是一条有先有后的故事路线,如果对其顺序进行打乱,就会多少有一些理解上的不适。

②排列型版式要保证配图的风格和整体色调尽量一致,不能出现太过明显的风格和色调上的差异,下图最后一张从风格和色调上与其他几个都不搭配。

③字数较少的排列往往会增加一些装饰效果来丰富页面,比如原图中的日文部分,在应用过程中这种装饰部分一定要淡化处理,不能干扰正常文字的阅读。

文案内容较多,在做排列的时候,不是很建议与配图做成上下的结构。上下结构的排列,文字会因为宽度的限制而做大量的分行,密密麻麻,会严重降低阅读的欲望。

这种情况下可以尝试做一些配图与文字的左右结构,没有太多的分行,阅读会更流畅连贯,或者直接放弃排列型版式,选择其他的版式,比如大配图应用(时间关系,以几何化代替实际内容)。

配色思路:整个版式围绕茶叶制作,而茶的代表色肯定是绿色,而白色是绿色常用的搭配颜色,所以选择了以绿色和白色为主的配色关系。这里需要注意的一点是对于绿色的使用,大部分情况下,相对于亮度较高的纯绿色,明度上柔和很多的黄绿色(绿色与黄色之间)是更好的选择。而考虑到茶的浓郁感和文化性,在黄绿色的使用上也尽量降低了明度,让绿色看起来更加稳重和内敛。

网格思路:由于是排列型版式,选择带有装订线的网格形式,会更有助于元素的对齐和排列。选择【视图】中【新建参考线面板】(如果没有这个命令,可以升级PS版本到cc2015以上或下载参考线插件)。因为详情参考线的标准是20列的网格(文字版块提取那一篇文章有说明),所以左右边距的大小可以以5%递进,具体大小要看中心内容离左右两侧画布的距离,这里中心内容较饱满,所以左右只留出5%的大小,参考线一定要选百分比形式。

排列的内容事先已经确定了要做4列,在列数的选择上可以使用4的倍数,8、12、16等数字,数字越多细节处理方式就越多,而当前图片没有太多的额外内容,所以选择8列足够针对各种细节,最后在做排列型版式的时候最好设定装订线的大小,这个可以根据自己要做的情形去决定,当前图片选择的是1%,间距是足够的。

把4个框架每个以2个列宽大小,中间留出1%缝隙的方式进行排列,并以5%为高度基准确定高度。剩下的就是在这个范围内把要排列的标题、配图、文案、装饰罗列进去。

我在这里选择了把高度基准划分为1/2,1/4、3/4的大小进行元素之间距离的处理。

延展思路:当前版式的核心特征是统一且规律的模块排列。这次的思维从排列的元素组合和框架的效果方面进行延展。

延展方式:

①只有配图没有文字肯定是没法让人理解透彻图片的内容的,但是没有配图只有文字却是对内容的传达产生不了任何的影响,所以只通过统一的文字形式完全可以完成排列效果。

②图标与文字的结合也是很常用的排列类型。

③文字与配图结合,且文字部分拥有独立的框架效果。

④文字与配图结合,文字部分和配图部分共用一个框架。

⑤去掉框架的参与,用主体提取的方式代替配图部分。

⑥排列的位置上可以做成上下的结构,前面的内容中也有提及。



——如翼分享,作者ChiNa 威海_山岩