航空主题网站设计：细线图的读法也要清楚

这组航空主题网站设计把细线、圆点和粉色强调用于三种不同内容：历史索引、机场空间与气象矩阵。风格统一，任务却各不相同。值得学习的是列表与图形的并排安排，也值得继续追问每个点、每条线在当前页面代表什么。

核心结论

• 列表与图形并排，让名称入口和观察区域各有空间。
• 统一圆点细线语言仍需分别说明历史、空间与矩阵的读法。

历史索引让名称先被看见

历史页左侧按行列出编号、事件和地区，粉色横条突出当前一行；右侧是圆形结构图、点阵与竖向刻度。横向列表读法很稳定，图形区域则保留较大的观察空间，两种密度在同一网格里共存。

这比只用一圈圆点做入口更容易识别。名称直接留在列表，读者先确认条目，再观看右侧内容。细分栏与重复行高也让档案式的气质自然出现，无需再加厚重装饰。

界达设计会把选中行和右侧标题一起核对，确认两边始终对应同一项。图中是概念页面样例，事件与历史内容没有经过本文核验，评价只落在索引与视觉关系上。

粉色楼层栏让当前范围有了位置

机场页将左侧整栏设为粉色，机场名称、设施类别与P1、P2、P3纵向排列。右侧深底上用细白线画出倾斜楼层，粉色圆点落在几个空间位置。导航色同时进入图形，形成很直接的视觉呼应。

文字在旁边，而不是全部贴在倾斜图里，这是一个实用安排。读者可以先找楼层和类别，再看点位；复杂线稿不会要求每个设施名称都挤进狭小区域。大号楼层文字与小图标又形成不同的查找速度。

倾斜视角适合表现结构，实际距离和方向却需要另外说明。若用于真实导览，应让点位和名称、楼层同时高亮，并补路径与位置资料。不能仅凭这张概念图断言设施能够被准确找到。

蓝色矩阵很整齐，轴和图例决定能否读懂

气象页左侧以大字显示城市概况，中间是密集蓝点矩阵，右侧列城市名，下方两条渐变图例。粉色点在蓝色单元中格外醒目，浅底与细线让整页保持轻盈。

这类信息可视化网站适合同时比较很多对象，但它需要明确周期、指标和色彩口径。整齐点阵只能证明视觉排列一致，不能自行告诉人横向每一列是什么。借鉴时应先让一格数据能被读成“哪座城市、什么时间、什么指标”。

界达设计更愿意先把静止图例写清，再讨论交互浮层。选中后可以显示完整名称与数值，小屏另提供按城市阅读的列表。历史点、设施点与气象单元虽然同属圆点语言，当前含义仍应各自说明，不能只靠风格统一解决。

常见问题

密集矩阵怎样更容易理解？

先交代横纵轴、时间范围与颜色口径，再让选中单元显示对象和指标。小屏可提供更直接的列表读法。

设计检查清单

• 检查选中条目和右侧图形是否对应。
• 把任意一格矩阵读成带对象和时间的句子。