網(wǎng)頁設(shè)計(jì)及產(chǎn)品內(nèi)頁設(shè)計(jì)方法教程課件

1、網(wǎng)頁設(shè)計(jì)&產(chǎn)品內(nèi)頁設(shè)計(jì)電子商務(wù)美工電子商務(wù)部 目錄頁 CONTENTS PAGE 第二章產(chǎn)品頁設(shè)計(jì)第一章網(wǎng)頁設(shè)計(jì) 目錄 網(wǎng)頁設(shè)計(jì)第一章前臺網(wǎng)站后臺企業(yè)內(nèi)部信息系統(tǒng)物 流 中 心支付中心認(rèn)證中心供應(yīng)者采購者第一章 網(wǎng)頁設(shè)計(jì)1. 電子商務(wù)網(wǎng)站概述1.1 電子商務(wù)系統(tǒng)的構(gòu)成電 子 商 務(wù)政 策法 律人 才信 用規(guī) 范社會基礎(chǔ)支柱網(wǎng)絡(luò)平臺基礎(chǔ)平臺應(yīng)用平臺電子商務(wù)五大社會支柱第一章 網(wǎng)頁設(shè)計(jì)1.電子商務(wù)網(wǎng)站概述1.2 電子商務(wù)的體系結(jié)構(gòu)第一章 網(wǎng)頁設(shè)計(jì)2.網(wǎng)站和網(wǎng)頁的區(qū)別1、網(wǎng)頁：當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或者單擊一個(gè)鏈接，在瀏覽器上就會看到文字、圖像、動畫、視頻、音頻等內(nèi)容，能夠承載這些內(nèi)容的頁面就稱為網(wǎng)頁

2、。瀏覽網(wǎng)頁是互聯(lián)網(wǎng)應(yīng)用最廣的功能，網(wǎng)頁時(shí)網(wǎng)絡(luò)的基本組成部分。根據(jù)頁面內(nèi)容可以分首頁、主頁、專欄網(wǎng)頁、內(nèi)容網(wǎng)頁和功能網(wǎng)頁等類型；按制作技術(shù)分為靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁。 2、網(wǎng)站：網(wǎng)站就是把一些網(wǎng)頁等信息文件通過超鏈接的形式關(guān)聯(lián)起來形成的信息文件的集合。信息可以是網(wǎng)頁形式也可以是其他的文檔形式。HTML瀏覽器網(wǎng)站網(wǎng)頁第一章 網(wǎng)頁設(shè)計(jì)2.網(wǎng)站和網(wǎng)頁的區(qū)別 偽靜態(tài)是相對真實(shí)靜態(tài)來講的。通常我們?yōu)榱烁玫木徑夥?wù)器壓力，和增強(qiáng)搜索引擎的友好面。都將文章內(nèi)容生成靜態(tài)頁面。但是有的朋友為了實(shí)時(shí)的顯示一些信息?；蛘哌€想運(yùn)用動態(tài)腳本解決一些問題。不能用靜態(tài)的方式來展示網(wǎng)站內(nèi)容。但是這就損失了對搜索引擎的友好面。怎么

3、樣在兩者之間找個(gè)中間方法呢，這就產(chǎn)生了偽靜態(tài)技術(shù)。就是展示出來的是以.html一類的靜態(tài)頁面形式，但其實(shí)是用ASP一類的動態(tài)腳本來處理的。 第一章 網(wǎng)頁設(shè)計(jì)3.動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁偽 靜 態(tài):如何分辨動態(tài)網(wǎng)頁和靜態(tài)網(wǎng)頁？打開你想判斷的網(wǎng)站后，再在網(wǎng)址框中輸入javascript:alert(document.lastModified)IE5以上. ，此方法可以判斷一個(gè)網(wǎng)頁的最后更新時(shí)間，如果這個(gè)時(shí)間與現(xiàn)在的時(shí)間相同，說明是偽靜態(tài)的，反之為靜態(tài)的。第一章 網(wǎng)頁設(shè)計(jì)4.網(wǎng)頁的基本構(gòu)成元素網(wǎng)頁由網(wǎng)址（URL）來識別與存取，當(dāng)訪問者在瀏覽器的地址欄中輸入網(wǎng)址后，通過一段時(shí)復(fù)雜而又快捷的程序，網(wǎng)頁文件會被

