网站规划与设计

网站项目规划与设计

目录

一、项目背景..........................................................2

（1）网站需求分析............................................................2

（2）网站的目的及功能定位....................................................2

二、网站开发平台.....................................................2

三网站建设日程表...................................................2

四、站点地图..........................................................3

五、线框图............................................................4

六、设计规范..........................................................6

七、网页UI设计......................................................6

A＞主要页面的详细设计图.............................................7

九、网站测试..........................................................7

（1）测试准备................................................................7

（2）用户界面测试............................................................7

（3）功能测试................................................................8

（4）兼容性测试..............................................................8

十、网站推广..........................................................8

1

一、项目背景

(1)网站需求分析

在日常办公中，Office软件一直是人们最常用的办公软件，Office办公软件又分为

word、excel和powerpoint(ppt),其中ppt在会议、演讲、培训、推广等场合扮演了的重

要角色。一份ppt做的精彩与否，很大程度上决定了是否能引起参与者的共鸣，尤其在商业

活动中尤为突出。

建设本站的目的在于，为广大办公人员或者设计人员提供一个获取ppt相关素材的平

台，让更多的人可以更轻松的设计出专业水平的ppt模板。

(2)网站的目的及功能定位

目的及功能：提供ppt模板、图片、图表等素材下载服务。

目标人群：日常办公人员、设计人员。

二、网站开发平台

功能模块技术和软件平台

操作系统Windows10

设计稿、图形处理PhotoshopCS6

网页制作平台Dreamweaver

网站开发语言HTML,CSS,JavaScript

网站测试平台Chrome,Firefox

三、网站建设日程表

完成整个项目所需时间为二个月,其中各项规划任务如下表所示:

2

时间任务内容

10月8日-10日拟定项目

10月11日-20日制定初步项目计划

10月21日-31日回站初步框架

11月1日-15日网站内容具体丰富

11月160-30日总结反思，网站细节完善

12月1日70日计划微调，网站用户体验感测试

12月110-24日网站装饰再加工，CSS布局，JS语言

12月25日-31日最终测试

四、站点地图

3

(2)单页布局

LOGO搜索框

导航条

网站路径导航

热门ppt排行

Ppt内容介绍

Ppt下载地址

网站底部(联系方式/备案唁息)

5

六、设计规范

(1)视觉风格：网站整体风格将围绕“专业”、“大气”这两个主题。

①颜色：首页设计以深蓝色为基调，运用亮蓝色进行融合搭配，让网站拥有强烈的专业

气息。

除了导航条文字采用白色，列表及文章类的文章均为黑色，而各类小图标根据需要设

计不同的颜色。

超链接的各个时段的颜色默认为黑色，鼠标移上去和点击时颜色为红色。

②字体：为了美化页面，提高视觉效果，使用清新雅致的字体，且面包屑、主导航和

页面上各个标题的字体都统一。目前使用的中文字体为“微软雅黑”，英文字体为

“sans-serif”。

③图像：本站由于图片较多，缩略图要求清晰并且体积小，大图要求美观效果好。

④分辨率：所制作的网页将自适应电脑及手机的穴同分辨率，配合用户达到较佳的视

觉效果。

(2)布局设计

①空间的合理利用：网站首页采用三栏及两栏结合的方式，用最少的空间展示更多的信

息。

②动态效果：首页具有轮播动态效果，不同tab标签鼠标移上去要即时显示标签下的相

关内容。

③其他附加效果：除了超链接鼠标移上去变色效果，有些页面采用鼠标移到图片后，背

景跟随效果。

七、网页UI设计

我们将坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，浏览者将对

界面上对应的功能一目了然。

保持页面内元素风格，版式一致。

使用一致的标记、标准缩写和颜色，显示信息含义明确。

显示有意义的出错信息，而不是单纯的程序错误代码。

减持高效地使用显示器的显示空间，保持语言的一致性与可选择性。

6

我们将遵循浏览者从上而卜.，自左向右浏览、操作习惯，尽量多做“减法”运算，将

不常用的功能区块隐藏，以保持界面的简洁。

在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导

航结构。并且为页面导航加以设计规划。

八、主要页面的详细设计图

新负PPI称幡ITIlWtPIMIWIVIBMPP1特效ppr^ttm1榜呼1软忖搜索PPI放样

主・修修行士fiCTIBf公司•饯WSHIft—宴七日・理0潮•袤«■««生H"PPTX或25Ppirwe

。的页>ppt»«>

简约商务PPT模板

值正腔哗气-M色兽约装务主&oh®我王建龙如务工博汇修阳电tti

AnoT«Oxno下•（）Anor®oAnoT«0

040S.61MBO$£l624MBa40112MBa3O2.70M6

.2019913[ie««Kj2019-01-0）:B9ZMU冷1务0143［攵为IMSI»19-01-03

九、网站测试

（1）测试准备

测试前准备好不同测试设备（电脑/手机/平板），不同的操作系统（叫ndows系列、

Android系列、IOS系列）、准备好各种浏览器（chrome、ic、火狐、手机浏览器等），然

后进行界面、功能及兼容性测试。

（2）用户界面测试

主要测试导航条、内容、颜色、背景、图像、返I可等。

7

(3)功能测试

主要测试站点中的链接等。

链接测试：目的是检查各个URL所联接的页面是否王确。

表单测试：目的是检查每个表单与程序是否正确联接，能够正确地发送用户请求。

(4)兼容性测试

主要检验应用能否在不同的客户端使用。如苹果(iOS系统的)用户，经常使用chromo,

Firefox等浏览器的用户是否都能正常使用。

十、网站推广

(1)微信公众平台、朋友圈、微博、QQ空间推广

(2