北理工网站规划与~设计大作业.doc

《北理工网站规划与~设计大作业.doc》由会员分享，可在线阅读，更多相关《北理工网站规划与~设计大作业.doc（12页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、1网站设计与规划大作业要求自选主题，撰写开发某静态网站的“项目规划与设计文档” 。具体要求如下：通用规则1. 撰写认真: 文档应具有统一性（所有内容都指向同一个清晰的主题） 、一致性（所有内容的组织清晰合理，符合逻辑）和支持性（有具体的细节或案例） 。没有各种文字错误。2. 正确的格式化: 使用标题、列表、留白等机制，让文档适宜阅读。关于项目规划&设计是否/如何回答了以下问题? 项目是什么? 项目的来源或背景? 项目的具体内容（是否有树状图或其他方式的示意图让我们清楚知道网站即将包括的内容）？ 项目的技术细节，比如开发平台、运行平台等？ 详细的任务分解? 详细的时间表? 是否有示例图帮助我们理

2、解? 是否符合专业文档撰写规范？ 是否包括了以下内容： 站点地图（Site map）：即信息架构图。 线框图（wireframe）：可手绘后照照片，也可以用软件绘制。如果是手绘图，应保证内容清晰可见。 设计规范（design specification）：至少包括颜色设计、字体设计、图像设计、布局设计等方案，需包含主要页面的详细设计图。避免抄袭现象：如果发现抄袭或雷同，成绩不及格。2网站项目规划与设计目录一、项目背景 .2（1 ）网站需求分析 .2（2 ）网站的目的及功能定位 .2二、网站开发平台 .2三、网站建设日程表 .3四、站点地图 .4五、线框图 .4六、设计规范 .5七、网页 UI

3、设计 .7八、主要页面的详细设计图 .8九、网站测试 .9（1）测试准备 .9（2）用户界面测试 .9（3）功能测试 .9（4）兼容性测试 .9十、网站推广 .93一、项目背景（1 ）网站需求分析 随着不同国家之间交流越来越广泛，不同国家的饮食文化也随之传播，人们逐渐开始产生了解不同国家饮食的需求。近年来，舌尖上的中国的热播，通过对中华美食的多个侧面，来展现食物给中国人生活带来的仪式、伦理等方面的文化。由此我们深受启发，准备让大家见识多个有代表性的国家特色食材以及与食物相关、构成他们各自美食特有气质的一系列元素，从而了解世界饮食文化的精致和源远流长。出自对事物的热爱，对自然的敬畏，同时为了让大

4、家更多地了解世界广大的饮食文明，我们决定制作六个最具有代表性的国家的饮食介绍，相信会获得各年龄阶层曾的青睐。（2 ）网站的目的及功能定位目的及功能：展示各国各地的美食，使大众全方位了解不同地区的饮食文化；为吃货的旅行提供参考；介绍大学食堂趣闻，贴近生活，展现另类美食风采目标人群：美食爱好者，各国文化爱好者，几乎辐射各年龄阶层二、网站开发平台功能模块 技术和软件平台操作系统 Windows 8设计稿、图形处理 Photoshop CS6动画设计制作 Flash CS5网页制作平台 Dreamweaver网站开发语言 HTML, CSS, JavaScript网站测试平台 Chrome，Firef

5、ox4三、网站建设日程表完成整个项目所需时间为三个月，其中各项规划任务如下表所示：时间 任务内容3 月 9 日-16 日 拟定项目3 月 17 日-23 日 制定初步项目计划4 月 6 日-19 日 网站初步框架4 月 20 日-5 月 1 日 网站内容具体丰富5 月 2 日-5 月 10 日 总结反思，网站细节完善5 月 11 日-24 日 计划微调，网站用户体验感测试5 月 25 日-6 月 7 日 网站装饰再加工，CSS 布局，JS 语言6 月 8 日-6 月 15 日 最终测试5四、站点地图五、线框图（1）首页布局An unexpected Delicacy Journey CONTA

6、CT COUNTRIES ABOUT US SHARETURKEY相关图片JAPAN相关图片CHINA相关图片INDIA相关图片ENGLAND相关图片ITALY相关图片6（2）单页布局六、设计规范 （1）视觉风格：网站整体风格将围绕“简约” 、 “轻快”这两个主题。各国都别具一格，富有自己国家的特点，但仍然有相互联系，统一的整体效果。颜色：首页设计以蓝紫灰为基调，运用米黄进行融合搭配，突出网站活泼清爽的格起源导航面包屑logo CONTACT COUNTRIES ABOUT US SHARE分类特色内容内容内容支持平台如微博，微信的图标7调。另外运用 flash 和其他形式的动态技术效果，强调

7、网站的特色同时也更能吸引浏览者的注意。每个国家单独的一组网页的配色，我们决定采用每个国家国旗的主要颜色，如意大利为绿、白、红，中国主要为红色等等但不会使用纯度很高的颜色，否则不适宜阅读。会使用偏灰色系的颜色，简约的现代感，营造静谧的氛围，烘托食物的鲜艳，诱人。超链接的各个时段的颜色也会统一，目前鼠标移上去和点击时统一为白色。字体：为了美化页面，提高视觉效果，使用纤细，清新的字体，且面包屑、主导航和页面上各个标题的字体都统一。目前使用的英文字体为 yellow peas demo 和SIMPLIFICA Typeface。图像：采用贴合国家气息的背景，背景尽量少繁复8而实物图片则选择鲜艳，能够引

8、起人们食欲的，明亮暖色调的图片。分辨率：所制作的网页将自动调整分辨率以适应显示器分辨率，不管在 1024 还是800 的分辨率下都可以配合用户达到较佳的视觉效果。（2）布局设计空间的合理利用：在网页的上端显示检索栏等信息，图片都先以小图标形式展现，鼠标挪动致图片位置将展现细节图，划过处可进一步放大，即节约了空间，同时营造出一种简洁现代的感觉。 动态效果：会在图片和一些特色小机关上赋予动态效果，如跳动，闪烁，放大缩小等。其他附加效果：超链接下划线的显隐，目录的跳转，后期可能会加上音乐播放器功能。七、网页 UI 设计我们将坚持以用户体验为中心设计原则，界面直观、简洁，操作方便快捷，浏览者将对界面上对应的功能一目了然。保持页面内元素风格，版式一致。使用一致的标记、标准缩写和颜色，显示信息含义明确。显示有意义的出错信息，而不是单纯的程序错误代码。减持高效地使用显示器的显示空间，保持语言的一致性与可选择性。我们将遵循浏览者从上而下，自左向右浏览、操作习惯，尽量多做“减法”运算，将不常用的功能区块隐藏，以保持界面的简洁。9在页面显眼位置应该出现面包屑导航栏，让用户知道当前所在页面的位置，并明确导航结构。并且为页面导航加以设计规划。10八、主要页面的详细设计图