電子商務網頁設計與制作Design

and

making

of

E-commerce

webpages電商網站布局結構分析主講人：傅俊THISIS導入：電子商務網站布局的概念網站版面布局的步驟常見版面布局的形式內容結構123導入-電子商務網站布局的概念網頁美感來自網頁的色彩搭配外，還有一個重要因素就是版面布局設計。布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。什么才是“最適合”并沒有一個標準答案。一般來講主要考慮其實用功能和審美功能。

導入-電子商務網站布局的概念（1）實用功能網頁內容的主次一定要從網頁的版式上體現出來，網頁設計要突出重點內容；網頁的導航一定要清晰，布局合理和邏輯性也是網頁版式設計的要點。

導入-電子商務網站布局的概念（2）審美功能網頁的版式要具有整體性、一致性，總體來講就是統一；要合理地劃分整個頁面，安排頁面各組成元素，即分割；通過合理運用矛盾和沖突，使設計更加富有生機和活力，即對比。

網站版面布局的步驟構思并繪制草圖粗略布局定案（1）繪制草圖在對頁面實施布局之初，就像面對一張白紙，沒有其他結構的東西，可以盡可能的發揮你的想象力，將你想到的效果畫上去（可以用一張白紙和一支鉛筆草繪，也可以用Photoshop等畫圖軟件）。這屬于粗創階段，不必考慮細節功能。網站版面布局的步驟構思并繪制草圖粗略布局定案（1）繪制草圖在對頁面實施布局之初，就像面對一張白紙，沒有其他結構的東西，可以盡可能的發揮你的想象力，將你想到的效果畫上去（可以用一張白紙和一支鉛筆草繪，也可以用Photoshop等畫圖軟件）。這屬于粗創階段，不必考慮細節功能。（2）粗略布局在草圖的基礎上，將確定需要放置的功能模塊安排到頁面上。也就是對各個版面內容進行細化，功能模塊主要包含網站標志、主菜單、新聞、搜索、友情鏈接、版權信息等。網站版面布局的步驟構思并繪制草圖粗略布局定案（1）繪制草圖在對頁面實施布局之初，就像面對一張白紙，沒有其他結構的東西，可以盡可能的發揮你的想象力，將你想到的效果畫上去（可以用一張白紙和一支鉛筆草繪，也可以用Photoshop等畫圖軟件）。這屬于粗創階段，不必考慮細節功能。（2）粗略布局在草圖的基礎上，將確定需要放置的功能模塊安排到頁面上。也就是對各個版面內容進行細化，功能模塊主要包含網站標志、主菜單、新聞、搜索、友情鏈接、版權信息等。（3）定案就是根據細化的結果去組織完成明確的效果圖，這里包括色彩效果、欄目內容效果的具體化。網站版面布局的步驟草圖繪制多套方案，包括大致配色，進行討論選擇。通過和客戶溝通，確定灰白的配色以及對主體區域分布意見后，對草圖進步細化布局，做出樣稿，再和客戶討論后實現定案。在樣稿時，也會考慮加入一些圖例、色調和圖文樣式來更好的明確定案。網站版面布局的步驟“同字型”也稱為“回字型”也有稱為“國字型”，是國內企業類網站主頁最常用的類型，即分為頂端、主體和底部區域三個部分。頂端區域常為網站Logo、Banner和導航條。主體部分是網站的主要內容，一般分為三列，左右分列一些欄目，中間是主要欄目，有時也分為均分的四列?！巴中汀弊钪饕奶攸c就是沿中軸線左右大致對稱。底部區域是網站的一些版權聲明、聯系方式等。這種結構是一般企業電子商務網站主頁的首選。常見版面布局的形式常見版面布局的形式現階段，這類布局的趨勢則是大幅度增加了Banner的幅度來增加美感、更好地宣傳企業文化、企業產品等，同時大大減少了傳統“同字型”中主體部分的內容，主體部分的內容也更為靈活，不一定局限在三列，整個首頁的布局顯得更為簡潔，但是總體上還是保持沿中軸線對稱的格局。常見版面布局的形式“拐角型”，也有被稱為“T字型結構”，國內企業網站常采用“左拐角型”，這種結構與“同字型”很接近，只是形式上的區別。主要區別就是在主體部分區域，“拐角型”分為兩列，“左拐角型”左側列表為一窄列，右列則很寬；“右拐角型”反之，頂端和底部與“同字型”類似。因此，這種布局經常和“同字型”結合運用，很多企業網站主頁采用“同字型”，二級欄目頁面采用“左拐角型”，這樣能夠很好地體現網站整體的風格。常見版面布局的形式“標題正文型”即最上面是標題或類似的內容，然后是分割線，接著就是正文，很像平時的文章。這種類型多用于網站的新聞頁面中，還有一些欄目頁中的具體內容頁面也常采用這類的布局。常見版面布局的形式

POP布局，就是指頁面布局像一張宣傳海報，以精美的大幅圖片作為頁面的中心，網站具體欄目內容的布局則沿用“同字型”或者“拐角型”。有些則更靈活自由，只保留了導航欄。這類布局網站效果明顯，但由于大量圖片、動畫效果的運用，加載速度則受到一定影響。常見版面布局的形式電商平臺類最主要的特色是在主頁會有一定篇幅顯示分類列表。分類列表的作用如同傳統商場中的導購牌，將購物商場中的商品分門別類，這樣可以方便訪問者找到需要的商品。除了分類列表外，就是在主頁最為明顯的位置放置搜索欄。整個首頁最為主要的部分，是分欄目的展現各種營銷活動和商品的推薦，從而促發消費者的購買需求?，F階段由于主頁商品展示的需求，電商平臺