怎样设计小程序界面？10分钟教会你小程序的UI设计

　　在任何任务和过程的设计中，异常状态和过程往往容易被忽视，这些异常场景往往是用户最沮丧和需要帮助的时间，所以需要特别注意异常状态的设计，给用户必要的状态提示，并通知解决方案，使其能够撤退。

　　为了防止用户在异常状态下莫名其妙、无处可去、停滞在某个页面上的情况。上述模式对话框和结果页面可作为异常状态的提醒。此外，在表单页面中，特别是表单项较多的页面中，应明确指出错误的项目，以便用户修改。

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

　　突出重点

　　每个页面都应该有一个明确的关键点，以便用户在进入新页面时能够快速理解页面内容。在确定关键点的前提下，尽量避免与用户决策和操作无关的其他干扰因素。

　　流程明确

　　为了让用户顺利使用页面，用户在进行某一操作流程时，应避免用户目标流程以外的内容而中断用户。

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

　　导航清晰，来去自由

　　导航是确保用户在浏览和跳转网页时不会迷路的最关键因素。导航需要告诉用户目前在哪里，你可以去哪里，如何回去等等。微信不提供小程序中统一的导航栏样式，开发人员可以根据需要设计小程序主页和次页面界面导航。建议所有次级页面的左上角返回上一级页面。

　　此外，微信iOS用户还可以通过界面边缘向右滑动，返回上一个小程序或微信页面。Android用户可以通过物理返回键达到相同的目的。

　　小程序菜单

　　所有的小程序页面，包括嵌入网页和插件的小程序，微信将把官方的小程序菜单放在右上角，风格如图所示。开发者不能定制其内容，但可以选择两种基本颜色来适应页面设计风格。 官方小程序菜单将放置在界面固定位置。开发人员在设计界面时，请保留该区域的空间。如果需要在该区域附近放置交互元素，应特别注意交互事件是否会发生冲突，操作是否容易使用。

　　页面内导航

　　开发人员可以根据自己的功能设计需要在页面中添加自己的导航。并保持不同页面之间的导航一致，方向清晰，有一条退路。由于手机屏幕尺寸的限制，小程序页面的导航应尽可能简单。建议开发人员设计的自己的导航风格与微信官方小程序菜单风格不同，以区分。

　　菜单栏和Tab

　　开发人员可以在小程序页面上添加标签分页(Tab)导航。标签分页栏可以固定在页面的顶部或底部，以便用户在不同的分页之间切换。标签数量不得少于2个，最多不得超过5个。为确保点击区域，建议标签数量不得超过4个。一组以上的标签分页栏不应出现在一个页面上。

　　其中，小程序主页可以选择微信提供的原始底部标签页面样式，仅供小程序主页使用。在开发过程中，您可以定制图标样式、标签文案和文案颜色。图标尺寸等具体设置可参考开发文档和网络用户界面基本控件库。

　　菜单栏和Tab

　　顶部标签分页栏的颜色可以自定义。在选择自定义颜色时，一定要注意保持分页栏标签的可用性、可视性和可操作性。

　　减少等待，及时反馈

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

　　启动页加载

　　小程序启动页面是微信中小程序在一定程度上展示品牌特征的页面之一。本页将突出小程序的品牌特征和加载状态。除品牌标志外，启动页面(Logo)除显示外，页面上的所有其他元素，如加载进度指示，均由微信统一提供，无需开发人员开发即可更改。

　　局部加载反馈

　　局部加载反馈是指只在触发加载页面的局部反馈。这种反馈机制更有针对性，页面跳动小，是微信推荐的反馈方式。

　　全局加载反馈

　　开发人员可以参考图中的样式，并使用标题栏提示加载小程序页面内容的过程。

　　加载反馈注意事项

　　如果载入时间较长，则应提供取消操作，并使用进度条显示载入进度。

　　动画效果应在载入过程中保持 ; 没有动画效果的加载很容易产生界面卡住的错觉。

　　不要同时在同一页面上使用一个以上的加载动画。

　　结果反馈

　　除了用户在等待过程中需要及时反馈外，还需要明确反馈操作结果。根据实际情况，可以选择不同的结果反馈风格。对于页面的局部操作，可以在操作区域直接反馈。对于页面级操作结果，可以使用弹出提示、模态对话框或结果页面显示。

　　反馈页面局部操作结果

　　对于页面的局部操作，可以直接反馈到操作区域，如下图所示。对于常用控件，微信设计中心将提供控件库，所有控件都提供完整的操作反馈。

