​	规范 与 建议	示例
信息优先	简化视觉元素，突出信息传达（主播信息与互动数据）
区域 ​	大小尺寸 以信息展示效率为优先，支持居中展示或者通栏展示 尺寸建议（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个

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

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