全球疫情肆虐,特殊环境下,大量会议APP应运而生。Pixso将与大家分享会议APP基本UI组件元素有哪些。在线会议APP凭借打破时空限制,体现出了极大的使用潜力和市场潜力。会议APP为许多重要场景提供了技术及服务保障。会议APP的基本UI组件设计上,UI设计师需要以用户需求和体验为中心,深挖不同行业和岗位的会议特点,从细节出发打磨产品体验。

文中所提示例均可在Pixso资源社区中找到,Pixso资源社区内置腾讯、阿里、字节、今日头条、蚂蚁设计等优秀设计规范,设计师可以直接参考并使用。

注册和登录

用户通常因为太忙,而导致无法填写大型注册表单,因此请尽可能保持注册表单简短和简单。只添加最必要的字段,例如姓名、电话号码、个人电子邮件、企业邮箱等。还可以添加与主要社交网络的集成,以获得更多便利(微信、QQ、微博等热门社交账号)。

APP登录页面UI集合APP登录页面UI集合

设计细节

  • 尽量简洁,去掉所有不必要的干扰因素。

  • 使用具有趣味性的与产品气质一致的插画,适当凸显品牌LOGO,强化品牌感,让用户感受到产品设计的态度。

  • 将表格字段的数量限制在1-3个,或直接使用第三方快捷登录,减轻用户负担

  • 校验报错,提供清晰的错误信息。

  • 支持企业微信登录,由企业管理员管理并授权个人用户注册加入

个人资料管理

      个人资料页面是会议APP的基本UI中一个很重要的页面,一方面,个人资料页面是用户相互了解对方最直接的方式,另一方面,个人资料页面也是一种个性化标志的象征,用户通过个人资料页面展示账号价值,突显账号魅力。会议APP的个人资料页面通常包括登录信息(登录名、密码)、联系信息、社交媒体资料、支付信息、朋友列表等。

      APP个人资料编辑页UI集合

      APP个人资料编辑页UI集合

      设计细节:

      • 强调视觉上的吸引力。

      • 简化设计,让用户更容易找到他们真正关心的信息。

      • 搜索并添加联系人。要想实现此功能,可以结合以下两个功能:一是带有过滤器的搜索引擎,二是从用户设备的电话簿中整合联系人。

      APP用户个人主页UI集合APP用户个人主页UI集合

      显示联系人状态

      显示联系人状态这种机制可以确定与其他用户交流和组织在线会议的时间是否合适,可以参考流行的社交网络和即时通讯工具来创建你自己的状态版本(在线、可用、忙碌、离开等)。

      社交音视频聊天app界面社交音视频聊天app界面

      设计细节:

      • 从第三方的服务或APP导入状态。比如把运动APP动态添加为自己的状态。当你正在读某本书、听某首歌、看某部电视剧时,可以分享到个人状态。

      • 线下扫码打卡更新状态,让状态回归现实状态本身。

        应用内文字聊天

        几乎所有应用程序都添加了在会议内使用文本聊天进行通信的能力,有些应用程序直接相互通信。除了从联系人那里收到他们已准备好参加会议的确认等便利之外,当你需要向会议参与者询问一些事情而不分散发言者的注意力时,文字聊天也很有用,此外,你还可以通过聊天发送图像、视频、文本文档和其他文件。

        App聊天对话界面UI集合App聊天对话界面UI集合

        设计细节

        • 设计一个合理的缩略图展示规则,让界面整齐美观,最大程度满足展示需求。不管是方图、横图还是竖图,通常将阈值设置为图片比例3: 1。

        • 添加聊天贴纸、表情符号和表情包。帮助聊天更加生动和个性化,使用户可以更自由、更活泼地表达自己的感受。

          应用内视频和音频通话

          如果你开发一个在线会议app,但是不添加两个人之间通过音频或视频进行通信的功能,这样是很奇怪的。借助此功能,会议参与者将能够与其他人进行更加高效的沟通,有助于直接阐明要点。

          社交音视频聊天app界面社交音视频聊天app界面

          设计细节

          • 对于视频和音频通话界面,UI设计已经有了比较成熟的布局体系,因此,建议在页面布局的设计上,尽量遵循用户的习惯。

          Pixso资源社区中的社交新视频聊天app界面素材有成熟的UI布局可供设计师参考,设计师也可以直接一键复制,免费使用。

          应用内视频和音频通话

          事实上,群组视频通话是所有在线会议app的主要功能。群组视频通话不仅可以帮助内部团队更好地协作,还可以帮助团队发展业务。一项调查显示,在使用会议APP的人中,有 94% 的人表示视频会议对于他们的业务发展很有帮助。

          免费视频聊天网站免费视频聊天网站

          会议与会者名单

          组织者和与会者通常想知道谁将参加会议,因为这样他们才可以准备提问或确定他们可以在会议上与谁联系和工作安排给谁。会议信息通常包括会议主题、会议名称、预定开始时间和预定结束时间;与会者名单通常包括参会用户名称、入会时间、退会时间、单次参会时长等信息。

          设计细节:

          • 提供灵活的入会方式,如支持手机、电脑、平板、会议室系统一键入会。

          • 支持分组讨论、云端录制、自动会议纪要助力分享与交流,提升会议效率。

          • 支持数据统计查看参会人员状态。

          • 设计安全等级较高的特邀会议。如,仅会议创建者可以发送邀请,无法被其他人转发。

            弹出通知

            他们将通知用户新消息、即将召开的会议、发送的文件、订阅的终止、平台更新和其他重要的事情,你可以从头开始实施推送通知,也可以使用第三方工具:Twilio 或 Firebase。会议组织者可以提前预约会议时间,并将日程同步给所有参会者,届时自动弹出通知提醒并支持一键发起视频会议。

            Ant Design设计规范 浅色Ant Design设计规范 浅色

            设计细节:

            • 有些用户不需要也不喜欢被“骚扰”,为此,我们可以在设置屏蔽会议通知功能。

            • 除了普通会议的提醒,你还可以通过预设周期性会议,如周会、月会等,在设定好的会议频率和会议次数(或是时间段)后,自动弹出提醒并帮助用户预约会议。

              屏幕共享和虚拟背景

              屏幕共享功能提高了沟通效率并改善了参会体验,因为它为项目协作创造了更多的机会,参会者可共享屏幕和文件,共享时还可以播放本地音视频文件,会议发起者可以管理和控制屏幕共享权限,避免被参会者随意共享。

              虚拟背景选项允许用户从提供的模板或下载的文件中将背景更改为图像或视频,如果你需要召开会议并直观地呈现数据(表格、图表、图像等),这是一个非常有用的功能,这个功能也经常被用来隐藏参会者公寓里的烂摊子,保护了用户隐私。

              社交音视频聊天app界面社交音视频聊天app界面

              设计细节

              • 提供批注工具栏,如荧光笔、画笔等基本工具,方便在团队协作时,高效率地沟通。

              • 为了使会议内容得到保护,设计对会议内容设置水印的功能。

              • 用户可以共享屏幕画面中自己选择的某个固定部分的区域,例如特定的幻灯片内容区域、特定的应用程序画面等。

                小结

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