網(wǎng)站規(guī)劃與設(shè)計(jì)大作業(yè)范例

1、網(wǎng)站項(xiàng)目規(guī)劃與設(shè)計(jì)目錄一、項(xiàng)目背景 1（ 1 ）網(wǎng)站需求分析1（ 2）網(wǎng)站的目的及功能定位1二、網(wǎng)站開發(fā)平臺 1三、網(wǎng)站建設(shè)日程表 1四、站點(diǎn)地圖 2五、線框圖 2六、設(shè)計(jì)規(guī)范 2七、網(wǎng)頁UI 設(shè)計(jì) 4八、主要頁面的詳細(xì)設(shè)計(jì)圖 4九、網(wǎng)站測試 4（1 ）測試準(zhǔn)備 4（2）用戶界面測試 4（3）功能測試 4（4）兼容性測試 4十、網(wǎng)站推廣 4一、項(xiàng)目背景(1)網(wǎng)站需求分析隨著不同國家之間交流越來越廣泛，不同國家的飲食文化也隨之傳播，人們逐漸開始產(chǎn)生了解不同國家飲食的需求。近年來，舌尖上的中國的熱播，通過對中華 美食的多個 側(cè)面，來展現(xiàn)食物給 中國人生活帶來的儀式、倫理等方面的文化。由此我們深受啟

2、發(fā)，準(zhǔn)備讓大家見識多個有代表性的國家特色食材以及與食物相關(guān)、構(gòu)成他們各自美食特有氣質(zhì)的一系列 元素，從而了解 世界飲食文化 的精致和源遠(yuǎn)流長。出自對事物的熱愛，對自然的敬畏，同時為了讓大家更多地了解世界廣大的飲食文明，我們決定制作六個最具有代表性的國家的飲食介紹，相信會獲得各年齡階層曾的青睞。(2)網(wǎng)站的目的及功能定位目的及功能：展示各國各地的美食，使大眾全方位了解不同地區(qū)的飲食文化；為吃貨的旅行提供參考；介紹大學(xué)食堂趣聞，貼近生活，展現(xiàn)另類美食風(fēng)采目標(biāo)人群：美食愛好者，各國文化愛好者，幾乎輻射各年齡階層二、網(wǎng)站開發(fā)平臺功能模塊技術(shù)和軟件平臺操作系統(tǒng)Windows 8設(shè)計(jì)稿、圖形處理Photo

3、shop CS6動畫設(shè)計(jì)制作Flash CS5網(wǎng)頁制作平臺Dreamweaver網(wǎng)站開發(fā)語言HTML, CSS, JavaScript網(wǎng)站測試平臺Chrome, Firefox三、網(wǎng)站建設(shè)日程表完成整個項(xiàng)目所需時間為三個月，其中各項(xiàng)規(guī)劃任務(wù)如下表所示:時間任務(wù)內(nèi)容3月9日-16日擬定項(xiàng)目3月17日-23日制定初步項(xiàng)目計(jì)劃4月6日-19日網(wǎng)站初步框架4月20日-5月1日網(wǎng)站內(nèi)容具體豐富5月2日-5月10日總結(jié)反思，網(wǎng)站細(xì)節(jié)完善5月11日-24日計(jì)劃微調(diào)，網(wǎng)站用戶體驗(yàn)感測試5月25日-6月7日網(wǎng)站裝飾再加工， CSS布局，JS語言6月8日-6月15日最終測試四、站點(diǎn)地圖五、線框圖(1)首頁布局(2

4、)單頁布局六、設(shè)計(jì)規(guī)范(1)視覺風(fēng)格:An unexpected片D DelicacyJora片JAPAN相關(guān)圖片TURKEY相關(guān)圖片ITALY相關(guān)圖相關(guān)圖片CONTACT COUNTRIESABOUT US SHARElogo面包屑 起源CONTACT COUNTRIES ABOUT US SHARE內(nèi)容分類特色支持平臺如微博，微信的圖標(biāo)內(nèi)容網(wǎng)站整體風(fēng)格將圉繞“簡約”、“輕快”這兩個主各國都別具一格，蜜有自己國家的特點(diǎn)，但仍然有相互聯(lián)系,統(tǒng)一的整體效果顏色：首頁設(shè)計(jì)以藍(lán)紫灰為產(chǎn)調(diào)，運(yùn)用米黃進(jìn)行融合搭配，突出網(wǎng)站活發(fā)清爽的格調(diào)。另外運(yùn)用flash和其他形式的動態(tài)技術(shù)效果，強(qiáng)調(diào)網(wǎng)站的特色同時也更

