校园招聘网站的设计

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中添加参加招聘企业的公司官网，达

到点击跳转的作用，如图3.9所示。

图3.9 求才企业content部分

3.7 职位详情设计content设计

这一部分采用图文结合的表达方式，背景颜色按内容分为白色与浅灰色，主要显示区域为浅灰色，四周留白，既有层次感又不显得突兀。采用左右框架布局，左边部分所占页面比例较小，主要内容为公司名称，其作用是选项卡的选项按钮，用来控制右边部分的展示信息。选项卡的颜色主要使用蓝、白色，

契合该项目主题，凸显青春与活力，预设效果当鼠标悬浮在按钮上，按钮的背景、边框变为蓝色，字体变为白色，没有触发事件的效果，背景、边框为白色，字体为黑色。右侧展示部分分为上下两部分，上半部分为企业信息展示，采用图文结合方式，图片为合作方提供的参加招聘企业的形象照片展示，文字部分为企业介绍，上半部分图文并茂，生动形象。下半部分为职位招聘链接，主要用来展示各个公司的招聘岗位，设置一个立即申请按钮，用来跳转职位链接，如图3.10所示。

图3.10 职位详情content部分