校园招聘网站的设计
3.1 整体设计
在页面结构上分为两大部分,引导页的页面结构和展示页的页面结构。引导页也称为主视觉,它是用户打开网页的第一个界面,是给应届生的第一印象,引导页页面结构如图3.1所示,引导页将采用整屏背景+logo+enter按钮按钮的结构,在各种主流分辨率下都在一个
Logo 背景 Enter 图3.1 引导页结构
屏幕显示,即页面中不能出现滚动
条。接下来是展示页的页面结构如图3.2所示,将在外部结构上采用多页面上下框架型布局而内部content的结构视具体页面而定,内容上采用图文结合的方式来进行布局,分为三大板块,banner页、content页、footer页,该页面结构在本次设计中用于除引导页以为的所有页面,即下文中介绍的区情概况、校招行程、求才企业、职位详情。
Banner Content Footer 图3.2 展示页结构
根据良好映像、开发区介绍、企业介绍、线下校招、职位链接等需求,将其分成以下五个页面。
1、引导页
(1)在功能上,起到引导浏览的作用,主要作用是奠定整个项目的格调、主题,所以将采取青春与活力的主题来奠定整个网站的情感基调;
(2)在结构上,采用整屏背景+logo+enter的结构、图文结合的方式来进行设计; (3)在关键技术方面上,将给enter按钮添加h5动效,因为用户要求自适应手机端,所以还需要做一个手机端的引导页,达到用户的要求。
2、区情概况
(1)在功能上,该页面介绍合作方的基本情况、经济发展、人才政策、产业政策和科技创新等信息;
(2)在结构上,content部分采用上下框架的结构、图文结合的方式来进行设计; (3)在功能上导航栏添加伪类特效,banner图轮播,添加政府官网链接,链接视频,挂上政府微信公众号。
3、校招行程
(1)在功能上,该页面介绍合作方线下的校园招聘行程;
(2)在结构上,content部分采用图表结合的表达方式来进行设计; (3)在功能上导航栏添加伪类特效,banner图轮播。 4、求才企业
(1)在功能上,用来介绍参加招聘的企业方,主要为企业官网的链接; (2)在结构上,content部分采用图片展示的表达方式来进行设计;
(3)在功能上,导航栏添加伪类特效,banner图轮播,添加参加招聘企业的官网链接。 5、职位详情
(1)在功能上,用来介绍参加招聘企业方并且给出职位链接,以及全部招聘职位汇总表的下载按钮;
(2)在结构上,content部分采用左右框架的结构,图文结合的方式来进行设计; (3)在功能上,导航栏添加伪类特效,banner图轮播,公司简介与职位链接相结合,采用选项卡的形式展现,添加全部招聘职位汇总表的下载按钮。
3.2 引导页设计
PC端引导页,也称主视觉页面,是点开网站链接后的第一个页面,采用整屏背景+logo+enter的结构来进行设计。
在颜色方面,采用蓝色、白色与黄色为主调代表青春与活力的,以此来奠定整个网站的情感基调。页面宽度为1440px,因为PC端分辨率为1920px、1440px、1280px,所以采用折中的方法制作设计图。表达形式采用图文结合的方式,图片为合作方给出的素材和根据合
作方提供的文字而设计出艺术字,一个在左一个在右,相互映衬,避免了左右不协调的情况出现。文字选择放置在页面左下方的位置,因为艺术字设计的是上款下窄,所以文字放置在艺术字下方恰到好处,不显突兀。因公司要求,在页面底部位置加上版权声明,设计图如图3.3所示。
图3.3 PC端引导页
接下来是移动端的引导页设计,因为移动端的分辨率远远小于PC端,且为竖屏,所以在结构上采取上下结构来进行布局,设计图所示,页面内容依次为logo、艺术字、图片、enter按钮及版权。颜色、表达形式均与PC端引导页一致,设计图如图3.4所示。
图3.4 移动端引导页
3.3 banner设计和footer设计
在本项目设计中,所有网页的banner部分和footer部分采用一样的效果。 1、 banner部分设计
根据合作方要求,采取图片轮播形式展现,这一部分包括合作方logo和图片,具体形
式为四张图片轮播,具体效果将在下文实现部分展现。其次是导航栏部分,因为除去引导页,有四张页面,所以导航栏分为四个按钮,由于每个分页面较为简单,就不采用下拉菜单制作。导航栏的颜色主要使用蓝、白色,契合该项目主题,凸显青春与活力,预设效果当鼠标悬浮在按钮上,按钮的背景、边框变为蓝色,字体变为白色,没有触发事件的效果,背景、边框为白色,字体为黑色,如图3.5所示。
图3.5 区情概况banner部分
2、 footer部分设计
footer这一部分背景颜色采用蓝色与主题对应,文字部分是应前程无忧公司要求是版权声明,如图3.6所示。
图3.6 区情概况footer部分
3.4 区情概况content设计
这一部分采用图文结合的表达方式,背景颜色按内容分为白色与浅灰色,使内容之间加以区别,但又不显得突兀。第一部分区情概况,图片部分设置的是合作方给出的视频链接,文字部分介绍开发区的基本情况;第二部分经济发展,图片部分采用的是合作方给出的图片资源,文字部分介绍基本经济情况;第三部分人才政策,图片部分采用的是合作方给出的图片资源,文字部分介绍政府人才政策;第四部分产业聚集,图片部分采用的是合作方给出的图片资源,文字部分介产业详情,以吸引参加招聘人才注意;第五部分科技创新,图片部分采用的是合作方给出的图片资源,文字部分介园区科技研发能力,在这一部分底部,插入政府官网和微信公众号,如图3.7所示。
图3.7 区情概况content部分
3.5 校招行程content设计
这一部分采用图表结合的表达方式,背景颜色按内容分为白色与浅灰色,使内容之间加以区别,但又不显得突兀。第一部分校招行程,这一部分与合作方线下校招活动相对于,用表格的形式展示合作方的线下校园招聘活动的城市、日期、具体时间按、学校和具体地点等信息;第二部分为图片展示,图表结合,避免页面过于单调,如图3.8所示。
图3.8 校招行程content部分
3.6 求才企业设计content设计
这一部分采用图片展示的表达方式,背景颜色按内容分为白色与浅灰色,主要显示区域为浅灰色,四周留白,既有层次感又不显得突兀。主要部分中的图片为参加招聘企业的公司logo,在设计过程中,合作方还没有完全给出参加招聘企业的数量,所以设计图提供一个样式展示的作用,并不用做最后定稿,预设在公司logo中添加参加招聘企业的公司官网,达
校园招聘网站的设计
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)
![](/skin/haowen/images/icon_star.png)