数据可视化 · 个人项目

SILENT CRY

让家暴数据背后的经历被看见。

将新闻案例转化为人体粒子、时间线与地图,连接伤害的位置、事件背景和具体讲述。

我的工作
案例整理 · 可视化与网页交互设计

研究与问题

背景研究与访谈

前期研究和访谈让我注意到,人们谈到家暴时,常常会问“她为什么不离婚”,却忽略了经济依赖、孩子、报复风险和求助困难等现实原因。我需要让网页既能呈现家暴造成的伤害,也能解释受害者的处境。同时,如何表现伤害、又不让读者一进入页面就被血腥画面冲击,也是需要考虑的问题。

背景研究与访谈,原图册第2页
原图册第2页

设计目标与数据准备

我先整理背景资料和访谈内容,再用 Python 收集澎湃新闻中的相关报道,并借助 OpenAI 提取时间、地点、受伤部位和伤害行为等信息,为后面的可视化做准备。

最初,我尝试用伤口图片拼成一个人体,但发现这种方式容易夸大视觉效果,也可能让人不愿继续阅读。于是,我改用粒子组成身体,每个粒子对应一起事件,用位置、颜色和大小表现不同的伤害信息。用户可以先了解整体情况,再决定是否查看具体案例和伤口示意图。

设计目标与数据准备,原图册第3页
原图册第3页

设计与原型

方案比较与低保真测试

我把浏览过程设计为先点击移除带有偏见的标签,再探索标签背后的人体模型,最后查看事件详情。制作低保真原型后,我邀请 4 位用户体验。有人希望看到更完整的案例,也有人觉得页面需要花时间理解,因此我补充了案例内容和操作说明。随后,我用 Blender 制作人体粒子模型,并用 Stable Diffusion 尝试生成伤口示意图,配合网页界面呈现最终方案。

方案比较与低保真测试,原图册第4页
原图册第4页

数据处理与模型制作

记录新闻整理、信息提取和人体模型的制作过程。

数据处理与模型制作,原图册第5页
原图册第5页

结果与反思

最终网页与反思

最终完成了新闻数据整理、人体可视化模型和网页交互原型。这个项目让我发现,吸引读者停留只是第一步,还需要把信息讲清楚,让他们知道如何继续看、每个图形代表什么。后续我希望进一步完善数据核验和来源说明,并清楚标注生成的示意图,让读者能够分辨新闻事实与辅助表达。

最终网页与反思,原图册第6页
原图册第6页
1 反家暴-可视化
人体粒子模型:从整体探索事件。
1 反家暴-撕标签
移除标签:揭开被标签遮住的信息。
1 反家暴-整体
网页结构:展示完整浏览路径。
1 反家暴-标签
偏见标签:以文字作为浏览入口。
1 反家暴-简介
项目简介:介绍网页关注的问题。
1 反家暴-首页有鼠标
网页开场:通过鼠标操作进入探索。
1 反家暴详情
事件详情:进一步阅读具体案例。