会议App的组件需要围绕入会、交流和离开这条任务线设计。在线会议APP凭借打破时空限制,体现出了极大的使用潜力和市场潜力。会议APP为许多重要场景提供了技术及服务保障。会议APP的基本UI组件设计上,UI设计师需要以用户需求和体验为中心,深挖不同行业和岗位的会议特点,从细节出发打磨产品体验。
文中所提示例均可在Pixso资源社区中找到,Pixso资源社区内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,设计师可以直接参考并使用。
会议涉及多个相连的状态,可以用在线原型设计工具把入会预览、通话中和停止共享串起来,检查用户是否始终知道麦克风、摄像头和共享范围的状态。

注册和登录
用户通常因为太忙,而导致无法填写大型注册表单,因此请尽可能保持注册表单简短和简单。只添加最必要的字段,例如姓名、电话号码、个人电子邮件、企业邮箱等。还可以添加与主要社交网络的集成,以获得更多便利(微信、QQ、微博等热门社交账号)。
设计细节:
-
尽量简洁,去掉所有不必要的干扰因素。
-
使用具有趣味性的与产品气质一致的插画,适当凸显品牌LOGO,强化品牌感,让用户感受到产品设计的态度。
-
仅收集当前入会任务确实需要的字段;可用企业统一登录或访客入口时,说明对应身份与权限。
-
校验报错,提供清晰的错误信息。
- 支持企业微信登录,由企业管理员管理并授权个人用户注册加入
个人资料管理
个人资料页面是会议APP的基本UI中一个很重要的页面,一方面,个人资料页面是用户相互了解对方最直接的方式,另一方面,个人资料页面也是一种个性化标志的象征,用户通过个人资料页面展示账号价值,突显账号魅力。会议App的资料页面可包括姓名、头像、所属团队和必要联系方式;密码修改应作为独立安全入口,不显示已有密码,也不应默认收集与参会无关的支付或社交资料。

