小程序设计规范-沈阳微信开发

基于微信小程序的亮度，我们开发了一个小程序接口设计指南和建议。设计指南基于对用户知情权和操作权的充分尊重。旨在在微信生态系统中创建友好，高效和一致的用户体验，同时在很大程度上适应和支持不同需求，为用户和小程序服务提供商实现双赢。

首先，友好的礼貌为了避免用户在微信中使用小程序服务，注意力受到周围复杂环境的干扰。 小程序应注意减少无关设计元素对用户目标的干扰，并礼貌地向用户显示程序提供的服务。引导用户操作友好。 1.专注于每个页面应该有一个明确的焦点，以便用户可以在每次进入新页面时快速了解页面内容。在确定关键点的前提下，我们应该尽量避免页面上与用户决策和操作无关的其他干扰因素。反例

此页面的主题是查询，但它添加了许多与查询无关的业务门户。它与用户的目标无关，很容易导致用户迷路。

纠正性地删除与用户目标无关的任何内容，阐明页面主题，并提供帮助用户做出决策和操作的帮助内容，例如技术和页面控件允许的近搜索术语。反例显示没有主要或次要操作，因此用户别无选择。纠正性地表明您必须避免太多并行操作供用户选择。当您必须并行安排多个操作时，您需要区分操作主要和次要操作，并降低用户选择的难度。 2.过程是明确的为了使用户平滑地使用页面，当用户执行操作过程时，应该通过避免用户的目标过程以外的内容来中断用户。反例表明用户在进入页面时打算搜索并被突然的模态抽奖箱打断;对彩票不感兴趣的用户是非常不友好的干扰;即使一些用户确实是“有吸引力”的吸引力被活动吸引，在离开主要过程来抽奖之后，原始目标可能会被遗忘，并且可能会失去对产品真实价值的使用和理解。二，清晰明确一旦用户进入我们的小程序页面，我们有责任和义务清楚明确地告知用户去哪里和去哪里，以确保用户能够在页面中自由穿梭而不会迷路，所以用户提供安全和愉快的体验。 1.导航清晰，免费导航是确保用户在浏览页面时不会迷路的关键因素。导航需要告诉用户当前的位置，去哪里，如何返回等等。首先，微信系统中的所有小程序页面都有一个由微信提供的导航栏，以解决返回的位置和方法的问题。 微信级导航使体验保持一致，这有助于用户在微信内形成统一的体验和交互感知，而无需在每个小程序和其他微信页面的切换中增加学习成本或改变使用习惯。 ＆lt; 1.微信导航栏微信导航栏，直接从客户端继承，除了导航栏的颜色外，开发人员无需自定义内容。 但是，开发人员需要指定小程序每个页面的跳转关系，以便导航系统能够以合理的方式工作。 微信导航栏分为导航区域，标题区域和操作区域。导航区域控制程序页面过程。目前，导航栏分为两种基本颜色组合。 ＆2。导航区域（iOS）微信进入小程序的页面，导航区域通常只有一个操作——“返回”，即返回到小程序之前的微信页面。在小程序之后进入辅助页面后，导航区域的操作是——“返回”和“关闭”。 “Back”返回前一个小程序接口或微信接口。 “关闭”，即直接退出当前界面上的小程序，并在进入小程序之前返回微信页面。 ＆LT; 3。导航区（Android）导航区仅存在操作——直接退出小程序，在进入小程序之前返回微信或系统桌面，并且Android手机的硬件返回键执行返回上一页的操作。有一个特殊的Android导航案例：当用户通过操作区菜单将小程序添加到Android桌面，并从Android桌面打开小程序时，小程序的页面不显示导航按钮。仅显示小程序标题和操作区域。 小程序辅助页面，导航区域仅返回上一页的操作，单击Android手机附带的硬件返回按钮也起到同样的作用。 ＆lt; 4.微信导航栏自定义颜色规则（iOS和Android）小程序导航栏支持基本的背景颜色自定义功能，所选颜色需要在满足可用性的前提下匹配微信提供的两组主导航栏图标。建议参考以下颜色选择效果：颜色选择方案示例＆lt; 5。页内导航开发人员可以根据自己的功能设计将自己的导航添加到页面中。 并保持不同页面之间的导航一致。但是，受移动电话屏幕尺寸的限制，小程序页面的导航应尽可能简单。如果仅推荐用于一般线性浏览的页面，则只能使用微信导航栏。开发人员可以选择在小程序页面上添加选项卡导航（Tab）导航。标签页栏可以固定在页面的顶部或底部，便于用户在不同页面之间切换。标签数量不得少于2，且不得超过5.为确保点击区域，建议的标签数量不超过4.页面也不应超过一组标签。 小程序页面可以选择微信提供的本机底部标签分页样式，该样式仅用于小程序页面。可以在开发期间自定义图标样式，标签副本和副本颜色。有关图标大小等特定设置项，请参阅开发文档和WeUI基本控件库。顶部标签页栏颜色可以自定义。在自定义颜色选择中，保持标签栏标签的可用性，可见性和可操作性非常重要。 2.减少等待，等待页面长时间反馈会导致用户心情不好，使用微信小程序项目提供的技术已经能够大大减少等待时间。即便如此，当不可避免地发生装载和等待时，需要及时反馈以缓解用户等待的不良情绪。 ＆。1。慧海页面加载小程序汇海页面是小程序在微信内展示品牌特征的页面之一。此页面将突出显示小程序品牌特征和加载状态。除了品牌标识显示外，页面上的所有其他元素（如加载进度指示器）均由微信统一提供，如果没有开发人员开发，则无法更改。 ＆2。页面下拉刷新加载在微信小程序中，微信提供标准页面下拉刷新加载能力和样式，开发人员不需要自己开发。 ＆lt; 3.微信下拉刷新错误用例请避免以下错误情况，以确保信息的可见性和页面的可用性。 ＆LT; 4。页内加载反馈开发人员可以在小程序中自定义页面内容的加载方式。建议自定义加载样式应尽可能简洁，无论是本地使用还是全局使用，并使用简单动画通知用户加载过程。开发人员还可以使用微信提供的统一页面加载样式，如图中的示例所示。小于5。模态加载模态的加载模式将覆盖整个页面。由于无法清楚地指出特定装载的位置或内容，因此可能会引起用户的焦虑，因此应谨慎使用。除某些全局操作外，不要使用模态加载。 ＆10 6。部分加载的反馈部分加载的反馈仅是触发加载的页面上的部分反馈。这种反馈机制更有针对性，页面抖动很小，这是微信推荐的反馈方法。例如：负载反馈注意事项如果加载时间很长，则应提供取消操作并使用进度条显示负载的进度。在加载过程中，你应该保持动画效果;无动画加载很容易造成界面卡住的错觉。不要在同一页面上同时使用多个加载动画。 ＆LT; 7。结果反馈除了在用户等待过程中及时反馈外，操作结果还需要明确反馈。可以根据实际情况选择不同的结果反馈样式。对于页面本地操作，可以在操作区域中进行直接反馈。对于页面级操作结果，可以使用弹出提示（Toast），模态对话框或结果页面显示。 ＆LT; 8。页面本地操作结果反馈对于页面的本地操作，可以在操作区域中给出直接反馈，例如，在单击多选控件之前和之后，如下所示。对于通用控件，微信设计中心将提供一个控件库，所有控件都提供完整的操作反馈。 ＆lt; 9.Page全局操作结果——弹出提示（Toast）弹出提示（Toast）适用于轻量级成功提示，1.5秒后自动消失，不中断进程，对用户影响较小，适用于不需要强调的操作提醒，例如成功提示。请务必注意，此表单不适用于错误提示，因为错误提示需要清楚地传达给用户，因此使用闪烁过去的弹出提示是不合适的。 ＆LT; 10。页面全局操作结果——模态对话框模态对话框可以提示用户需要清楚知道的操作结果的状态，可以附加下一步操作。 ＆LT; 11。页面全局操作结果 - 结果页面对于操作结果已经是当前过程结束的情况，操作结果页面可用于反馈。该方法是一种强有力的，明确的方式，告知用户操作已经完成，并可根据实际情况给出下一步的指导。 3.异常可控，有退路的方法在设计任何任务和过程时，异常状态和过程往往容易被忽视，而这些异常情况往往是在用户沮丧并需要帮助时，所以他们需要特别注意异常状态。设计，在发生异常时向用户提供必要的状态提示，并通知解决方案使其可用。为了消除异常状态，用户无法理解并且无处可去，并且卡在某个页面上。上面提到的模态对话框和结果页面可用作异常状态的提醒。另外，在表单页面中，特别是在包含更多表单项的页面中，应该清楚地指出错误项，以便用户可以修改它。异常状态——表单错误表单报告错误，告知表单顶部的错误原因，并标识提示用户修改的错误字段。三，方便和优雅从PC时代的物理键盘和鼠标到移动端的手指，虽然输入设备大大简化，但手指操作的准确性不如键盘和鼠标精确。为了适应这种变化，开发人员需要在设计过程中充分利用手机功能，使用户能够方便，优雅地控制界面。 1.减少输入由于手机的键盘区域小而密，输入困难，输入错误容易。因此，在设计小程序页面时，用户输入被最小化，并且现有界面或其他易于操作的选择控件用于改善用户输入。经验。例如，在下图中，添加银行卡时，摄像机识别界面用于帮助用户输入。此外，微信团队还可以使用各种微信小程序接口，例如地理接口。充分利用这些接口将极大地提高用户输入的效率和准确性并优化体验。除了使用界面，当你必须让用户手动输入时，你应该尝试让用户做出选择而不是键盘输入。一方面，记忆很容易记住，用户通常更容易在有限的选项中做出选择。另一方面，很容易依赖记忆输入;另一方面，由于手机键盘的密集单按钮输入，仍然容易引起输入错误。例如，在该图中，在搜索用户时提供搜索历史快捷方式选项将帮助用户快速搜索，同时减少或避免不必要的键盘输入。 2.避免滥用。因为我们触摸手机上的屏幕来控制界面，所以手指的点击精度远远低于鼠标的点击精度。因此，当需要在设计页面上单击控件时，应充分考虑热区域以避免点击区域太小或太密集而不会导致误操作。当简单地将最初在计算机屏幕上使用的接口移植到移动电话而没有任何适应时，这些问题通常易于发生。由于移动电话的屏幕分辨率不同，所以合适的咔嗒声的像素尺寸不完全相同，但在转换成物理尺寸后大致在7mm到9mm之间。在微信提供的标准组件库中，各种控件都考虑了页面点击效果和不同屏幕的适应性，因此建议再次使用或模仿标准控件尺寸。 3.使用界面提高性能微信 Design Center推出了一套web标准控件库，包括草图设计控件库和Photoshop设计控件库，并将进一步完善小程序组件，这些控件都充分考虑了特性移动页面，可以保证移动页面的可用性和操作性能;与此同时，微信开发团队不断改进和扩展微信小程序接口，并提供微信公共库。这些资源不仅可以为用户提供更快的服务，还可以提供页面性能。这种改进效果很好，无形中增强了用户体验。四，统一稳定性除了上述原则外，建议连接到微信的小程序还应注意不同页面之间的一致性和连续性，尽量在不同页面上使用一致的控件和交互方法。统一的页面体验和连续的界面元素将有助于实现使用目标，同时降低学习成本，减少页面反弹带来的不适感。因此，小程序可以根据需要使用微信提供的标准控件来实现统一的稳定性。 V.视觉规范＆lt; 1。字体规范微信中字体的使用与正在运行的系统字体一致。常用的字体大小为20,18,17,16,14,13（pt），使用场景如下：＆lt; 2.字体颜色主要内容黑色黑色，次要内容灰色灰色;时间戳和表格默认值浅灰色;大段描述内容属于Semi black的主要内容。蓝色是链接颜色，绿色是结束颜色，红色是错误颜色。按下和禁用状态分别将透明度降低到20％和10％。 ＆LT; 3。列出视觉规范＆lt; 4。表格输入视觉规范＆lt; 5。按钮使用原理＆lt; 6。图标使用原理6.资源下载方便设计人员设计，微信提供了一套网页设计和小程序使用的基本控件库;它还提供便于开发人员调用的资源。 WeUI_sketch组件库下载WeUI_PS组件库下载