電子商務網(wǎng)站欄目與風格的設計

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