電子商務(wù)網(wǎng)站欄目與風(fēng)格的設(shè)計(jì)

電子商務(wù)網(wǎng)站欄目與風(fēng)格的設(shè)計(jì)第1頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》22023/7/16第2章-電子商務(wù)網(wǎng)站欄目與風(fēng)格的設(shè)計(jì)【項(xiàng)目概述】在小王所在的網(wǎng)絡(luò)公司為ABC公司規(guī)劃了電子商務(wù)網(wǎng)站之后，需要進(jìn)行ABC公司電子商務(wù)網(wǎng)站的具體設(shè)計(jì)。經(jīng)理布置給小王幾項(xiàng)任務(wù)，要求小王為ABC公司網(wǎng)站進(jìn)行欄目的設(shè)計(jì)、風(fēng)格的設(shè)計(jì)，并對(duì)該網(wǎng)站目錄結(jié)構(gòu)等方面進(jìn)行設(shè)計(jì)，以便為以后的設(shè)計(jì)工作做好準(zhǔn)備。第2頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》32023/7/16【項(xiàng)目分析】如何設(shè)計(jì)網(wǎng)站的欄目？網(wǎng)站風(fēng)格的設(shè)計(jì)包括哪些方面？如何進(jìn)行網(wǎng)站目錄結(jié)構(gòu)的設(shè)計(jì)？第3頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》42023/7/16【任務(wù)分解】設(shè)計(jì)網(wǎng)站的目錄結(jié)構(gòu)設(shè)計(jì)網(wǎng)站的風(fēng)格任務(wù)1任務(wù)2任務(wù)3設(shè)計(jì)網(wǎng)站的欄目第4頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》52023/7/16任務(wù)1：設(shè)計(jì)網(wǎng)站的欄目1．參考成功網(wǎng)站的內(nèi)容規(guī)劃2．確定網(wǎng)站的主要內(nèi)容3．設(shè)想網(wǎng)站可選內(nèi)容項(xiàng)4．正確進(jìn)行網(wǎng)站特色的定位5．運(yùn)用網(wǎng)站內(nèi)容設(shè)計(jì)的技巧第5頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》62023/7/161．參考成功網(wǎng)站的內(nèi)容規(guī)劃確定同類(lèi)企業(yè)的網(wǎng)站3－5個(gè)為參考對(duì)象將主要欄目進(jìn)行記錄與比較確定同類(lèi)網(wǎng)站的最常用的欄目確定本網(wǎng)站需要保留的欄目確定本網(wǎng)站需要新增的同類(lèi)網(wǎng)站沒(méi)有的欄目與特色欄目第6頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》72023/7/162．確定網(wǎng)站的主要內(nèi)容（1）主頁(yè)（2）公司簡(jiǎn)介（3）產(chǎn)品介紹（4）最新消息（最新動(dòng)態(tài)）（5）客戶(hù)反饋（6）網(wǎng)上訂單（7）聯(lián)系方式第7頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》82023/7/163．設(shè)想網(wǎng)站可選內(nèi)容項(xiàng)（1）技術(shù)支持（2）招聘信息（3）總裁致辭（4）專(zhuān)業(yè)常識(shí)（5）招商信息（6）最新報(bào)價(jià)（7）網(wǎng)上采購(gòu)系統(tǒng)（含數(shù)據(jù)庫(kù)）第8頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》92023/7/164．正確進(jìn)行網(wǎng)站特色的定位挑選與提煉企業(yè)的關(guān)鍵信息，開(kāi)發(fā)一個(gè)頁(yè)面設(shè)計(jì)原型，逐步精煉，形成創(chuàng)意。用15個(gè)以?xún)?nèi)的字準(zhǔn)確地描述網(wǎng)站的特色。要做到特色鮮明突出，力求簡(jiǎn)潔，要點(diǎn)明確第9頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》102023/7/165．運(yùn)用網(wǎng)站內(nèi)容設(shè)計(jì)的技巧（1）開(kāi)動(dòng)腦筋（2）提供有用的信息及其獲取的辦法（3）簽上自己的名字，并展示得到的榮譽(yù)（4）設(shè)置一些有特色的友情鏈接對(duì)象（5）登載或轉(zhuǎn)載對(duì)本企業(yè)肯定性的相關(guān)報(bào)道（6）精心安排網(wǎng)站的文字?jǐn)⑹霾糠郑?）設(shè)計(jì)合理且吸引客戶(hù)的排版方式（8）安排適當(dāng)?shù)慕换スδ艿?0頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》112023/7/16任務(wù)2：設(shè)計(jì)網(wǎng)站的風(fēng)格1．網(wǎng)站名稱(chēng)與標(biāo)志的設(shè)計(jì)2．網(wǎng)站標(biāo)準(zhǔn)色彩的設(shè)計(jì)3．網(wǎng)站標(biāo)準(zhǔn)字體的設(shè)計(jì)4．網(wǎng)站相關(guān)頁(yè)面的布局設(shè)計(jì)5．色彩設(shè)計(jì)要點(diǎn)6．形式設(shè)計(jì)要點(diǎn)7．三維空間的風(fēng)格設(shè)計(jì)8．多媒體功能的風(fēng)格設(shè)計(jì)9．文字與段落的風(fēng)格設(shè)計(jì)10．圖像運(yùn)用的風(fēng)格設(shè)計(jì)11．網(wǎng)站規(guī)劃設(shè)計(jì)方面的創(chuàng)意第11頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》122023/7/161．網(wǎng)站名稱(chēng)與標(biāo)志的設(shè)計(jì)對(duì)于網(wǎng)站的名稱(chēng)，起名時(shí)應(yīng)該做到合法、合理、合情。網(wǎng)站標(biāo)志與名稱(chēng)關(guān)系到網(wǎng)站的總體形象，也是企業(yè)CI（企業(yè)形象）設(shè)計(jì)的一個(gè)方面。在網(wǎng)站的主要頁(yè)面上的顯要位置（一般在正上方），應(yīng)該設(shè)計(jì)一個(gè)包含網(wǎng)站標(biāo)志、網(wǎng)站名稱(chēng)的橫幅，它可以是靜態(tài)的圖像，但最好能設(shè)計(jì)具有動(dòng)態(tài)效果的動(dòng)畫(huà)。第12頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》132023/7/162．網(wǎng)站標(biāo)準(zhǔn)色彩的設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩不要超過(guò)3種標(biāo)準(zhǔn)色彩要用于網(wǎng)站的標(biāo)志、標(biāo)題、主菜單和主色塊網(wǎng)頁(yè)的色彩搭配：顏色對(duì)比外，注意一些基本的色彩特點(diǎn)第13頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》142023/7/163．網(wǎng)站標(biāo)準(zhǔn)字體的設(shè)計(jì)標(biāo)準(zhǔn)字體是指用于標(biāo)志、標(biāo)題、主菜單、主體內(nèi)容的字體。一般，常用的字體可以自由設(shè)計(jì)，而對(duì)于不常用的字體最好通過(guò)圖片形式顯示。標(biāo)準(zhǔn)字體的設(shè)計(jì)中還應(yīng)考慮中英文及其他可能用到的文字所使用的不同字體。第14頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》152023/7/164．網(wǎng)站相關(guān)頁(yè)面的布局設(shè)計(jì)版式設(shè)計(jì)可以通過(guò)文字圖形的空間組合，表達(dá)出和諧與美。多頁(yè)面站點(diǎn)頁(yè)面的編排設(shè)計(jì)要求把頁(yè)面之間的有機(jī)聯(lián)系反映出來(lái)，這里主要的問(wèn)題是頁(yè)面之間和頁(yè)面內(nèi)的秩序與內(nèi)容的關(guān)系。合理化有序化整體化第15頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》162023/7/165．掌握色彩設(shè)計(jì)要點(diǎn)應(yīng)利用色彩對(duì)人們心理的影響的成果，合理地加以運(yùn)用。色調(diào)及黑、白、灰的三色空間關(guān)系。不同的人群對(duì)色彩的喜惡程度有著很大差異。第16頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》172023/7/166．掌握形式設(shè)計(jì)要點(diǎn)形式服務(wù)于內(nèi)容，內(nèi)容又為目的服務(wù)，形式與內(nèi)容的統(tǒng)一是設(shè)計(jì)網(wǎng)頁(yè)的基本原則之一。應(yīng)合理地運(yùn)用對(duì)比與調(diào)和、對(duì)稱(chēng)與平衡、節(jié)奏與韻律以及留白等手段，產(chǎn)生和諧的美感。點(diǎn)、線、面是視覺(jué)語(yǔ)言中的基本元素，可以使用點(diǎn)、線、面的互相穿插、互相襯托、互相補(bǔ)充構(gòu)成最佳的頁(yè)面效果。第17頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》182023/7/167．三維空間的風(fēng)格設(shè)計(jì)網(wǎng)絡(luò)上的三維空間是一個(gè)假想空間，這種空間關(guān)系需借助動(dòng)靜變化、圖像的比例關(guān)系等空間因素表現(xiàn)出來(lái)。在頁(yè)面中圖片、文字位置前后疊壓，或位置疏密，或頁(yè)面上、左、右、中、下位置所產(chǎn)生的視覺(jué)效果都各不相同。第18頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》192023/7/168．多媒體功能的風(fēng)格設(shè)計(jì)應(yīng)盡一切努力挖掘多媒體功能，吸引瀏覽者保持注意力。畫(huà)面的內(nèi)容應(yīng)當(dāng)有一定的實(shí)用性，如產(chǎn)品的介紹甚至可以用三維動(dòng)畫(huà)來(lái)表現(xiàn)。應(yīng)當(dāng)關(guān)注一些新的網(wǎng)上商品展示的方法，目前，網(wǎng)上產(chǎn)品展示技術(shù)主要有Java插件模擬三維展示實(shí)景互動(dòng)360度圖片360度全景攝影虛擬現(xiàn)實(shí)模擬三維展示第19頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》202023/7/169．文字與段落的風(fēng)格設(shè)計(jì)不要輕易讓文字居中和使用粗體或斜體字符。應(yīng)盡量利用短的段落，多利用項(xiàng)目符號(hào)顯示列表。應(yīng)用影像地圖指引主要連接，使頁(yè)面能吸引人和容易閱讀。對(duì)于較多內(nèi)容的顯示，應(yīng)該注意顯示的技巧。第20頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》212023/7/1610．圖像運(yùn)用的風(fēng)格設(shè)計(jì)圖像運(yùn)用時(shí)，不必在以頁(yè)面上填滿(mǎn)圖像來(lái)增加視覺(jué)趣味。圖像的格式應(yīng)做選擇，在不影響圖像效果的前提下，當(dāng)然應(yīng)該選擇文件容量更小的圖像。對(duì)用作背景的GIF要謹(jǐn)慎。第21頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》222023/7/1611．網(wǎng)站規(guī)劃設(shè)計(jì)方面的創(chuàng)意把設(shè)計(jì)對(duì)象顛倒。把設(shè)計(jì)對(duì)象縮小。把顏色換一下。使設(shè)計(jì)對(duì)象閃動(dòng)。把設(shè)計(jì)對(duì)象放進(jìn)音樂(lè)里。使設(shè)計(jì)對(duì)象重復(fù)。使設(shè)計(jì)對(duì)象變成立體。分裂設(shè)計(jì)對(duì)象。使設(shè)計(jì)對(duì)象速度加快。使設(shè)計(jì)對(duì)象對(duì)稱(chēng)。結(jié)合文字音樂(lè)圖畫(huà)。設(shè)計(jì)一個(gè)比賽。設(shè)計(jì)一個(gè)競(jìng)猜游戲。第22頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》232023/7/16任務(wù)3：設(shè)計(jì)網(wǎng)站的目錄結(jié)構(gòu)1．網(wǎng)站鏈接結(jié)構(gòu)的選擇2．網(wǎng)站目錄結(jié)構(gòu)的設(shè)計(jì)第23頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》242023/7/161．網(wǎng)站鏈接結(jié)構(gòu)的選擇樹(shù)狀鏈接結(jié)構(gòu)星狀鏈接結(jié)構(gòu)網(wǎng)狀鏈接結(jié)構(gòu)第24頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》252023/7/16樹(shù)狀鏈接結(jié)構(gòu)示例第25頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》262023/7/16星狀鏈接結(jié)構(gòu)示例第26頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》272023/7/162．網(wǎng)站目錄結(jié)構(gòu)的設(shè)計(jì)樹(shù)狀與星狀鏈接結(jié)構(gòu)形式：按各級(jí)欄目各建立一個(gè)文件夾；應(yīng)該把圖像等文件放在同一文件夾。網(wǎng)狀鏈接結(jié)構(gòu)形式：可以根據(jù)某一種分類(lèi)建立文件夾。關(guān)于網(wǎng)站目錄結(jié)構(gòu)的設(shè)計(jì)主要有以下一些技巧。不要將所有文件都存放在根目錄下。按欄目?jī)?nèi)容建立子目錄。在每個(gè)主欄目?jī)?nèi)部建立獨(dú)立的images目錄。目錄層次不要太深。不要使用中文目錄名。不要使用過(guò)長(zhǎng)目錄名。盡量使用意義明確的目錄名。第27頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》282023/7/16目錄示例第28頁(yè)，課件共30頁(yè)，創(chuàng)作于2023年2月電子商務(wù)網(wǎng)站建設(shè)與維護(hù)實(shí)訓(xùn)》292023/7/16【經(jīng)驗(yàn)總結(jié)】做好電子商務(wù)規(guī)劃準(zhǔn)備，主要涉及閱讀電子商務(wù)網(wǎng)站建設(shè)的策劃書(shū)、了解電子商務(wù)網(wǎng)站建設(shè)的客戶(hù)需求、設(shè)計(jì)網(wǎng)站的內(nèi)容、設(shè)計(jì)網(wǎng)站的風(fēng)格及設(shè)計(jì)網(wǎng)站的目錄結(jié)構(gòu)等任務(wù)。這些工作會(huì)對(duì)整個(gè)電子商務(wù)網(wǎng)站建設(shè)產(chǎn)生較大的影響，因此工作時(shí)一定要認(rèn)真負(fù)責(zé)，勤跑腿，勤