裎咔螅淖盅怪迷谕计纳舷禄蜃笥掖Γ泳醮镄Ч惫鄱苛遥艘源蠓蕉嬲沟氖泳醺惺堋?

　　7.3.2从H5页面看图文消息版式布局小技巧

　　 版式设计不仅存在于微信H5页面之中，利用微信公众平台后台发布的图文消息中同样也会涉及元素的分布与编排。

　　 图文消息的版式编排技巧是可以参考前文所述的H5页面版式布局的设计思路的，在这里就不过多地对设计思路进行介绍。然而由于微信公众平台后台图文消息编辑器的功能较为简单，如何得到更好看的图文消息版式布局呢？下面就来进行简单了解。

　　学会居中

　　 图文消息最常见的版式布局方式莫过于一张图片搭配一段文字，在微信公众平台图文消息编辑后台也很容易实现。然而有时为了让版式变得更加美观，也需要活用编辑后台的“对齐方式”功能，此时对齐方式不单单只作用于文字，同时也可以作用于图片。

　　 比如如右图所示的图文消息页面，页面中间的图片内容为公布的活动时间、奖品等信息，相对于下左图将图片左对齐而言，下右图中将图片居中的版式布局看起来更为整齐美观。这种中心型集中式版式布局能让重点信息显得更加突出，同时结合下方居中对齐的文字，也会让版式整体显得更为均衡，突出了公布奖品时的中规中矩感。

　　 在编辑图文消息时，当所上传的图片横向尺寸不足以填满页面且没有选择“自适应手机屏幕宽度”选项时，微信后台系统会默认为左对齐的方式。在这种情况下，如果没有特殊的版式要求，只是发布简单的一段文字一幅图片这种图文消息类型，最好是选中该图片，按微信公众平台图文消息编辑后台上方的“居中对齐”按钮，将图片手动设置为居中对齐的方式，这样会让版面整体看起来更为美观。

　　活用微信编辑器组合版式

　　 当然，图片并不只有“居中对齐”一种排版方式，有时也可以采用不同的对齐方式去让版式看起来更加错落有致，如右图所示。左、右对齐方式的混合运用，让版式形成了忽左忽右的错落感，相对于一致靠一个方向对齐的版式而言，这样的布局显得更加灵动与活泼。

　　 然而这样错落的版式如果直接通过微信公众平台图文编辑后台去实现的话会显得较为死板，由于后台编辑功能较为单一，导致一张图片后面只能跟随一句话，且没法做到文字与图片顶对齐，如右图所示，这样的版式虽然有了变化感，却仍然显得生硬。此时，利用微信编辑器能够最为方便地解决这一问题。

　　 在某些微信编辑器中会有些版式布局的模板，如下图所示，将这些模板合理地编辑组合，也能构成不错的图文消息版式效果。

　　 如下图所示的“三福sanfu”公众号所推送的一则与“情人节”相关的图文消息便组合运用了编辑器中的多个边框，并且结合微信编辑器中的模板，让部分图片也呈现出了左右交错排列的组合效果。

　　 在组合微信编辑器中的模板时，“三福sanfu”也很好地把握了统一与明确主题的设计思想。说到情人节总是与梦幻、浪漫脱离不了关系，而要代表这样的情感的色彩，粉红色是最适合不过的。在该条以“情人节”为主线的图文消息中，便将各个模板统一地采用了粉红色系色彩，让图文消息版式在整体统一中又透着一股浓浓的情人节气息。

　　信息视图化带来轻松阅读

　　 除了直接在微信公众平台图文编辑后台或是结合微信编辑器对图文消息进行版式布局以外，还可以利用图片的设计去进行图文消息版式的布局。

　　 不过如前文所述，这种方式可能会带去较大的设计工作量，且全是图片的版式布局也可能会影响图文消息的加载速度，从而对用户的阅读形成阻碍。

　　 但是有些图文消息是可以主要通过图片去表现的，比如一些信息视图化的图文消息，在上图所展示的“央视新闻”推送的“【一图解读】明天开始，骂老婆、打孩子、虐老人都可能违法！”图文消息便是主要通过图片去说明信息的。

　　 就如该则图文消息的标题所示“【一图解读】”——通过一张信息视图图片概括千言万语，传递消息内容。其实有时候，相较于在微信公众平台图文消息编辑后台去进行信息可视化的表现设计而言，利用其他软件可能会显得更加方便，且也能对信息进行更好地美化。

