在企業級應用中，通訊錄模塊的設計往往被忽視，但實際上它對提高工作效率和用戶體驗至關重要。本文通過中信證券OA門戶系統通訊錄模塊的改版案例，深入探討了如何通過視覺升級和信息分類優化，提升大型通訊錄的使用效率和美觀度。

一、項目背景

2023年我參與了中信證券oa組的門戶頁面系統的改版，這個oa門戶系統供整個中信證券公司內部員工和外聯人員使用，用戶為2.2w人以上。

我參與了多個模塊門戶頁面的改版，其中包括待辦、收發文、信票夾、差旅、請假、本地公出、黨建模塊等，涉及web端和手機端。

通訊錄是其中一個常用模塊。領導及員工常用來查詢本公司各部門員工信息和所在部門（除了門戶網另外還有一個后臺管理信息的系統）。因為公司部門繁多，部門下鉆層次最多也有5層。

本文主要探討的是oa門戶頁面的通訊錄模塊的改版升級，主要是功能交互層和表現視覺層兩個方面。

我們是從改版后的門戶網頁面右側常用模塊進入通訊錄頁面：

注：因為涉及隱私，我將給圖片中的信息部分打馬賽克并不限于遮擋和模糊處理。

頁面快捷入口

原通訊錄頁面

舊版本通訊錄頁面問題

1、舊版本設計不夠美觀大氣，字體和組件過于局促，間距狹小，視覺干擾多；

2、信息分類不夠清晰，黨委紀委和董監高與行政部門、分公司、子公司都在左側導航，區分不明顯。

根據內容和視覺的痛點，我們將從兩方面去改版：

1、視覺升級，根據設計統一規范改版；字體間距統一；

2、信息分類：由于在行政部門及分公司子公司的員工們，實際查找部門更多的還是本公司本部門，因此將所有部門條目都放在左側導航不合理。我們將部門劃分為董監高、黨委紀委、中信證券總部、分公司、子公司五大類，增設為頂部導航；用戶點擊這五大類后，左側導航分別是點擊后的部門。這樣就提高了不同部門員工的查找效率。

二、導航結構分析

通過分析導航結構，最終采用了頂部導航+左側導航的方式。頂部是一級標題，左側展示2-5級標題。

原因一：頂部導航展示一級菜單，也就是部門五大模塊，方便所在部門的員工查找本部門和事業部的線索，方便他們收發文、發郵件進行申請匯報的時候使用，因為他們最常用的還是與本部門打交道。這樣不至于在其他部門的查找中浪費時間。

原因二：縱向導航通?？梢燥@示比頂部導航多一倍的條目內容，更容易縮放和收納。由于中信證券公司的部門多則50個，少則30多個，總共過100家機構，因此左側導航更適合容納該部門龐大的菜單選項和條目，也更適合信息層次較深的內容展示。如果二級至五級部門名稱有更改，也不需要將整個結構空間更改，不像橫向菜單，還需要考慮橫向空間的排布。

原因三：縱向菜單各部門展示內容多，用戶可以一覽無余。分公司50多家無需折疊，方便用戶快速查看。用戶可以在不同選項中快速切換，操作效率較高；在英文翻譯之后，標題橫向會更冗長，更占空間，采取縱向導航也更適合條目展示。

原因四：之前的舊版本是左側導航，用戶習慣左側查詢公司部門和員工信息。左側tab欄是慣用的用法，用戶中包括領導，員工，外國員工，用戶的學習成本不會增加。