微信小程序怎么设计图文步骤( 三 )
微信导航栏
微信导航栏 , 直接继承于客户端 , 除导航栏颜色之外 , 开发者无需亦不可对其中的内容进行自定义 。但开发者需要规定小程序各个页面的跳转关系 , 让导航系统能够以合理的方式工作 。
微信导航栏分为导航区域、标题区域以及操作区域 。其中导航区控制程序页面进程 。目前导航栏分深浅两种基本配色 。
导航区(iOS)
导航区通常只有一个操作 , 即返回上一级界面 。
导航区(Android)
同iOS一样 , 导航区也只有一个返回上一级页面的操作 , 而点击安卓手机自带的硬件返回键也起到相同作用 。
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I21646-6.png)
微信
微信导航栏自定义颜色规则(iOS和Android)
小程序导航栏支持基本的背景颜色自定义功能 , 选择的颜色需要在满足可用性前提下 , 和谐搭配微信提供的两套主导航栏图标 。建议参考以下选色效果:
选色方案示例
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I2L62-7.png)
微信
页面内导航
开发者可根据自身功能设计需要在页面内添加自有导航 。并保持不同页面间导航一致 。但是受限于手机屏幕尺寸的限制 , 小程序页面的导航应尽量简单 , 若仅为一般线性浏览的页面建议仅使用微信导航栏即可 。
开发者可选择小程序页面添加标签分页(Tab)导航 。标签分页栏可固定在页面顶部或者底部 , 便于用户在不同的分页间做切换 。标签数量不得少于2个 , 最多不得超过5个 , 为确保点击区域 , 建议标签数量不超过4项 。一个页面也不应出现一组以上的标签分页栏 。
其中小程序首页可选择微信提供的原生底部标签分页样式 , 该样式仅供小程序首页使用 。开发时可自定义图标样式、标签文案以及文案颜色等 , 具体设置项可参考开发文档 。
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I22555-8.png)
微信
顶部标签分页栏颜色可自定义 。在自定义颜色选择中 , 务必注意保持分页栏标签的可用性、可视性和可操作性 。
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I2K31-9.png)
微信
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I26042-15.png)
微信
页面内加载反馈
开发者可在小程序里自定义页面内容的加载样式 。建议不管是使用在局部还是全体 , 自定义加载样式都应该尽可能简洁 , 并使用简单动画告知用户加载过程 。开发者也可以使用微信提供的 , 统一的页面加载样式 , 如图中例所示 。
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I22527-16.png)
微信
模态加载
模态的加载样式将覆盖整个页面的 , 由于无法明确告知具体加载的位置或内容将可能引起用户的焦虑感 , 因此应谨慎使用 。除了在某些全局性操作下不要使用模态的加载 。
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I23D1-17.png)
微信
【微信小程序怎么设计图文步骤】局部加载反馈
即只在触发加载的页面局部进行反馈 , 这样的反馈机制更加有针对性 , 页面改动小 , 是微信推荐的反馈方式 。例如:
![微信小程序怎么设计图文步骤](http://pic.yunnanlong.com/230313/193I212O-18.png)
微信
加载反馈注意事项
若载入时间较长 , 应提供取消操作 , 并使用进度条显示载入的进度 。
载入过程中 , 应保持动画效果 ; 无动画效果的加载很容易让人产生该界面已经卡死的错觉 。
推荐阅读
- 你的小8为什么没有信号
- 微信群怎么拍一拍好友
- 家道小康打一生肖
- 小狗狗可以吃猫粮吗
- 小狗几个月训练大小便
- 小米9se怎么录屏? 小米9se录屏方法介绍
- 大同小异打一数学术语
- 小班群老师自我介绍
- 微信系统处于通话状态怎么关闭
- 手机微信密码忘记了怎么解决