4、傳送到訪問者的計(jì)算機(jī)內(nèi)，然后通過瀏覽器把這些HTML代碼“翻譯”成圖文并茂的網(wǎng)頁。Flash動畫圖像文字視頻圖像鏈接構(gòu)成元素含義文本和圖像這是網(wǎng)頁中兩個(gè)最基本的構(gòu)成元素，目前所有的網(wǎng)頁中都有他們的身影。超鏈接網(wǎng)頁中的鏈接又可分為文字連接和圖像鏈接兩種，只要訪問者用鼠標(biāo)來單擊帶有鏈接的文字或者圖像，就可以自動鏈接到對應(yīng)的其他文件，這樣才讓網(wǎng)頁能夠鏈接成為一個(gè)整體，超鏈接也是整個(gè)網(wǎng)絡(luò)的基礎(chǔ)。動畫網(wǎng)頁中的動畫可以分為GIF動畫和Flash動畫兩種。動態(tài)的內(nèi)容總是要比靜止的內(nèi)容能夠吸引人們的注意力，因此精彩的動畫能夠讓網(wǎng)頁更加豐富。表單這是一種可以再訪問者和服務(wù)器之間進(jìn)行信息交互的技術(shù)，使用表單可以完

5、成搜索、登錄、發(fā)送郵件等交互功能。音頻/視頻隨著網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，網(wǎng)站上已經(jīng)不再是單調(diào)的圖像和文字內(nèi)容，越來越多的設(shè)計(jì)人員會在網(wǎng)頁中加入視頻、背景音樂等，讓網(wǎng)站更加富有個(gè)性、時(shí)尚和魅力。第一章 網(wǎng)頁設(shè)計(jì)5.網(wǎng)頁設(shè)計(jì)的基本原則一個(gè)優(yōu)秀的網(wǎng)站要有一個(gè)明確的主題，整個(gè)網(wǎng)站設(shè)計(jì)要圍繞這個(gè)主題進(jìn)行制作，也就是說在網(wǎng)頁設(shè)計(jì)之前要明確網(wǎng)站的目的，所有網(wǎng)頁都是要圍繞著這個(gè)內(nèi)容來制作。 首頁設(shè)計(jì)得如何是整個(gè)網(wǎng)站成功與否的關(guān)鍵，反映整個(gè)網(wǎng)站給人的整體感覺。能否吸引訪問者，全在于首頁的設(shè)計(jì)效果。首頁最好要清楚，具有人性化的類別選項(xiàng)，讓訪問者可以快速的找到自己想要的內(nèi)容。 網(wǎng)站的分類也十分重要，可以按主題分類、按性

6、質(zhì)分類、按組織結(jié)構(gòu)分類，或者按人們的思考方式分類等等。無論是哪一種分類的方法，都要讓訪客很容易的找到目標(biāo)。 明確主題1 首頁很重要2 分類3好的網(wǎng)站必須與使用者有良好的互動性，包括在整個(gè)設(shè)計(jì)呈現(xiàn)、使用介面導(dǎo)引上等等，都應(yīng)該掌握互動的原則 ，讓使用者感覺他的每一步都確實(shí)得到適當(dāng)?shù)幕貞?yīng)， 這部分需要一些設(shè)計(jì)上的技巧與軟硬件支持。 事實(shí)上，好的網(wǎng)站設(shè)計(jì)必須加上個(gè)人技巧、 經(jīng)驗(yàn)累積以及軟硬件技術(shù)的配合運(yùn)用等。 互動性4啟互動開場，引起興趣2信息：有價(jià)值的內(nèi)容才會吸引訪問者1整體布局：好的網(wǎng)頁應(yīng)該干凈、整潔、條理清楚、布局清晰5文字的可讀性：選用常用的字體，用于正文和標(biāo)題、利于閱讀4圖像和版面設(shè)計(jì)：圖像