设计细节:
-
强调视觉上的吸引力。
-
简化设计,让用户更容易找到他们真正关心的信息。
-
搜索并添加联系人。要想实现此功能,可以结合以下两个功能:一是带有过滤器的搜索引擎,二是从用户设备的电话簿中整合联系人。
显示联系人状态
显示联系人状态这种机制可以确定与其他用户交流和组织在线会议的时间是否合适,可以参考流行的社交网络和即时通讯工具来创建你自己的状态版本(在线、可用、忙碌、离开等)。
设计细节:
-
区分“在线”“会议中”“请勿打扰”等与参会有关的状态,并允许用户控制是否展示。状态过期时需要恢复,避免把旧状态持续显示为当前情况。
-
不要仅因用户离开前台或暂时没有输入,就推断他已经离开会议。
应用内文字聊天
会中文字聊天可以补充音视频交流。除了从联系人那里收到他们已准备好参加会议的确认等便利之外,当你需要向会议参与者询问一些事情而不分散发言者的注意力时,文字聊天也很有用,此外,你还可以通过聊天发送图像、视频、文本文档和其他文件。
设计细节:
-
设计一个合理的缩略图展示规则,让界面整齐美观,最大程度满足展示需求。不管是方图、横图还是竖图,可根据消息区宽度与内容选择裁切或完整预览,不用一个固定比例覆盖所有图片。
-
添加聊天贴纸、表情符号和表情包。帮助聊天更加生动和个性化,使用户可以更自由、更活泼地表达自己的感受。
应用内视频和音频通话
如果你开发一个在线会议app,但是不添加两个人之间通过音频或视频进行通信的功能,这样是很奇怪的。借助此功能,会议参与者将能够与其他人进行更加高效的沟通,有助于直接阐明要点。
社交音视频聊天app界面
设计细节:
-
对于视频和音频通话界面,UI设计已经有了比较成熟的布局体系,因此,建议在页面布局的设计上,尽量遵循用户的习惯。
Pixso资源社区中的社交音视频聊天App界面素材有成熟的UI布局可供设计师参考,设计师也可以直接一键复制,免费使用。
群组视频会议
群组会议与一对一通话的差别,不只在于画面人数更多,还包括主持人权限、举手、静音、发言顺序和离会后的持续状态。需要按目标会议类型决定哪些能力是必要的。
会议与会者名单
组织者和与会者通常想知道谁将参加会议,以便提前准备问题,确认需要沟通和分配工作的对象。会议信息通常包括会议主题、会议名称、预定开始时间和预定结束时间;与会者名单通常包括参会用户名称、入会时间、退会时间、单次参会时长等信息。
设计细节:
-
提供灵活的入会方式,如支持手机、电脑、平板、会议室系统一键入会。
-
支持分组讨论、云端录制、自动会议纪要助力分享与交流,提升会议效率。
-
支持数据统计查看参会人员状态。
-
设计安全等级较高的特邀会议。例如通过成员白名单、入会审批或身份验证限制加入范围;邀请链接能否被转发,与转发后是否仍有入会权限是两回事。
弹出通知
通知用于提醒用户查看新消息、即将召开的会议、发送的文件、订阅的终止、平台更新和其他重要的事情,你可以从头开始实施推送通知,也可以使用第三方工具:Twilio 或 Firebase。会议组织者可以提前预约会议时间,并将日程同步给所有参会者,届时自动弹出通知提醒并支持一键发起视频会议。
设计细节:
-
有些用户不需要也不喜欢被“骚扰”,为此,我们可以在设置中提供屏蔽非必要会议通知的功能。
-
除了普通会议的提醒,你还可以通过预设周期性会议,如周会、月会等,在设定好的会议频率和会议次数(或是时间段)后,自动弹出提醒并帮助用户预约会议。
屏幕共享和虚拟背景
屏幕共享功能提高了沟通效率并改善了参会体验,因为它为项目协作创造了更多的机会,参会者可共享屏幕和文件,共享时还可以播放本地音视频文件,会议发起者可以管理和控制屏幕共享权限,避免被参会者随意共享。
虚拟背景选项允许用户从提供的模板或下载的文件中将背景更改为图像或视频,它主要改变摄像头画面的背景;展示文档或图表应使用屏幕共享,不能把两种功能混为一谈。
补充资源:社交音视频聊天App界面,可用于参考通话布局
设计细节:
-
提供批注工具栏,如荧光笔、画笔等基本工具,方便在团队协作时,高效率地沟通。
-
为了使会议内容得到保护,设计对会议内容设置水印的功能。
-
用户可以共享屏幕画面中自己选择的某个固定部分的区域,例如特定的幻灯片内容区域、特定的应用程序画面等。
点击加入之前,先让用户知道会暴露什么
入会预览至少应区分摄像头开关、麦克风开关和设备是否可用。用户选择关闭摄像头时,预览显示头像或关闭状态;无权限、未连接设备与用户主动关闭是不同原因,不能全部写成“摄像头已关闭”。
浏览器访问麦克风和摄像头需要用户授权,MDN的媒体设备说明也指出了安全上下文和权限要求。拒绝后应分别说明如何恢复摄像头或麦克风权限。仅摄像头不可用、麦克风仍可用时,可以选择音频加入;麦克风也不可用时,应提供符合业务规则的旁听或文字交流入口,不能仍提示“音频加入”。
共享哪一个窗口,应在开始和结束时都能确认
“整个屏幕”“某个应用窗口”和“某个标签页”可能暴露不同范围的信息。选择入口应清楚标明对象,让用户在开始前核对;共享中持续显示正在共享的目标和停止入口。切换共享对象时,不能让原本只分享文档的人悄悄变成分享整个桌面。
主持人、普通成员和访客的操作范围也要分开。谁可以静音他人、移出成员、开启录制或发起共享,应在需要操作时给出明确权限与反馈;不能因为某个按钮没有出现,就让用户猜测是网络失败还是没有权限。
在 Pixso 中,把入会预览、设备未授权、共享窗口选择和共享中的提示排成四个相邻状态。评审时请同事先加入会议,再只分享评审文档,最后停止共享,逐步确认每一步显示的对象和实际操作一致。

小结
跨地点协作带来了持续的在线会议需求。在线会议APP凭借打破时间、空间的限制,如同现场会议般提升工作效率的优势体现出了极大的使用潜力和市场潜力。从远程会议、远程探视、远程会诊、远程教育、远程答辩到云招商、云签约、云评审、云会谈、云专访、云捐赠等,会议APP为许多重要场景提供了技术及服务保障。无论是面对面会议还是在线会议,本质上都是以用户为中心,帮助用户解决问题、产出结果、节省时间。所以在会议APP的基本UI组件设计上,UI设计师需要以用户需求和体验为中心,深挖不同行业和岗位的会议特点,从细节出发打磨产品体验。





