二、清晰明确

一旦用户进入pp电子小程序页面，，就有责任和义务清晰明确见告用户身在那里、又可以往那里去，，确保用户在页面中游刃有余地穿梭而不迷路，，这样才华为用户提供清静的愉悦的使用体验
。。。。。。

1. 导航明确，，往复自若

导航是确保用户在网页中浏览跳转时不迷路的最要害因素
。。。。。。导航需要告诉用户，，目今在哪，，可以去哪，，怎样回去等问题
。。。。。。首先在微信系统内的所有小程序的所有页面，，均会自带微信提供的导航栏，，统一解决目今在哪，，怎样回去的问题
。。。。。。在微信层级导航坚持体验一致，，有助于用户在微信内形成统一的体验和交互认知，，无需在各小程序和其他微信页面的切换中新增学习本钱或改变使用习惯
。。。。。。

微信导航栏

微信导航栏，，直接继承于客户端，，除导航栏颜色之外，，开发者无需亦不可对其中的内容举行自界说
。。。。。。但开发者需要划定小程序各个页面的跳转关系，，让导航系统能够以合理的方式事情
。。。。。。

微信导航栏分为导航区域、问题区域以及操作区域
。。。。。。其中导航区控制程序页面历程
。。。。。。现在导航栏分深浅两种基本配色
。。。。。。

导航区（iOS）

微信进入小程序的第一个页面，，导航区通常只有一个操作——“返回”，，即返回进入小程序前的微信页面
。。。。。。 进入小程序后的次级页面，，导航区的操作为——“返回” 和“关闭”
。。。。。。 “返回”，，即返回上一级小程序界面或微信界面
。。。。。。“关闭”，，即在目今界面直接退出小程序，，回到进入小程序前的微信页面
。。。。。。

导航区（Android）

导航区仅保存唯一操作——直接退出小程序，，回到进入小程序前的微信或系统桌面，，安卓手机自带的硬件返回键执行返回上一级页面的操作
。。。。。。

安卓导航保存一类特殊情形：当用户通过操作区的菜单将小程序添加至安卓桌面，，并从安卓桌面翻开小程序时，，小程序的首页，，不展示导航按钮
。。。。。。仅展示小程序问题和操作区
。。。。。。小程序次级页面，，导航区只有返回上一级页面的操作，，而点击安卓手机自带的硬件返回键也起到相同作用
。。。。。。

微信导航栏自界说颜色规则（iOS和Android）

小程序导航栏支持基本的配景颜色自界说功效，，选择的颜色需要在知足可用性条件下，，协调搭配微信提供的两套主导航栏图标
。。。。。。建议参考以下选色效果：

选色方案示例

页面内导航

开发者可凭证自身功效合计需要在页面内添加自有导航
。。。。。。并坚持差别页面间导航一致
。。。。。。可是受限于手机屏幕尺寸的限制，，小程序页面的导航应只管简朴，，若仅为一般线性浏览的页面建议仅使用微信导航栏即可
。。。。。。

开发者可选择小程序页面添加标签分页（Tab）导航
。。。。。。标签分页栏可牢靠在页面顶部或者底部，，便于用户在差别的分页间做切换
。。。。。。标签数目不得少于2个，，最多不得凌驾5个，，为确保点击区域，，建议标签数目不凌驾4项
。。。。。。一个页面也不应泛起一组以上的标签分页栏
。。。。。。

其中小程序首页可选择微信提供的原生底部标签分页样式，，该样式仅供小程序首页使用
。。。。。？？
？？⑹笨勺越缢低急暄健⒈昵┪陌敢约拔陌秆丈，，详细设置项如图标尺寸等参考可参考开发文档和WeUI基础控件库
。。。。。。

顶部标签分页栏颜色可自界说
。。。。。。在自界说颜色选择中，，务必注重坚持分页栏标签的可用性、可视性和可操作性
。。。。。。

2. 镌汰期待，，反馈实时

