頂端與底端 
頂端（Header）是網(wǎng)絡(luò)商店至關(guān)重要的部分，包含著細(xì)小卻核心的元素：商標(biāo)、賬號(hào)登錄、購(gòu)物車、搜索欄、菜單等等。它橫跨整個(gè)網(wǎng)頁并出現(xiàn)在每一個(gè)頁面之中，提醒用戶他們的所在位置以及所呈現(xiàn)的品牌特質(zhì)。 
底端（Footer）是收納一些必要的額外導(dǎo)航信息的理想位置，分擔(dān)頂端的繁重任務(wù)。公司信息、客戶支持和快速導(dǎo)航通常都位于這里。 
1. 商標(biāo) 
作為zui核心的元素，商標(biāo)給用戶一個(gè)總的品牌印象。只要點(diǎn)擊其鏈接便能隨時(shí)返回到主頁。 
2. 客戶服務(wù) 
大多數(shù)電商網(wǎng)站會(huì)把它們的運(yùn)費(fèi)優(yōu)惠或者退貨服務(wù)擺在頂端中的顯眼位置，第一時(shí)間排除購(gòu)物上的疑慮。 
3. 搜索欄 
有不少瀏覽者會(huì)利用搜索欄來快速找到他們所需要的東西。對(duì)于這些目標(biāo)明確的消費(fèi)者來說，菜單的作用并不大，因此搜索欄應(yīng)該放置在頂端并突出顯示。 
4. 賬戶登錄或注冊(cè)點(diǎn)評(píng)等。 
電商網(wǎng)站通常都不會(huì)省略注冊(cè)和登錄功能，一方面為了提升購(gòu)物體驗(yàn)和客戶信任度，另一方面能更好地把控客戶信息。 
5. 購(gòu)物車 
不可否認(rèn)，購(gòu)物車圖標(biāo)是電商網(wǎng)站zui明顯的特征。通常的做法是將這個(gè)圖標(biāo)放置于頂端的右上角，顯示購(gòu)物車?yán)锏纳唐窋?shù)量，讓客戶可以由此轉(zhuǎn)到結(jié)賬區(qū)。 
6. 導(dǎo)航菜單 
這個(gè)面板展示產(chǎn)品或服務(wù)的清晰分類，用戶能夠馬上清楚這個(gè)網(wǎng)站可以提供什么，并輕松找到自己需要的東西。導(dǎo)航菜單的有限空間意味著只有zui重要的目錄會(huì)在此顯示，不過常常會(huì)包含一個(gè)隱藏的下拉菜單，在這里會(huì)羅列更多的目錄甚至次目錄，有時(shí)候還會(huì)加進(jìn)宣傳或匹配用的大圖。 
7. 站點(diǎn)地圖 
當(dāng)用戶到了底端卻又想返回查看其他目錄的時(shí)候，站點(diǎn)地圖提供了同樣的導(dǎo)航功能。 
8. 公司信息 
包括企業(yè)信息、新聞、子公司鏈接、聯(lián)系方式、媒體區(qū)、招聘信息、客戶點(diǎn)評(píng)等。 
9. 客戶支持 
包括常見問題解答、訂單狀況、運(yùn)費(fèi)及退貨信息、安全購(gòu)物保障、隱私政策等。 
10. 會(huì)員通訊或社交媒體 
包括會(huì)員通訊訂閱、博客、社交媒體鏈接等。 
主 頁 
作為網(wǎng)店的門面，主頁越來越傾向于簡(jiǎn)潔風(fēng)格，給人舒適的第一印象的同時(shí)讓人忍不住去發(fā)掘更多得內(nèi)容。主頁內(nèi)容的平衡把控是留住客戶的關(guān)鍵。 
1. 主圖 
一般主圖的尺寸較大，攝影精良，同時(shí)高像素是必備條件，這樣在不同大小的屏幕上都能有效地呈現(xiàn)。主圖通常都會(huì)以旋轉(zhuǎn)木馬的模式展示，不過這個(gè)方法需要更多的考量，例如，避免成為廣告式宣傳，非唯一的購(gòu)買通道，鼠標(biāo)懸停下停止轉(zhuǎn)動(dòng)。 
2. 文字 
應(yīng)當(dāng)為該專題準(zhǔn)備精簡(jiǎn)的描述，與大圖一起發(fā)揮作用，吸引點(diǎn)擊。 
3. CTA 
CTA（Call To Action）即行為召喚，意指促使用戶點(diǎn)擊的文字或圖像，換句話說就是讓用戶做出“購(gòu)買”、“下載”或“了解更多”等行為。CTA 按鈕為優(yōu)惠活動(dòng)、zui新產(chǎn)品或者zui受歡迎產(chǎn)品等提供直接的鏈接通道。 
4. 主推目錄或產(chǎn)品 
在主頁中，與其堆滿所有的產(chǎn)品，不妨考慮放置篩選出的產(chǎn)品或主題，提供快速導(dǎo)航的同時(shí)使用戶體驗(yàn)更為明確。 
目錄頁 
主目錄 
當(dāng)用戶來到這個(gè)頁面，便是這趟購(gòu)物旅程的開始，同時(shí)也是保持購(gòu)物勢(shì)頭的關(guān)鍵。主目錄頁應(yīng)當(dāng)?shù)玫脚c主頁同樣的關(guān)注，設(shè)計(jì)師應(yīng)當(dāng)重視用戶體驗(yàn)方面的實(shí)用性原則，無論網(wǎng)站的搜索引擎優(yōu)化（SEO）有多優(yōu)越。 
1. 次目錄菜單 
這部分內(nèi)容約定俗成的位置其實(shí)是有根據(jù)的——F 型閱讀模式。次目錄內(nèi)容其實(shí)還可以作適當(dāng)延伸，提供其他選擇項(xiàng)，例如品牌名稱和受歡迎程度。 
2. 橫幅 
大圖是強(qiáng)烈的催化劑，往往比文字更具效果。橫幅的作用其實(shí)首先是營(yíng)造一種氛圍，而不僅僅是展示產(chǎn)品。在這里，設(shè)計(jì)師注意不要出現(xiàn)“假底”，讓用戶誤以為這張圖片是頁面的盡頭。 
3. 目錄名稱 
目錄的文案應(yīng)當(dāng)簡(jiǎn)明而準(zhǔn)確，對(duì)搜索引擎流量起到重要作用。 
4. 次目錄展示 
在橫幅下方放置方塊式展示的次目錄，為下一步提供簡(jiǎn)單清晰的入口。方塊式設(shè)計(jì)應(yīng)用于移動(dòng)端上是非常理想的點(diǎn)擊目標(biāo)。有的網(wǎng)站會(huì)在方塊之中插入促銷通知或者熱銷目錄。 
5. 目錄或主推產(chǎn)品信息 
為了進(jìn)一步完善主目錄頁，可以增加精心準(zhǔn)備的目錄介紹，或者是熱銷產(chǎn)品、zui佳產(chǎn)品、新產(chǎn)品等，甚至是個(gè)人化的推薦內(nèi)容。 
次目錄 
這個(gè)頁面通常提供不同的產(chǎn)品篩選項(xiàng)以及展示模式選擇，給予用戶個(gè)人化的購(gòu)物體驗(yàn)。一個(gè)優(yōu)化的次目錄頁用戶體驗(yàn)必能順利走向轉(zhuǎn)換率的下一級(jí)。 
1. 篩選項(xiàng) 
位于左邊側(cè)欄的高級(jí)篩選項(xiàng)應(yīng)與該網(wǎng)站產(chǎn)品相關(guān)，例如尺寸、顏色、價(jià)格、評(píng)價(jià)等級(jí)和品牌名稱。現(xiàn)在有的網(wǎng)站會(huì)選擇使用橫向篩選欄。 
2. 橫幅 
一張精美的次目錄圖片是實(shí)用性原則的一部分，而有的電商網(wǎng)站會(huì)選擇只用文字來作為該頁面的提示。 
3. 次目錄名稱 
言簡(jiǎn)意賅的文案在這里是十分必要的。 
4. 展示模式與排列順序 
這一個(gè)小小的橫向欄能夠讓用戶選擇產(chǎn)品的展示方式（網(wǎng)格或列表），還可以通過一個(gè)下拉菜單來選擇展示的順序，例如價(jià)格的從低到高、從新到舊、暢銷程度。 
5. 產(chǎn)品展示 
這里需要顯眼的CTA 來確保zui佳的用戶體驗(yàn)。產(chǎn)品展示一般包括產(chǎn)品圖片、產(chǎn)品名稱、價(jià)格、促銷或新款標(biāo)簽、運(yùn)費(fèi)優(yōu)惠，甚至客戶評(píng)價(jià)等級(jí)。同時(shí)，貼心的小細(xì)節(jié)是值得鼓勵(lì)的，比如圖片能夠根據(jù)顏色選擇而變動(dòng)，或者增加快速瀏覽按鈕。