紫荆花开:千名杰出清华校友宣传网页设计方案
清华大学杰出校友宣传网页设计项目
清华大学杰出校友宣传网页设计项目
在党的二十大来临之际,清华大学制定献礼二十大专题网站设计建设方案,宣传重大科研成果与杰出校友,向美术学院提出网页设计需求。
需要将多达一千余的杰出校友同时在网页中可视化呈现,以体现清华孕育人才济济的蓬勃数量感与力量感。
将清华校花紫荆作为网页中杰出校友可视化的形式载体,寓意曾经在盛开着紫荆的清华校园里读书的一群学生,最终成为有杰出贡献报效国家的人才。
可视化设计中,每一片紫荆花瓣代表一名杰出清华人物,人物根据类别或年份的分类,以及现实中紫荆的生长形态,汇聚成簇、成枝、成树,形成满园花开、花繁叶茂的景象,给人以清华孕育济济人才的数量感。
在网页中,用户可以通过放缩等交互探索清华人物,也可以通过搜索寻找清华人物。点击紫荆花瓣,可以查看人物摘要,进一步查看详情后可以跳转至人物详情介绍页阅读详细资料。
应对同时需要将多达500余的杰出校友同时在网页中可视化呈现的需求,我首先想到了网络可视化的设计方法。随着互联网的兴起,应对蓬勃增长的数据量级,网络可视化这一新兴可视化方法应运而生。由于校方已经根据杰出校友的贡献类型对校友进行了初步分类,我选用环相接图这一能够直观体现大数据分类信息以及每种分类数量差异的可视化类型来对校友数据进行可视化。
为了保证数据节点之间互相不产生遮挡,最初的可视化方案是二维平面的。在设计中,我有意根据每个分类人物数量对数据节点的大小进行了区分,使画面能够容纳尽可能多的数据节点,保证数量少的分类的可读性,突显数量多的分类的数量感,使设计富有灵活的节奏变化。然而,这样的设计带来了人物类型之间公平与重视伦理问题的弊端。
于是可视化方案从二维升级至三维,使每个节点大小相同。对数据网络的拟花形变因形态优美而获得认可。如何应对数据节点之间的遮挡是下一阶段的设计需要考虑的问题。
紫荆不论于寓意还是于形态都很适合作为可视化的形式载体。紫荆是清华的校花,它盛开在每年四月末校庆前后,北京大地仍是一片枯黄之时,这种具有“敢为天下先”的特性与清华学子所具有的品质相契合。紫荆往往成簇盛开,开花时整枝整树密密麻麻百朵簇生,满眼望去是一片紫色的海洋。
根据紫荆的生物学形态,我以40至50个节点为一簇的数据的最大数量,内容数量少于此数目的类单独成簇,内容数量多于此数的类连簇成枝。在此基础上,我对方案进行了深化设计。通过“按类别分类”与“按时间分类”两个按钮,用户可以切换校友数据的分类形式。点击紫荆花瓣,镜头将聚焦至花瓣所在类区域,用户可以查看人物的详细信息。
阶段二的可视化设计从数据聚类的角度已经贴近紫荆的生物学形态,然而,过多的曲线形态削弱了整体设计的力量感,女性化柔美的可视化风格并不能体现“敢为天下先”的品质特性,也与校方展现成果之蓬勃的需求相背离。阶段三的设计模拟紫荆向上生长的姿态,同时也对紫荆花簇的形态进行了优化。
为解决三维可视化中节点之间遮挡导致的可读性问题,我的设计遵循Ben Shneiderman提出的“概览优先、缩放与过滤、细节按需呈现原则”,当使用缩放交互将信息过滤至簇的层级后,界面提供将紫荆花簇展开平铺进行可视化的交互方式,使用户可以完整探索当前簇内所有人物的信息。
在确定了紫荆的基础形态之后,我也尝试了基于三维或二维的多种视觉风格形式,同时对界面导览进行深化设计。