腾讯会议应用设计规范_办公协同解决方案

腾讯会议

6 月 28, 2023

177 0

设计指南阅读须知

为实现腾讯会议应用平台友好、高效、一致的用户体验，我们拟定了该设计指南，内容包含设计基本准则、适配要求、页面规范与基础组件等，可以帮助开发者快速了解设计重点，提高页面设计与开发的效率。符合设计指南的应用更容易通过审核，同时也将有机会获得流量扶持等权益奖励。

设计准则

便捷

尽量减少使用动效、背景 banner 等可能影响加载速度的页面元素。

清晰

应用突出主要场景与功能，页面功能清晰有主次，避免功能堆砌。

统一

文案简明扼要，使用通俗表达字词，避免出现专业术语或含义模糊的表达。
接入的第三方应用注意不同页面间的统一性和延续性，在不同的页面尽量使用一致的控件和交互方式，在页面框架、字体、颜色使用、文案表达上保持统一。
统一的页面体验和有延续性的界面元素都将帮助用最少的学习成本达成使用目标，减轻页面跳动所造成的不适感。服务商可根据需要使用腾讯会议提供的标准控件，以达到统一稳定的目的，具体可以参考页面设计规范

友好

用户操作需要给予反馈，尽量减少错误页面，禁止出现404页面，减少用户出错的可能与负面反馈，保证用户使用体验。

页面设计规范

第三方应用 logo 规范

第三方应用 logo 将在腾讯会议客户端、腾讯会议后台管理页面内展现。
为避免第三方应用与腾讯会议原生界面有过大差异，造成体验不一致等问题，推荐第三方应用参考以下规范进行设计：logo 文件要求：第三方应用提供128*128px尺寸的 png/jpg 静态图片 logo，圆角为16px，大小限制在20kb之内。logo 设计基本原则：图形符号要精简、只有一个焦点元素、可准确传达内容、清晰可识别、不包含界面。
logo 图形和容器占比规则：logo 尺寸建议占比
logo 案例
使用图形化 logo
logo 背景不可有外形轮廓
logo 未和背景色拉开对比
安全性要求：应用 logo 需原创，无法律风险。不得侵犯肖像权。应用 logo 不允许出现禁限售、低俗等非法字符和图案，例如“黄赌毒、枪支、烟草等”；不能涉及政治倾向。应用 logo 不允许出现红点、NEW、HOT 等。应用 logo 不允许出现认证、第一等属性标签。不要使用二维码作为应用 logo。

页面布局适配要求

第三方应用在客户端有三种视图，分别是内嵌视图、弹出视图和侧边栏视图。侧边栏视图：视图宽度固定为375px，高度不定。
内嵌视图：默认尺寸960px540px。
独立弹出视图：默认尺寸960px540px，支持用户放大&缩小，最小尺寸480px*270px。

腾讯会议开放能力组件样式规范

腾讯会议开放了多种能力给到第三方应用使用，包括预定会议、录制、共享屏幕、分享&邀请与会人等多个场景，第三方应用在集成时需要遵守相关设计要求。

预定会议

预定会议组件需优先展示腾讯会议选项，组件由 logo + 名称构成，单击后的预定设置页面可以根据需求自定义。

应用中分享内容给参会人

组件由 logo + 分享给参会人构成，单击后此应用将分享给参会人。

会议列表

当在应用内显示预定了腾讯会议的日程时，为方便用户参会，需外显腾讯会议号，保证用户可以快速复制分享会议号。

图片素材

使用场景：第三方应用详情页所需图片素材，向用户说明如何将第三方应用与会议结合使用。桌面端：像素要求为1920*1080，大小512k以内的JPG、PNG、 GIF 格式，最多5张。移动端：像素要求为750*1628，大小200k以内的JPG、PNG、GIF 格式，最多5张。桌面端和移动端均有：可都提供（需图片内容一致），此字段桌面端和移动端至少提供任意一种。
腾讯会议会根据不同端展示对应的预览页给用户，若只提供1个端的预览内容，则在不同端均显示此内容，不做区分。

图片内容应该遵循以下规则：图片内容不得涉嫌黄赌毒。禁止使用无版权图片。图片包含的界面必须清晰。图片需准确表达内容。图片中包含人物，不得裁剪掉人物头部。

字体

系统	中文	英文	数字和金额	品牌字体
macOS	Pingfang SC	Pingfang SC	TCloud Number	TencentSans
		Windows	TCloud Number	TencentSans	微软雅黑	Arial

字号

字重

色彩

内容色
辅助色

按钮

基础按钮
视觉规范
位置：按钮出现的位置分以下两种情况
尺寸
中性色按钮

图标

启动页

第三方应用启动页可在应用加载时触发，缓解用户等待焦虑，同时也对外呈现服务商品牌特征。本页面将突出展示第三方品牌特征和加载状态。启动页除品牌标志（logo）展示外，页面上的其他所有元素如加载进度指示，均由腾讯会议统一提供且不能更改，无需开发者开发。加载规范
侧边栏视图示例

对话框

对话框分为模态对话框与非模态对话框，第三方应用尽量减少模态对话框的使用，避免打断用户进程，仅当重要信息必须由用户确认时使用。桌面端
移动端