微信小程序如何排版?小程序排版技巧
小程序页面的创意和整洁能够吸引用户使用小程序,并提高使用体验。基本上一个小程序开发出来能够和微信官方本身的风格保持一致,就算是排版成功。那么微信小程序如何排版呢?以下是一些排版的技巧。
阅读微信官方的设计文档是最有效的方式。
里面提供了大量的用户界面实例,开发者只需严格依据这份小程序介绍页设计文档,就可以做出兼具美观、实用的 UI 与交互模式。
为了帮助大家更快地理解小程序官方提供的设计文档,小编今天专门为大家解读一下,不仅将设计文档简洁到二分之一,还增加了小程序 UI 设计和传统的网页设计的比较,讲述二者的差异*。所以现在大家只需花费和之前相比一半都不到的时间就能了解小程序排版技巧了,能掌握设计小程序过程中需要掌握的所有要点。注:本文主要针对小程序开发者和 UI 设计师。小程序官方设计文档解读基本规则微信小程序设计文档将所有的设计范例分为了四个部分,分别是:
友好礼貌
清晰明确
便捷优雅
统一稳定
除此之外,微信官方还提供了一些便于开发者使用的组件,这些组件可以在微信官方的小程序 IDE 中直接使用。
设计文档也针对这部分组件进行了详细说明,包括每个组件的适用范围。同时,还提供了 Sketch 与 Photoshop 的设计模板,便于 UI 设计师直接使用。
小编建议:没有太多设计经验的开发者请尽可能使用微信小程序组件样式,这样可以在快速开发的前提下,保证小程序的用户体验。
微信官方希望小程序专注解决用户当前的问题,做一个「管家」,而非是在用户处理问题时候,一直制造干扰的「推销员」。首先,每一个页面都应该聚焦于某个重点功能,不能与该功能无关。例如,搜索页面的功能应该是「搜索」,与搜索无关的功能或内容(如 banner 广告以及诱导搜索小程序关键词推广等)应该尽可能去除掉。
官方错误示例,在搜索页中添加无用信息
其次,页面的导航应该按照用户的预期进行。例如,用户跳转进入一个页面时,小程序不应该弹出与之无关的广告,因为广告不符合用户进入页面的预期。
官方错误示例,进入页面弹出与功能无关。建议:小程序设计时应该以快速解决用户问题为目标,并为其提供明确且符合预期的步骤导航。而这与张小龙在演讲中提到的「用完即走」的概念是吻合的。
小程序开发者在操作开发小程序时,首先应该为小程序用户明示当前的小程序状态,同时应该尽量减少在操作上的限制和整个过程需要等待的时间。微信官方已经为小程序提供了导航区(返回按钮)、标题区和操作区三组等小程序导航栏。如果开发者要求很高的话,还可以在小程序首页中使用页面导航,包括次奥呈现顶部 Tab 样式和底部标签样式。每种样式只要不超过五个标签即可,而微信官方给出建议是不超过四个。
开发者可以根据之前官方给出的顶部Tab和底部标签定义小程序导航栏和页面导航的颜色和风格。在定义颜色时,开发者需要注意的事项很多,比如元素辨识度。要保证小程序排版设计中不能出现按钮与文字可视*差的情况。排版完成之后,加载反馈细节也是小程序整体体验的重要影响因素之一。不过针对这一点,微信官方提供了一个下拉刷新的小程序组件,开发者不需要自己进行额外的开发,只需要按照套用模板就可以了。同时,页面内的加载提示推荐使用局部加载反馈而非全局加载反馈。加载时间较长时,建议提供进度条以减缓用户等待的焦灼感。
看完上述资料,详细各位开发者都知道微信小程序如何排版了吧。最终只要做到小程序页面内的各个功能完备,风格基本上和微信官方页面保持一致,你的排版就算成功了。更多相关资料请关注微信小程序商店。
微信小程序如何进行文章排版?
微信小程序view排版怎么弄?
微信小程序页面排版怎么布局?
下一篇:电商小程序开发报价怎么定?
