英汉大词典 夏日清凉版 v3.0
一份送给词典爱好者的夏日礼物，从“查词”到“阅词”的体验升级。
#词典工具 #夏日清凉 #交互体验 #视觉设计 mdx
一、引言
《英汉大词典》（第 3 版）自 2016 年由朱绩崧先生接棒陆谷孙先生主编以来，始终是汉语世界规模最大、查得率最高的综合性英汉双语词典之一。其纸本之厚重，内容之翔实，素有“国之重器”的美誉。然而，当这部巨著被移植至电子屏幕，传统的数据呈现方式往往未能充分发挥数字媒介的交互潜能——长条目拥挤、例句堆叠、视觉疲劳，成为读者高频反馈的痛点。
德国工业设计大师迪特拉姆斯（Dieter Rams）曾言：“好的设计使产品易于理解。”（Good design makes a product understandable.） 这句话在词典数字化的语境中尤为贴切——一部优秀的电子词典，不应仅将纸页内容机械搬运，而应通过精心的视觉分层与即时反馈，让复杂的信息结构变得清晰可循。例如，当鼠标悬停于释义序号左侧时，序号颜色由暖红转为深蓝，光标由箭头变为手型——这一毫秒级的变化，无声地告知读者“此处可点击”，将潜在的交互可能转化为直观的认知提示。正是这些细节，构成了“可理解性”的基石。
夏日清凉版 正是基于这一理念而生。它并非一次简单的样式翻新，而是对词典阅读体验的系统性重构：以**视觉设计（CSS）**为骨架，**交互逻辑（JavaScript）**为神经，**数据洁净（MDX）**为血脉，三者层层递进，共同成就了一个清爽、清晰、可控的查词环境。下文将从外观打磨、交互赋能、底层净化三个维度，解析本次版本的核心进化。
二、视觉焕新：CSS 先行，外观即界面
外观问题是读者最先感知的，也是优化成本最低、见效最快的环节。 夏日清凉版 遵循 “能用 CSS 解决的绝不引入 JS，能用样式调整的绝不改动数据” 的原则，对词典的视觉系统进行了彻底重构。
2.1 色彩语义化：清凉与专业并重
旧版（v1.x）沿用了浏览器默认的混杂字体（Merriweather / 微软雅黑 / Tahoma）和单调节奏（0.95em 字号），词头以棕色标记，例句与释义难以快速区分。 夏日清凉版 则以“夏日清凉”为基调，建立了一套完整的色彩语义体系：
- 词头
#1d2a57（深蓝），厚重稳重，奠定学术基调； - 释义序号
#f16d53（降饱和暖红），醒目且不刺眼，层级分明； - 词性标签
#4d8fa8（蓝绿）配以极淡背景#e4f1f6，清新温柔，与词头形成冷暖互补； - 音标
#527cb4（柔和蓝），例句英文#334155（灰蓝），例句中文#8299ae（淡灰），整体冷色调统一，显著降低长时间阅读的视觉疲劳。
2.2 排版呼吸感：留白与节奏
全局字号提升至 1.15em，行高设为 1.6，段落间留白充足，彻底告别旧版的密集排列。例句块以左侧 2px 虚线边框与释义自然区隔，并缩进排版，使主谓宾结构一目了然。词源、派生、短语区块使用浅灰背景与左侧彩色边框，使其从正文中优雅“弹出”，既丰富视觉层次，又不喧宾夺主。
2.3 细节与兼容性
所有按钮（收藏、发音、AI翻译等）及冗余占位元素（如 #blankDiv、.tab 跳转栏）均通过 CSS 彻底隐藏，界面回归词典本体。同时，通过 word-wrap: break-word 强制长词换行，确保手机与电脑屏幕均不被意外撑破。这些调整全部在样式表层面完成，未触及底层数据，实现了“零成本”的视觉升级。
三、交互设计：JS 赋能，让词典“活”起来
如果说 CSS 塑造了词典的“面容”，那么 JavaScript 则赋予其“灵魂”。v2.5 的交互系统，是在外观打磨完成后，以“渐进增强”方式添加的——所有交互功能均不依赖外部库，轻量且与样式解耦。
3.1 双轨折叠系统：从全量展开到按需阅读
旧版强制展开所有内容，长词条需滚动数屏才能览尽。新版建立了层次分明的折叠逻辑：
- 词头级全局折叠：点击词头（
<hw>或.hwSpan），当前词条内所有例句统一展开或折叠。该操作直接作用于词头，符合“点击标题切换内容”的通用直觉。 - 释义级局部折叠：点击释义序号左侧约 35px 宽的热区，仅控制该条释义下的例句块。当读者仅对某一条释义的用法感兴趣时，无需展开全盘，精准锁定。
3.2 反馈的“可理解性”：迪特拉姆斯的设计信条
迪特拉姆斯强调，好设计应当让产品的操作方式一目了然。v2.5 将这一信条落实于每一个交互细节：
- 悬停变色与手型：当鼠标移向序号左侧热区时，序号颜色由
#f16d53渐变为#1e45b0（深蓝），光标同步变为pointer。这一组合反馈在 200ms 内完成，明确告诉用户“此处可点击”，无需任何文字说明。 - 点击区域精确限定：只有热区（距序号左边界 35px 内）才触发折叠，点击释义文字本身或超链接均不会误触，避免干扰阅读。
- 智能状态管理：无例句的释义自动标记
data-no-toggle="true"，禁用点击，光标保持默认，杜绝无效操作。
这些反馈看似微小，却是“可理解性”的核心载体——它们将潜在的交互可能性转化为可视、可感的信号，使读者在无意识中掌握操作规则，从而专注于内容本身。
3.3 技术实现：轻量且兼容
新编 JavaScript（yhd3_新.js）采用模块化封装，所有功能置于 Yhd3Interaction 命名空间下。通过 data-collapsed 属性驱动折叠状态，利用 mousemove 事件精确判定热区，避免全局事件监听带来的性能损耗。同时，代码适配 DOMContentLoaded 与 complete 双状态，确保在欧路旧版内核及现代浏览器中均稳定运行。
四、数据净化：MDX 底层清理
交互与视觉的优雅，离不开干净的数据基础。旧版 MDX 中存在大量历史遗留问题，直接影响样式和脚本的执行效果。因此，我在外观和交互完成后，对原始数据进行了系统性清洗：
- 词头规范化：移除音节分隔符（如
Pa·ri·cu·tin→Paricutin），确保内部跳转命中率；修复派生词重定向及交叉引用链接，减少“查无此词”的挫败感。（参考：请问怎么去掉音节分隔的圆点？ - #9，来自 xingxingla ） - 提取习语词头
这一步骤虽不直接呈现于用户界面，却是所有上层优化的前提——没有干净的数据，CSS 与 JS 的发挥空间将大打折扣。
五、致谢与获取
本版本的诞生，离不开 @winn 对原始数据的精心处理与共享，正是他的前期工作为后续优化奠定了坚实基础。同时感谢所有在论坛中积极反馈、耐心等待的朋友，你们的热情是持续迭代的最大动力。
版本：夏日清凉版 v3.0
发布日期：2026年7月6日
下载链接
百度网盘：
本坛网盘：
使用提示：
- 推荐配合欧路词典、GoldenDict 等支持 MDX 的软件使用；
- 若存在旧版，建议清理缓存后重新加载，避免样式冲突；
- 默认折叠所有例句，点击词头或序号即可按需展开，享受清爽查词体验。
。再来续第一次。