　　页面全局操作结果-图标弹出提示

　　图标弹出提示适用于轻量级成功提示，1.5秒后自动消失，不中断流程，对用户影响不大，适用于不需要强调的操作提示，如成功提示。特别注意这种形式不适用于错误提示，因为错误提示需要清楚地告知用户，所以不适合使用闪光弹出提示。

　　页面全局操作结果-文字弹出提示

　　文本弹出提示适用于需要用文本轻量化解释当前状态或提醒不严重的错误。1.5秒后自动消失，不中断流程，对用户影响不大。

　　页面全局操作结果-模态对话框

　　模态对话框可以提示需要用户清楚知道的操作结果状态，并可以附带下一个操作指南。 页面全局操作结果-页面结果

　　对于操作结果已经是当前流程的结束，可以使用操作结果页面进行反馈。这种方法最强烈、最清楚地告知用户操作已经完成，并可以根据实际情况给出下一个操作指南。

　　异常可控，有路可退

　　在任何任务和过程的设计中，异常状态和过程往往容易被忽视，这些异常场景往往是用户最沮丧和需要帮助的时间，所以需要特别注意异常状态的设计，给用户必要的状态提示，并通知解决方案，使其能够撤退。

　　为了防止用户在异常状态下莫名其妙、无处可去、停滞在某个页面上的情况。上述模式对话框和结果页面可作为异常状态的提醒。此外，在表单页面中，特别是表单项较多的页面中，应明确指出错误的项目，以便用户修改。

　　异常状态-表单错误状态

　　表单报错，将错误原因告知表单顶部，并识别错误字段，提示用户修改。

　　便捷优雅

　　从PC时代的物理键盘鼠标到移动终端时代的手指，虽然输入设备非常简单，但手指操作的准确性远低于键盘鼠标。为了适应这一变化，开发人员需要充分利用手机的特点，使用户在设计过程中能够方便、优雅地控制界面。

　　减少输出

　　由于手机键盘面积小、密集，输入困难，也容易造成输入错误。因此，在设计小程序页面时，使用现有接口或其他易于操作的选择控件来改善用户输入体验，以尽量减少用户输入。

　　避免错误输入-输入银行卡账户

　　例如，在添加银行卡时，使用摄像头识别接口来帮助用户输入。此外，微信团队还开放了各种微信小程序接口，如地理位置接口 ，充分利用这些接口将大大提高用户输入的效率和准确性，进而优化体验。

　　智能帮助输入减少输入-智能帮助输入

　　除了使用接口外，当用户必须手动输入时，用户应该尝试选择而不是键盘输入。一方面，记忆很容易记住，用户很容易在有限的选项中做出选择。一般来说，完全依靠记忆输入是很容易的;另一方面，仍然考虑到手机键盘密集的单键输入很容易导致输入错误。 例如，在图中，提供搜索历史快速选项将帮助用户快速搜索，并减少或避免不必要的键盘输入。

　　避免误操作

　　因为在手机上，我们通过手指触摸屏幕来控制界面，手指的点击精度远低于鼠标，所以在设计页面上需要点击的控制器时，我们需要充分考虑其热区域，以避免因点击区域太小或太密集而导致误操作。如果只是简单地将原本在电脑屏幕上使用的界面直接移植到手机上而不做任何适配，往往会出现这样的问题。由于手机屏幕的分辨率不同，点击像素的大小并不完全一致，但物理大小在7mm-9mm之间。在微信提供的标准组件库中，各种控件元素都考虑了页面点击效果和不同屏幕的适应性，因此建议再次使用或模仿标准控件尺寸进行设计。

　　使用接口来提高性能

　　包括网页标准控件库在内的微信设计中心已经推出 控件库设计 和 Photoshop设计控件库，小程序组件将在未来得到改进。这些控件充分考虑了移动终端页面的特点，可以保证其在移动终端页面上的可用性和操作性能; 与此同时，微信开发团队也在不断完善和扩大微信小程序界面，并提供微信公共库，利用这些资源不仅可以为用户提供更快的服务，而且可以在提高页面性能方面发挥重要作用，实际上可以改善用户体验。

　　除上述原则外，建议访问微信的小程序还应始终注意不同页面之间的统一性和连续性，并尝试在不同页面上使用相同的控制器和交互模式。

　　统一的页面体验和连续的界面元素将有助于以最低的学习成本实现使用目标，减少页面跳动引起的不适。因此，小程序可以使用微信提供的标准控制器来实现统一和稳定的目的。