7、和版面應(yīng)集中反映網(wǎng)站所傳達(dá)的主要信息內(nèi)容6多媒體功能應(yīng)用：動畫視頻更能吸引注意力，但需要考慮客戶端的傳輸速度3下載速度：確保打開頁面速度盡可能快，一般人不會很有耐心的等導(dǎo)向清晰：按照人們的閱讀習(xí)慣去設(shè)置人性化的導(dǎo)向7第一章 網(wǎng)頁設(shè)計(jì)6.網(wǎng)頁設(shè)計(jì)的成功要素設(shè)計(jì)一個(gè)成功的網(wǎng)站，具體有下列幾條基本因素，這些因素對網(wǎng)站的成功與否有著重要的影響。 第一章 網(wǎng)頁設(shè)計(jì)7.網(wǎng)頁的風(fēng)格網(wǎng)頁的風(fēng)格 風(fēng)格（style）是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個(gè)“整體形象”包括站點(diǎn)的CI“Corporate Identity System”企業(yè)形象識別系統(tǒng)”（標(biāo)志、色彩、字體、標(biāo)語）、版面布局、瀏覽方式、交

8、互性、文字、語氣、內(nèi)容價(jià)值、存在意義、站點(diǎn)榮譽(yù)等等諸多因素。 風(fēng)格的形成需要在開發(fā)中不斷強(qiáng)化、調(diào)整和修飾，也需要不斷向優(yōu)秀網(wǎng)站學(xué)習(xí)。具體設(shè)計(jì)時(shí)，對于不同性質(zhì)的行業(yè)，應(yīng)體現(xiàn)出不同的網(wǎng)站設(shè)計(jì)風(fēng)格。一般情況下，政府部門的網(wǎng)站風(fēng)格應(yīng)比較莊重沉穩(wěn)，文化教育部門的網(wǎng)站應(yīng)該高雅大方，娛樂行業(yè)的網(wǎng)站可以活潑生動一些，商務(wù)網(wǎng)站可以貼近民俗，而個(gè)人網(wǎng)站則可以不拘一格，更多地結(jié)合內(nèi)容和設(shè)計(jì)者的興趣，充分彰顯個(gè)性。 冷暖色Color Circle 色環(huán)Warm Color 暖 色我們將火苗的顏色：紅、黃和橙色歸為暖色。試驗(yàn)表明在紅色的燈光下，我們的身體會不自覺地分泌更多的腎上腺素，同時(shí)血壓升高、血液循環(huán)加快，體溫上升

9、。Cold Color 冷 色那些在藍(lán)色和綠色區(qū)域內(nèi)的則被稱為冷色。 藍(lán)色和綠色很容易讓人聯(lián)想起水和樹所特有的鎮(zhèn)定的品質(zhì)。實(shí)驗(yàn)顯示藍(lán)色和綠色的光線能夠緩和心跳，降低體溫，放松肌肉。第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配色彩與情感第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配色彩與情感第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配紅色:橙色：黃色：綠色：藍(lán)色：白色：活力、力量、溫暖、堅(jiān)持、憤怒、急躁喜悅、安全、創(chuàng)造力、刺激、快樂、樂觀、擔(dān)心和諧、放松、和平、真誠、滿意、慷慨和平、寬廣、希望、忠誠、靈活、容忍和平、純潔、孤立、寬廣神秘、沉穩(wěn)、嚴(yán)肅、氣質(zhì)黑色：這兩個(gè)色塊一樣大嗎？色彩與品牌第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配網(wǎng)站

