微信小程序UI设计规范

来源:网络   作者:热心网友   发布时间:2020-11-19    浏览次数:2852

第一部分:概述

微信小程序,大家应该都不陌生,从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模式的。需要的小伙伴可以自行下载哦!


资源不存在?点我报错

文件格式:Sketch 大小:2.4M 所需学币:0学币(VIP免学币)

素材介绍:微信小程序设计规范,微信小程序怎么设计,小程序怎么做?小程序设计尺寸

下载地址:其它网盘下载  

联盟广告
×

感觉还不错,那就赞助一下吧!您的鼓励就是我们坚持的动力!

打赏说明:您的赞助我们将用于购买网络带宽和优质设计资源,提升用户体验!

标签:规范适配

相关推荐

http://www.shejixf.com/shejijiaocheng/uisheji/8757.html
×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

一键快速登录后才能下载本站资源

新会员登录即可获取5学币奖励,超爽下载!

×

充值学币 立即开通