一、小部件是什么

小部件是Android提供的能力，开发者可以在桌面或负一屏中将应用中重要的内容直接展示给用户，提升用户在获取应用信息与直达服务的效率，同时用户还可以通过小部件实现个性化桌面。

二、小部件体系

小部件体系基于Android小部件，对设计与技术实现进行了规范，并持续迭代开发者所需要的能力，从而联合开发者一起为用户提供更好的使用体验。

1、桌面网格

通过对桌面的重新设计，支持小部件在手机桌面中优雅的展示，用户可以非常方便的将小部件添加至桌面，并可快速拖动至负一屏。

同时还支持“无字模式”：隐藏桌面上的应用与小部件名称，使桌面的简约美感达到极致。
（操作路径：桌面双指捏合—左下角设置图标—无字模式）

2、负一屏

负一屏（原智能助理）是手机桌面左侧的智能服务聚合页，通过场景化快捷入口、实时提醒和自定义小部件，为用户提供个性化便捷体验。

3、小部件中心

当用户需要添加小部件时，可以从桌面双指捏合进入编辑模式，点击小部件或在负一屏点击右上角的“+”号中找到小部件中心入口。小部件中心支持用户直接拖拽小部件至桌面或负一屏。
同时，小部件中心也支持安卓小部件的入口，用户可以通过“搜索—安卓小部件”入口添加。

三、小部件产品规范

1、小部件的名称与介绍

小部件的名称应简洁（2~10个汉字），格式为“应用名称·小部件名称”，且名称与应用名称不同。介绍的中文长度不得超过22个字符，其他语言不超过44个字符（1个中文字符 = 2个特殊字符 / 2个非中文字符）。

2、如何设计一个小部件

小部件中展示的内容由开发者定义，在开发者设计小部件时，我们建议遵循以下原则：

• 仅展示重点信息：小部件可便捷展示简洁的信息，建议开发者选择一个与您的应用主要用途相关的功能或内容。如运动应用的小部件展示今日步数、音乐应用的小部件展示最近播放的歌曲等。
• 内容展示用户信息：当小部件与用户个人信息有关时，更容易被用户添加并使用。如日历应用在展示月视图的同时展现我的日程、电商应用的小部件展示用户最新物流信息、电影购票应用展示用户即将开场的电影票信息。
• 信息提炼：信息架构需确保内容与应用业务强关联，信息层级和顺序基于内部逻辑统一提炼并实现跨终端自适应；服务卡片应整合智能推荐等主动服务能力，通过视觉标签提供可选入口，同时以固定排序（如时间/优先级）及F/Z型布局标准化视觉路径，保障用户每次浏览均遵循一致顺序。

• 阅读语序：符合阅读说明的合理语序逻辑，信息精炼完整，阅读导向清晰。确定的关键内核：信息理解效率，尤其体现在描述信息与标题信息之间的合理阅读逻辑

• 信息密度：信息密度包括单位空间内所呈现的信息量，以及文字、图标、数据等元素；小部件的容器尺寸变化需伴随信息密度的动态调整，以平衡功能完整性与视觉舒适度。通过分层的渐进式表达，既能满足多场景下的功能性需求，又可维持视觉秩序，让密度服务于效率。

• 避免仅跳转应用首页：小部件应该为用户提供信息外露或功能直达的价值，如果点击一个小部件仅仅是打开应用首页，大部分用户将不会添加到其桌面上。
• 具有品牌辨识度：为了让用户能知道小部件所展示的内容来自哪个应用，建议在设计小部件时加入品牌元素，但不建议直接放app的图标在小部件中。
• 支持深色模式：小部件必须支持深色模式，在用户进入深色模式后，可以通过修改前景与背景颜色，使小部件与深色模式下的系统更加统一。如小部件未适配深色模式，也要保证在系统切换为深色模式后，小部件的显示和功能正常。
• 支持无障碍：我们一直致力于让全球每一个人都能享受科技带来的美好生活，因此我们建议开发者设计的小部件必须支持无障碍功能，了解更多可前往小米无障碍官网（http://accessibility.miui.com/）。如小部件未适配无障碍，也要保证在系统开启无障碍talkback功能或是在“设置-无障碍-视觉”中将字体调大后，小部件的显示和功能正常，未出现截断或遮挡等异常现象。

设计无障碍原则：

1. 根据具体小部件特性灵活适配
2. 信息过多时需要区分焦点播报，每个交互/操作需要单独播报

适配示例：

• 仅信息展示，无操作按钮，落地页不同：按整块焦点播报

• 信息密度高，不区分是否有操作按钮，落地页是否相同：按焦点播报

