站群案例全景图
从策略到落地的设计典范
A design model from strategy to implementation
CONTENTS
案例展示/Case show
01
我们的优势/Our advantages
02
设计流程/Design process
03
增值服务/Value-added services
04
关于我们/About us
05
目录
九校联盟成员 首批国家“985工程”建设的重点大学之一
“双一流”建设高校 首批国家“211工程”建设的重点大学之一
页面展示
设计方向 深层定义浙江大学招生网站的核心诉求——信息转化率,去繁从简,注重功能性和体验,打造 “智慧型
招生生态平台”不仅是信息门户,更是连接未来学子与学术殿堂的 “沉浸式成长导航系统”。
方向构思
交互
体验
视觉
提供高效直观
业务界面交互
将学术资源转化为
可感知体验
视觉感官独特的同时
使用便捷 三个方向进行设计构思
设计理念
选取“灿若星辰灯”这一具有代表性的载体,旨在将浙江大学招生网打造成为一个面向未来、以学生为
中心、充分展现浙大魅力的招生平台,有效提升浙大招生工作的效率、形象和吸引力,助力吸引全球最
优秀的学子加入浙大,共同追求卓越。
界面信息层次清晰,用留白手法进行内容模块处理区分,将
重要信息以更加突出的形式表达出来。
产品主色、辅色取色轻快,加强了页面内容浏览性,建立轻
松愉悦的体验感官,使用户使用更加便捷。
界面采用年轻化的设计量法,大标题、圆角、营造简洁、科
技、活力的视觉体验。
拓展
聚焦
活力
拓展
Expand
聚焦
Focus
活力
Vitality
页面分析
提炼“灿若星辰灯”为主题元素,运用数据形式,对浙大雄厚办
学实力、名师队伍、学科成果等进行介绍,象征着学校在教学、
科研、育人等众多领域内硕果累累,如繁星闪耀,持续散发着智
慧与力量的光芒。
主题元素明显
运用生动的动效展示繁星闪烁,点击数字组件,即刻会弹出光晕
点亮改数据板块内容,呼应主题的同时增加了交互性,吸引用户
兴趣了解学校。
交互功能清晰
页面分析
以“港泉溪池江舟海”七大校区地标建筑通过手绘插画形式呈现
,整体沿用年轻创意化的表现形式,吸引更多浏览和关注,同时
青春活泼的画风,契合校园积极向上、朝气蓬勃的整体氛围。
主题元素明显
将强基计划等8类特殊类型招生融入其中,增设快捷通道左右滑动
查看,视觉感强烈的同时凸显交互性使用户能快速了解相关招生
内容。
交互功能清晰
中央直管、教育部直属全国重点大学
国家“211计划”首批牵头高校
985工程和211工程重点建设大学
国家首批世界一流大学建设A类高校
页面展示
设计方向 深层定义中南大学招生网站的核心诉求——信息转化率,去繁从简,注重功能性和体验,将繁杂的招生
信息转化为清晰路径,传递中南大学“向善求真”的学术气质,助力每一位考生高校抵达理想专业。
业务视角 设计视角 用户视角
视觉感官独特的同时
使用便捷
提供高效直观
业务界面功能
优化设计和
简化流程
运营管理
使用便捷
视觉体验
使用便捷
三个方向进行设计构思
设计理念
以“智汇中南、未来启航”为核心设计理念,结合科技感与人文温度,去繁从简突出招生功能性;打造
权威性、智能化、沉浸式招生服务平台,突出中南大学“知行合一 经世致用”的办学特色。
界面信息层次清晰,用留白手法进行内容模块处理区分,将
重要信息以更加突出的形式表达出来。
产品主色、辅色取色轻快,加强了页面内容浏览性,建立轻
松愉悦的体验感官,使用户使用更加便捷。
界面采用年轻化的设计量法,大标题、圆角、营造简洁、科
技、活力的视觉体验。
简约
轻松
活力
简约
Simple
轻松
Relaxed
活力
Vitality
页面分析
60 px
60 px
模块采用卡片式分区,页面呼吸感留白,去除冗余装饰,仅保留
必要信息图标与分隔线,以信息高效传达为核心,极简交互降低
认知负担。
模块采用卡片式分区,分为六个快捷通道,结合极简图标的同时
保留页面留白呼吸感,增强用户与界面的交互性,有效提升用户
参与感。
资讯板块
快捷通道板块
页面分析
左右式布局区分,页面呼吸感留白,设置点击选中效果增
加交互性与信息传达率,底图为饱和度较低的灰蓝色。
模块采用卡片式分区,选取六个校区的标志性建筑,排列
错落有致,底部做虚化处理,增加页面呼吸感,展示校园
风景的同时凸显极简科技感。
直播板块
校园风采板块
考虑到手机端不同设备显示不同,内容不变的前提下改变
页面布局,使之适配多种屏幕,且主题风格与网站相符。
响应式布局
教育部与江苏省人民政府共建“双一流”建设高校
国家“211工程”、“211计划”首批入列高校
国家航天局共建高校
江苏省属重点综合性大学
页面展示
将学术资源转化为
可感知体验
界面交互使用户
未进校门先感其韵
灵动雅致与现代设计
简洁明快有机融合
设计方向 深层定义苏州大学招生网站的核心诉求——以考生为中心,连接未来,展现苏大魅力,拉进用户距离,
使网站成为他们深入了解学校、感受校园文化魅力的友好窗口。
三个方向进行设计构思
方向构思
体验 视觉 交互
设计理念
延续学校所秉持的简约大气、文化底蕴深厚的基调,旨在打造一个信息全面、体验卓越、服务智能、形
象鲜明的数字化招生平台,吸引更多优秀学子了解苏大、向往苏大、选择苏大,助力苏州大学人才选拔
和长远发展。
界面信息层次清晰,用留白手法进行内容模块处理区分,将
重要信息以更加突出的形式表达出来。
产品主色、辅色用色鲜明,体现浓厚的色彩感官,加强了页
面内容突出性。
界面采用年轻化的设计量法,大标题、圆角、营造简洁、科
技、活力的视觉体验。
简约
鲜明
活力
简约
Simple
鲜明
Distinct
活力
Vitality
页面分析
提取用户最常浏览、关注的功能服务,滑动板块下方增设快捷入
口,整体布局紧凑;搭配学校标志性建筑手绘线稿作为底图,丰
富视觉层次。
快捷通道
根据用户浏览顺序,设置向下滑动效果,造型提取东吴门外轮廓
剪影,象征广大学子怀揣梦想与憧憬,踏入充满希望与机遇的苏
大校园,开启一段求知之旅。
交互功能清晰
页面分析
模块采用全屏式布局,运用可视化数据形式,对苏州大学雄厚的
办学实力、名师队伍、学科成果进行介绍,展示学校在教学、科
研、育人等众多领域内的累累硕果。
提取苏州大学各大校区建筑通过手绘插画形式呈现,整体沿用年
轻创意化的表现形式,吸引更多浏览和关注,同时青春活泼的画
风,契合校园积极向上、朝气蓬勃的整体氛围。
数说苏大板块
特殊类型招生板块
卓越医生(中医)教育培养计划改革试点高校
国家“一流专业”和陕西省“一流学科”建设高校
全日制普通本科院校
省部共建高校
页面展示
设计方向
深层定义陕西中医药大学主管网的核心诉求——为用户提供高效、准确的招生信息和查询服务,打造信
息全面、界面友好、功能便捷的官网设计;全面展示陕中医特色与风采,吸引更多优质生源报考。
方向构思
视觉感官
在“古韵”与“今风”、“文化”与
“科技”中找到视觉平衡点
交互感知
“流畅无感、文化浸润、智慧高效”的交
互体验
使用体验
清晰的信息架构和智能导航,使不同
用户快速直达目标
古老中医药智慧与
现代数字技术相融合
设计理念
旨在打造一个集“权威性、文化性、服务性、现代感”于一体的数字门户;运用象征“脉动”的流动线
条、微动效;用现代设计语言重构“岐黄”相关元素;色彩上融合沉稳的“岐黄”色调与代表科技、活
力的色彩;确保用户体验如“脉动”般流畅自然,导航清晰,反馈及时。
界面现代化的同时不失沉稳大气感,通过古朴典籍、中草药
等元素营造沉稳的设计基调。
界面层次清晰,整体功能上贴合用户需求化,用色清新符合
高校药学定位,营造独特视觉体验。
界面采用年轻化的设计量法,大标题、圆角、营造简洁、科
技、活力的视觉体验。
沉稳
清晰
活力
沉稳
Steady
清晰
Clarity
活力
Vitality
页面分析
模块采用中心对称排列,为避免首页信息的冗余,将资讯信息提炼整合重要要
闻,置于板块中心位置,使用户更加直观的了解校园资讯,信息展示更加明确
,背景搭配校园风景及中草药纹理,呼应主题“中医“。
资讯板块
整体为左右切换式,设置点击效果,排列错落有致,右下侧可以切换,具有独
特视觉效果,背景沿用卷轴造型,搭配古籍纹样与校园标准性建筑物校训石,
传达信息的同时凸显陕中医校园文化。
校园动态板块
上下错落有致排列,搭配背景底纹,有跃然纸上之感,设置点击选中效果,传
达信息的同时激发用户探索兴趣。
交互功能清晰
页面分析
模块采用全屏式布局,运用可视化数据形式,对陕中医雄厚的办学实力
、名师队伍、教学信息等进行介绍,展示学校办学实力与基础,背景元
素提炼“中医药”中的中草药元素,与山水相结合;底部引用卷轴元素
,与流动线条相结合,营造书香古朴之感。
通过数字化形式,搭配线性图标展示陕中医雄厚的办学实力,底部设置
切换角标,用户可来回滑动切换了解学校办学信息。
数说陕中医板块
交互功能清晰
华南地区独立建制的海事本科院校
广东省“冲补强”计划“强特色”建设高校
全日制普通高等本科院校
广东省硕士学位授予立项建设单位
页面展示
设计方向 深层定义广州航海学院主官网的核心诉求——功能清晰化数字门户,以用户需求为导向,打造成为一个
兼具视觉吸引力、功能实用性、信息权威性和用户体验友好性的现代化数字门户。
整体凸显高校航海元素 功能使用便捷
视觉吸引力 方向构思 信息权威性
功能实用性 体验友好性
设计理念
提取“航海”元素围绕其进行创意延展,旨在打造“专业而不失温度,传统兼具创新”的学院官网设计
,强化航海特色高校认知,弘扬海洋精神,增强文化自信,推动广州航海学院高质量发展的重要数字资
产和战略平台。
界面信息层次清晰,用留白手法进行内容模块处理区分,将
重要信息以更加突出的形式表达出来。
产品主色、辅色取色轻快,加强了页面内容浏览性,建立轻
松愉悦的体验感官,使用户使用更加便捷。
界面采用年轻化的设计量法,大标题、圆角、营造简洁、科
技、活力的视觉体验。
简约
轻松
活力
简约
Simple
轻松
Relaxed
活力 Vitality
页面分析