　　 信息可视化指的是将各种各样的信息转化成形象生动的视图效果，让观者能够从视图中直观并快速地接收与理解信息。

　　 除了上图中的表现方式以外，信息视图化还可以是对数据图表等信息的表现。如右图“财付通”所推送的“2014年网上支付安全报告”图文消息所示，该则图文消息利用信息视图化，更加直接与清晰地向用户展示了相关的数据报告。

　　 信息视图化表现方式在如今这个阅读碎片化的读图时代非常盛行，因为其具备高度的概括与总结性，且表现信息时条理清晰明了，非常适合用户轻松与快速地获取资讯。也正因如此，在表现一些数据总结报告性的图文消息中会经常用到这种表现方式。当然，其他类型的文章也同样可以运用信息视图化表现方式，但是都需要设计者集结创意的精华，并且也要求设计者本身对信息就有着较深的理解，才能总结与整理出结构清晰、更具条理性的信息可视化图片。

　　 在此对信息视图化的设计不多做说明，想要了解的读者可以参考《一图胜千言·信息可视化艺术设计指南》《图解力——写给大家看的信息视图设计书》或是《图解力——信息可视化设计方法与案例解析》这几本书。

　　利用长图突显版式的整体感

　　 在前文列举的图文消息案例中，设计版式时仍然会用图片去对信息视图化图片进行说明。不过由于信息视图化本身的版式就显得较为灵活，因此在图文消息中穿插这些拥有信息视图化表现的图片，能让图文消息的整体版面看起来更加丰富。

　　 除此之外，也可以直接在长图中进行版式的设计，然后将长图放置在图文消息中进行发布。与前文所提到的案例不同的是，长图指的是其中不穿插任何在图文消息编辑后台编辑的文字或是其他图片等元素，直接在一张图片中将信息内容进行布局与安排，这样能让图文信息显得更具整体感。

　　 如右图所示的“链家网”公众号所推送的“链家福利丨囤房爸妈的福利，送百万育儿基金！”图文消息，除了在文章开头插入品牌徽标、标题广告图片及一段视频介绍以外，后面的活动详情介绍则只使用一张长图。

　　 在主要以蓝色作为背景色彩的长图中，将与活动相关的图片、文字、装饰图形等信息元素进行了中轴型排版分布，显得简洁明了。同时由于微信公众平台图文编辑后台只能针对文字进行背景色的填充，而没法给文字的行距等进行整体的背景色彩的添加。因此，长图的设计避免了在后台中插入文字所带来的对蓝色背景的打断感，让版式整体更加完整与连贯。

　　 当然，如果图片过长，有的商家也会选择对图片进行分割后再置入到图文消息之中，如右图“三福sanfu”公众号“三福君任性，就要你们人人100%中奖”图文消息所示。

　　 由于置入长图的尺寸过大，所以需要对长图进行分割，然后上传到图文消息编辑页面中。不过此时需要保证被分割图片的尺寸以及裁切的位置，这样才能够将多张图毫无痕迹地拼接在一起。

　　 不过通常情况下是对同一张长图进行的切割，尺寸的问题不用过分担心，但需要注意裁切误差。分割方法可以参考上一章中提到的九宫格图片的切割，让软件自动保存分割图片，这样就不用担心切割后的拼接问题。

　　 同时需要注意的是，拼接小图最好使用“关闭图片水印”的效果，版式中单独的图片开启水印效果的影响并不大，但对于拼接成为长图的图片而言，关闭水印才不至于因为每张图片出现的水印而妨碍到长图展示的完整性。

　　 长图排版虽然有着较大的美化空间，但还是会影响用户的打开速度，并且对于图文消息简单编辑的初学者而言，其实可以直接使用一张长图，且并不推荐分割长图的办法去进行图文消息的编辑。因为分割长图后，如果直接通过微信图文消息编辑后台进行图片的置入是无法做到无缝拼

　　以上就是小编为大家介绍的所以需要对长图进行分割的全部内容，如果大家还对相关的内容感兴趣，请持续关注上海危机公关公司

　　本文标题：所以需要对长图进行分割　　地址：/pinpaiweihu/2021/1206/1371.html