网站规划与设计计算机网站策划_计算机-网络与通信.pdf

网站项目规划与设计 目录 1项目背景.2 1.1网站需求分析.2 1.2网站的目的及功能定位.2 2网站开发平台.2 3网站建设日程表.2 4站点地图.3 5页面布局.4 6设计规范.5 6.1视觉风格：.5 6.2布局设计，.6 7网页UI设计.6 8主要页面的详细设计图.7 9网站测试.10 9.1测试准备.错误!未定义书签。9.2用户界面测试.错误!未定义书签。9.3功能测试.错课!未定义书签。9.4兼容性测试.错误!未定义书签。10网站推广.10 10.1社交软件推广.错误!未定义书签。10.2论坛推广.错误!未定义书签。10.3电子邮件推广.错课!未定义书签。1项目背景 1.1网站需求分析 对于新的游戏公司来说，公司网站的作用主要是为了获取流量、促进商务合作以及招聘 人才等。因为在这个信任危机的环境里，外地客户与新企业建立合作时，往往会査询网站内 容、网站备案和网站对应的联系方式等，进行判断新企业的真实性。客户不可能一直到实地考察企业的情况，客户往往通过企业网站进行判断，所以它就产 生一个功能，企业的线上接待员，24小时*365天值班站岗。所以在现代互联网时代，企业的网站已经是一种标准的配宜。1-2网站的目的及功能定位 通过公司网站的公司介绍让客户可以快速了解到公司，通过游戏项目展示让客户了解到 公司的业务与实力。新闻中心展示了公司最新的动态。最后联系我们，可以使得客户服务、商务合作、招聘人才方面的工作更通畅。2网站开发平台 功能模块 技术和软件平台 操作系统 Windows 10 设计稿、图形处理 Photoshop CS6 动画设计制作 Flash CS5 网页制作平台 Dreamweaver 网站开发语言 HTML,CSS,JavaScript 网站测试平台 Chrome,Firefox 3网站建设日程表 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人时间 任务内容 完成整个项目所需时间浮三个月左右，其中各项规划任务如下表所示:时间 任务内容 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人3月9 0-16日 拟泄项目 3月17日一23日 制定初步项目计划 4月6 B-19日 网站初步框架 4月20日一5月1日 网站内容具体丰富 5 月 2 11-5 月 10 I I 总结反思，网站细节完善 5月11日-24日 计划微调，网站用户体验感测试 5月25日一6月7日 网站装饰再加工，CSS布局，JS语言 6月8日一6月15日 最终测试 4站点地图 官网首页 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人 5页面布局 5.1首页布局 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人5.2单页布局 6设计规范 6.1视觉风格：作为互联网公司网站整体风格将突岀简洁，优雅，科技感，品质感。配色上：使用注灰和深灰两种色彩，浅灰并非纯注灰，而是渐变注灰。在设计中尽量避免纯黑色的出 现，纯黑色太过压抑、不透气。字体上：使用的是平黑体和Myriad字体进行搭配使用。视觉上更加干净简练。面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人排版上：1）主文案处在最重点的视觉位苣。即主要产品特性文案一泄居中展示。2）字体间距宽松。字体采用加粗强调，大小及字体颜色深浅（即黑白灰）来分淸主次。3）坚持一个文案配一套渲染图。每一个产品特性文案都能在视觉上落到实处，不会产生枯 燥、无说服力的阅读体验平面设计风格。4）页而设汁上大而枳留白。文案精简，排版上产品图片、文案有充足的视觉延展空间，带 来非常干净、空旷的视觉感。6.2布局设计 布局的设计原则是，保证协调、一致、流动、均衡、强调等的情况下，需要考虑到网站页面 的醒目性、创造性、造型性、可读性、和明快性等因素。主页面布局采用一栏三分式：这样布局页面结果简单、视觉流程淸晰，便于用户快速泄位，通过大幅精美图片效果来实现 强烈的视觉冲击效果，从而给用户留下深刻的印象，提升品牌效果，吸引用户进一步浏览。由于首页信息展示量有限，需要在首页中添加导航或者分页入口的链接等。分页面布局在和主页面保持一致的情况下使用两栏式左窄右宽：两栏式是最常见的布局方式之一，相对于一栏式可以容纳更多的内容，通过不同的布局比例 和位豊会影响到用户浏览的视线流和页而的整体重点。我们采用左窄右宽的布局，通常左边是重点导航图片，右侧是网页的内容。用戸的浏览习惯 通常是从左到右、从上至下，因此这类布局的页而更符合操作流程，能够引导用户通过导航 査找内容，使操作更加具有可控性、适用于内容丰富、导航分离淸晰的网站。7网页UI设计 页面等级：1）首页：进入网页中看到的第一个页而（LOGO、公司名称、导航、banner.相关信息、底部信息、banner-般是5个。网站的首页只有这一个。2）二级页面：从首页点击进入之后的页面。3）三级页面：从二级页而点击进入的页面。板块划分：头部区域top或header Logo、公司需称、游戏介绍、新闻中心、联系我们。主视觉区-banner 展示公司介绍和公司使命。主要内容区-main 公司实景照片的展示。底部信息区-footer 网站地图、联系我们、版权信息、ICP备案号等信息 按钮设计：按钮需要看起来可点击，为按钮添加微妙的阴影效果，是按钮看起来“浮出页面更接近用户。为面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人按钮添加鼠标悬浮或点击操作的交互效果，提示用户。分辨率设计：面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人当前最流行的分辨率是1920px*1080px的，所以建议创建网页尺寸为1920px*1080px,页而 中心区域常设置为1200px（或lOOOpx-1400px区间），以这个尺寸来设计相对标准。8主要页面的详细设计图 8.1首页 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人 8.2游戏介绍页面 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人83新闻中心页面 面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人8.4联系我们页面 公司名称 Logo 首页 游戏介绍 新闻中心 联系我们 客户服务：游戏过程中的问题建议，请以下方式联系我们：由6箱:._ 商务合作：业内企业、发行商如有意与我们接洽产品合作事宜，请联络：由6箱： 公司地址：xx市右景x区实兴大街x号院x号楼五层5M5 简历投递：手游行业充满机会的行业，我们经历过了残酷的初创期考验，目前已经准备好充足的粮草，接卜来要做的，就是找到更多靠 谱的同伴，一起努力，做最好的游戏！简历投递: 9网站测试 1）查找需求说明、网站设计等相关文档，分析测试需求。2）制左测试计划，确定测试范囤和测试策略，一般包括以下几个部分：功能性测试：界而 测试；性能测试：数据库测试：安全性测试；兼容性测试 3）设计测试用例 4）左期评审，对测试进行评估和总结，调整测试的内容。链接测试：1）链接是否正确跳转，是否存在空页而和无效页而，是否有不正确的岀错信息返回等。2）多媒体元素是否可以正确加载和显示。3）多语言支持是否能够正确显示选择的语言等。面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人界面测试：1）页而是否风格统一，美观 2）页而布局是否合理，重点内容和热点内容是否突岀 3）控件是否正常使用 4）对于必须但为安装的空间，是否提供自动下载并安装的功能 5）文字检査 性能测试：压力测试；负载测试：数据库测试：要具体决定是否需要开展。数据库一般需要考虑连结性，对数据的存取操作，数据内容的验 证等方而。安全性测试：1）基本的登录功能的检査 2）是否存在溢出错误，导致系统崩溃或者权限泄露 3）相关开发语言的常见安全性问题检査，例如SQL注入等。4）如果需要高级的安全性测试，确定获得专业安全公司的帮助，外包测试，或者获取支持 兼容性测试：根据需求说明的内容，确定支持的平台组合：浏览器的兼容性；操作系统的兼容性；软件平台的兼容性；数据库的兼容性 开展测试，并记录缺陷。合理的安排调整测试进度，提前获取测试所需的资源，建立管理 体系（例如，需求变更、风险、配程、测试文档、缺陷报告、人力资源等内容）。10网站推广 1、搜索引擎推广方法 搜索引擎优化（简称SEO）,通过搜索引擎算法，优化搜索关键词。先向并大搜索引擎提交网 址。然后提高网站更新频率，每天左期更新文章内容。在每个单独的页面增加单独的关键词,在进行关键词优化，这样避免关键词堆积，页而关键词重复等现象。坚持写原创内容，根据 百度搜索引擎实算法规则，原创内容更能让人们喜欢你的网站，网站坚持更新原创内容，才 有助于SEOI优化，才会提高用户体验。2、付费推广 1）竞价推广，通过百度开通竞价推广账户，设置关键词就可以开始推广了,又被称为广告 推广和广告投放。2）购买外链，网站建设完成后，你可以适当的花钱购买一些PR值高网站的单向链接。3、百科百科推广方法 百科等是比较权威的站点，可以通过百度百科，互动百科，知识百科等增加网站内容，增加 品牌词曝光率。4、分类信息推广方法 去58,赶集网，百姓网，地方分类信息网站上发布自己的企业信息和产品信息。5、QQ群推广方法 多申请点QQ，每个QQ多加一点相关的QQ群，假如每个QQ群有100个活人，你有50个 QQ面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人群，那么每天你就可以向5000人推广你的网站，效果还是不错的。6、图片水印推广方法 在发布内容的时候，或者看见一些好看好玩的图片时，在图上增加你的文字水印或者网址水 印，然后在发布在QQ群，QQ群会有很多人把这些图片进行转发，起到很好的宣传效果。或者发到微信朋友圈。7、软文推广方法 写一些文章或引用一些好的文章，巧妙的加入您在好推建站的网站URL。要是这篇文章被多 人转载，那么会有更多的网民看见你的网站地址，取到了很好的传播和推广效果。8、博客推广方法 自己搭建一个IW客，上而写一些相关的文章，等博客站有排名之后，可以适当的带点锚文本 链接。也可以通过一些优质一点的博客发布评论，评论中带上你的网站地址。9、论坛发帖推广方法 可以到搜外网、A5站、站长之家、推一把的等等论坛进行发布帖子，在注册的时候，把签 名改为所推广的网站地址。10、微博推广方法 借助閒客平台发布相关内容或者分享文章，耙网站的文章，产品发布到各大微博中，可以免 费获得曝光率。11、签名推广方法 经常使用的到QQ，MSN,旺旺聊天工具等，上面可以把签名改为所推广网址。可以免费的 获得一些曝光量。12、名片、宣传页推广方法 在需片上和宣传页中增加上网站网址，客户收到名片后，感兴趣会访问你的网站了解更多内 容的。13、交换友情链接推广方法 根据自己所在的行业，找一些相关的网站进行链接交换。14、邮件推广方法 可以找一些邮箱或是QQ群邮件营销，把你的内容加上你的网址，进行群发。（此推广方式 现在能看邮件的人很少了）面布局设计规范视觉风格布局设计网页设计主要页面的详细设计图网站测试测试准备用户界面测试功能测试兼容性测试网站推广社交软件推广论坛推广电子邮件推广错误未定义书签错误未定义书签错课未定义书签错误未定义书签错是为了获取流量促进商务合作以及招聘人才等因为在这个信任危机的环境里外地客户与新企业建立合作时往往会査询网站内容网站备案和网站对应的联系方式等进行判断新企业的真实性客户不可能一直到实地考察企业的情况客户往网站已经是一种标准的配宜网站的目的及功能定位通过公司网站的公司绍让客户可以快速了解到公司通过游戏项目展示让客户了解到公司的业务与实力新闻中心展示了公司最新的动态最后联系我们可以使得客户服务商务合作招聘人