如何制作一款优秀的微信小程序？ 《微信》小程序设计方法教程
现在微信小程序大家应该都很熟悉了。从微信小程序最初推出到现在，小程序无论是在功能还是使用上都给用户带来了优秀的体验。由于微信小程序比移动应用程序更容易开发和制作，因此现在微信中的小程序非常多。如何才能做出一款优秀的微信小程序呢？本文将为您详细解答。
【微信小程序设计指南】
概括
基于微信小程序轻快的特点，我们制定了小程序界面设计指南和建议。
设计准则以充分尊重用户的知情权和操作权为基础。旨在在微信生态内建立友好、高效、一致的用户体验，同时最大限度地适应和支持不同的需求，实现用户和小程序服务提供商的双赢。
友善且有礼貌
为了防止用户在微信中使用小程序服务时被复杂的周围环境分散注意力，小程序在设计小程序时应注意减少不相关的设计元素对用户目标的干扰，礼貌地展示程序提供的服务给用户，友好的引导用户进行操作。
强调
每个页面应该有明确的重点，以便用户每次进入新页面时都能快速了解页面内容。在确定焦点的前提下，尽量避免页面上出现其他影响用户决策和操作的分散注意力的项目。
反例
该页面的主题是查询，但却添加了很多与查询无关的业务条目，与用户期望不一致，很容易导致用户迷失。
校正信号
删除任何与用户目标不相关的内容，明确页面主题，并在技术和页面控件允许的范围内提供对用户目标有帮助的帮助内容，例如最近的搜索词、常用的搜索词等。
反例
操作没有优先级，用户别无选择。
校正信号
首先，要避免并行太多的操作供用户选择。当多个操作必须并行时，需要区分主次操作，以降低用户选择的难度。
流程清晰
为了让用户能够顺利地使用页面，当用户在执行某个操作过程时，应该避免用户目标过程之外的内容打断用户。
反例
用户本想搜索，但进入页面时被突然的抽奖弹窗打断；对于对抽奖不感兴趣的用户来说是非常不友好的干扰；
而即使部分用户确实被“有吸引力”的抽奖活动所吸引，但在离开主流程参与抽奖后也可能忘记了最初的目标，进而失去了对产品真正价值的使用和理解。
明确
一旦用户进入我们的小程序页面，我们有责任和义务清楚、明确地告知用户自己在哪里、可以去哪里，确保用户可以在页面中自由移动而不会迷路，从而为用户提供便利。安全愉快的使用体验。
导航清晰，来去方便
导航是保证用户在浏览网页时不迷路的最关键因素。导航需要告诉用户我在哪里，我可以去哪里，如何返回等。首先，微信系统中所有小程序的所有页面都会有微信提供的自己的导航栏，可以统一解决我在哪里以及如何返回的问题。保持微信级导航体验一致，有助于用户在微信内形成统一的体验和交互感知，而无需在小程序和微信之间切换时增加额外的学习成本或改变使用习惯。
微信导航栏
微信导航栏直接继承自客户端。除了导航栏的颜色之外，开发者不需要也无法自定义其他内容。但开发者需要指定小程序各页面之间的跳转关系，以便导航系统能够合理工作。
微信导航栏分为导航区、标题区和操作区。导航区域控制节目页面进程。目前，导航栏分为两种基本颜色：深色和浅色。
导航区域（iOS）
导航区域通常只有一个操作，就是返回上一级界面。
导航区(Android)
和iOS一样，导航区域只有一个返回上一页的操作，点击Android手机自带的硬件返回键也起到同样的作用。
微信导航栏自定义颜色规则（iOS和Android）
小程序导航栏支持基本的背景颜色自定义。所选颜色需要在满足可用性的前提下和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果：
配色方案示例
页内导航
开发者可以根据自己的功能设计需求，在页面中添加自己的导航。并保持不同页面之间的导航一致。但由于手机屏幕尺寸的限制，小程序页面的导航应尽可能简单。如果只是一般的线性浏览，建议只使用微信导航栏。
开发者可以选择在小程序页面添加标签导航。标签分页栏可以固定在页面顶部或底部，方便用户在不同标签之间切换。标签数量不少于2个，最大不超过5个。为保证可点击面积，建议标签数量不要超过4个。一个页面不应有超过一组选项卡式分页栏。
其中，小程序首页可以选择微信提供的原生底部tab分页样式。该样式仅在小程序首页使用。开发时可以自定义图标样式、标签文案、文案颜色等，具体设置请参考开发文档。
顶部选项卡分页栏的颜色可以自定义。在自定义颜色选择中，务必注意保持分页栏标签的可用性、可见性和可操作性。
减少等待并及时反馈
页面等待时间过长，会引起用户的不良情绪。使用微信小程序项目提供的技术可以很大程度上缩短等待时间。即便如此，当不可避免地出现加载等待的情况时，也需要及时反馈，以缓解用户等待的坏心情。
开始页面加载
小程序启动页是小程序在微信内容中一定程度展现品牌特征的页面之一。该页面将突出显示小程序的品牌特征和加载状态。除启动页上显示品牌标志外，页面上的所有其他元素，例如加载进度指示器，均由微信统一提供，无法更改，不需要开发者开发。
页面下拉刷新加载
在微信小程序中，微信提供了标准的页面下拉刷新加载能力和样式。
开发者可以通过下拉交互自定义需要刷新的页面，微信将为此类交互提供标准的能力和样式。风格上，刷新图标和下拉标志的颜色进行了捆绑，分为深色和浅色两套方案。使用时，开发者应注意标题文字、下拉标志和刷新图标的和谐统一。当用户在此类页面上进行下拉交互时，会出现微信小程序页面标准的加载动画。开发者不需要开发自己的风格
两组下拉样式，深色和浅色
微信下拉提示是为了让用户明确小程序的所有者，防止欺诈和作弊。这里的标志提供了两套深色和浅色解决方案。文字颜色无法自定义。开发者在自定义背景颜色时要注意保证下拉标识的可见性。 iOS 和Android 的配色方案相同，如下所示。
微信下拉标签错误用例
请避免以下错误使用情况，以保证信息的可见性和页面的可用性
页面加载反馈
开发者可以自定义小程序中页面内容的加载样式。建议无论是本地使用还是整体使用，自定义加载样式都尽量简洁，用简单的动画来告知用户加载过程。
开发者还可以使用微信提供的统一页面加载样式，如图示例。
模态加载
模态加载样式将覆盖整个页面。由于无法明确告知具体加载位置或内容，可能会引起用户焦虑，因此应谨慎使用。除某些全局操作外，不要使用模态加载。
部分加载反馈
也就是说，仅在触发加载的页面上提供部分反馈。这种反馈机制更有针对性，需要的页面改动也更少。是微信推荐的反馈方式。例如：
加载反馈注意事项
如果加载时间较长，需要提供取消操作，并使用进度条显示加载进度。
加载过程中，应保持动画效果；没有动画效果的加载很容易给人一种界面卡住的错觉。
不要在同一页面上同时使用超过1 个加载动画。
结果反馈
除了在用户等待时及时反馈之外，还需要对操作结果进行清晰的反馈。根据实际情况，可以选择不同的结果反馈方式。对于页面本地操作，可以在操作区域直接反馈。对于页面级的操作结果，可以采用弹出提示（Toast）、模式对话框或者结果页面的方式展示。
页面部分操作结果反馈
对于页面的本地操作，可以在操作区域直接反馈，例如如下图，点击多选控件前后。对于常用的控件，微信设计中心会提供一个控件库，里面的控件会提供完整的操作反馈。
页面全局操作结果——弹出提示（Toast）
弹出提示（Toast）适合轻量级的成功提示。 1.5秒后自动消失，不中断进程，对用户影响很小。适合不需要强调成功状态的操作提醒。请注意，此表格不适用于错误提醒。
页面全局运行结果——模态对话框
模态对话框可以用来提示用户需要清楚了解的操作结果的状态，并可以附有下一步操作指令。
页面全局操作结果—结果页
对于操作结果为当前流程结束的情况，您可以通过操作结果页面进行反馈。这种方法是告知用户操作已经完成的最有力、最明确的方式，并且可以根据实际情况为下一步操作提供指导。
异常是可控的，有出路
在设计任何任务和流程时，异常状态和流程往往很容易被忽视，而这些异常场景往往是用户最沮丧、最需要帮助的时候。因此，需要特别注意异常状态的设计，并在异常发生时给予用户必要的支持。提供状态提示和解决方案，以便有出路。
要防止出现用户异常状态卡在某个页面无处可去的情况。 2.2中提到的弹窗和结果页面可以作为异常状态的提醒。另外，在表单页面，尤其是表单项较多的页面，应明确指出错误项，以便用户修改。
异常状态—— 表单错误
如果表单报错，请在表单顶部告知错误原因，并标识错误字段，提示用户修改。
方便又优雅
从PC时代的物理键盘和鼠标，到移动时代的手指，虽然输入设备已经大大简化，但手指操作的准确性却远不如键盘和鼠标精确。为了适应这种变化，开发者需要在设计过程中充分利用手机功能，为用户提供方便、优雅的控制界面。
减少投入
由于手机键盘面积小且密集，输入困难，容易导致输入错误。因此，在设计小程序页面时，尽量减少用户输入，并利用现有的界面或其他易于操作的选择控件来改善用户的输入体验。
减少输入，熟练使用界面
比如下图，添加银行卡时，通过摄像头识别界面来帮助用户输入。此外，微信团队还对外开放地理位置接口等各种微信小程序接口。
，充分利用这些接口将大大提高用户输入的效率和准确性，从而优化体验。
除了使用界面之外，当用户必须手动输入时，尽量让用户做出选择，而不是键盘输入。一方面，回忆很容易记住，用户通常比完全依赖记忆输入更容易在有限的选项中做出选择；另一方面，仍然认为手机键盘上密集的单键输入很容易导致输入错误。
例如图中，在用户搜索时提供搜索历史快捷选项，将有助于用户快速搜索，减少或避免不必要的键盘输入。
避免误操作
因为在手机上我们是通过手指触摸屏幕来控制界面的，所以手指的点击精度远不如鼠标。因此，在设计页面上需要点击的控件时，我们需要充分考虑其热区面积，避免可点击区域过小或过小。过密易造成误动作。当原本在电脑屏幕上使用的界面未经任何适配而简单地直接移植到手机上时，往往很容易出现这样的问题。由于手机屏幕分辨率不同，最佳点击像素尺寸并不完全一致，但换算成物理尺寸后，大致在7mm-9mm之间。微信提供的标准组件库中，各种控件元素已经考虑到了页面点击效果以及对不同屏幕的适配，因此再次建议使用或模仿标准控件尺寸进行设计。
利用接口来提高性能
微信设计中心推出了一套Web标准控件库，包括Sketch设计控件库和Photoshop设计控件库。未来我们也会完善小程序组件。这些控件充分考虑了移动页面的特点，可以保证其在移动设备上的使用。终端页面的可用性和操作性能；同时，微信开发团队正在不断完善和扩展微信小程序接口，提供微信公共库。使用这些资源不仅可以为用户提供更快的服务，还可以提高页面性能。效果很大，无形中提升了用户体验。
统一稳定
除了上述原则外，建议接入微信的小程序要时刻注意不同页面之间的统一性和连续性，尽量在不同页面上使用一致的控件和交互方式。
统一的页面体验和一致的界面元素将有助于以最小的学习成本实现使用目标，并减少页面跳转带来的不适感。正因为如此，小程序可以根据需要使用微信提供的标准控件，达到统一稳定的目的。
视觉规范
为了方便设计师进行设计，微信提供了一套基础控件库，可用于网页设计和小程序；还提供了方便开发者调用的资源。
字体规格
微信中字体的使用与运行系统字体一致。常见的字体大小为20、18、17、16,14、13、11 (pt)。使用场景如下：
字体颜色
主内容为黑色，次要内容为灰色；时间戳和表单默认值是浅灰色；主要内容的大段描述内容为半黑色；
蓝色是链接的颜色，绿色是完成的颜色，红色是错误的颜色。 Press 和Disable 状态分别将透明度降低至20% 和10%；
列出视觉规格
/www.netshop168.com/includes/ueditor/php/../../../bdimages/upload1/20180413/19201523609256.png" /> 表单输入视觉规范
按钮使用原则
列表外按钮上文字标准
按钮高度为44px下使用颜色 #000000 / #353535 字号 18pt
可点状态下文字调整透明度为60%
不可点状态下文字调整透明度为30%
列表外按钮上文字标准
按钮高度为25px下使用颜色 #000000 / #353535 字号 14pt
页面线性按钮上文字标准
按钮高度为35px下使用颜色 #09BB07 / #353535 字号 16pt
图标使用原则
