设计2 分钟阅读
HUMAN ARTIFACTS:从太阳系图谱到人类造物
一次关于宇宙、人类与界面的设计笔记:为什么我们总想把浩瀚的太阳系压缩成一张可以阅读的图。
太阳系图谱最初只是个人网站上的一块装饰。后来它变成了一扇门:从一颗行星出发,可以看到轨道、探测器、任务和时间。
一张图的尺度问题
太阳系真实比例几乎无法阅读。把地球缩成一个像素,太阳仍然巨大,而海王星会在屏幕之外。所有太阳系可视化都在做同一件事:在真实与可读之间做取舍。
我最后选择了“压缩轨道半径、保留相对顺序”的方式:
- 行星大小与轨道距离不按真实比例。
- 保留真实的轨道倾角与公转方向。
- 对关键对象标注真实数据和来源。
- 明确告诉用户:这不是一张精确的星历图。
这种诚实反而让图更容易被理解。
从巡逻叙事到人类造物
最初的文案是“宇宙超人巡逻太阳系”。它有趣,但范围太窄。后来我把重点转向 HUMAN ARTIFACTS:1957 年以来,人类把一万多个造物送出了大气层。
我们不再只问“这颗行星长什么样”,而是问:
人类究竟在太阳系里留下了什么?
卫星、探测器、望远镜、着陆器,以及那些早已停止工作、却还在轨道上继续漂流的金属。
Canvas 伪 3D 的边界
这个图谱没有使用 WebGL。它用 Canvas 2D 绘制带球面感的行星、椭圆轨道、星空和光晕。
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius * tilt;
drawPlanet(ctx, x, y, scale, planet);
优点是可控、轻量、在低端设备上也能运行;缺点是缺少真正的三维空间感。为了让画面更像一个“可进入的图谱”,我做了几件事:
- 用多层透明度模拟大气和轨道深度。
- 拖动时保留惯性,缩放时围绕指针位置。
- 用 HUD、编号和极小号字体建立仪表盘质感。
- 把交互说明写在界面上,而不是藏在帮助文档里。
设计不是“像”,而是“成立”
参考优秀作品很重要,但最终判断标准不是“像不像”,而是这个界面是否成立:
- 信息是否能在三秒内被理解?
- 点击后的反馈是否符合预期?
- 在手机上是否仍然能用?
- 数据是否有出处?
一张好看的星空图可以很轻,但一张可信的图谱必须很重。
0 阅读
709 字·2 分钟
Related
Comments
评论
由 Giscus · GitHub Discussions 提供
评论区尚未配置。
在环境变量中填写 `NEXT_PUBLIC_GISCUS_REPO`、`NEXT_PUBLIC_GISCUS_REPO_ID`、 `NEXT_PUBLIC_GISCUS_CATEGORY_ID` 后,评论区会自动启用。配置说明见 README。