感度，积极参与活动。然而，如今由于创意的缺乏和同质化现象严重，导致用户对小游戏产生了厌倦。

　　 此时，品牌在利用H5小游戏进行传播时，更需要在玩法和视觉设计上多下功夫。如果做不到很特别的创新，起码要保证通过H5小游戏可以起到信息传播或是提升用户体验的效果。

　　 下图所示为“财付通”公众号在猴年春节期间推出的一则新年祝福H5页面，该祝福就是通过将“学习红包秘笈”这一线索贯穿在H5小游戏的情节中传递给用户的。

　　 首先利用几页H5页面简单说明了红包秘笈，如上页图所示，通过打趣的方式营造出了一种轻松愉悦的阅读氛围。

　　 在学习完秘笈之后，便要进入“考试”阶段——如下图所示，直接进入到了抢红包的游戏挑战页面，最后还会根据“成绩”也就是游戏情况颁发相应的称号。

　　 该则H5游戏的情节设计得连贯而流畅，视觉设计也显得醒目而统一。虽然点击按钮抢红包的游戏设计并不见得非常具有创新意味，但是结合整体的情节与视觉设计，能让用户感受到企业的用心，也真切地体会到新年的欢乐，在可爱而轻松的氛围中提升用户对企业的好感。

　　细节与统一

　　 上述的三种形式其实都是用以提升用户体验，让他们更多去关注所推送的H5页面的不错的设计方法，然而这些表现形式也离不开对细节的把控。

　　 比如前文所提到的“理财通”在红包上放置徽标的做法就是一种细节设计。除此之外，有些细节还体现在人性化、趣味性的设计上。

　　 如右图所示，相较于传统而单一的“分享提示”而言，图中还插入对“分享提示”更加个性化的设计，这样的视觉设计显得生动活泼，也富有人情味，让用户在感到有趣的同时，也忍不住想要为设计者的用心良苦而点赞。

　　 当然这也离不开统一的视觉表现。如下图所示，“拍拍微店”所推出的这则“刷个朋友圈的功夫都能开店了”的H5页面，其主要的视觉设计以手绘风格为主，同时整体设计走的是逗趣路线，画面显得有趣而生动。因此，在设计“分享提示”页面时也同样延续了这样的风格，如右图所示。

　　 要成就高品质的用户体验，必须考虑到细节与整体的统一性，否则在如今H5页面泛滥的洪流中，粗糙的H5页面设计不仅没有办法脱颖而出，也不能给用户留下好的印象，这对企业形象的构建是不利的。并且统一H5页面的设计风格，能让用户的视觉感官得到具有延续性的良好体验，给用户留下整洁的视觉享受。

　　7.3透过微信H5看版式布局

　　 在微信H5页面中会出现文字、色彩、图形等元素，而这些元素也不能杂乱无章，合理地将它们安排在一起是让H5页面更具感官体验的关键，也是制作出更加绚丽的H5页面的前提条件，而这一过程便涉及版面的构成，也就是整体版式的设计。

　　7.3.1版式在H5页面中的应用

　　 版面的构成是信息传播的桥梁，发挥版面元素中各自的特点和功能，会使整个版面兼具内容的完善性和美观性，从而更快、更准确地传递信息。对于微信H5页面的版式设计也是如此，同时还需要考虑用户的阅读体验等，结合所需传递的信息的特点，恰当地对H5页面中的元素进行分配与布局，这样才能让H5页面轻松地突显主题，也更加便于用户对于信息的接收。

　　 接下来结合前文提到的案例，了解具体有哪些常见的版式布局。

　　 1中心型中心型排版是一种最为常见的H5页面布局形式，利用集中式的布局构建视觉中心，聚焦用户的视线，从而起到突出想要表达的事物或者主题的作用。

　　 比如前文中所提到“理财通”所推送的“理财通发年终奖啦”H5页面，在答题失败、成功或是要填写相关抽奖信息时，便采用了中心型版式构图，如下图所示。

　　 将提示信息放置在装饰框中，并将它们安排在了页面的中心位置，加之页面背景色彩与装饰框色彩反差也较大，结合集中式的构图，让信息可以一目了然地传递到用户眼前。

　　 2中轴型中轴型与中心型相似，都是较为集中的构图模式，不同的是，中心型所集中的位置为页面的中心点，而中轴型则有一条明显的页面中心轴线，元素沿着轴心线对称排开。这样的版式构图能给予画面稳定感，同时又显得醒目大方。