• 信息展示+操作按钮：按焦点播报

• 拥有不同交互的小部件（信息展示+操作按钮）：每个交互按焦点播报

• 仅信息展示，无操作按钮，落地页相同：按整体播报

• 支持多语言：我们已经拥有国内外3.1亿用户，覆盖80种语言，支持221个国家与地区。在国内版中，建议开发者设计的小部件，跟随主应用适配简体中文、繁体中文、英文、维语、藏语中的全部或部分语言，并保证在系统切换为多语言后，小部件的显示和功能正常，未出现截断或遮挡等异常现象。
• 多语言问题仍遵循缩略“...”的显示机制
• 在保证可读性与层级的前提下尽可能减小字号，提高字符承载能力。例：描述性文字字号改为27px
• 在布局包容性的前提下，单行大文字标题可通过折行/缩小字号，提高字符的承载能力
• 针对多语言内容的长度特性，留有一定信息空间。尤其是信息使用了缩略处理时，需谨慎地确认露出的部分是否足以被用户理解。
• 预留的信息空间优先让英文能够尽量完全的展示出来。理论上，基于英文的预留空间增加30%可覆盖到其它语言
• 应用需要自行处理在分身空间的显示逻辑与样式 。

3、支持用户编辑小部件内容

小部件支持长按时出现「编辑小部件」功能，用户点击后跳转到开发者提供的指定页面，对该小部件进行编辑（详细见技术规范）。

• 普通手机设备编辑页展示效果

• 折叠屏编辑页交互规范

由于折叠屏内屏较大，负一屏/桌面的横屏/竖屏模式中，长按小部件点击“编辑”进入编辑页，都采用半屏为预览区，半屏为编辑页的样式。

• 平板编辑页交互规范

手机上的2x2/4x2/4x4尺寸，在平板上的编辑页与在折叠屏上一样，复用折叠屏上内屏的编辑页设计资源即可。

4、刷新机制

系统会在小部件展现时调用对应小部件进程进行刷新（详见技术规范）。开发者也可在主应用存活时对小部件进行刷新。同时，系统会根据小部件的类别及当前系统状态，平衡体验与性能，智能调整小部件的刷新频率。如您的小部件需要使用日期或时间，请直接调用原生控件 AnalogClock。

5、开放的能力

为了给用户提供更好的体验，小部件体系会开放并持续更新部分系统能力，便于开发者使用

• 跳转应用页面：小部件可以跳转自身应用或其他应用页面
• 多个跳转入口：小部件内支持展示多个跳转入口，点击后跳转至应用内不同的页面
• 是否已存在小部件：支持应用判断用户是否已添加该应用具体某个小部件
• 调用小部件中心详情页：应用可以直接调用小部件中心中该应用的详情页，方便应用引导用户更快地添加小部件
• 具体流程：在应用内引导添加时，应用调起小部件中心应用详情页，用户点击“添加到负一屏”或“添加到桌面”后，对应小部件会被添加到负一屏或桌面上，同时弹窗落下，toast提示用户添加成功，回到应用端内。
• 调用方式：见技术文档
• 注意事项：此时不支持用户拖动小部件添加。

• 优先级设置：开发者可以给小部件的不同状态设置相应的优先级（高/中/低），每个优先级对应不同的事件参数，系统会智能地根据小部件优先级进行排序，优先级越高，越可能在小部件屏上方出现。
• 点击不跳转：点击小部件直接刷新，无需跳转。如内存清理小部件。

6、 禁止的能力

• 小部件内上下滑动或左右滑动
• 文字输入

四、小部件设计规范

1、尺寸

1.1、小部件尺寸

小米手机（包括折叠屏）小部件支持2x2、4x2、4x4三种尺寸，小米平板小部件支持2x2、4x2、4x4、Pad4*2四种尺寸，开发者可以根据小部件信息和所需展示的功能，选择合适的尺寸进行设计。
（已适配普通手机的小部件，能够直接在折叠屏和平板上经桌面缩放后显示，无需开发者另作适配，参考下图手机上尺寸适配即可）

1.2、自适应布局

因小部件采用的是自适应布局，在不同设备屏幕及不同样式的桌面上，小部件的尺寸会相应变化。以下是需考虑的小部件适配兼容场景（以1080x2340分辨率为基础）：

