资讯热点

微信小程序怎么设计规范

微信小程序设计的基本原则是微信设计中心总结的设计指南和建议。

以下设计原则是基于对用户的尊重,旨在建立有序、高效、一致的用户体验,最大限度地满足和支持业务需求设计,实现用户与开发者的双赢局面。

首先,要有礼貌

为了避免用户在微信中使用小程序服务时被周围复杂环境干扰,小程序应注意减少无关设计元素对用户目标的干扰,礼貌地向用户展示程序提供的服务,友好地引导用户操作。

1.重点突出

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

删除任何与用户目标无关的内容,澄清页面主题,并在技术和页面控制允许的前提下为用户目标提供帮助,如最近的搜索词、常用的搜索词等。

操作没有主次,让用户无法选择。

首先要避免并列操作过多让用户选择,在不得不并列多个操作时,要区分主次操作,降低用户选择的难度。

2.流程明确

为了让用户顺利使用页面,在用户执行某个操作过程时,应避免出现在用户目标过程之外的内容,并打断用户。

用户计划搜索,但在进入页面时突然被彩票弹出窗口打断;对彩票不感兴趣的用户非常不友好,增加了对开发团队的愤怒;即使有些用户真的被打断了“诱人”在抽奖活动的吸引下,离开抽奖的主要过程后,你可能会忘记原来的目标,然后失去对产品真正价值的利用和理解。

二是清晰明了

作为一个负责任的开发人员,一旦用户进入我们的小程序页面,他们就有责任和义务清楚地告诉用户他们在哪里,他们可以去哪里,以确保用户在页面上轻松穿梭而不迷失,从而为用户提供安全愉快的体验。

1.导航清晰,来去自由

导航是确保用户在浏览和跳转网页时不会迷路的最关键因素。导航需要告诉用户我在哪里,我可以去哪里,如何回去。首先,微信系统中所有小程序的所有页面都会带来微信提供的导航栏,统一解决我在哪里、如何回去的问题。在微信层面保持一致的导航体验,有利于用户在微信中形成更统一的体验和互动认知,无需在小程序和微信切换中增加新的学习成本或使用习惯。

微信导航栏

微信导航栏直接继承给客户端。除了导航栏的颜色,开发人员不需要也不能定制内容。但开发人员需要规定小程序每个页面的跳转关系,使导航系统能够以合理的方式工作。

微信导航栏分为导航区、标题区和操作区。其中,导航区域控制程序页面过程。目前,导航栏分为两种基本颜色,即深度iOS和Android显示不同。

导航区(iOS)

导航区通常只有一个操作,即返回上一级界面。开发人员可以定义其内容,而不是修改样式。

导航区(Android)

通常,系统导航左侧的唯一操作是“离开小程序,回到微信,程序后台运行”。

当用户进入小程序级页面时,我们建议小程序本身可以设计返回操作,同事用户也可以通过Android系统的硬件返回按钮返回上一级。

选色方案

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

页面内导航

开发人员可以根据自己的功能和需要在页面中添加自己的导航,并在不同的页面之间保持一致的导航。但由于手机屏幕尺寸的限制,小程序页面的导航应尽可能简单。如果只是一般的线性页面,建议只使用微信导航栏。

提供微信控件库tab导航供开发者选择,tab栏可以固定在页面的顶部或底部,方便用户在不同的页面上tab切换页面间。确保点击区域,tab项目不得超过4项,页面不得出现一组以上tab栏。

微信小程序

2.减少等待,及时反馈

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

小程序启动也是小程序在一定程度上展示微信内容品牌特色的页面之一。

本页将突出小程序的品牌特点和加载状态。

启动页除LOGO除品牌展示外,页面上的所有其他元素,如加载进度指示,均由微信提供,不能更改。无需开发人员开发。

下拉标示区

所有微信小程序页面下拉时都会出现微信统一设计的标志区。品牌展示区由品牌名称和微信小程序提示组成,旨在加强品牌和用户对小程序的产品感知。

微信提供了两套颜色匹配方案,如此标记所示,文本颜色不能自定义,开发人员应注意确保下拉标记的识别。

下拉标示(Android深浅两色方案)

微信下拉提示用于给用户一个明确的小程序所有者,以防止欺诈和欺骗。这里有两套方案,文本颜色不能自定义,开发人员应注意确保下拉标志的识别。

页面刷新交互(iOS)

开发人员可以定制需要通过下拉交互完成刷新的页面,这将提供标准能力和风格。在风格上,刷新图标与下拉标志的颜色匹配已经捆绑在一起,分为两组方案。开发人员在使用时应注意头部文本、下拉标志和刷新图标的和谐统一。但当用户在此类页面上进行下拉交互时,微信小程序页面标准加载动画。开发人员不需要开发自己的风格。

开发者没有在页面顶部设计tab在这种情况下,如果定义页面可以通过下拉动作刷新,则小程序品牌显示区域出现在标题栏下,页面顶部。开发人员暂时无法定义这种加载效果。

开发者定义页面顶部tab并定义该tab下面的内容页面可以通过下拉动作刷新,然后刷新后加载状态提示语小程序品牌展示区出现在顶部tab此外,只刷新当前页面内容。开发人员暂时无法定义这种加载效果。

页面刷新交互(Android)

与iOS同样的风格,Android下刷新图标与下拉标志的颜色匹配已捆绑,分为两套方案。开发人员在使用时应注意头部文本、下拉标志和刷新图标的和谐统一。

微信控件库提供深度tab开发者可以选择导航方案。tab栏需要固定在页面顶部,方便用户在不同的页面上tab切换页面间。确保点击区域,tab项目不得超过4项,页面不得出现一组以上tab栏。

tab默认情况下,栏选中态为100%实色,未选中态为60%不透明,选中态颜色可自定义。在自定义颜色选择中,一定要保持tab可用性、可视性和可操作性。