背景
Lark PC 端设置页集成了整个飞书全部功能的设置,不同的套件会有自己独立的板块。
挑战
埋点缺失,无法用数据验证设计。
涉及功能繁杂,需要了解套件内每个模块的功能,梳理设置项的层级关系。
优化至适用于 PC 的设计形式会直接挑战用户的使用习惯。
由于没有埋点,所以针对这次改动,为了明确用户在使用设置页时的痛点,不同业务线对于设置页的需求,进行了一次对当前方案的用户访谈和业务沟通;
15%用户不知道如何从设置里面退出。
84.61%反馈文案过长,过多,并且不容易读懂。
46.15%反馈排版不清晰,要花时间才能找到想要设置的项目。
痛点总结
不可发现
在旧版的方案中,左侧列表不可直接定位模块。
有些重点模块(如修改翻译设置)操作项与选项距离过远,用户不可知该选项可展开更多。
用户进入设置后不知该如何返回,路径不明确。
混乱的层级关系
过多的线框导致层级区分不明确,如个性化设置在展开后并不能和父级区分层级。
由于不同业务线独立负责该页面的优化,所以每个模块对于层级的理解不同,导致不同模块统一层级的模块在表现层表现出了不同层级。
表意不清
设置模块术语混乱,表意不清,无用的说明文字过多;
设计目标
在此项目中,设计目标十分明确:
扩展全局设置的兼容性,增强业务支持能力;
简化页面信息,明确层级关系,提高 PC 设置页的使用效率;
优化设置模块文案,使文案清晰,表达一致,容易理解;
竞品研究
企业微信的设置页面使用了比较原生的设计形式,并重新将 UI 设计成与产品界面相符合的 UI 样式。
由于企业微信可设置的功能比较少,全局设置信息简易。
可设置项较少或形式比较单一。
符合企业微信的当前状态,功能不够全面。
未来的扩展性不够。
通用虽然可以涵盖大多数的基础设置,但在功能越来越全面后「通用」可能会无法承载那么多功能。
Google Chrome 的设置项分类明确,将不常用的设置内容收起
父子级展示通过跳转形式展示,符合 google 产品的复杂性,使用户专注在当前的设置中。
隐私设置当中「更多」使用展开收起的形式,展开后使用明确的缩进形式区分父子级。
来回跳转的形式使设置的路径较长。
slack 使用弹窗的形式,缩短设置路径,展示在对话框侧,不影响 app 整体的侧边栏。
设置分页形式,不使用锚点形式,更方便用户聚焦在当前设置中。
在与业务强相关时(主题修改)实时修改,给用户所见即所得的感受。
在设置侧边栏的每一个设置选项都非常明确。
针对用户侧只展示与用户最相关的设置信息,关于权限等管理员设置与偏好设置完全区分。
方案探索
窗口模式:
将设置页作为独立的弹窗的两种方案,方便用户在其他入口进入设置页后可以快速关闭,明确使用路径;
取消锚点定位规则,将每一项设置单独作为一个页面,避免发生定位不准的情况;
不需要使用线框的形式包裹每一个模块,使页面清晰,避免使用复杂的缩进形式展示包含关系;
减少部分设置路径,分页显示后可默认展开更多的设置功能;
列表 icon 色值优化调整为 N900 增强 icon 的对比度;
独立窗口方案在定性测试中高于增加关闭按钮方案,数据相差 0.62;
关闭按钮方案在定量测试中数据高于独立窗口方案,数据相差 0.085;
反馈中,两个方案均有得到支持,但「关闭按钮」的反馈中理由更明确,支持人数更多,且该改方案与「鼠标路径」比较一致,且更符合 Lark 产品 All in one 的产品特点;所以最终决定使用在设置中增加关闭按钮的方案;
详情页选项样式:
窗口方案确定后,针对详情页的选项也做了两套方案尝试,分别为保留 switch 开关的形式以及使用 checkbox 的形式。
switch 的优势符合目前站内的用户习惯,但劣势也很明显,用户浏览与操作呈“Z”字形,视线与操作不够聚焦。开关形式更符合手机端使用,虽然市面上有产品在用该方案,但在 PC 端则导致标题与操作区域间距过大。
而 checkbox 的形式为自上而下浏览及操作,对应关系强,该设计也更符合 PC 的开关交互形式,在调研过大量的 PC 端产品后发现大多数应用都会使用 checkbox 的形式,最终确认选择 checkbox 的形式。
根据以上的方案尝试,最终确定方案,使用内置于产品本身的形式,将 switch 开关调整为 checkbox,在此之外,与 PM 合作梳理了设置页中的每一项选项,并针对所有选项进行了重新分类;
重新将设置页整合分类后,设置页的整体层级明确了很多,最终确认了方案。
总结
由于旧版设置没有埋点数据,所以没有明确的数据对比。
当前已经全量,7 月 17 日至今共收到 5 条负面反馈,其中 4 条为针对视觉样式感到不习惯的反馈。

目标 1:扩展全局设置的兼容性,增强业务支持能力。
当前的设置页定位是在主页面提供各模块设置的主要入口,具体设置进入模态弹窗中进行,这样的模式对于业务方依旧存在这一些限制,比如邮件部分,需求量非常庞大,未来在设置中会增加非常多的设置项,并希望这些设置项都能够外露,未来需要继续调整;
目标 2:简化页面信息,明确层级关系,提高 PC 设置页的使用效率;
目前没有用户反馈问题
目标 3:优化设置模块文案,使文案清晰,表达一致,容易理解;
目前没有对于文案不理解的反馈
Back to Top