​	​规范 与 建议​	​示例​
​信息优先​	​简化视觉元素，突出信息传达（主播信息与互动数据）​
​区域​ ​	大小尺寸​ 以信息展示效率为优先，支持居中展示或者通栏展示​ ​尺寸建议（1倍图）：​ •​宽度可根据实际内容的信息量自定选择​ •​高度根据成员站位确定，除信息外可增加部分符合风格的装饰元素；不超过88px为佳。eg：​ ​	​设计建议：居中展示​ ​线上示例：居中展示​ ​	​设计建议：通栏展示​ ​线上示例：通栏展示​ ​
	高级滚动​ 在信息量过多的前提下，可支持内部滚动等更高级的展示形式​ ​滚动建议：​ •​循环滚动​ •​动速：每个模块在1.5秒-2秒之间​ ​	​横向​ ​	​纵向​ ​
	可放置范围(竖屏)​ 互动工具面板需避让直播间内UI​ ​配置时可在伴侣预览C端看播效果​ ​	​放置范围​ ​	​线上示例​
	可放置范围(横屏)​ 横屏情况下需在画布内拖拽工具​	​画面比例16:9​ ​	​画面比例4:3​
​内容融合​	字号​ 切忌为了放得下更多信息而缩小字号​ ​字号建议：​ •​字号建议不要小于9pt ​ •​如需承载更多信息量，可选择「专业版」支持内部滚动or选择竖版​ ​	​✅ 最小感受（即横排最多6个）​ ​	​❌ 太小了辨识度困难​
	底板装饰​ 互动工具底板设计样式，需突出内容信息、与直播内容尽可能融合一体，例如：​ •​底板针对直播间内容主色调取色，适度透明度（例如Alpha20%）突出关键信息，适度装饰​ •​底板装饰氛围&颜色与直播内容近似或配套​	​底板设计突出关键信息​ ​	​底板风格与直播内容匹配​
	渐变与吸边​ 1.​底板可不封闭、可无底板，灵活设计​ 2.​如需底板突出信息，可采用吸边或渐变等灵活的设计手段与直播内容融合​	​去底板化​ ​	​贴边&渐变融合内容​

​场景 1：互动插件分发列表​

​场景 2：互动插件详情页​

​方式一：使用贴合主题的介绍​

​方式二：使用简单背景突出面板主体​

​不建议：背景过于复杂，看不清面板样式​

​结构说明​	​类型解构​
1.​标题栏：​ a.​主标题（必选）​ b.​功能辅助描述文案（可选）​ c.​次级行动点（可选）​ d.​关闭按钮（必选）​ ​
2.​主行动点：​ a.​主行动点/开启功能 （必选）​ b.​次行动点（可选）​
3.​配置项：详见配置项组件（必选）​

​结构说明​	​类型解构​
1.​标题栏：​ a.​主标题（必选）​ b.​功能辅助描述文案（可选）​ c.​次级行动点（可选）​ d.​关闭按钮（必选）​	​
2.​主行动点：​ a.​主行动点/开启功能 （必选）​ b.​次行动点（可选）​
3.​列表页：详见容器组件​ a.​皮肤选择器（必选）​ b.​通用配置（可选）​ c.​单项配置（必选）​
4.​配置项：详见配置项组件​ a.​输入框​ b.​选择器​ c.​搜索框​ d.​筛选器​ ​

字号​	行高​	字重​	色值​	使用场景​
17pt​	24​	Medium​	#161823​	主标题​
15pt​	21​ ​	Regular​ ​	#161823​	正文​
13pt​	18​	Regular/Medium​	#161823 60%alpha​	辅助文字​
12pt​	17​	Regular​	#161823 60%alpha​ ​	副标题​

​图片类型​

​自定义图片：最大宽度335@1x，支持动态图片文件gif、PNG、Lottie、WEBP等格式​

​插件预览图：实时展示插件数据​

​按钮需保持风格一致、同类型操作反馈一致​

​一个场景应该有且只有一个操作重点，避免出现多个主要按钮或没有主要按钮的情况​

​一个按钮的完整交互需要包含以上 3 种完整的状态：普通/按下态/禁用态​

​按钮的颜色、圆角、字体色值均不可配置​

​同一场景列表样式要保持一致性：如统一为“标题列表”或“icon+标题列表”或“图文列表”​

​可以根据样式图自行调整皮肤尺寸，单行最多不超过4个​

​卡片可根据插件诉求有不同多样化的表现，规范仅涉及背景容器相关​

​互动工具抖音客户端设计组件下载​