微信小程序 UI布局常用技巧整理总结(2)

  小程序导航栏支持基本的背景颜色自定义功能,选择的颜色需要在满足可用性前提下,和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果:

  选色方案示例

微信小程序设计指南 微信小程序ui设计规范汇总6

  页面内导航

  开发者可根据自身功能设计需要在页面内添加自有导航。并保持不同页面间导航一致。但是受限于手机屏幕尺寸的限制,小程序页面的导航应尽量简单,若仅为一般线性浏览的页面建议仅使用微信导航栏即可。

  开发者可选择小程序页面添加标签分页(Tab)导航。标签分页栏可固定在页面顶部或者底部,便于用户在不同的分页间做切换。标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

  其中小程序首页可选择微信提供的原生底部标签分页样式,该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等,具体设置项可参考开发文档。

微信小程序设计指南 微信小程序ui设计规范汇总7

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

微信小程序设计指南 微信小程序ui设计规范汇总8

微信小程序设计指南 微信小程序ui设计规范汇总9

  减少等待,反馈及时

  页面的过长时间的等待会引起用户的不良情绪,使用微信小程序项目提供的技术已能很大程度缩短等待时间。即便如此,当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。

  启动页加载

  小程序启动页是小程序在微信内容一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,均由微信统一提供且不能更改,无需开发者开发。

微信小程序设计指南 微信小程序ui设计规范汇总10

  页面下拉刷新加载

  在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式。

  开发者可自定义需要通过下拉交互完成刷新的页面,此类交互微信将提供标准能力和样式。在样式上,刷新图标与下拉标示配色已捆绑,分为深浅两套方案,开发者在使用时,应注意头部文字、下拉标识与刷新图标的和谐统一。当用户在该类页面做出下拉交互时,出现微信小程序页面标准加载动画。开发者无需自行开发样式

微信小程序设计指南 微信小程序ui设计规范汇总11

  深浅两套下拉样式

  微信下拉提示用于给用户明确的小程序归属者,防止造假与作弊。此处标示提供深浅两套方案,文字颜色不可自定义,开发者在自定义背景色时,应注意保证下拉标示的辨识度。iOS和Android配色方案相同如下展示。

微信小程序设计指南 微信小程序ui设计规范汇总12

  微信下拉标示错误使用案例

  请避免以下错误使用情况,确保信息的可见性和页面的可用性

微信小程序设计指南 微信小程序ui设计规范汇总13

微信小程序设计指南 微信小程序ui设计规范汇总14

  页面内加载反馈

  开发者可在小程序里自定义页面内容的加载样式。建议不管是使用在局部还是全体,自定义加载样式都应该尽可能简洁,并使用简单动画告知用户加载过程。 开发者也可以使用微信提供的,统一的页面加载样式,如图中例所示。

微信小程序设计指南 微信小程序ui设计规范汇总15

  模态加载

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwfpjy.html