微信小程序怎么设计图文步骤( 二 )


微信导航栏
微信导航栏 , 直接继承于客户端 , 除导航栏颜色之外 , 开发者无需亦不可对其中的内容进行自定义 。但开发者需要规定小程序各个页面的跳转关系 , 让导航系统能够以合理的方式工作 。
微信导航栏分为导航区域、标题区域以及操作区域 。其中导航区控制程序页面进程 。目前导航栏分深浅两种基本配色 。
导航区(iOS)
导航区通常只有一个操作 , 即返回上一级界面 。
导航区(Android)
同iOS一样 , 导航区也只有一个返回上一级页面的操作 , 而点击安卓手机自带的硬件返回键也起到相同作用 。

微信小程序怎么设计图文步骤


微信
微信导航栏自定义颜色规则(iOS和Android)
小程序导航栏支持基本的背景颜色自定义功能 , 选择的颜色需要在满足可用性前提下 , 和谐搭配微信提供的两套主导航栏图标 。建议参考以下选色效果:
选色方案示例
微信小程序怎么设计图文步骤


微信
页面内导航
开发者可根据自身功能设计需要在页面内添加自有导航 。并保持不同页面间导航一致 。但是受限于手机屏幕尺寸的限制 , 小程序页面的导航应尽量简单 , 若仅为一般线性浏览的页面建议仅使用微信导航栏即可 。
开发者可选择小程序页面添加标签分页(Tab)导航 。标签分页栏可固定在页面顶部或者底部 , 便于用户在不同的分页间做切换 。标签数量不得少于2个 , 最多不得超过5个 , 为确保点击区域 , 建议标签数量不超过4项 。一个页面也不应出现一组以上的标签分页栏 。
其中小程序首页可选择微信提供的原生底部标签分页样式 , 该样式仅供小程序首页使用 。开发时可自定义图标样式、标签文案以及文案颜色等 , 具体设置项可参考开发文档 。
微信小程序怎么设计图文步骤


微信
顶部标签分页栏颜色可自定义 。在自定义颜色选择中 , 务必注意保持分页栏标签的可用性、可视性和可操作性 。
微信小程序怎么设计图文步骤


微信


{#page_break title=''#}流程明确
为了让用户顺畅地使用页面 , 在用户进行某一个操作流程时 , 应避免出现用户目标流程之外的内容而打断用户 。
反例示意
用户本打算进行搜索 , 在进入页面时却被突如其来的抽奖弹窗所打断;对于抽奖没有兴趣的用户是非常不友好的干扰; 而即便有部分用户确实被“诱人”的抽奖活动所吸引 , 离开主流程去抽奖之后可能就遗忘了原本的目标 , 进而失去了对产品真正价值的利用和认识 。
微信小程序怎么设计图文步骤


微信
清晰明确
一旦用户进入我们的小程序页面 , 我们就有责任和义务清晰明确地告知用户身在何处、又可以往何处去 , 确保用户在页面中游刃有余地穿梭而不迷路 , 这样才能为用户提供安全的愉悦的使用体验 。
导航明确 , 来去自如
导航是确保用户在网页中浏览跳转时不迷路的最关键因素 。导航需要告诉用户 , 我在哪 , 我可以去哪 , 如何回去等问题 。首先在微信系统内的所有小程序的全部页面 , 均会自带微信提供的导航栏 , 统一解决我在哪 , 如何回去的问题 。在微信层级导航保持体验一致 , 有助于用户在微信内形成统一的体验和交互认知 , 无需在各小程序和微信切换中新增学习成本或改变使用习惯 。

推荐阅读