《網(wǎng)頁設(shè)計》課件-1.2任務(wù)一 賞析電子商務(wù)網(wǎng)站

SAMPLE項目一：賞析和規(guī)劃電子商務(wù)網(wǎng)站—了解電子商務(wù)網(wǎng)站任務(wù)描述——分析電子商務(wù)網(wǎng)站首頁1技術(shù)引進——分析頁面結(jié)構(gòu)與色彩2新手試煉——賞析電子商務(wù)頁面341.2任務(wù)一賞析電子商務(wù)網(wǎng)站任務(wù)實施——提高用戶體驗的要素1任務(wù)描述——分析電子商務(wù)網(wǎng)站首頁ABOUTME

從網(wǎng)站的功能欄目、色彩和頁面布局進行分析，幫助讀者快速了解電子商務(wù)網(wǎng)站與普通網(wǎng)站在頁面上的不同。2技術(shù)引進——分析頁面結(jié)構(gòu)與色彩ABOUTME

網(wǎng)頁頁面結(jié)構(gòu)種類很多，常見的有滿版型、分割型、骨骼型、曲線型、中軸型、對稱型、傾斜型、焦點型、自由型和三角型等。頁面結(jié)構(gòu)ABOUTME

頁面頂部和左右兩側(cè)布局頁面導航。導航的任務(wù)就是清楚地告訴用戶將前往信息架構(gòu)中的什么地方。最初可以只是指定鏈接，隨著進一步設(shè)計導航，最終會把用戶所做的一切都展示在狹小的屏幕空間里。導航設(shè)置結(jié)構(gòu)導航表示網(wǎng)站內(nèi)容的層次結(jié)構(gòu)，通常會采用全局和局部導航的形式。全局導航一般是網(wǎng)站的頂層類別，通過全局類型很容易地訪問到網(wǎng)站中最重要的內(nèi)容。1)結(jié)構(gòu)導航關(guān)聯(lián)導航將一個頁面與包含類似內(nèi)容的其他頁面相關(guān)聯(lián)，特別適合“試探的查找”，并且可以幫助用戶發(fā)現(xiàn)他們“原本不知道”但卻應(yīng)該知道的信息。2)關(guān)聯(lián)導航可用性導航實現(xiàn)了頁面與幫助訪問者使用網(wǎng)站本身的特性之間的關(guān)聯(lián)。例如會員登錄、訪問用戶信息和搜索等功能。3)可用性導航ABOUTME

網(wǎng)頁色彩是樹立網(wǎng)站形象的關(guān)鍵之一，很多網(wǎng)頁都以其完美的色彩搭配起到令人過目不忘的效果，由此可見，顏色的使用在網(wǎng)頁的制作中是非常重要和關(guān)鍵的。色彩分析3任務(wù)實施——提高用戶體驗的要素ABOUTME

網(wǎng)頁尺寸的設(shè)定和書本不同，書本的開本基本是固定的，作者和讀者看到的尺寸都是一樣的。而網(wǎng)頁的尺寸受限于兩個因素：顯示器的尺寸和瀏覽器軟件。用戶在不同的顯示器上或使用不同的瀏覽器都會產(chǎn)生不同的體驗。1.確定網(wǎng)頁的尺寸ABOUTME

用戶在瀏覽網(wǎng)頁的時候，總是希望可以快速找到自己需要的內(nèi)容，否則用戶通常會選擇馬上離開。合理的頁面布局可以使用戶快速發(fā)現(xiàn)網(wǎng)站的核心內(nèi)容和服務(wù)。2.合理的頁面布局從上到下，從左到右，按照內(nèi)容重要性的優(yōu)先級有序放置①重要的內(nèi)容一定要放在頁面顯眼的位置②同級頁面布局要統(tǒng)一③合理的應(yīng)用嵌套④⑤建立清晰的視覺層次感⑥合理地體現(xiàn)視覺關(guān)聯(lián)2.合理的頁面布局4新手試煉——賞析電子商務(wù)頁面Loremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametcommodomagnaerosquisurna.ADDYOURPOINTHERELoremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERELoremipsumdolorsitamet,consectetueradipiscingelit.Maecenasporttitorconguemassa.Fusceposuere,magnasedpulvinarultricies,puruslectusmalesuadalibero,sitametADDYOURPOINTHERE

此頁面首頁采用扁平化設(shè)計風格，采用通欄的布局方式。主色采用Logo的顏色紅紫色。輔色為主色的補色黃綠色。整個頁面對比強烈，主題明確。

通過前面的任務(wù)實施，讀者應(yīng)該學會如何賞析一個電子商務(wù)網(wǎng)頁了。接下來通過一個小案例鞏固一下所學內(nèi)容。

此頁面商品列表頁布局緊湊。使用紅色文字和紅色按鈕將頁面中重點信息突顯出來，便于瀏覽者查看。

此頁面產(chǎn)品詳情頁采用左右結(jié)構(gòu)，明亮的紅色和黃色將整個頁面分割成幾部分，內(nèi)容清晰，對比明確。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：/fanwen/試卷下載：/shiti/