10、用色第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配無論是平面設(shè)計(jì)、還是網(wǎng)頁設(shè)計(jì)、色彩永遠(yuǎn)是最重要的一環(huán)。當(dāng)距離顯示屏較遠(yuǎn)的時(shí)候，看到的不是優(yōu)美的版式設(shè)計(jì)或者美麗的圖片，而是網(wǎng)頁的色彩。用一種色彩，先選定一種色彩，然后調(diào)整透明度或者飽和度，這樣的頁面看起來色彩統(tǒng)一，有層次感。用兩種色彩，先選中一種色彩，然后選擇它的對比色。用一個(gè)色系，簡單地說就是用一個(gè)感覺的色彩，例如淡藍(lán)、淡黃、淡綠、或者土黃、土灰、土藍(lán)。注意：在網(wǎng)頁配色中，還要切記一些誤區(qū)：1、不要將所有顏色都用到，盡量控制在三至五種色彩以內(nèi)。2、背景和前文的對比盡量要大（絕對不要用花紋繁復(fù)的圖案做背景），以便突出主要文字內(nèi)容。第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的

11、色彩搭配第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配虎彩商城用色？紅色 代表著吉祥、喜氣、熱烈、奔放、激 情；黑色 代表著神秘、沉穩(wěn)、氣質(zhì)，當(dāng)兩者搭配在一起的時(shí)候，無論從哪個(gè)角度看，從哪個(gè)季節(jié)看，它都是那么時(shí)尚搶眼。第一章 網(wǎng)頁設(shè)計(jì)8.網(wǎng)頁的色彩搭配同樣用紅黑色的網(wǎng)站名鞋店杰克瓊斯京東店杰克瓊斯天貓店聚尚網(wǎng)第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）Dont Make Me ThinkKrug可用性第一定律A、網(wǎng)頁應(yīng)該設(shè)計(jì)得不言而喻B、網(wǎng)頁避免強(qiáng)迫用戶思考的地方C、如果做不到一切不言而喻，起碼做到讓頁面自我解釋A、不言而喻第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）B、網(wǎng)頁應(yīng)避免強(qiáng)迫用戶

12、思考的地方第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）C、如果做不到一切不言而喻，起碼做到讓頁面自我解釋頁面的自我解釋即用戶對頁面稍加學(xué)習(xí)就可以明白，用戶能夠更加專注于他要做的事情。特別是在進(jìn)行一些嶄新的，開拓性或者非常復(fù)雜的頁面設(shè)計(jì)時(shí)，也許只能做到自我解釋(Self-explanatory)。第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）這是什么網(wǎng)站？網(wǎng)站上有些什么？為什么我應(yīng)該在這里，而不是在別的地方？我能在這里做什么？第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）主頁的作用在進(jìn)入一個(gè)新網(wǎng)站時(shí)，主頁應(yīng)回答我頭腦里的四個(gè)問題準(zhǔn)確、快速的傳達(dá)一個(gè)整體形象每個(gè)人都想在主頁上垂

13、一根線下來，而且他們想要一份好餌（大而吸引眼球的鏈接）和一個(gè)好地方（首要位置）。主頁需要額外考慮的問題每個(gè)人都想占一席之地想要參與的人太多設(shè)計(jì)要滿足所有人第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）可用性實(shí)踐中需要注意的問題團(tuán)隊(duì)中可用性的討論現(xiàn)狀：無休止的信仰大戰(zhàn)本質(zhì)：浪費(fèi)時(shí)間關(guān)鍵：沒有什么所謂的普通用戶唯一改變的方法是實(shí)際的用戶體驗(yàn)測試第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）不同職位的人對理想網(wǎng)頁的理解第一章 網(wǎng)頁設(shè)計(jì)9.網(wǎng)頁設(shè)計(jì)的可用性原則（用戶體驗(yàn)）第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)網(wǎng)頁布局設(shè)計(jì)流程圖確定主色調(diào)用戶需求規(guī)劃站點(diǎn)搜集素材前期策劃頁面版式和布局分析設(shè)計(jì)頁

14、面整體切割和優(yōu)化頁面制作HTML文件添加網(wǎng)頁后臺程序測試并上線其他頁面設(shè)計(jì)元素1、前期策劃一件事的成功與否，其前期策劃舉足輕重，網(wǎng)頁設(shè)計(jì)也是如此。網(wǎng)站策劃是網(wǎng)頁策劃的前奏，主要包括確定網(wǎng)站的用戶群和定位網(wǎng)站的主題，還有形象策劃、制作策劃和后期宣傳推廣等方面的內(nèi)容。作為建設(shè)網(wǎng)站的第一步，網(wǎng)站策劃應(yīng)該切實(shí)地遵循“以人為本”的創(chuàng)作思路。2、收集素材前期策劃完成后，接下來就是按照確定的做主題進(jìn)行資料和素材的收集、整理了。這一步也是特別重要的，有了好的想法，如果沒有內(nèi)容來充實(shí)，那么肯定是不能實(shí)現(xiàn)的。收集回來的資料一定要整理好，歸類清楚，方便以后使用。第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)3、頁面的版式與布

