智能小程序组件

登录智能小程序

顶部导航栏智能小程序提供统一框架，并提供两种不同的导航栏样式

不论导航栏样式如何，框架统一为不同场景适配以下功能：

定义导航栏框架，或使用沉浸框架时，请务必关注并保证其可读性和可用性

正确背景色与文字色搭配可读性好

错误背景色与文字色搭配效果可读性差

底部标签栏标签栏，用于架构同级信息底部标签栏只可用于小程序首页场景。

提供两种样式的标签栏：

定义标签栏样式时，请务必关注并保证其的可读性和可用性

正确背景色与标签各态搭配效果可读性好

错误背景色与分类标签选中态搭配效果差

除了保证各单一组件视觉效果，也需要关注整体搭配后页面效果，是否符合审美并能传达品牌

正确品牌色明确，页面信息层次清晰

错误使用颜色过多，页面信息重点杂乱

按钮允许用户点击触发对应的操作大按钮大按钮高度固定为88px（44pt），圆角大小固定8px（4pt）自定义配置：按钮文案（不建议超过8个中文字符）

小按钮小按钮高度固定为56px（28pt），宽度最小114px（57pt），圆角大小固定6px（3pt）按钮内距离文字最小30px（15pt），文字较长时，按钮可按所需宽度拉伸适配自定义配置：按钮文案（不建议超过8个中文字符）

选项控件允许用户对选项进行选择选择控件允许用户选择某个值，这个值通常是选中/非选中，开/关。通常搭配列表使用，点击时组件状态在选中/非选中，开/关间切换。

连续滑块条允许用户通过滑动交互，完成一系列选项中的选择滑块选择条允许用户从一个范围内选择某个值，这个值通常是主观的、不精准的设置，如亮度等。滑动时，设置滑块跟随手势，实时反馈，松手即刻生效设置，且页面需要有相应的交互反馈当前状态。

浮层选择器用于承载选项较多的列表浮层选择器通常在底部显示，并固定高度展现。当列数不唯一时，用户在前列选择会对后列选项会产生约束和影响。自定义配置：1.选项列数（1-3列），各列选项内容；2.用于时间选择场景时，可配置日期（年月日），时间（分秒）。

全屏选择器用于承载选项特别多的列表以下场景更适合全屏选择器：1.选项特别多时，筛选成本高2.列表选项较长3.列表选项信息量较多4.带交互操作（如搜索、编辑等）

列表列表用于流式显示连续的多行项目列表是由多个等宽列表项组成的、按一定规律排期的连续条目序列，支持上下垂直滚动。自定义配置：列表顺序建议按重要程度从上往下排列，最多不超过二级

列表项和点击态单一操作列表，整条列表项响应点击；右侧带选择-开头控件的列表，只有控件区响应点击。自定义配置：列表名称，辅助信息，选择控件。

输入表单由一系列文本输入框组成，用户确认后，表单提交输入结果输入表单支持上下垂直滚动自定义配置：输入顺序，必填与否，输入项（最多不超过5个中文字符，超出截断）

文本输入框针对常用的输入场景，智能小程序为其优化了文本输入框自定义配置：输入引导文案，最大输入字符数，是否自适应高度

键盘针对不同的文本输入框，调用适合的键盘类型。

提示框用于提示用户做一些决定，或者提供完成某个任务时所需额外信息请谨慎使用提示框，因为它们会分散用户的注意力，并且打断用户的任务路径。自定义配置：内容，操作。1.内容：提示标题（最多不超过8个中文字符），辅助提示内容。2.操作：支持1-2项操作，各操作按钮应按积极->消极，高频->低频从1-2号位顺序排布

措辞请遵守整体视觉规范中措辞章节；用户应该通过标题和按钮就能大致明白提示框的含义，最好在用词上有所呼应，如标题为“内测邀请”，确认按钮为“立即参加”内容区：标题：标题区：告知提示的类型或主题，可以是功能名称或操作内容辅助内容：告知状态、信息和解决方法，表达精简并尽量控制在51汉字；当表达为陈述词且只有一句时，句尾不必带“。”操作区：1项，操作的表达多为“取消”“关闭”“好的”“我知道了”2-4项，肯定操作请使用能表明操作结果的动词或动词短语，忽略操作应为“暂不XX”，“以后再说”“取消”等表述

正确标题明确，内容清晰，操作明确且呼应

错误表达模糊，操作区有歧义

全屏结果页用于重要操作结果反馈

1.结果页反馈在流程的最后一环，且结果反馈比较重要时，可以使用全屏结果页向用户反馈结果。稳定页面展现最为明确地告知用户结果，且能引导用户进行下一步操作。

2.空态/错误页反馈请根据自己产品风格设计相应场景，反馈内容可以使用图片和文字，告知用户当前所处状态，并按场景考虑增加引导操作按钮。