页面的过长时间的期待会引起用户的不良情绪，，使用微信小程序项目提供的手艺已能很洪流平缩短期待时间
。。。。。。即便云云，，当不可阻止的泛起了加载和期待的时间，，需要予以实时的反馈以舒缓用户期待的不良情绪
。。。。。。

启动页加载

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

页面下拉刷新加载

在微信小程序内，，微信提供标准的页面下拉刷新加载能力和样式，，开发者无需自行开发
。。。。。。

页面内加载反馈

开发者可在小程序里自界说页面内容的加载样式
。。。。。。建议不管是使用在局部照旧全局加载，，自界说加载样式都应该尽可能精练，，并使用简朴动画见告用户加载历程
。。。。。？？
？？⒄咭部梢允褂梦⑿盘峁┑，，统一的页面加载样式，，如图中例所示
。。。。。。

模态加载

模态的加载样式将笼罩整个页面的，，由于无法明确见告详细加载的位置或内容将可能引起用户的焦虑感，，因此应审慎使用
。。。。。。除了在某些全局性操作下不要使用模态的加载
。。。。。。

局部加载反馈

局部加载反馈即只在触发加载的页面局部举行反馈，，这样的反馈机制越发有针对性，，页面跳动小，，是微信推荐的反馈方式
。。。。。。例如：

加载反馈注重事项

• 若载入时间较长，，应提供作废操作，，并使用进度条显示载入的进度
  。。。。。。
• 载入历程中，，应坚持动画效果；；；；无动画效果的加载很容易让人爆发该界面已经卡死的错觉
  。。。。。。
• 不要再统一个页面使用凌驾1个加载动画
  。。。。。。

效果反馈

除了在用户期待的历程中需予以实时反馈外，，对操作的效果也需要予以明确反馈
。。。。。。凭证现真相形看，，可选择差别的效果反馈样式
。。。。。。关于页面局部的操作，，可在操作区域予以直接反馈，，关于页面级操作效果，，可使用弹出式提醒（Toast）、模态对话框或效果页面展示
。。。。。。

页面局部操作效果反馈

关于页面局部的操作，，可在操作区域予以直接反馈，，例如点击多选控件前后如下图
。。。。。。关于常用控件，，微信设计中心已提供控件库及WeUI控件库，，其中的控件都已提供完整的操作反馈
。。。。。。

页面全局操作效果——弹出式提醒（Toast）

弹出式提醒（Toast）适用于轻量级的乐成提醒，，1.5秒后自动消逝，，并不打断流程，，对用户影响较小，，适用于不需要强调的操作提醒，，例如乐成提醒
。。。。。。特殊注重该形式不适用于过失提醒，，由于过失提醒需明确见告用户，，因而不适合使用一闪而过的弹出式提醒
。。。。。。

页面全局操作效果——模态对话框

关于需要用户明确知晓的操作效果状态可通过模态对话框来提醒，，并可附带下一步操作指引
。。。。。。

页面全局操作效果——效果页

关于操作效果已经是目今流程的终结的情形，，可使用操作效果页来反馈
。。。。。。这种方式最为强烈和明确的见告用户操作已经完成，，并可凭证现真相形给出下一步操作的指引
。。。。。。

3. 异？？
？？煽，，有戮由退

在设计任何的使命和流程时，，异常状态和流程往往容易被忽略，，而这些异常场景往往是用户最为沮丧和需要资助的时间，，因此需要格外注重异常状态的设计，，在泛起异常时予以用户须要的状态提醒，，并见告解决方案，，使其有戮由退
。。。。。。

要杜绝异常状态下，，用户莫名其妙又无处可去，，障碍在某一个页面的情形
。。。。。。上文中所提到的模态对话框和效果页面都可作为异常状态的提醒方式
。。。。。。除此之外，，在表单页面中尤其是表单项较多的页面中，，还应明确指出蜕化项目，，以便用户修改
。。。。。。

异常状态——表单蜕化

表单报错，，在表单顶部见告过失原因，，并标识蜕化误字段提醒用户修改
。。。。。。