15、局分析A、頁面的尺寸由于頁面尺寸和顯示器大小和顯示器的大小及分辨率有關(guān)，網(wǎng)頁的局限性就在于無法突破顯示器的范圍，而且瀏覽器也占用了不少空間，所以留給頁面的空間會更小。目前最流行的頁面寬度分辨率是：新浪： 950 px 網(wǎng)易： 960 px 騰訊： 1000 px 京東商城：1210px 天貓：1190px 鳳凰網(wǎng)：1000px 搜狐： 950 px 中學(xué)生學(xué)習(xí)網(wǎng)： 960 px 校內(nèi)網(wǎng)： 960px csdn： 960 px B、整體造型造型就是創(chuàng)造出來的物體形象。這里指頁面的整體形象，這種形象應(yīng)該是一個(gè)整體，圖形與文本的結(jié)合應(yīng)該是層疊有序的，雖然顯示器和瀏覽器都是矩形，但是對于頁面的造型可以

16、充分運(yùn)用自然界中的其他形狀以及它們的組合（矩形、圓形、三角形、菱形等。）第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)C、頁頭頁頭又可稱為頁眉，頁眉的作用是定義頁面的主題。例如，一個(gè)站點(diǎn)的名字多數(shù)都顯示在頁眉里，這樣訪問者能很快知道這個(gè)站點(diǎn)是什么內(nèi)容。頁頭是整個(gè)頁面設(shè)計(jì)的關(guān)鍵，它將牽涉到下面的更多設(shè)計(jì)和整個(gè)頁面的協(xié)調(diào)性。頁頭常放置站點(diǎn)名稱和公司標(biāo)志。D、文本文本在頁面中多數(shù)以行或者段落出現(xiàn)，它們的擺放位置決定著整個(gè)頁面布局的可視性。第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)E、頁腳頁腳和頁頭相呼應(yīng)，頁頭是放置站點(diǎn)主題的地方，而頁腳是放置制作者或者公司信息的地方。 F、圖片圖片和文本是網(wǎng)頁的兩大構(gòu)成元素，缺一不

17、可。如何處理好圖片和文本的位置是整個(gè)頁面布局的關(guān)鍵。G、多媒體除了文本和圖片，還有聲音、動畫、視頻等其他媒體。雖然它們不是經(jīng)常被用到，但是隨著網(wǎng)絡(luò)的發(fā)展，它們在網(wǎng)頁布局上的作用也將變得更重要。第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)4、確定網(wǎng)站的主色調(diào)色彩是藝術(shù)表現(xiàn)的要素之一，色彩有聯(lián)想與象征的特質(zhì)。在網(wǎng)頁設(shè)計(jì)中，根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合搭配起來構(gòu)成的美麗頁面。同時(shí)應(yīng)該根據(jù)色彩對人們心里的影響，合理地加以運(yùn)用。按照色彩的記憶性原則，一般暖色比冷色的記憶性強(qiáng)。色彩還具有聯(lián)想與象征的特質(zhì)。一般情況下，先根據(jù)總體風(fēng)格的要求定出一到兩種主色調(diào)，有CIS（企業(yè)形象識別系統(tǒng)）的，更

