第一部分：概述

微信小程序，大家应该都不陌生，从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中优先级最高的弹窗到这里层级也得在小程序菜单之下,即便沉浸式体验也不例外。而且标题栏和底部标签栏优先级也是在弹窗之上的；

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

文末附上微信小程序UI组件库的下载地址，是SKetch格式的。需要的小伙伴可以自行下载哦！

下载地址：http://www.shejixf.com/shejijiaocheng/uisheji/8757.html