5、能吸引瀏覽者的注意每個國家單獨(dú)的一組網(wǎng)頁的配色，我們決定采用每個國家國旗的主要顏色，如意大利為綠、白、紅，中國主要為紅色等但不會使用純度很高的顏色，否則不適宜閱讀。會使用偏灰色系的顏色，簡約的現(xiàn)代感，營造靜謐的氛圍，烘托食物的鮮艷，誘人。超鏈接的各個時段E勺顏色也會統(tǒng)一，目前鼠標(biāo)移上去和點(diǎn)擊時統(tǒng)一為白色。字體：為了美化頁面，提高視覺效果，使用纖細(xì)，清新的字體，且面包屑、主導(dǎo)航和頁面上各個標(biāo)題的字體都統(tǒng)目前使用的英文字體為yellow peas demo 和 SIMPLIFICATypeface圖像：采用貼合國家氣息的背景，背景盡量少繁復(fù)而實(shí)物圖片則選擇鮮艷，能夠引起人們食欲的，明亮暖色調(diào)的圖片

6、。分辨率：所制作的網(wǎng)頁將 自動調(diào)整分辨率以適應(yīng)顯示器分辨率，不管在1024還是800的分辨率下都可以配合用戶達(dá)到較佳的視覺效果。(2)布局設(shè)計(jì)空間的合理利用：在網(wǎng)頁的上端顯示檢索欄等信息，圖片都先以小圖標(biāo)形式展現(xiàn)，鼠標(biāo) 挪動致圖片位置將展現(xiàn)細(xì)節(jié)圖，劃過處可進(jìn)一步放大，即節(jié)約了空間，同時營造出一種簡潔現(xiàn) 代的感覺。動態(tài)效果：會在圖片和一些特色小機(jī)關(guān)上賦予動態(tài)效果，如跳動，閃爍，放大縮小等。其他附加效果：超鏈接下劃線的顯隱，目錄的跳轉(zhuǎn)，后期可能會加上音樂播放器功能。 七、網(wǎng)頁UI設(shè)計(jì)我們將堅(jiān)持以用戶體驗(yàn)為中心設(shè)計(jì)原則，界面直觀、簡潔，操作方便快捷，瀏覽者將對界 面上對應(yīng)的功能一目了然。保持頁面內(nèi)元

7、素風(fēng)格，版式一致。使用一致的標(biāo)記、標(biāo)準(zhǔn)縮寫和顏色，顯示信息含義明確。顯示有意義的出錯信息，而不是單純的程序錯誤代碼。減持高效地使用顯示器的顯示空間，保持語言的一致性與可選擇性。我們將遵循瀏覽者從上而下，自左向右瀏覽、操作習(xí)慣，盡量多做“減法”運(yùn)算，將不常 用的功能區(qū)塊隱藏，以保持界面的簡潔。在頁面顯眼位置應(yīng)該出現(xiàn)面包屑導(dǎo)航欄，讓用戶知道當(dāng)前所在頁面的位置，并明確導(dǎo)航結(jié)構(gòu)。并且為頁面導(dǎo)航加以設(shè)計(jì)規(guī)劃。八、主要頁面的詳細(xì)設(shè)計(jì)圖九、網(wǎng)站測試(1)測試準(zhǔn)備測試前對被測系統(tǒng)做好以下準(zhǔn)備：系統(tǒng)的全面?zhèn)浞?，包括?yīng)用程序備份、數(shù)據(jù)備份 等；記錄測試前系統(tǒng)狀態(tài)；制定應(yīng)急措施，確保在測試中發(fā)生問題時系統(tǒng)可恢復(fù)。測

8、試員 應(yīng)在測試開始前了解網(wǎng)頁的相關(guān)情況，對測試的預(yù)期結(jié)果應(yīng)進(jìn)行準(zhǔn)備和預(yù)測。測試前要做 好真實(shí)數(shù)據(jù)的準(zhǔn)備工作，并進(jìn)行系統(tǒng)的數(shù)據(jù)初始化。(2)用戶界面測試主要測試導(dǎo)航條、內(nèi)容、顏色、背景、圖像、返回等。(3)功能測試主要測試站點(diǎn)中的鏈接等。鏈接測試：目的是檢查各個URL所聯(lián)接的頁面是否正確。表單測試：目的是檢查每個表單與程序是否正確聯(lián)接，能夠正確地發(fā)送用戶請求。(4)兼容性測試主要檢驗(yàn)應(yīng)用能否在不同的客戶端使用。如蘋果(iOS系統(tǒng)的)用戶，經(jīng)常使用chrome, Firefox等瀏覽器的用戶是否都能正常使用。十、網(wǎng)站推廣(1)微信公眾平臺、朋友圈、微博、QQ空間推廣(2)論壇推廣我們可以注冊幾十個論壇，每個論壇注冊若干個帳號，把簽名設(shè)為自己的網(wǎng)站及團(tuán)隊(duì)圖 標(biāo)。發(fā)表熱門內(nèi)容，自己頂自己的帖子。目前我們應(yīng)用的論壇包括校內(nèi)的極速之星、外網(wǎng)的百 度貼吧、天涯論壇、豆瓣等等網(wǎng)民較為聚