18、應(yīng)該按照其中的VI進(jìn)行色彩運(yùn)用。灰色具體聯(lián)想：抽象聯(lián)想：第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)樹皮、烏云、水泥、油漆等。平凡、失意、謙遜、成熟、穩(wěn)重、消極等。5、設(shè)計(jì)頁面整體在版式布局完成的基礎(chǔ)上，將確定需要的功能模塊（功能模塊主要包含網(wǎng)站標(biāo)志、主菜單、新聞、搜索、友情鏈接、廣告條、郵件列表、版權(quán)信息等）、圖片、文字等放置到頁面上。需要注意的是，這里必須遵循突出重點(diǎn)、平衡協(xié)調(diào)的原則，將網(wǎng)站標(biāo)志、主菜單等最重要的模塊放在最顯眼、最突出的位置，然后再考慮次要模塊的擺放。6、其它頁面元素的設(shè)計(jì)這里的其他頁面元素主要是指按鈕、圖標(biāo)、圖片邊框等一些裝飾性的東西，這些按鈕和小圖標(biāo)不僅能夠裝飾頁面效果，有時(shí)還

19、分擔(dān)了一定的瀏覽和檢索的功能。第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)7、切割和優(yōu)化頁面整體的頁面效果制作好以后，就要考慮如何把頁面分割開來，使用什么樣的方法可以使最后生成的頁面的文件量最小。對頁面進(jìn)行切割與優(yōu)化是具有一定的規(guī)律和技巧的。第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)8、制作HTML頁面這一步就是具體的制作階段，也就是常說的網(wǎng)頁制作。目前主流的網(wǎng)頁可視化編輯軟件是Adobe公司的Dreamweaver，它具有強(qiáng)大的網(wǎng)頁編輯功能，適合專業(yè)的網(wǎng)頁設(shè)計(jì)制作人員。HTML：Hyper text markup language(超文本標(biāo)志語言) + CSS + DIV CSS 指層疊樣式表 (Casc

20、adingStyleSheets) 是一個(gè)塊級元素 第一章 網(wǎng)頁設(shè)計(jì)10.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)9、添加網(wǎng)頁后臺程序完成了HTML頁面的制作，還僅僅是一個(gè)靜態(tài)的網(wǎng)站頁面，無法實(shí)現(xiàn)一些數(shù)據(jù)的交互，這時(shí)就需要網(wǎng)站程序人員編寫相應(yīng)的網(wǎng)頁代碼，來實(shí)現(xiàn)網(wǎng)站的功能，并對網(wǎng)頁中所實(shí)現(xiàn)的功能進(jìn)行測試。10、測試并上傳網(wǎng)站網(wǎng)頁制作完成以后，暫時(shí)還不能發(fā)布，需要在本機(jī)上內(nèi)部測試，并進(jìn)行模擬瀏覽。測試的內(nèi)容包括版式、圖片等顯示是否正確，是否有死鏈接或者空連接等，發(fā)現(xiàn)有顯示錯(cuò)誤或功能欠缺后需要進(jìn)一步修改，如果沒有發(fā)現(xiàn)任何問題，就可以發(fā)布上傳了。發(fā)布上傳是網(wǎng)頁制作最后的步驟，完成這一步驟后，整個(gè)過程就結(jié)束了。第一章 網(wǎng)頁設(shè)計(jì)1

21、0.網(wǎng)頁設(shè)計(jì)的實(shí)現(xiàn)第一章 網(wǎng)頁設(shè)計(jì)11.網(wǎng)頁設(shè)計(jì)所用工具Fireworks Dreamweaver Flash Photoshop 網(wǎng)頁三劍客產(chǎn)品內(nèi)頁設(shè)計(jì)第二章寶貝詳情介紹頁面設(shè)計(jì)第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)1.買家是經(jīng)過哪些途徑找到我們的？消費(fèi)者來到購物網(wǎng)站，目的往往非常明確，購物或準(zhǔn)備購物。大致有以下幾種情況：1、當(dāng)消費(fèi)者無目的的瀏覽淘寶時(shí)，大部分是通過各種推廣活動，被其中某一樣商品吸引住，從而點(diǎn)擊進(jìn)入店鋪，直接瀏覽寶貝詳情。2、當(dāng)消費(fèi)者有熟知并喜好的品牌，則直接從店鋪首頁進(jìn)入，選擇感興趣的商品點(diǎn)擊查看 詳情，再考慮是否購買，或者通過品牌商品搜索進(jìn)入寶貝詳情頁面查看。3、當(dāng)消費(fèi)者以某一商品為購物目

