基于微信小程序轻快的特点，我们拟定了界面设计指南和建议
发表时间：2023-10-21 14:45:23
文章来源：炫佑科技
浏览次数：178
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
基于微信小程序轻快的特点，我们拟定了界面设计指南和建议
概括
基于微信小程序轻快的特点，我们制定了小程序界面设计指南和建议。 设计准则以充分尊重用户的知情权和操作权为基础。 旨在在微信生态内建立友好、高效、一致的用户体验，同时*大限度地适应和支持不同的需求，实现用户和小程序服务提供商的双赢。
友善且有礼貌
为了防止用户在微信中使用小程序服务时被复杂的周围环境分散注意力，小程序在设计小程序时应注意减少不相关的设计元素对用户目标的干扰，礼貌地展示程序提供的服务给用户，友好的引导用户进行操作。
强调
每个页面应该有明确的焦点，以便用户每次进入新页面时都能快速理解页面内容。 在确定焦点的前提下，尽量避免页面上出现其他影响用户决策和决策的分散注意力的项目。 操作。
反例
该页面的主题是查询，但却添加了很多与查询无关的业务条目，与用户期望不一致，很容易导致用户迷失。
校正信号
删除任何与用户目标不相关的内容，明确页面主题，并在技术和页面控件允许的范围内提供对用户目标有帮助的帮助内容，例如*近的搜索词、常用的搜索词等。
反例
操作没有优先级，用户别无选择。
校正信号
首先，要避免并行太多的操作供用户选择。 当多个操作必须并行时，需要区分主次操作，以降低用户选择的难度。
流程清晰
为了让用户能够顺利地使用页面，当用户在执行某个操作过程时，应该避免用户目标过程之外的内容打断用户。
反例
用户本想搜索，但进入页面时被突然的抽奖弹窗打断； 对抽奖不感兴趣的用户是非常不友好的干扰； 甚至有些用户确实被“有吸引力”的抽奖活动所吸引，离开抽奖主流程后，可能会忘记*初的目标，进而失去对产品真正价值的使用和理解。
明确
一旦用户进入我们的小程序页面，我们有责任和义务清楚、明确地告知用户自己在哪里、可以去哪里，确保用户可以在页面中自由移动而不会迷路，从而为用户提供便利。安全愉快的使用体验。
导航清晰，来去方便
导航是保证用户在浏览网页时不迷路的*关键因素。 导航需要告诉用户我在哪里，我可以去哪里，如何返回等。首先，微信系统中所有小程序的所有页面都会有微信提供的自己的导航栏，可以统一解决我在哪里以及如何返回的问题。 保持微信级导航体验一致，有助于用户在微信内形成统一的体验和交互感知，而无需在小程序和微信之间切换时增加额外的学习成本或改变使用习惯。
微信导航栏
微信导航栏直接继承自客户端。 除了导航栏的颜色之外，开发不需要也无法自定义其他内容。 但开发需要指定小程序各页面之间的跳转关系，以便导航系统能够合理工作。
微信导航栏分为导航区、标题区和操作区。 导航区域控制节目页面流程。 目前，导航栏分为深色和浅色两种基本颜色基于微信小程序轻快的特点，我们拟定了界面设计指南和建议，在iOS和显示中有所不同，如下图所示：
导航区域（iOS）
导航区域通常只有一个操作，就是返回上一级界面。 开发可以定义其内容，但不能修改样式。
导航区()
和iOS一样，导航区域只有一个返回上一页的操作，点击手机自带的硬件返回键也起到同样的作用。
微信导航栏自定义颜色规则（iOS及）
小程序导航栏支持基本的背景颜色自定义。 所选的颜色需要在满足可用性的前提下与微信提供的两套主导航栏图标和谐搭配。 建议参考以下选色效果：
配色方案示例
页内导航
开发可以根据自己的功能设计需求，在页面中添加自己的导航。 并保持不同页面之间的导航一致。 但由于手机屏幕尺寸的限制，小程序页面的导航应尽可能简单。 如果只是一般的线性浏览，建议只使用微信导航栏。
微信控件库提供标签导航供开发选择。 标签分页栏可以固定在页面顶部或底部，方便用户在不同标签之间切换。 为保证可点击区域，标签不得超过 4 项。 一个页面不应有超过一组选项卡式分页栏。
Tab分页栏的选中状态默认为100%纯色，未选中状态为60%。 可以自定义所选状态的颜色。 在自定义颜色选择中，务必注意保持分页栏标签的可用性、可见性和可操作性。
减少等待并提供及时反馈。 长时间等待页面会导致用户产生不良情绪。 利用微信小程序项目提供的技术可以很大程度上缩短等待时间。 即便如此，当不可避免地出现加载等待的情况时，也需要及时反馈，以缓解用户等待的坏心情。
开始页面加载
小程序启动页是小程序在微信内容中一定程度展现品牌特征的页面之一。 该页面将突出显示小程序品牌特征和加载状态。 除启动页上显示品牌标志外，页面上的所有其他元素，例如加载进度指示器，均由微信统一提供，无法更改，不需要开发开发。
页面下拉刷新加载
在微信小程序中，微信提供了标准的页面下拉刷新加载能力和样式。 开发可以通过下拉交互自定义需要刷新的页面，微信将为此类交互提供标准的能力和样式。 风格上，刷新图标和下拉标志的颜色进行了捆绑，分为深色和浅色两套方案。 使用时，开发应注意标题文字、下拉标志和刷新图标的和谐统一。 当用户在此类页面上进行下拉交互时，会出现微信小程序页面标准的加载动画。 开发不需要开发自己的风格
带标签页下拉刷新加载
如果页面有标签分页（Tab），开发可以在标签栏下定义刷新动作位置，只刷新当前页面内容。 开发无法自己定义这个加载效果。
两组下拉样式，深色和浅色
微信下拉提示是为了让用户明确小程序的所有者，防止欺诈和作弊。 这里的标志提供了两套深色和浅色解决方案。 文字颜色无法自定义。 开发在自定义背景颜色时要注意保证下拉标识的可见性。 iOS 和配色方案相同微信小程序开发指南，如下所示。
微信下拉标签错误用例
请避免以下错误使用情况，以保证信息的可见性和页面的可用性
