1、SAMPLE1.1知識(shí)鏈接項(xiàng)目一：賞析和規(guī)劃電子商務(wù)網(wǎng)站了解電子商務(wù)網(wǎng)站網(wǎng)頁的構(gòu)成元素1電子商務(wù)網(wǎng)站的概念和特點(diǎn)2電子商務(wù)網(wǎng)站的視覺營銷3電子商務(wù)網(wǎng)站的開發(fā)流程4知識(shí)鏈接5電子商務(wù)網(wǎng)站的分類1 網(wǎng)頁的構(gòu)成元素ABOUT ME 網(wǎng)頁中常見的構(gòu)成元素有文本、圖像、超鏈接、動(dòng)畫、聲音、視頻、動(dòng)畫、表單、程序等，如圖所示Logo作為公司或網(wǎng)站的標(biāo)志，起著非常重要的作用。一個(gè)制作精美的Logo不僅可以很好地樹立公司形象，還可以傳達(dá)豐富的產(chǎn)品信息。LOGO網(wǎng)站作為一種全新的、已經(jīng)為大眾所熟悉和接受的媒體，正在逐步顯示出其特有的、蘊(yùn)藏深厚的廣告價(jià)值空間。廣告條導(dǎo)航是網(wǎng)站設(shè)計(jì)中不可缺少的基礎(chǔ)元素之一，它是網(wǎng)站

2、信息結(jié)構(gòu)的基礎(chǔ)分類，也是瀏覽者進(jìn)行信息瀏覽的路標(biāo)。導(dǎo)航菜單文本和圖像是網(wǎng)頁中最基本的構(gòu)成元素，這兩種基本的構(gòu)成元素都是必不可少的，它們是向?yàn)g覽者傳達(dá)信息最直接、最有效的方式。文本和圖像隨著互聯(lián)網(wǎng)的迅速發(fā)展，網(wǎng)絡(luò)速度的提高，在網(wǎng)頁中出現(xiàn)了越來越多的多媒體元素，包括動(dòng)畫、聲音、視頻等。動(dòng)畫表單是功能型網(wǎng)站中經(jīng)常使用的元素，是網(wǎng)站交互中最重要的組成部分。在網(wǎng)頁中，小到搜索框與搜索按鈕，大到用戶注冊(cè)表單及用戶控制面板，都要使用到表單及其表單元素。表單2 電子商務(wù)網(wǎng)站的概念和特點(diǎn)商品展示頁面信息量大、圖片多網(wǎng)站注冊(cè)登錄簡單化通過相關(guān)產(chǎn)品的交叉銷售提高銷售額安全與快捷的多種支付方式 電子商務(wù)網(wǎng)站是指一個(gè)企

3、業(yè)、機(jī)構(gòu)或公司在互聯(lián)網(wǎng)上建立的站點(diǎn)，其目的是為了宣傳企業(yè)形象、發(fā)布產(chǎn)品信息、宣傳經(jīng)濟(jì)法規(guī)、提供商業(yè)服務(wù)等。 具備信息檢索與篩選功能具備訂單信息確認(rèn)及取消功能概念：功能：3 電子商務(wù)網(wǎng)站的分類信息服務(wù)類廣告類管理類綜合類 電子商務(wù)網(wǎng)站的種類有很多種,按照其功能的不同可以分為五類：交易類4 電子商務(wù)網(wǎng)站的視覺營銷 主題突出原則 整體設(shè)計(jì)原則 內(nèi)容與形式統(tǒng)一原則準(zhǔn)確表達(dá)與良好體驗(yàn)原則5 電子商務(wù)網(wǎng)站的開發(fā)流程任務(wù)描述分析電子商務(wù)網(wǎng)站首頁1技術(shù)引進(jìn)分析頁面結(jié)構(gòu)與色彩2新手試煉賞析電子商務(wù)頁面341.2 任務(wù)一賞析電子商務(wù)網(wǎng)站任務(wù)實(shí)施提高用戶體驗(yàn)的要素1 任務(wù)描述分析電子商務(wù)網(wǎng)站首頁ABOUT ME 從