　　 比如前文中所提到“拍拍微店”推出的“刷个朋友圈的功夫都能开店了”H5页面的其中一个页面和“嘉宝”宣传品牌H5页面，如右侧两图所示，均采用了中轴型的版式布局。

　　 “拍拍微店”这一页面以页面的中心线为对称轴，将品牌徽标放置在左右对称的两只竖起大拇指的拳头中间，起到了集中视线的作用，同时沿着中心线下方也放置了一些文案信息与“去下载”和“分享”按钮，整体布局在对称的稳定中很好地将重点信息集中与突出。

　　 “嘉宝”宣传品牌H5页面同样以页面的中心线为中轴线，并沿着这条中轴线从上到下放置了对品牌的介绍信息。这条中轴线也是一条对称线，用来分割介绍品牌的图片与文案。

　　 这样的版式布局不仅让H5页面显得干净整洁、有条不紊，同时也很好地迎合了手机移动端展示的特点，用户通过上下滑动便能轻松进行操控与阅读，符合用户对移动端的操作习惯与阅读经验。

　　 3分割型分割型排版指的是利用分割线使得页面中的元素具有明确的独立性。当制作元素过多的H5页面时，便可以采用分割型的排版布局方式，通过分割的手法构建好页面各个版块的面积关系，使得版式不仅不会显得单调与拥挤，同时也能起到很好的视觉引导作用。

　　 比如上例中的“嘉宝”宣传品牌H5页面，不仅是中轴型版式布局，同时也利用中心线对画面进行了对称分割。在页面中，以中心线为视觉引导的分割线，将品牌介绍的图文元素分割开来的同时，也将它们有序地分布在分割线的两侧，让文字与图片都整齐地存在于各自的独立空间中，更加方便了用户对信息的阅读与接收。

　　 左图所示为“京东的十大任性”总结报告中的一个H5页面，也是通过分割的形式让画面有了丰富的构图视觉效果。

　　 页面中有许多手机元素，通过分割图形将它们独立，同时又通过对分割形状面积大小以及色彩的把握，让版式整体有了主次分明的层级感。

　　 4倾斜型倾斜型排版指的是通过对画面中主要元素或整体画面的倾斜排版，使得画面具有较强的律动感。

　　 当要制作一些具有冲击性、跳跃性效果的页面时，可以使用倾斜型的排版方式，使得整体的版式不至于过于死板或僵硬，从而给用户带去新奇与刺激的视觉感受。

　　 比如下左图所示的“苏宁金融”所推出的产品介绍H5页面，主题文字有着向右上方倾斜的趋势，结合向上的箭头，这种不稳定性的表现能从视觉的设计上更加直观地给用户带去产品能带来收益的感受。

　　 下右图也通过对元素倾斜排放在视觉上产生了动态感，结合飞碟插图，带来了较为新奇、有趣的视觉效果。

　　 5骨骼型骨骼型版式经常被用在一些产品罗列介绍或是信息分点布局的H5页面之中。骨骼型版式指的是有序地将页面中的图文等元素排列，从而能使得页面具有严谨统一且具有秩序感的视觉效果。

　　 比如前文所提到的“渝乡人家·渝小面”H5页面中的产品介绍页面，便是将产品分布在了六宫格中，让页面拥有了清晰的条理，画面平稳，从而能够更加明确地给用户传递出产品的信息。

　　 常见的骨骼型有竖向通栏、双栏、三栏、四栏和横向通栏、双栏、三栏和四栏等。下图的H5页面便是采用了横向通栏骨骼型排版。如下图所示的“懒癌救助中心”H5页面，在图片和文字的编排上严格按照骨骼比例进行编排配置，有规律的图文会给用户带去严谨、和谐、理性美的视觉感受，同时图文又被错落参差但有致地分布在页面中，在有条不紊中显出活泼。

　　 6满版型用大面积的元素去填充整个画面，让画面富有极强的代入性，并且传达出最为直观和强烈的视觉刺激感。

　　 当制作的H5页面图片中有明确的主体且文案较少时，就比较适合采用满版型排版方式。

　　 比如前文所提到的“腾讯”于过年期间在朋友圈中推送的H5广告页面，便是以图像充满整版，以图

　　以上就是小编为大家介绍的起到了集中视线的作用的全部内容，如果大家还对相关的内容感兴趣，请持续关注上海危机公关公司

　　本文标题：起到了集中视线的作用　　地址：/pinpaiweihu/2021/1211/1527.html