在企业级应用中，通讯录模块的设计往往被忽视，但实际上它对提高工作效率和用户体验至关重要。本文通过中信证券OA门户系统通讯录模块的改版案例，深入探讨了如何通过视觉升级和信息分类优化，提升大型通讯录的使用效率和美观度。

一、项目背景

2023年我参与了中信证券oa组的门户页面系统的改版，这个oa门户系统供整个中信证券公司内部员工和外联人员使用，用户为2.2w人以上。

我参与了多个模块门户页面的改版，其中包括待办、收发文、信票夹、差旅、请假、本地公出、党建模块等，涉及web端和手机端。

通讯录是其中一个常用模块。领导及员工常用来查询本公司各部门员工信息和所在部门（除了门户网另外还有一个后台管理信息的系统）。因为公司部门繁多，部门下钻层次最多也有5层。

本文主要探讨的是oa门户页面的通讯录模块的改版升级，主要是功能交互层和表现视觉层两个方面。

我们是从改版后的门户网页面右侧常用模块进入通讯录页面：

注：因为涉及隐私，我将给图片中的信息部分打马赛克并不限于遮挡和模糊处理。

页面快捷入口

原通讯录页面

旧版本通讯录页面问题

1、旧版本设计不够美观大气，字体和组件过于局促，间距狭小，视觉干扰多；

2、信息分类不够清晰，党委纪委和董监高与行政部门、分公司、子公司都在左侧导航，区分不明显。

根据内容和视觉的痛点，我们将从两方面去改版：

1、视觉升级，根据设计统一规范改版；字体间距统一；

2、信息分类：由于在行政部门及分公司子公司的员工们，实际查找部门更多的还是本公司本部门，因此将所有部门条目都放在左侧导航不合理。我们将部门划分为董监高、党委纪委、中信证券总部、分公司、子公司五大类，增设为顶部导航；用户点击这五大类后，左侧导航分别是点击后的部门。这样就提高了不同部门员工的查找效率。

二、导航结构分析

通过分析导航结构，最终采用了顶部导航+左侧导航的方式。顶部是一级标题，左侧展示2-5级标题。

原因一：顶部导航展示一级菜单，也就是部门五大模块，方便所在部门的员工查找本部门和事业部的线索，方便他们收发文、发邮件进行申请汇报的时候使用，因为他们最常用的还是与本部门打交道。这样不至于在其他部门的查找中浪费时间。

原因二：纵向导航通常可以显示比顶部导航多一倍的条目内容，更容易缩放和收纳。由于中信证券公司的部门多则50个，少则30多个，总共过100家机构，因此左侧导航更适合容纳该部门庞大的菜单选项和条目，也更适合信息层次较深的内容展示。如果二级至五级部门名称有更改，也不需要将整个结构空间更改，不像横向菜单，还需要考虑横向空间的排布。

原因三：纵向菜单各部门展示内容多，用户可以一览无余。分公司50多家无需折叠，方便用户快速查看。用户可以在不同选项中快速切换，操作效率较高；在英文翻译之后，标题横向会更冗长，更占空间，采取纵向导航也更适合条目展示。

原因四：之前的旧版本是左侧导航，用户习惯左侧查询公司部门和员工信息。左侧tab栏是惯用的用法，用户中包括领导，员工，外国员工，用户的学习成本不会增加。