
Lark Onboarding Section
作为 Lark 的设计师,我负责的内容主要是 Onboarding 部分。我需要在现有设计规范的框架下完成页面设计和交互,确保产品达到预期目标。在项目迭代过程中,通过数据反馈不断优化设计,以实现最大化的用户效果。
此外,设计过程中需要与其他区域团队密切合作,确保新功能能够顺利接入,并与其他业务线的功能实现无缝衔接。
角色
全流程设计
领域
工具软件
项目
网页、App、运营
Part #1
Web 端注册流程
在注册流程优化项目中,通过用户测试与现有设计规范相结合,深入分析并调整了流程关键环节,以减少用户流失并提升整体体验。根据测试数据和用户反馈,我识别并解决了用户在注册新账户与加入现有团队间的混淆问题,从而有效避免了同一公司团队产生重复账户的情况,优化了用户旅程的准确性和便捷性。
在视觉设计方面,我融合了品牌整体风格,巧妙地使用品牌插画系统和品牌卖点,确保注册界面不仅在视觉上一致,还传递了品牌的核心价值。具体设计改进包括稳定输入框的位置,避免不必要的抖动,使每一步的衔接流畅自然,从而提升了流程的可用性和用户对产品的信任感。


多租户切换页面是此模块中较为复杂的部分,涵盖了用户已加入的团队与其他可加入团队的展示,同时要在固定的视窗高度内呈现这些内容。为确保用户在多个选项间的选择无误,我对界面元素进行了精细的差异化设计,以降低用户误操作的风险。
在设计过程中,通过多轮用户测试验证了各项交互方案,确保用户在切换租户时可以快速、准确地完成操作。这一设计有效平衡了功能性与易用性,为用户提供了更清晰的多租户管理体验。
交付结果
租户切换错误率从原先的11%下降到2%
页面从原来的3个页面优化为1个页面,避免了多次跳转,同时也让用户更好的通过卡片理解租户之间的区别
Part #2
Web 端登录流程
在设计登录页面时,需要清晰展示免责协议、邮箱/手机号登录选项,以及注册入口,并确保它们各自的功能清晰可辨。最终,通过临近原则将内容分为两部分:一部分聚焦页面的主要操作(如登录输入项),另一部分提供补充信息(如免责协议等)。
主要操作项位于输入框附近,补充信息放置在标题位置以保持界面整洁、易于理解。这一设计使用户能够轻松找到所需功能,提升了整体页面的直观性和可操作性。


在用户点击登录页面的二维码登录入口后,会进入扫码登录页面。通过两个图标切换功能,使用户在不同登录方式之间无缝切换。这种设计不仅符合用户的操作习惯,还确保了视觉的一致性,提升了整体体验的流畅性和易用性。
同时利用设计突出登录和注册流程的差异,用两种不同的颜色和左右布局来实现两个流程之间的显著区别。
Part #3
客户 端流程
客户端的登录注册流程基于Web端进行封装,新增了自动登录和设置功能,并在保持原有布局的基础上进行改进。
同时,为确保客户端设计与Web端的区分度,在白色背景的基础上塑造出符合品牌调性的视觉风格,以增强品牌识别度和一致性。




客户端的登录注册流程基于Web端进行封装,新增了自动登录和设置功能,并在保持原有布局的基础上进行改进。
同时,为确保客户端设计与Web端的区分度,在白色背景的基础上塑造出符合品牌调性的视觉风格,以增强品牌识别度和一致性。
Part #4
移动 端流程
在移动端的登录注册流程中,我们基于客户端版本进行调整,并严格遵循 HIG 规范进行适配,以确保符合移动端的用户体验标准。
通过智能识别手机号码,系统会自动匹配用户登录或注册的合适流程,减少不必要的重复操作和误操作风险。
设计上还细化了界面信息的呈现方式,保持了客户端与移动端的一致性,同时增强了操作的便捷性与流畅度,力求带给用户更自然顺畅的使用体验。



Part #5
第三方 授权登录
在第三方授权登录的设计中,我们在保持原有操作规范的基础上,通过调整设计与样式,进一步强化了它与常规登录注册流程的视觉差异。
通过色彩、按钮形态和位置等视觉元素的调整,使用户在选择第三方授权登录时能快速、直观地识别和操作


Part #6
帮助中心
在帮助中心的设计中,重点是让用户能够迅速找到所需信息,因此我们采用简洁明了的分类体系,确保内容条理分明,便于查找。
同时,通过合理的视觉设计,强化清晰度和易读性。页面布局尽量保持简洁清爽,突出层次分明的分类结构,避免用户在众多分类和详细信息中迷失。为提升用户体验,还在各分类间使用微妙的色彩和视觉分隔,使用户能快速识别和导航,提升查找效率。




在二级页面中,通过选项卡工具实现不同主题的快速切换,使用户能够迅速定位至所需内容。
详细的帮助内容采用类似文档的形式展示,结合标题和卡片设计,提升问题的清晰度和可视性,同时更适于搜索引擎优化。
每篇文章的内容按段落结构进行组织,提升阅读流畅度和信息检索效率,使用户能够更直观地了解总体内容,并快速找到所需的具体信息。
在二级页面中,通过选项卡工具实现不同主题的快速切换,使用户能够迅速定位至所需内容。
详细的帮助内容采用类似文档的形式展示,结合标题和卡片设计,提升问题的清晰度和可视性,同时更适于搜索引擎优化。
每篇文章的内容按段落结构进行组织,提升阅读流畅度和信息检索效率,使用户能够更直观地了解总体内容,并快速找到所需的具体信息。