• 负一屏和桌面小部件的样式
• 桌面图标行列数变化后的样式：桌面支持4x6和5x8布局，需保证4x6布局下完美显示，5x7布局下无显示缺陷问题 （设置方式：设置—桌面—桌面布局规则）
• 桌面无搜索框时的样式：需保证有搜索框下完美显示，无搜索框下无显示缺陷问题（设置方式：设置—桌面—桌面搜索框）
• 桌面虚拟键存在和不存在时的样式：需保证无虚拟键下完美显示，有虚拟键下无显示缺陷问题（设置方式：设置—桌面—系统导航方式）
• 1080p和2k屏幕手机下样式显示：需保证1080p与2k分辨率的屏幕上无显示问题。

1.3、设计稿尺寸

小部件在不同设备屏幕以及桌面布局下的大小不同。2k：1080=1.333x，各元素可参考此倍数关系。
基于以上场景，我们列出了各尺寸的小部件在不同设备屏幕上实际显示的最小尺寸和最大尺寸，供设计师参考。（无需单独输出设计方案，设计和验收时注意不同布局下显示是否正常即可）

附：小部件设计模版（设计师同学可从这里取用哦）

1.4、示例

以下为各端设备的1080x2340分辨率对应widget尺寸的示例：

2、美学规范

2.1、圆角

• 手机
• 开发者提供的手机上小部件预览图必须为直角，系统会裁剪成55px的平滑圆角。
• 开发者交付的小部件资源里，1080p屏幕需提供55px的圆角，2k屏需提供73px圆角。
• 折叠屏
• 开发者提供的折叠屏上小部件预览图必须为直角，系统会裁剪成50px的平滑圆角。
• 开发者交付的小部件资源里，折叠屏1916px*2160px屏幕需提供42px的圆角。
• Pad
• 开发者提供的平板小部件预览图预览图必须为直角，系统会裁剪成36px的平滑圆角。
• 开发者交付的小部件资源里，平板小部件需提供30px圆角。

2.2、内容显示区

• 手机
• 普通手机上主要内容需预留大于等于42px的安全区（红色区域内不可显示元素），2K屏幕下需预留大于等于55px的安全区。
• 折叠屏
• 折叠屏上主要内容需预留大于等于38px的安全区（红色区域内不可显示元素）。
• Pad
• 平板上主要内容需预留大于等于27px的安全区（红色区域内不可显示元素）。

2.3、文字

• 字体

系统字体：为了视觉上的美观及统一，推荐使用MiSans 字体。

*风格化字体：如果开发者想保持独特风格使用特殊字体，建议将字体图片化应用在小部件中。

• 字阶

字号大小决定了信息的层级和主次关系，合理有序的字号设计能让界面信息清晰易读、层次分明。

• 字重

本规范主要针对以数据展示为核心信息的小部件，2X2，4X2 通用。
若小部件以文字信息为主，字重规范为：主要信息使用MiSans Demibold，次要信息使用MiSans Medium,且透明度为40%。
*三方适配跟随系统正常使用 MiSans

• 以数字/数据为核心要素的小部件: 数字字体统一使用Misans

• 小部件中标题文字: 字重使用MiSans Medium，且透明度为40%的黑（Dark 下为40%的白）

*如含有多层级文字，字重选择为：一级标题Demibold，二级标题Medium

• 日期表达式的规范: 统一使用格式：年–月–日 、月–日。 如：2021–8–16、 8–16

• 颜色

界面可以通过字色增强界面视觉层级，定义主、次、辅三个层级，2x2、4x2、4x4尺寸小部件颜色规范相同。

3、无内容场景规范

导致widget无内容的场景有：无网络、无数据、未授权、未添加内容、未登录账号等；以上场景可由各业务根据实际需求选择设计，无需全部适配。
以下是搭建【widget无内容场景】元素使用规范；对于各场景使用效果不做要求：

a.信息显示

b.基本规范

• 占位色块圆角

将widget内容占位色块分为 图片占位、文字占位；使用圆形或正方形来代替图标。

• 文字

用于说明文字；授权说明、网络说明、数据说明 等等。

• 加载态

已安装的小部件在加载数据时显示占位符内容。可以通过将 UI 的静态部分与代表其内容的半透明形状相结合来创建占位符外观。
注：各业务需出加载数据时显示占位符内容，用作加载时使用。

五、上传须知

完成适配并通过审核后，开发者可以在小部件开发者平台上传小部件，具体操作流程可参考《小部件提交审核与上传操作指南 》。

如果确认要适配小部件，且没有和我们联系过，请按照以下模板发送邮件至“miui-widget@xiaomi.com”：

开发者微信：

开发者联系电话：

适配小部件类型：

应用包名：

我方已阅读小部件产品设计规范与技术规范，准备按照审核要求适配小部件，希望进一步沟通审核流程和相关规范。

我们会在看到邮件后的10个工作日内与您联系，感谢您适配小部件。