从"暗黑程序员风"到"微信原生风"：
客服记录查看器UI重构实录

摘要：记录将企微客服聊天记录查看器从深色主题改造成微信原生风格的全过程。包含视觉层次设计、配色方案演进、转发记录视角的交互设计，以及"看不见的设计"背后的决策逻辑。三次迭代找到正确视觉层次：左侧#f2f2f2 → 右侧#ffffff。

背景：为什么要重构UI？

在完成了客服记录查看器的数据架构（详见第6期专栏）之后，我们面临一个新的挑战：

"功能有了，但看起来像个程序员工具，不像微信。"

老林的需求很明确：

• ✅ 左侧客户列表 + 右侧聊天区的经典布局
• ✅ 配色要像微信Mac版一样熟悉
• ✅ 整体要有"看微信聊天记录"的亲切感

第一节：初始版本的"暗黑程序员风"

第一代配色方案

最初的实现采用了程序员最爱的深色主题：

.sidebar { background: #2e2e2e; }      /* 深灰侧边栏 */
.chat-area { background: #ededed; }    /* 浅灰聊天区 */

这种配色在开发者工具中很常见，但老林看了一眼，说了三个字：

"不够微信。"

第二节：三次迭代找答案

第一次迭代（22:35）：去深色化

将左侧改为浅灰色：

.sidebar { background: #f7f7f7; }      /* 更浅的灰 */

反馈：和右侧对比不明显，显得"平"。

第二次迭代（22:40）：层次优化

对调背景色，加强对比：

.sidebar { background: #f2f2f2; }      /* 左侧 */
.chat-area { background: #f5f5f5; }     /* 右侧 */

反馈：还是不够对劲。

第三次迭代（22:45-23:00）：微信原生

恢复到微信Mac版的真实配色：

.sidebar { background: #f2f2f2; }      /* 微信灰 */
.chat-area { background: #ffffff; }     /* 纯白 */
.customer-item.active { background: #c9c9c9; }  /* 中灰选中 */

同时恢复侧边栏标题"🦀 蟹蟹客服记录"。

最终效果：✅ 微信原生风格达成

第三节：视觉层次的设计逻辑

最终配色方案

为什么这样设计？

微信Mac版的视觉层次逻辑：

1. 左侧导航：#f2f2f2，不抢夺注意力，作为背景存在
2. 右侧内容：#ffffff，最高对比度，阅读舒适
3. 选中状态：#c9c9c9，明确当前位置但不刺眼

第四节：交互设计的"转发记录视角"

两种视角的对比

选择转发视角

客服记录查看器的使用场景是管理者review，不是聊天参与者。因此采用转发记录的旁观者视角：

• 所有消息左对齐
• 发送者名字显示在消息上方
• 时间戳显示在发送者右侧

消息头部设计

.message-header {
    display: flex;
    justify-content: space-between;  /* 名字左，时间右 */
}
.message-sender { color: #576b95; }   /* 微信蓝 */
.message-time { color: #b2b2b2; }     /* 灰色时间 */

第五节：踩坑实录

坑1：HTML解析的陷阱

最初尝试解析客户HTML文件提取消息：

const html = await fetch(`customers/${id}.html`).text();
// 用DOM解析器提取

问题：类名变更导致解析失败，出现"0条消息"错误。

修复：改为直接加载JSON：

const data = await fetch('chat_data.json').json();

坑2：头像格式

蟹蟹头像最初用 avatar-crane.png，实际部署的是 avatar-crane.jpg。

坑3：数据过滤

轨迹文件里有系统事件（enter_session等），需要过滤掉才能看到真实对话。

第六节：看不见的"微信感"

字体与排版

• 使用系统字体栈（-apple-system, PingFang SC等）
• 消息间距模仿微信的呼吸感
• 时间戳使用微信标准的灰色（#b2b2b2）

微交互

• 客户列表悬停变色
• 选中项有明确的背景变化
• 滚动条样式与系统一致

数据规模

结语：从"能用"到"好用"

UI改造不只是换颜色，而是理解用户的心智模型。

用户说"要像微信"，不是字面意义上的复制像素，而是：

• ✅ 熟悉的视觉层次
• ✅ 符合习惯的交互
• ✅ 零学习成本的上手体验

三次迭代，从暗黑程序员风到微信原生风，最终达成目标。

实现效果：系统已成功部署并投入日常使用。由于涉及真实客户沟通记录，演示环境仅限内部访问。