Hi,
Are you ready

准备好开始了吗,
那就与我们取得联系吧

您希望我们为您提供什么服务呢

· · · ·

· · · ·

您的预算

动态

微信小程序UI设计规范

2021.01.08

第一部分:概述


微信小程序,大家应该都不陌生,从2018年开始,小程序迅猛发展,小程序依托微信,凭借“触手可及用完即走”的用户体验备受青睐。现已为各大企业广泛采用。今天就给大家分享下微信小程序UI设计的技巧和规范;


第二部分:尺寸


1、设备像素( device pixel)


设备像素是物理概念,指的是设备中使用的物理像素。比如 iphone6的分辨率1334X750pX(750pX指的是设备物理像素)


2、逻辑像素( css pixel)


逻辑像素(css pixel) css像素是web编程的概念,指的是css样式代码中使用的逻辑像素。CSS中的ρX是一个相对单位,相对的是设备像素 device pixel,我们网页css和小程序WxSs用的是逻辑像素。


3、官方文档


官方文档说" iPhone6上,共有750个物理像素,屏幕宽度为375px"。iphone6有750个物理像素,为什么屏幕宽度为375px(逻辑像素)呢?


因为 iphone6使用的是 Retina视网膜屏幕,使用2x2 px的device pixel代表1x1px的 css pixel,所以设备像素数为1334*750px而css逻辑像素数为667*375px。


4、设计稿尺寸建议


小程序开发尺寸是rpx( ( responsive pixel),可以实现一稿适配所有屏幕尺寸,小程序编译后,rpx会做一次px换算。


也就是在一个宽度为375物理像素的屏幕下1rpx=1px。在iPhone上6上,屏幕宽度为375px(逻辑像素),共有750个物理像素,则750rpx=375px=750物理像素,也就是1rpx=0.5px=1物理像素。设计稿尺寸375pX或750px都没问题。


5、小程序设计区域


小程序的“所有页面”右上角位置,都固定放置了小程序的菜单,在设计界面时需预留出该区域空间。小程序菜单和状态栏之外的区域是开发者控制区域,在这里,设计师可以自由设计。


6、小程序在IOS和 android的标注尺寸


小程序在IOS和 Android的标注尺寸,如下图所示。(注:dp和sp分别是Android的长度单位和字体单位,在@2X时,1dp=1sp=2px);


第三部分:小程序菜单


1、全局性的,不可自定义,位置固定


官方小程序菜单位于所有界面(包括小程序内嵌的网页和插件),且位置固定,开发者不可对其内容进行自定义只能选择深浅两种配色方案,设计时要预留出该位置区域,若要在小程序菜单附近放置可交互元素,要注意与小程序菜单不冲突,可识别,易操作。程序菜单由两个图标组成,左边是“更多”,点开分别是“转发”“关于”和“取消”;右边是“主页”,点击后回到小程序列表。


2、小程序常见的三种状态:全局操作、调取录音、获取地理位置。


微信小程序


第四部分:搜索框


搜索框的主流形式,标题栏“被占用”等常用的几种搜索设计手法;


第五部分:标签分页导航


标签分页导航分为:顶部标签导航和底部标签导航,官方建议标签数量为2-5个。不过对顶部导航来说关系不大可以根据具体项目需要来设计,底部导航最好还是按照规范来。


a.顶部标签导航


顶部标签导航可以自定义颜色和样式,可以点击也支持沿Ⅹ轴滑动,也就是说点击不是顶部标签栏唯一的交互方式;


顶部标签分页栏颜色可自定义,一般会沿用App的设计风格,以保证两个平合的视觉统一性。常见设计样式如下:


b.底部标签导航 Tab bar设计


微信有提供小程序的底部标签样式,建议标签数量在2-5个适宜,为确保点击区域,建议标签数量不超过4项。小程序首页可选择微信提供的原生底部标签分页样式,该样式仅供小程序首页使用,设计时可自定义图标样式、标签文案以及颜色等,以750*1334pX为例,其标签文案字号为20pX图标尺寸为50*50pX、标签栏高98pX,与IOS设计规范一致;


也可根据产品选择或不选择底部标签分页导航,例如腾讯视频使用4个标签承载功能不同的页面内容,为用户提供清晰、快速的浏览体验;而36氪的内容较为单一,只需一个页面就能清晰的呈现所有的内容,因此不需要标签分栏。


第六部分:启动页加载


在小程序列表点击小程序后进入启动页,它是小程序在微信内一定程度上展现品牌特征的页面之一,本页面将突出展示小程序品牌特征和加载状态。


启动页除品牌Logo展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无须开发者开发,品牌Logo尺寸为80*80px间距标注如下图:


加载反馈注意事项:


1、若载入时间较长,应提供取消操作,并使用进度条显示载入的进度;


2、载入过程中,应保持动画效果;无动画效果的加载很容易让人产生该界面已经卡死的错觉;


3、不要在同一个页面使用超过1个加载动画;


4、模态的加载样式将覆盖整个页面的,因无法眀确告知具体加载的位置或内容可能引起用户的焦虑感,谨慎使用;


5、“页面内加载反馈”可以自定义,其余样式微信统一提供标准,无需自行开发;


加载反馈注意事项:


页面过长时间的等待会引起用户的负面情绪,应尽量使用微信小程序项目提供的技术缩短等待时间。当不可避免的岀现加载和等待的时候,需要予以及时的反馈以舒缓用户等待的负面情绪。例如腾讯视频和大众点评优先显示预设的本地数据,告知用户正在加载页面中;


第七部分:小程序菜单优先级最高


官方小程序菜单的层级优先级是最高的。即使在app中优先级最高的弹窗到这里层级也得在小程序菜单之下,即便沉浸式体验也不例外。而且标题栏和底部标签栏优先级也是在弹窗之上的;


好了今天的分享就到这里啦,如果感觉文章不错感谢大家转发点赞,您的鼓励就是我们继续分享的动力!

关注沙漠风
即刻了解价值资讯

  • 关于沙漠风

    沙漠风是微信小程序开发的狂热者,拥有行业18年经验,更是利用前瞻的观点与技术,快速适应当下市场,为众多知名品牌客户提供高品质移动互联网微信小程序解决方案。

  • 我们的优势

    沙漠风拥有18年移动互联网行业经验、完善的研发管理体系、沙漠风已帮助136+上市公司在内的上千家企业全面提升企业核心竞争力和行业地位。

  • 我们的不同

    我们与多家知名企业合作打造高品质的微信小程序,帮助他们为用户提供更优质的服务。我们按照不同行业、不同类型客户的需求特点,总结、提炼各类优秀项目案例,形成沙漠风特有的移动互联网解决方案。专业化流程、优质的服务、丰富的经验以及对创意品质的追求是客户选择我们的理由。