第一部分：概述
微信小程序，大家应该都不陌生，从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模式的。需要的小伙伴可以自行下载哦！
