用视觉与技术构建体验的数字设计师

国家数字化学习工程技术研究中心·官网改版

国家数字化学习工程技术研究中心是依托华中师范大学建设的国家级科研机构,其官网是机构对外发布新闻动态、科研成果、招生培养与社会服务信息的主要窗口。

2025 年,我受委托对官网进行整体改版:在保留机构标识与品牌蓝色的前提下,重新设计首页与各内页,建立配套的色彩、字体与图标规范,并在 Figma 中制作首页菜单的交互原型,页面采用自适应布局。方案曾正式上线,运行约一年。

国家数字化学习工程技术研究中心·官网改版项目主视觉

项目起点

旧站停留在早期门户网站的形态:顶部工具栏、横向导航与轮播大图之后,是十几个栏目的密集文字列表。栏目之间缺乏权重区分,阅读依赖逐行查找,页面整体也没有明暗与疏密的变化。

委托方的要求很简短:摆脱旧版式,用符合当下审美的方式重做。这是一个有明确约束的命题——品牌资产必须延续,表达方式必须更新,我的工作在两者之间展开。

国家数字化学习工程技术研究中心旧版官网
旧网页设计效果
国家数字化学习工程技术研究中心新版官网首屏
新网页设计效果

页面

首屏是一组置顶新闻:一条焦点新闻占据整幅画面,标题与摘要叠加在左下;两条次级新闻并置于其下。旧站首屏的轮播在这里被取消——不再轮流展示,而是把此刻最重要的一条直接推到访问者眼前。画面中的人物来自当期焦点新闻的配图;这个位置服务于内容,是新闻的主角位,而非固定的形象橱窗。

新版官网置顶新闻与首屏页面

新闻区从文字列表改为图文卡片,图像、标题与摘要构成一个完整的信息单元,一次扫读即可覆盖多条。重要活动则单独获得一条深色横幅,从日常更新中脱离出来,拥有接近海报的停留。

新版官网新闻卡片与重要活动页面

科研区是最克制的部分:三张文字卡片并置,仅以顶部一条蓝色细线作标记。

新版官网科研成果文字卡片

页面末尾,一张毕业季夕阳的照片上悬浮着一张白色卡片,招生、培养、学位、下载四个入口集中于此。浏览到页面底部的人,恰好在这里得到下一步的去向。

新版官网招生培养入口与页尾页面
点击进入
0%
以静音模式进入