promonkey-lu Goto Github PK

#2018年纳新网站需求

1. 目录 第一章 引言 1.1 编写目的 1.2 项目背景

2. 第二章 网站建设需求分析 2.1 网站目标定位

3. 第三章 网站内容风格 3.1 网站风格设计 3.2 网站页面创意设计 3.2.1 首页设计 3.2.2 内页设计

4. 第四章 开发任务分配 4.1 分工列表   第一章 引言 1.1 编写目的 为明确网站需求，安排项目规划与进度、组织网页开发与测试，而写本文档。本文档供项目主管、设计人员、开发人员参考。 1.2 项目背景 2018年Sky工作室纳新，网站用于面向新生的介绍工作室，其中包括工作室历史、成就、技术、成员等信息。使新生了解工作室，并吸引其加入到工作室中来。

第二章 网站建设需求分析 2.1 网站目标定位

1. 体现工作室的形象。 . 介绍工作室文化，规则，成就，体现工作室的学习氛围。 . 通过成员介绍，展示工作室团结氛围，营造温馨的学习生活环境。 . 通过对工作室的成就介绍，吸引新生踊跃报名。 . 通过网页上海报展示、联系方式等，体现纳新功能。 . 通过网站的新颖，个性的视觉展示，达到宣传作用。 第三章 网站内容风格设计 3.1 网站风格设计 总体印象：立足于sky工作室温暖且学术氛围浓烈的形象进行设计，网页背景图以工作室的代表性合照为主，突出sky工作室的温暖和成员之间的互帮互助。配色以橙红和黑白为主，搭配简洁，凸显工作室严谨的学术氛围。 板式布局：pop布局，栏目分区明确，排版简洁，导航标志清晰。 色彩运用：以skylogo的橙红色为主色调，与黑白搭配，专业大气、呈明朗、动感、简洁的特征。 图片运用：配合文字及色块，以集体的大合照作为背景图片以表达sky工作室大家庭般的温暖。 语言选择：中英文版。 在结构上：运用pop布局，大气漂亮有吸引力。除导航栏外，内页中也有相应的引导。使网站始终保持一种方便快捷、清晰明确的浏览路线。

具体数据如下：

色号：

Home 加入他们/导航栏 #eb3324 透明度90% 导航栏文字 #c2bfbf 底部软件学院文字 #eb3324

Team 简介背景颜色 #eb4149 PHP颜色 #eb3324

About 背景颜色#eb4149

MV 背景颜色#eb4149 透明度60%

Contact 背景颜色#eb4149 字体： Home 底部文字 张海山锐线体简 其他 Adobe 黑体 Std

Team 底部文字 张海山锐线体简 其他 Adobe 黑体 Std

About It’s ME /除鼓励和警告外的文案 张海山锐线体简 底部文字 张海山锐线体简 其他 Adobe 黑体 Std

Contact skylab需要注入新的血液 张海山锐线体简 你来不来？ 汉仪菱心体简 底部文字 张海山锐线体简 其他 Adobe 黑体 Std

3.2 网站页面创意设计 3.2.1 首页设计

（蓝色线标明对齐，下同） 首页是进入网站时，别人第一眼看到的页面。所以要设计的比较华丽。所以采用了比较鲜艳的橙红色导航栏，导航栏左侧是skylab字样，右侧还分别包括Team 、about 、MV 、Contact。导航栏中每一个按钮分别对应一个页面。

下面是全屏幕的轮播图，轮播图照片以sky family为主题。其中包括聚会照片，春游照片，还会新拍一些工作室内部学习场景。在轮播图正中间，上面是sky的logo,下面有两个按钮，分别是“加入他们”和“成员介绍”，其中分别链接contact部分和team部分。 首页部分旨在表现工作室形象，给人的第一印象是温暖的团体，专注的学习态度。

3.2.2 内页设计 1、Team

Team页面是内容最多的一个页面，没办法人多~~，看往届利用了轮播图的方法确实是很明智，但是今年要创新一下。

首先，背景用工作室照片，不局限于这一张，而每一部分的背景用主色调橙红色。

其次，本页面将分为三个部分，从上之下分别为15级，16级，17级。以两行四列排布。默认状态是显示每个人的照片，然后照片下面将有每个人的简介分别为 姓名

专业/学习方向

2、About

这个页面总体红白黑相间，很有层次感。上面是工作室简介，下面是一段float：left的一段过渡语，引出下面develop成就部分。同理，下面介绍了工作室的成就。最下面，是工作室的鼓励和警告。

3、MV

MV页面内容比较单一，其中主要就是把视频放上去，在页面正中间，放上新拍的视频，然后外边框以主色调橙红色，再加上圆角设计，使之更加立体。

4、CONTACT 本页是提供新生了解报名方法，摆放宣传海报的地方。上半部分是一个大的海报图（上图只是用于设计布局，最终图片未定），下方是一个报名表单，表单内容可以随意更改设计。样式如图所示。

第四章 开发任务分配 此次共有五个页面，其中Home和Team这两个页面较为复杂，我打算利用bootstrap做出响应式的效果。 其他页面比较简单，内容比较单一，比较容易做。其中contact部分， 可添加后台。所以让祝鑫懋做这部分，可以练习下后台。 所以，分工如下： 卢世航 Home、Team、MV 祝鑫懋 About、Contact

补充： 需求中网站主要配色有所调整