最近微信小程序已经出来了，各个平台也放出了相应的信息，今天就给大家带来一些实用的信息吧！

概括

基于微信小程序轻量、快捷的特点，我们制定了小程序界面设计指南及建议。设计指南建立在充分尊重用户知情权和操作权的基础上，目的是在微信生态内建立友好、高效、一致的用户体验，同时最大程度地适应和支持不同的需求，实现用户和小程序服务商的共赢。

友善礼貌

为了避免用户在使用微信小程序服务时注意力被周围复杂的环境分散，小程序设计中应减少不相关的设计元素对用户目标的干扰，礼貌地向用户展示程序所提供的服务，并以友好的方式引导用户进行操作。

强调

每个页面都应该有明确的焦点，以便用户每次进入新页面时都能快速了解页面内容。在确定焦点的前提下，尽量避免页面上的其他干扰项影响用户的决策和操作。

反例

该页面主题为查询，但添加了许多与查询不相关的业务条目，与用户预期不符，容易导致用户流失。

修正指示

删除任何与用户目标不相关的内容，明确页面主题，并提供有助于用户目标的帮助内容，比如最近的搜索词、常用的搜索词等，只要技术和页面控制允许。

反例

操作没有优先级，用户没有选择

修正指示

首先，避免同时列出过多的操作让用户选择，当不得不同时列出多个操作时，需要区分主次操作，降低用户选择的难度。

流程清晰

为了让用户能够顺畅的使用页面，当用户在进行某个操作流程时，应该避免出现用户目标流程之外的内容来打断用户。

反例

用户原本打算进行搜索，却在进入页面时被突然的抽奖弹窗打断；对于对抽奖不感兴趣的用户来说，这是一种非常不友好的干扰；而即便部分用户确实被“诱人”的抽奖活动吸引，在离开主流程参与抽奖后，也可能会忘记自己最初的目标，进而失去对产品真正价值的使用和理解。

清晰明确

一旦用户进入我们的小程序页面，我们有责任和义务明确告知用户他们在哪里以及可以去哪里，确保用户可以轻松在页面上移动而不会迷路，从而为用户提供安全、愉快的用户体验。

导航清晰，来去方便

导航是保证用户在网页浏览和跳转时不迷失的最关键因素。导航需要告诉用户我在哪、我可以去哪、怎么返回等。首先，微信体系内所有小程序的所有页面都会有微信提供的导航栏，统一解决我在哪、怎么返回的问题。在微信层面的导航保持一致的体验，有助于用户在微信内形成统一的体验和交互认知，不至于在小程序和微信之间切换时增加学习成本或改变使用习惯。

微信导航栏

微信导航栏直接继承自客户端，开发者不需要也不能够自定义导航栏中除颜色以外的内容，但需要开发者指定小程序各个页面之间的跳转关系，以使导航系统合理发挥作用。

微信导航栏分为导航区、标题区、操作区，导航区控制程序页面进度，目前导航栏有深色、浅色两种基本配色方案，在iOS和显示上有所区别，如下图所示：

导航区域 (iOS)

导航区通常只有一个操作，即返回上级界面，开发者可以定义其内容，但不能修改其样式。

航海區域 ()

和iOS一样，导航区也只有一个操作，返回上一页，手机上点击硬件返回按钮也是同样的效果。

微信导航栏自定义颜色规则（iOS及以上）

小程序导航栏支持基础背景颜色自定义，所选颜色需与微信提供的两套主导航栏图标协调搭配，同时满足易用性要求，建议参考以下选色效果：

配色方案示例

页面内导航

开发者可以根据自身功能设计需求，在页面中添加自己的导航。并保持不同页面之间的导航一致。但由于手机屏幕尺寸的限制，小程序页面的导航应该尽量简洁。如果只是一般线性浏览的页面，建议只使用微信导航栏。

微信小组件库提供了标签导航供开发者选择，标签栏可以固定在页面顶部或者底部，方便用户在不同页面间切换。为保证点击区域，标签数量不要超过4个，一个页面中标签栏的数量不要超过一组。

标签栏默认颜色为选中状态时100%纯色，未选中状态时60%，选中状态颜色可自定义，选择自定义颜色时，一定要保证标签栏标签可用、可见、可操作。

减少等待时间，及时反馈。页面等待时间过长，会让用户心情不好，微信小程序项目提供的技术可以大大缩短等待时间。即便如此，当加载等待不可避免时，也需要及时反馈，缓解用户的糟糕心情。

启动页面加载

小程序启动页是微信内容中一定程度上展示小程序品牌特征的页面之一，该页面会重点展示小程序的品牌特征和加载状态。除了品牌logo展示外，启动页上的其他所有元素，如加载进度条等，都是微信统一提供，不可更改，也不需要开发者开发。

下拉刷新页面

微信在小程序内提供了标准的页面下拉刷新加载能力和样式。​​开发者可以自定义需要通过下拉交互进行刷新的页面，微信会为此类交互提供标准的能力和样式。​​在样式方面，刷新图标和下拉logo配色方案捆绑在一起，分为深色和浅色两套方案，开发者在使用时要注意页眉文字、下拉logo、刷新图标的和谐统一。当用户在该类页面进行下拉交互时，呈现微信小程序页面标准加载动画，开发者无需自行开发样式

带有标签页的下拉刷新加载

如果页面有标签，开发者可以定义刷新动作位置在标签栏下方，只刷新当前页面内容，开发者无法自行定义此加载效果。

两组下拉样式：深色和浅色

微信下拉提示是为了让用户清楚的知道小程序的主人，防止欺诈和作弊。该标记提供了两套方案：浅色和深色。文字颜色不可自定义。开发者自定义背景颜色时，需保证下拉标记可识别。配色方案与iOS一致，如下图所示。

微信下拉标签错误用例

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