网站项目规划与设计
目录
一、项目背景........................................................... 1.. .
(1)网站需求分析. (1)
(2)网站的目的及功能定位. (1)
二、网站开发平台........................................................... 1.. .
三、网站建设日程表........................................................... 2.. .
四、站点地图........................................................... 2.. .
五、线框图........................................................... 2.. .
六、设计规范........................................................... 3.. .
七、网页UI 设计........................................................... 4.. .
八、主要页面的详细设计图.................................. 5..
九、网站测试........................................................... 5.. .
(1)测试准备 (5)
(2)用户界面测试 (5)
(3)功能测试 (5)
(4)兼容性测试 (5)
十、网站推广........................................................... 5.. .
一、项目背景
(1)网站需求分析
随着不同国家之间交流越来越广泛,不同国家的饮食文化也随之传播,人们逐渐开始产
生了解不同国家饮食的需求。
近年来,舌尖上的中国的热播,通过对中华美食的多个侧面,来展现食物给中国人生活带来的仪式、伦理等方面的文化。由此我们深受启发,准备让大家见识多个有代表性的国家特色食材以及与食物相关、构成他们各自美食特有气质的一系列元素,从而了解世界饮食文化的精致和源远流长。
出自对事物的热爱,对自然的敬畏,同时为了让大家更多地了解世界广大的饮食文明,我们决定制作六个最具有代表性的国家的饮食介绍,相信会获得各年龄阶层曾的青睐。
(2 )网站的目的及功能定位
目的及功能:展示各国各地的美食,使大众全方位了解不同地区的饮食文化;为吃货的旅行提供参考;介绍大学食堂趣闻,贴近生活,展现另类美食风采
目标人群:美食爱好者,各国文化爱好者,几乎辐射各年龄阶层
二、网站开发平台
二、网站建设日程表
完成整个项目所需时间为三个月,其中各项规划任务如下表所示:
四、站点地图 五、线框图
内容
分类
内容
特色
内容
(1 )首页布局
An un e cHIN c A ed
Delicacy 相关图
片
Jouwey
—相关图 ■片
JAPAN
相关图 ■片
(2 )单页布局
ENGLAND 相关图
片
CONTACT
ITALY
相关图
TURKEY
相关图 片
COUNTRI E S ABOUT US SHARE
导go CONTACT COUNTRIES ABOUT US SHARE
面包屑 起源
■支持平台如微博,微信的图标
六、设计规范
(1)视觉风格:网站整体风格将围绕“简约”、“轻快”这两个主题。
各国都别具一格,富有自己国家的特点,但仍然有相互联系,统一的整体效果。
①颜色:首页设计以蓝紫灰为基调,运用米黄进行融合搭配,突出网站活泼清爽的格调。另外运用flash 和其他形式的动态技术效果,强调网站的特色同时也更能吸引浏览者的注
意。每个国家单独的一组网页的配色,我们决定采用每个国家国旗的主要颜色,如意大利为绿、白、红,中国主要为红色等等
但不会使用纯度很高的颜色,否则不适宜阅读。会使用偏灰色系的颜色,简约的现代感,营造静谧的氛围,烘托食物的鲜艳, 诱人。
超链接的各个时段的颜色也会统- ,目前鼠标移上去和点击时统一为白色。
②字体:为了美化页面,提高视觉效果,使用纤细,清新的字体,且面包屑、主导航
和页面上各个标题的字体都统一。目前使用的英文字体为yellow peas demo和SIMPLIFICA Typeface。
③图像:采用贴合国家气息的背景,背景尽量少繁复
而实物图片则选择鲜艳,能够引起人们食欲的,明亮暖色调的图片。
④分辨率:所制作的网页将自动调整分辨率以适应显示器分辨率,不管在1024还是800的分辨率下都可以配合用户达到较佳的视觉效果。
(2 )布局设计
①空间的合理利用:在网页的上端显示检索栏等信息,图片都先以小图标形式展现,鼠标挪动致图片位置将展现细节图,划过处可进一步放大,即节约了空间,同时营造出一种简
洁现代的感觉。
②动态效果:会在图片和一些特色小机关上赋予动态效果,如跳动,闪烁,放大缩小等。
③其他附加效果:超链接下划线的显隐,目录的跳转,后期可能会加上音乐播放器功能。
七、网页UI设计
我们将坚持以用户体验为中心设计原则,界面直观、简洁,操作方便快捷,浏览者将对
界面上对应的功能一目了然。
保持页面内元素风格,版式一致。
使用一致的标记、标准缩写和颜色,显示信息含义明确。
显示有意义的出错信息,而不是单纯的程序错误代码。
减持高效地使用显示器的显示空间,保持语言的一致性与可选择性。
我们将遵循浏览者从上而下,自左向右浏览、操作习惯,尽量多做“减法”运算,将不常用的功能区块隐藏,以保持界面的简洁。
在页面显眼位置应该出现面包屑导航栏,让用户知道当前所在页面的位置,并明确导
航结构。并且为页面导航加以设计规划。
八、主要页面的详细设计图
九、网站测试
(1)测试准备
测试前对被测系统做好以下准备:系统的全面备份,包括应用程序备份、数据备份等;记录测试前系统状态;制定应急措施,确保在测试中发生问题时系统可恢复。测试员应在测试开始前了解网页的相关情况,对测试的预期结果应进行准备和预测。测试前要做好真实数据的准备工作,并进行系统的数据初始化。
(2)用户界面测试
主要测试导航条、内容、颜色、背景、图像、返回等。
(3)功能测试
主要测试站点中的链接等。
链接测试:目的是检查各个URL所联接的页面是否正确。
表单测试:目的是检查每个表单与程序是否正确联接,能够正确地发送用户请求。
(4)兼容性测试
主要检验应用能否在不同的客户端使用。如苹果(iOS系统的)用户,经常使用chrome, Firefox 等浏览器的用户是否都能正常使用。
十、网站推广
(1)微信公众平台、朋友圈、微博、QQ空间推广
(2 )论坛推广
我们可以注册几十个论坛,每个论坛注册若干个帐号,把签名设为自己的网站及团队图
标。发表热门内容,自己顶自己的帖子。目前我们应用的论坛包括校内的极速之星、外网的
百度贴吧、天涯论坛、豆瓣等等网民较为聚集的地方。
(3)电子邮件推广
我们会像宜家一样让用户进行自愿注册会员,浏览者自愿留下他的邮箱地址,定期或不定期的发布一些电子刊物、会员通讯、专业服务商的电子邮件广告等。可以减少广告对用户的滋扰、增加潜在吸引人群定位的准确度、增强与客户的关系、提高品牌忠诚度等。