请这样设计小程序【小程序界面UI交互教程】
更新时间：2021年10月14日18:27 来源：传智教育 观点：
在设计任何任务和流程时，异常状态和流程往往很容易被忽略，而这些异常场景往往是用户最沮丧、最需要帮助的时候。因此，异常状态的设计要特别注意，当异常发生时，要给予用户必要的重视。状态提示，并告知解决方案，以便有路可退。
需要防止出现用户莫名其妙地卡在某个页面，出现异常状态无处可去的情况。上面提到的模态对话框和结果页面可以作为异常状态的提醒。另外，在表单页面中，尤其是表单项较多的页面中，要明确指出错误项，以便用户修改。
为避免用户在使用微信小程序服务时注意力受到周边复杂环境的干扰，小程序的设计应减少无关设计元素对用户目标的干扰，礼貌地向用户展示小程序提供的服务，并友好地引导用户完成操作。
强调
每个页面都应该有一个清晰的焦点，以便用户在每次进入新页面时都能快速了解页面的内容。在确定关键点的前提下，尽量避免页面上其他与用户决策和操作无关的干扰因素。
流程清晰
为了让用户能够流畅地使用页面，当用户在执行某个操作进程时，应避免在用户目标进程之外的内容打断用户。
一旦用户进入我们的小程序页面，我们有责任和义务清楚地告知用户他们在哪里，可以去哪里，确保用户在页面中可以自由移动而不会迷路，从而提供安全保障为用户带来愉悦的体验。
导航一目了然，来去自如
导航是确保用户在浏览网页时不会迷路的最关键因素。导航需要告诉用户他们在哪里，他们可以去哪里，以及如何返回。微信目前在小程序中没有提供统一的导航栏样式。开发者可以根据自己的需要设计小程序的首页和二级页面界面导航。建议所有二级页面的左上角提供返回上一页的操作。
此外，微信iOS用户还可以在界面边缘向右滑动，返回之前的小程序或微信页面。 用户可以使用物理后退按钮执行相同操作。
小程序菜单
小程序的所有页面，包括小程序内嵌的网页和插件，微信都会在右上角放置官方小程序菜单，样式如图。开发者无法自定义其内容，但可以选择深色和浅色两种基本配色方案，以适应页面设计风格。官方小程序菜单会放置在界面的固定位置。开发人员在设计界面时应在该区域预留空间。如果需要在该区域附近放置交互元素，则需要特别注意交互事件是否会发生冲突以及操作是否易于使用。.
页面内导航
开发者可以根据自己的功能设计需求，在页面中添加自己的导航。并且保持不同页面之间的导航一致，指向清晰，有退路。由于手机屏幕尺寸的限制，小程序页面的导航应该尽量简单。建议开发者自己设计的导航样式与微信官方小程序菜单样式不同，以便区分。
菜单栏和选项卡
开发者可以在小程序页面中添加标签导航（Tab）。tab分页栏可以固定在页面的顶部或底部，方便用户在不同的分页之间切换。标签个数不小于2个，最大不超过5个。为保证点击区域，建议标签个数不超过4个。标签式分页栏也不能出现超过一组在一个页面上。
其中，小程序首页可以选择微信提供的原生底部标签分页样式，仅用于小程序首页。开发过程中可以自定义图标样式、标签文字和文字颜色等。具体的图标大小等设置请参考开发文档和WeUI基础控件库。
菜单栏和选项卡
顶部标签分页栏颜色可以自定义。在自定义颜色选择中，务必注意保持分页栏标签可用、可见和可操作。
少等待，及时反馈
在页面上等待时间过长会给用户带来不良情绪。使用微信小程序项目提供的技术已经能够大大缩短等待时间。即便如此，当不可避免地出现加载和等待时，也需要及时反馈，以缓解用户等待的坏心情。
开始页面加载
小程序启动页是小程序在微信中一定程度上展示品牌特征的页面之一。此页面将突出显示小程序品牌特征和加载状态。除了在启动页面显示品牌标志（Logo）外，页面上的所有其他元素，例如加载进度指示，均由微信提供，未经开发者任何开发不得更改。
本地加载反馈
部分加载反馈是指只对页面触发加载的部分进行反馈。这种反馈机制更有针对性，页面跳动小。是微信推荐的反馈方式。
全局加载反馈
开发者可以参考图中的样式，使用标题栏来提示加载小程序页面内容的过程。
加载反馈说明
如果加载时间较长，应提供取消操作，并使用进度条显示加载进度。
在加载过程中，要保持动画效果；没有动画效果的加载很容易给人一种界面卡住的错觉。
不要在同一页面上同时使用超过 1 个加载动画。
结果反馈
除了在用户等待时及时反馈外，还需要对操作结果进行清晰的反馈。根据实际情况，可选择不同的结果反馈方式。对于页面的本地操作，可以在操作区直接反馈，对于页面级的操作结果，可以通过弹出提示、模态对话框或者结果页面来展示。
页面本地操作结果反馈
对于页面的本地操作，可以在操作区直接反馈，如下图点击多选控件前后。对于常用控件，微信设计中心会提供控件库，所有控件库都提供了完整的操作反馈。
页面全局操作结果-图标式弹窗提示
图标式弹窗提示适用于轻量级的成功提示。1.5秒后自动消失，不中断进程，对用户影响不大。适用于不需要强调的操作提示，如成功提示。注意这种形式不适合错误提示，需要明确通知给用户，所以不适合使用闪过的弹窗提示。
页面全局操作结果-文字型弹窗提示
文本类型的弹出提示适用于需要对当前状态或小错误进行轻量级文本解释的错误。1.5秒后自动消失，不中断进程，对用户影响不大。
页面全局操作结果——模态对话框
需要用户清楚知道的操作结果的状态可以通过模态对话框进行提示，并可以附上下一步的说明。
页面全球运营结果——结果页面
对于运行结果为当前流程结束的情况，可以通过运行结果页面进行反馈。该方法最强烈、最清晰地告知用户操作已完成，并可根据实际情况对下一步操作给出指示。
异常可控，有退路
在设计任何任务和流程时，异常状态和流程往往很容易被忽略，而这些异常场景往往是用户最沮丧、最需要帮助的时候。因此，异常状态的设计要特别注意小程序开发分页功能，当异常发生时，要给予用户必要的重视。状态提示，并告知解决方案，以便有路可退。
需要防止出现用户莫名其妙地卡在某个页面，出现异常状态无处可去的情况。上面提到的模态对话框和结果页面可以作为异常状态的提醒。另外，在表单页面中，尤其是表单项较多的页面中，要明确指出错误项，以便用户修改。
异常状态 - 表单错误
表单报错，在表单顶部告知错误原因，并标识错误字段提示用户修改。
方便优雅
从PC时代的物理键盘鼠标到移动终端时代的手指，虽然输入设备大大简化，但手指操作的准确性远不如键盘鼠标准确。为了适应这种变化，开发者需要在设计过程中充分利用手机的特性，让用户可以方便、优雅地控制界面。
减少输出
由于手机键盘面积小而密，输入困难，容易造成输入错误。因此，在设计小程序页面时，尽量减少用户输入，利用现有的界面或其他一些易于操作的选择控件来改善用户输入体验。
避免输入错误 - 输入银行卡账户
例如图中，添加银行卡时，通过摄像头识别界面帮助用户输入。此外，微信团队还对外开放了地理位置界面等多种微信小程序界面。充分利用这些接口，将大大提高用户输入的效率和准确性，从而优化体验。
少打字 - 智能帮助打字
除了利用界面，当你必须让用户手动输入时，尽量让用户做出选择而不是键盘输入。一方面，回忆很容易记住，用户从有限的选项中进行选择通常比仅仅依靠记忆输入更容易；另一方面，仍然认为手机键盘密集的单键输入很容易导致输入错误。例如，在图中，在用户搜索时提供搜索历史快捷键选项，将有助于用户快速搜索，减少或避免不必要的键盘输入。
避免误用
因为在手机上，我们用手指触摸屏幕来控制界面，而手指的点击精度远不如鼠标。因此，在设计页面可点击的控件时，要充分考虑热点区域的面积，避免可点击区域过小或过密造成误操作。将原本在电脑屏幕上使用的界面，简单地移植到手机上，不做任何适配，往往容易出现这样的问题。由于手机屏幕分辨率的不同，最适合点击的像素尺寸并不完全相同，但换算成物理尺寸后大致在7mm-9mm之间。在微信提供的标准组件库中，
通过接口提高性能
微信设计中心推出了一套标准的网页控件库，包括设计控件库和设计控件库，未来会完善小程序组件。这些控件充分考虑了移动页面的特点，可以保证在移动页面上。同时，微信开发团队也在不断完善和扩展微信小程序界面，提供微信公共库。使用这些资源不仅可以为用户提供更快的服务，还可以大大提高页面性能。它可以无形地改善用户体验。
除了上面提到的原则外，建议小程序访问微信时要时刻注意不同页面之间的统一性和连续性，尽量在不同的页面上使用一致的控件和交互方式。
统一的页面体验和连续的界面元素，有助于以最少的学习成本实现使用目标，减少页面跳转带来的不适感。正因为如此，小程序可以根据自己的需要使用微信提供的标准控件，从而达到统一稳定的目的。
你可能也会喜欢：
微信小程序和公众号有什么区别？
前端教程：一天掌握企业级微信小程序的开发与应用
为什么企业需要开发微信小程序？微信小程序有什么优势？
H5的种类有哪些？如何制作H5页面？
传智教育UI/UE设计课程培训
最新消息
相关阅读
0股到：