22、的，通過搜索或活動推廣直接進(jìn)入寶貝描述頁面查看詳情。由此可見大多數(shù)消費(fèi)者著陸頁面都會是寶貝描述頁面，意味著消費(fèi)者在進(jìn)入店鋪首頁之前多數(shù)是在看寶貝，如果不能成功吸引或挽留住消費(fèi)者，使得消費(fèi)者直接在寶貝上失去信心和興趣的話，進(jìn)入店鋪的可能性就不大，也就意味著轉(zhuǎn)化率為0.第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)2.寶貝詳情的主要作用讓消費(fèi)者查看商品照片讓消費(fèi)者了解商品屬性吸引消費(fèi)者進(jìn)入店鋪或查看其他商品，提高成交率和二次消費(fèi)增加商品品質(zhì)感，提高消費(fèi)者的信任度和購買欲望良好的寶貝描述頁面會引導(dǎo)消費(fèi)者完成自主購物，減少消費(fèi)者疑問首頁（的主要作用是）吸引消費(fèi)者并樹立店鋪品牌形象，寶貝描述頁面則是影響消費(fèi)者是否購買的一個(gè)重要因

23、素，是將點(diǎn)擊率轉(zhuǎn)化為成交率的關(guān)鍵頁面。研究發(fā)現(xiàn)，互聯(lián)網(wǎng)頁面上60%的文字信息用戶是不會仔細(xì)閱讀的第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)3顧客關(guān)注的信息第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)4.產(chǎn)品詳情頁設(shè)計(jì)的理念第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版1、促銷活動廣告2、焦點(diǎn)圖（引發(fā)興趣）3、目標(biāo)客戶群設(shè)計(jì)（買給誰用）4、場景圖（激發(fā)潛在需求）5、商品詳細(xì)（逐步信任）6、為什么購買（好處設(shè)計(jì)、逃避痛苦點(diǎn)）7、同類型商品對比（價(jià)格、價(jià)值）8、客戶評價(jià)、第三方評價(jià)（產(chǎn)生信任）9、用戶非使用價(jià)值文案和圖形設(shè)計(jì)10、擁有后的感覺塑造（強(qiáng)化信任給客戶一個(gè)100%購買的理由）11、給掏錢人購買理由送戀人、送父母、送領(lǐng)導(dǎo)、送朋友12、發(fā)出購買號

24、召（為什么立刻、現(xiàn)在、馬上在我店購買-替客戶做決定）13、購物需知（郵費(fèi)、發(fā)貨、退換貨等）14、關(guān)聯(lián)推薦商品15、品牌介紹 2、寶貝詳情設(shè)計(jì)-主流模式 商品展示類：色彩、細(xì)節(jié)、優(yōu)點(diǎn)、賣點(diǎn)、包裝 實(shí)力展示類：品牌、榮譽(yù)、資質(zhì)、銷量、生產(chǎn)、倉存 吸引購買類：賣點(diǎn)打動、感情打動、買家評價(jià)、熱銷盛況 促銷說明類：熱銷產(chǎn)品、搭配產(chǎn)品、促銷活動、優(yōu)惠方式 交易說明類：購買、付款、收貨、驗(yàn)貨、退換貨、保修1、產(chǎn)品詳情頁順序1、促銷活動廣告第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版全店活動，比如買減買送等2、焦點(diǎn)圖（引起興趣）第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版3、目標(biāo)客戶群設(shè)計(jì)（買給誰用）第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版4、場景圖（激發(fā)潛在需求） 第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版5、商品詳細(xì)（逐步信任） 第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版6、為什么購買（好處設(shè)計(jì)、逃避痛苦點(diǎn)）第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版7、同類型商品對比（價(jià)格、價(jià)值）第二章 產(chǎn)品內(nèi)頁設(shè)計(jì)5.產(chǎn)品詳情頁模版8、客戶評價(jià)、第三方評價(jià)（產(chǎn)生信任）第二章 產(chǎn)品內(nèi)