4、網(wǎng)站的功能欄目、色彩和頁面布局進(jìn)行分析，幫助讀者快速了解電子商務(wù)網(wǎng)站與普通網(wǎng)站在頁面上的不同。2 技術(shù)引進(jìn)分析頁面結(jié)構(gòu)與色彩ABOUT ME 網(wǎng)頁頁面結(jié)構(gòu)種類很多，常見的有滿版型、分割型、骨骼型、曲線型、中軸型、對(duì)稱型、傾斜型、焦點(diǎn)型、自由型和三角型等。頁面結(jié)構(gòu)ABOUT ME 頁面頂部和左右兩側(cè)布局頁面導(dǎo)航。導(dǎo)航的任務(wù)就是清楚地告訴用戶將前往信息架構(gòu)中的什么地方。最初可以只是指定鏈接，隨著進(jìn)一步設(shè)計(jì)導(dǎo)航，最終會(huì)把用戶所做的一切都展示在狹小的屏幕空間里。導(dǎo)航設(shè)置結(jié)構(gòu)導(dǎo)航表示網(wǎng)站內(nèi)容的層次結(jié)構(gòu)，通常會(huì)采用全局和局部導(dǎo)航的形式。全局導(dǎo)航一般是網(wǎng)站的頂層類別，通過全局類型很容易地訪問到網(wǎng)站中最重要的

5、內(nèi)容。1)結(jié)構(gòu)導(dǎo)航關(guān)聯(lián)導(dǎo)航將一個(gè)頁面與包含類似內(nèi)容的其他頁面相關(guān)聯(lián)，特別適合“試探的查找”，并且可以幫助用戶發(fā)現(xiàn)他們“原本不知道”但卻應(yīng)該知道的信息。2)關(guān)聯(lián)導(dǎo)航可用性導(dǎo)航實(shí)現(xiàn)了頁面與幫助訪問者使用網(wǎng)站本身的特性之間的關(guān)聯(lián)。例如會(huì)員登錄、訪問用戶信息和搜索等功能。3)可用性導(dǎo)航ABOUT ME 網(wǎng)頁色彩是樹立網(wǎng)站形象的關(guān)鍵之一，很多網(wǎng)頁都以其完美的色彩搭配起到令人過目不忘的效果，由此可見， 顏色的使用在網(wǎng)頁的制作中是非常重要和關(guān)鍵的。色彩分析3 任務(wù)實(shí)施提高用戶體驗(yàn)的要素ABOUT ME 網(wǎng)頁尺寸的設(shè)定和書本不同，書本的開本基本是固定的，作者和讀者看到的尺寸都是一樣的。而網(wǎng)頁的尺寸受限于兩個(gè)因

6、素：顯示器的尺寸和瀏覽器軟件。用戶在不同的顯示器上或使用不同的瀏覽器都會(huì)產(chǎn)生不同的體驗(yàn)。1.確定網(wǎng)頁的尺寸ABOUT ME 用戶在瀏覽網(wǎng)頁的時(shí)候，總是希望可以快速找到自己需要的內(nèi)容，否則用戶通常會(huì)選擇馬上離開。合理的頁面布局可以使用戶快速發(fā)現(xiàn)網(wǎng)站的核心內(nèi)容和服務(wù)。2.合理的頁面布局從上到下，從左到右，按照內(nèi)容重要性的優(yōu)先級(jí)有序放置重要的內(nèi)容一定要放在頁面顯眼的位置同級(jí)頁面布局要統(tǒng)一合理的應(yīng)用嵌套建立清晰的視覺層次感合理地體現(xiàn)視覺關(guān)聯(lián)2.合理的頁面布局4 新手試煉賞析電子商務(wù)頁面Lorem ipsum dolor sit amet, consectetuer adipiscing elit. M

7、aecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.ADD YOUR POINT HERELorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies,

8、 purus lectus malesuada libero, sit ametADD YOUR POINT HERELorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit ametADD YOUR POINT HERE 此頁面首頁采用扁平化設(shè)計(jì)風(fēng)格，采用通欄的布局方式。主色采用Logo的顏色紅紫色。輔色為主色的

9、補(bǔ)色黃綠色。整個(gè)頁面對(duì)比強(qiáng)烈，主題明確。 通過前面的任務(wù)實(shí)施，讀者應(yīng)該學(xué)會(huì)如何賞析一個(gè)電子商務(wù)網(wǎng)頁了。接下來通過一個(gè)小案例鞏固一下所學(xué)內(nèi)容。 此頁面商品列表頁布局緊湊。使用紅色文字和紅色按鈕將頁面中重點(diǎn)信息突顯出來，便于瀏覽者查看。 此頁面產(chǎn)品詳情頁采用左右結(jié)構(gòu)，明亮的紅色和黃色將整個(gè)頁面分割成幾部分，內(nèi)容清晰，對(duì)比明確。SAMPLE項(xiàng)目一：賞析和規(guī)劃電子商務(wù)網(wǎng)站了解電子商務(wù)網(wǎng)站任務(wù)描述分析電子商務(wù)網(wǎng)站結(jié)構(gòu)1技術(shù)引進(jìn)完成電子商務(wù)網(wǎng)站線框圖2新手試煉電子商務(wù)網(wǎng)站會(huì)員頁面設(shè)計(jì)341.3 規(guī)劃“學(xué)設(shè)計(jì)吧”電子商務(wù)網(wǎng)站任務(wù)實(shí)施設(shè)計(jì)電子商務(wù)網(wǎng)站1 任務(wù)描述分析電子商務(wù)網(wǎng)站結(jié)構(gòu)ABOUT ME 該項(xiàng)目為視

