网管平台后台重构，信息层级清楚、日常操作顺手

(挑战)

功能持续增加，后台需要更清楚的导览结构

平台为多家集团企业的官网监控流量与信息安全状态。功能随客户数量增加，新增功能持续加入下拉侧边栏，工程师需要往下滑动菜单，才能查找想要的功能。

有时用户不确定要找的功能隶属于哪个选项。对需要快速排除紧急状况的工程师而言，缩短查找时间是首要目标。

售前销售、产品经理、技术人员与前后端工程师，对平台各有不同期待。团队以约 2 个月进行多场访谈，记录使用上遇到的困难，分类、排序后确立项目目标，并参考客户提供给合作企业的平台使用手册。

(做法)

先设计主要页面，再归纳规范

平台技术门槛高，需同时考量多种操作情境与响应式设计。需求复杂、组件多样，因此改为先设计使用频率最高的主要页面，完成后找出主要页面之间的共通逻辑，整理归纳，再将设计规范应用到其余辅助页面。

组件历经规划、设计、审稿、调整、测试与确认，超过 10 次迭代，才完成高通用性的组件组合。

(关键设计)

三项关键设计

横向面板

新版将同类型功能分组，以块状区分，并组合主次侧边栏、下拉菜单、书签、树状图与多层弹窗，加上由左到右的横向面板，用户可以分层切换，快速找到功能。

通用组件

使用频率高、数据量庞大的页面，例如主机列表，以通用性高的表格组件与拓扑图组件承载。主机列表可点击右键，针对不同主机进行完整操作，并依功能类型整理排序。

复杂信息可视化

平台品牌绿色贯穿界面，并以此色提示状态正常，红色与黄色代表异常；所有色彩层级都低于文字，达到重点提示却不刺眼。拓扑图、主机与流量状态以图像呈现，单色渐变辅助辨识。网站状态分为 20 种，设计出近 200 个表单专用图标，让 IT 人员在黄金时间内迅速排除网站故障。

(成果)

半年如期完成，在信息安全展亮相

合作初期，客户希望整个项目能在信息安全展之前完成。历时半年，如期交付，让平台团队在信息安全展上获得不少合作机会。

体验优化涵盖实时监看、合规预检、IP 派发与使用管控等路径。