产品中心

小程序UI设计要避开哪些坑!赶紧收藏这波干货

作者:仙宝云 | 发布时间:2021-10-11 09:11:30 | 阅读:981

微信小程序UI设计脑袋痛?看看这篇文章吧……

合乎微信小程序设计规范

在起头微信小程序的开发前,需要开发者细心阅读《微信小程序设计规范》

  • 恪守微信的外观和功用,不得提供改动微信外观和功效的用户体验
  • 保持所有图片文本简洁,不可运用文本遮挡图片
  • icon提议利用有色背景
  • 微信小程序页面内的浮层和弹窗应但是关闭
  • 不得仿照体系通知或警告诱导用户点击
  • 小程序的页面在下拉不时,帐号字样应明晰可见,不得运用背景色遮挡帐号称号

1.字体

微信内字体的使用与所运转的体系字体保持一致,常用字号为20, 18, 17, 16,14 13, 11(pt)

在字号标准中已经明确给出在结果页主标题字号是40pt,而右图没有遵照该标准,因此右图设计字号利用错误)

2.按钮样式

在小程序中按钮控件的复用渡过是很高的,一样的一个确定按钮也会晤根据页面环境不同来设定不同的余裕高尺寸需要注意的是,即使按钮宽高不同,按钮样式也需要和遵照设计标准所标示出来的余裕高比例、描边、直角、圆角、色值、文字区域、字号、字间距等,包管按钮样式和标准统一。另外,在一般情形下,按钮会面有不同的状态,这些变化也需要保持统一

2.浮层和弹窗但是关闭

若是,用户本打算进行搜索,在进入页面常常却被突如其来的弹窗所打断;这对用户来说是非常不友好的干扰; 即便有局部用户确实被“诱人”的抽奖运动所吸引,离开主流程去抽奖之后很可能就忘记了原本的目标,进而失去了对产品真正价值的利用和认识

3.小程序的界面必须恪守微信的外观和功用,不得提供改动微信外观和功效的产品体验

顶部标签分页栏颜色但是自定义在自定义颜色选择中,务必留神保持分页栏标签的可用性、可视性和但是操作性

顶部分页栏颜色但是自定义,在自定义的同时如果满足可用性,上图中左图的Tab 颜色对比分明,辨识度高,所以正确;而右图的Tab颜色对比不是很明显,没有足够的辨识度,所以不正确

4. 小程序界面内不得模拟体系通知或警告、诱导用户点击

小程序的页面内容中,存在诱导近似行为,包罗但不限于诱导分享、诱导添加、诱导关注大众号、诱导下载等,要求用户分享、添加、关注或下载后才但是操作的程序,含有明示或暗示用户分享的文案、图片、按钮、浮层、弹窗等的小程序,通过好处诱惑诱导用户分享、传布的小程序,用夸张言语来胁迫、勾引用户分享的小程序,强制或诱导用户添加小程序的,都将会被拒绝;

5.小程序头像logo需要运用透明或有色背景若应用白色背景,需要应用有色边框

小程序头像logo应与称号、简介保持一致,而且必须明晰可见,能够辨认图片包含的各个元素,若是:文字、物体、形状等。