10、頻教程網(wǎng)站，用戶注冊(cè)為會(huì)員后，通過付費(fèi)的方式購買單節(jié)課程或成為網(wǎng)站VIP觀看全部視頻。按照網(wǎng)站內(nèi)容，將網(wǎng)站分為首頁、在線課程、書籍光盤和圖文教程4個(gè)欄目，ABOUT ME 首頁中主要用來顯示最新發(fā)布或指定的視頻、書籍和教程。讓瀏覽者第一時(shí)間看到網(wǎng)站最新更新和最想推廣的內(nèi)容。同時(shí)用戶可以通過首頁中的各種鏈接，快速到達(dá)想要了解的內(nèi)容。首頁ABOUT ME 該頁面中采用羅列的方式，展示網(wǎng)站中的各類在線課程。通過建立分類鏈接，便于用戶查找想要觀看的課程視頻。在線課程ABOUT ME 該頁面與在線課程表現(xiàn)形式一致，采用羅列的方式將圖書展示給用戶。為了便于查找，將書籍按照行業(yè)和軟件進(jìn)行了分類。書籍光盤AB

11、OUT ME 該頁面主要以圖片和文字的形式向用戶展示設(shè)計(jì)相關(guān)知識(shí)。同樣也對(duì)相關(guān)內(nèi)容進(jìn)行了分類，用戶可以以行業(yè)和軟件進(jìn)行查找。圖文教程2 技術(shù)引進(jìn)完成電子商務(wù)網(wǎng)站線框圖 在開始設(shè)計(jì)制作頁面前，通常會(huì)先繪制網(wǎng)站原型的線框圖，幫助設(shè)計(jì)師平衡保真度和速度。繪制的時(shí)候不用在意細(xì)節(jié)，一定要表達(dá)出設(shè)計(jì)思想，不要漏掉任何重要的部分。 首頁面內(nèi)容較多，包含大量的圖片和文字。為了保證各功能的獨(dú)立性，還要便于用戶瀏覽，頁面采用了中軸線的布局方式，將圖形、文字以水平或垂直的方式排列，給人穩(wěn)定、平靜、含蓄的感覺。3 任務(wù)實(shí)施設(shè)計(jì)電子商務(wù)網(wǎng)站ABOUT ME 該頁面是一個(gè)培訓(xùn)類網(wǎng)站，故可以選擇代表科技的藍(lán)色和代表教育的綠

12、色作為主色，但考慮網(wǎng)站中的視頻教程多為互聯(lián)網(wǎng)類的教材，所以排除了綠色，選擇了藍(lán)色作為主色。但藍(lán)色顏色過于深沉，與設(shè)計(jì)行業(yè)多姿多彩的寓意相違背，所以提高藍(lán)色的明度，選擇較為活潑清新的青色作為網(wǎng)站的主色，確定主色ABOUT ME 主色確定后，接下來確定輔色。通常情況可以選擇同色搭配、臨色搭配和補(bǔ)色搭配三種方式。 同色搭配可以實(shí)現(xiàn)風(fēng)格整體風(fēng)格一致的效果，但對(duì)比不強(qiáng)烈。臨色搭配可以實(shí)現(xiàn)豐富的層次感，但對(duì)于需要突出的內(nèi)容表現(xiàn)不足。確定輔色ABOUT ME 頁面中的文本，通常都是要黑色或者白色。標(biāo)題文字或重點(diǎn)突出文字使用輔色。純黑的文字過于生硬，故頁面中使用深灰色作為文本的顏色。文本顏色完成設(shè)計(jì)主頁設(shè)計(jì)稿二級(jí)頁設(shè)計(jì)稿完成設(shè)計(jì)項(xiàng)目頁設(shè)計(jì)稿詳情頁設(shè)計(jì)稿4 新手試煉電子商務(wù)網(wǎng)站會(huì)員頁面設(shè)計(jì)ABOUT ME 會(huì)員系統(tǒng)頁面與整個(gè)頁面風(fēng)格保持一致。會(huì)員系統(tǒng)是網(wǎng)站中最重要的功能，也是網(wǎng)站正常運(yùn)營的保障。一般設(shè)計(jì)的較為簡潔，主題明確，避免受到其他內(nèi)容影響。接下來讀者根據(jù)前面所學(xué)內(nèi)容設(shè)計(jì)會(huì)員頁面。PPT模板下載：/moban/ 行業(yè)PPT模板：/hangye/ 節(jié)日PPT模板：/jieri/ PPT素材下載：/sucai