精致又赏心悦目的图文排版是怎样炼成的?

一个让人看了觉得精致又赏心悦目的图文排版也不仅仅是页面布局的美观设计,更是整体VI的可识性,易读性

一个让人看了觉得精致又赏心悦目的图文排版也不仅仅是页面布局的美观设计,更是整体VI的可识性,易读性。对于非设计师的小编来说,不要求能做到这样吹毛求疵的日式杂志排版水平,但也得有自己的独特风格习惯,这不是强迫症,是对爱你的粉丝读者负责。


0?wx_fmt=gif





色即是空空即是色





你可以选择沉稳大气的黑色,充满理性gay意的蓝色,火热又中立的暗红,你也可以选择最新出炉的静谧蓝 / 粉晶


grey.gif


不管你选择什么颜色,都要基于你公众号的调性,以及整体风格定位。在选好颜色之后,想要瞬间提升逼格又不会错,请记住以下三大原则


深灰色作为正文字体主色调


一般来说,你的正文文字最好避免使用墨黑色(纯黑),当大面积的黑色字存在的时候会给人以刺眼的感觉(特别是底色还是纯白色),这也就是为何“黑色会压倒一切”,而你所看到的UI设计不论是网页还是app,看上去的黑色大多数都是深灰,深灰色一般更容易阅读也不会累眼。


grey.gif


一种颜色突出重点(强调色)


如果你选择好几种不同的色调来,那么你的配色方案很大程度上是有问题的。你颜色用得越多,你的页面就越来越难以控制。所以最好结合你公众号的VI风格或者本期图文主题只选择一种颜色来作为你想要突出的重点事物(我们称为强调色)黑色不作为强调色,突出的事物比如标题(一级二级)、符号、分割线等等。



对强调色进行同族筛选


推荐配色网站https://color.adobe.com/zh/create/color-wheel


grey.gif


确定强调色之后不断调整饱和度亮度灰度来选择眼睛最舒适的颜色值。








旧版微信编辑后台的标准色卡可以做这一项工作(比较简单粗暴),自微信后台改版以来,很多小编苦恼没有原来的标准色卡,但其实第三方编辑器如 135编辑器(135editor) 仍然保留色卡取色,你可以选择在编辑器修改颜色复制,也可以选择借助第三方编辑器查找对应颜色代码值进行修改编辑存储。以135编辑器为例:


grey.gif

不知道文字颜色RGB时可直接复制进编辑器打开HTML查看



grey.gif

知道RGB值情况下取色区输入RGB值,获取对应#颜色代码复制便于添加新版后台使用


grey.gif

135编辑器也会对最近使用的颜色进行记录,方便直接编辑。







距离产生美




比如“深夜发媸”这类情感向账号标志性排版就是大面积空白,艺术角度上叫做留白(White Space),但是你知道为什么留白吗?除了有强烈的视觉冲击力之外还有什么奥秘和理论依据吗?再谈及这个问题之前我想跟大家探讨一个更加实用的排版技巧。



以前讲课的时候曾提到「 有种逼格叫做两端缩进 」&有种文艺叫做字字间距 ,从设计学角度而言,它们也是留白的一种简单形式。比如下面我们讲解排版设计段落本身






·排版设计大法·



欧洲各大院校设计师练习排版最有用的办法就是放弃电脑,然后找到一堆透明硫酸纸,将同种字体同种字号同种粗细的句子或者段落印在硫酸纸上,像下图,然后不断地进行排列组合。该方法可以不断地提高我们对文字与行与段落的认识以及敏感度。


grey.gif



·普通的设计师·


grey.gif




·牛逼的设计师·


grey.gif


分享来自@孙青椒




那么两端缩进和字间距的效果如何完成呢?

如果要进行CSS的书写,则需要修改代码的margin值,调整像素为10px-15px(越大缩进越多)


grey.gif


字字间距则记住这段代码


<section style="letter-spacing:10px">

这里填写需要设置字字间距的文字内容

</section>


点击html后将代码复制进行修改即可。(关于字间距135编辑器订阅号也有教过呢,更多实用文章请查看历史消息)






大道至简 极简至真




少即是多极简主义理念,想必大家都耳熟能详,很多关于简约主义的说法是减少减少再减少。实际上,极简主义是一种很极端的的概念,却又能够让你不断沉思其中,而且对于不同的人和事物有不同的极简主义。比如对于徐老师而言,极简主义这种东西似乎是直男设计师的专属?但是由于美入人心又爱之不已。



Google的标志是极简主义的代表,既有趣又让人印象深刻


grey.gif



Google产品的Logo遵循统一的样式(不包括Icon):每一个创新产品都配上简约的标志,使人一眼就认出是Google家出来的。比如说Squared的设计, 将手势和Squared经典方括号形状结合起来,就创造了一个完美的新标志,就像prezi里面的 Frame ?!


grey.gif


grey.gif

为了既要符合Google的风格,也不能丢掉自己的个性,让人感到别扭,所以还要继续红蓝黄绿的配色基调,让人可以过目不忘。



而对于我们微信图文排版设计来说,极简主义相较于整体的VI视觉识别尤为重要,比如你会发现JZ经常使用的 / ❶❷❸等等,简单的小符号给人以清晰的逻辑,与此同时带来满满的逼格感,就像为什么字体小反而更有逼格?也是一样的道理。



再者,文字和图片也应该有效对齐,保持一定缝隙用以产生节奏感。比如利用表格来实现左右分栏,既可以保证屏幕最大化利用(十屏呈现),也基于用户体验来考虑可识性和易读性。


福利时刻-免费领取7天135编辑器VIP会员】


点击https://www.135editor.com/users/invite/ddb12a17ce400c35fe041d275a578351,注册135编辑器,即可获得7天VIP会员


文章评价
登录后可以评论
立即登录