在電商和線上購物快速發(fā)展的今天，擁有一個商城網(wǎng)站很是必要，關(guān)于試水獨立商城的好處大家可以瀏覽《有了淘寶京東，為什么還要自建商城網(wǎng)站?》查看。但是，搭建商城網(wǎng)站并不簡單，慶幸的是目前市面上涌現(xiàn)了不少建站平臺，起飛頁自助建站平臺就是其中一個，各位商家可以借助起飛頁輕松搭建出一個好看、實用的商城網(wǎng)站。不過小飛最近卻聽見不少站長抱怨說在安排網(wǎng)站布局、運用產(chǎn)品圖片&視頻背景等方面沒什么想法，這不，今天小飛就特地整理了2017年10個最受歡迎的商城設(shè)計范例，希望能給大家?guī)硪恍﹩l(fā)和靈感。
1. Simply Chocolate
Simply Chocolate是一家位于丹麥首都哥本哈根的巧克力公司。公司網(wǎng)站設(shè)計糅合了視差滾動和微妙的懸浮動效，整個網(wǎng)站十分生動、有趣。當你打開網(wǎng)頁首屏時，不同的巧克力產(chǎn)品會向上滾動呈現(xiàn)，首屏也會變幻出相應(yīng)的顏色。而當你向下滾動鼠標瀏覽主頁時，屏幕中央會出現(xiàn)一塊巧克力，巧克力下方的杏仁、薄荷葉等元素是向上浮動的。將鼠標移到巧克力塊上，這會出現(xiàn)一個裂口，就像撕開袋子的包裝，點擊即可進入巧克力的細節(jié)介紹頁面，比如成分列表、產(chǎn)品外觀等。這種不同尋常的動效設(shè)計可以帶給用戶全新的瀏覽體驗，有人擔心太多的動效設(shè)置會讓用戶覺得眼花繚亂，其實并不然，因為網(wǎng)站背景上一次只重點呈現(xiàn)一個產(chǎn)品，每滾動一下只能看見一種巧克力的介紹。
啟示：獨特的視差效果和懸浮動效可以很好地突出產(chǎn)品。
2. Kvell
Kvell是一家經(jīng)營現(xiàn)代家居用品的公司，它的商城網(wǎng)站真可謂十分美觀。網(wǎng)站主頁清晰地呈現(xiàn)了網(wǎng)站的各個區(qū)塊，比如導航按鈕、購物車、CTA按鈕，用戶可以通過點擊"discover"進行產(chǎn)品瀏覽，屏幕上水平滾動條是一個很好的輔助，呈現(xiàn)了產(chǎn)品的幾大類。當然，這些區(qū)塊也可以進一步細化，比如用戶可以點擊漢堡按鈕打開垂直導航菜單，也可以點擊水平滾動條的按鈕進一步了解產(chǎn)品子類別(子類別頁面還設(shè)有豎直滾動條作輔助，遙相呼應(yīng))。盡管網(wǎng)站各個區(qū)塊界限分明、彼此獨立，但它們的整體風格是一致的：明亮的配色、超大的字體以及簡潔的產(chǎn)品圖片。
啟示：新穎的導航設(shè)置更能激起用戶探索網(wǎng)站的興趣。
3. Drybar
Drybar號稱"美發(fā)界星巴克"，不剪發(fā)、不燙染，僅靠提供專業(yè)吹頭發(fā)服務(wù)在競爭激烈的美發(fā)市場中打出一片屬于自己的天地，其優(yōu)秀的商城網(wǎng)站在這一過程中也助力不少。Drybar的商城使用了明亮的網(wǎng)站配色、微妙的懸浮動畫，充滿個性化特征，網(wǎng)站風格獨特鮮明。在網(wǎng)站主頁上，主導航菜單是由各個圖標鏈接組成的，將鼠標放上去，各個圖標會出現(xiàn)一些微妙的動畫，有的還會出現(xiàn)下拉菜單，這種設(shè)計很有意思。通過點擊它們，用戶還可以快速進入相應(yīng)的頁面。而其中的"關(guān)于我們"頁面使用了標志的黃色吹風機圖標，當用戶將鼠標停留在這個圖標上，它會上下伸縮?？偟膩碚f，這種設(shè)計讓整個網(wǎng)站趣味盎然，但又不顯得繁瑣，讓用戶有恰到好處的感覺。
啟示：明亮配色和懸浮動效能夠給用戶提供優(yōu)質(zhì)的反饋，能讓購物體驗更加愉悅。
4. Nordstrom
Nordstrom提供多種產(chǎn)品銷售，從時尚服裝、配飾、鞋包、家具再到廚房用品。對于這種產(chǎn)品種類十分豐富的商城網(wǎng)站來說，最大的挑戰(zhàn)就是如何讓用戶快速找到自己想要的物品。Nordstrom就在網(wǎng)站中使用了超大導航菜單，這有節(jié)日禮品、設(shè)計師作品集、男士用品、女士用品、兒童用品、清倉區(qū)等多個欄目，欄目中還有進一步的細分。除此以外，網(wǎng)站的"搜索"按鈕也很顯眼，用戶可以直接輸入相關(guān)關(guān)鍵詞進行查找。這些設(shè)置都有助于提升用戶的瀏覽體驗。
啟示：產(chǎn)品豐富的商城網(wǎng)站最好在設(shè)置產(chǎn)品過濾選項，以提升用戶體驗。
5. Northernism
Northernism主營手工制品，比較注重產(chǎn)品的簡潔和設(shè)計美感。商城網(wǎng)站的設(shè)計也是以此為出發(fā)點的，它摒棄了傳統(tǒng)的商城設(shè)計模式，而是將產(chǎn)品圖片和文本放在固定的網(wǎng)格，從而達到讓人眼前一亮的感覺。這種網(wǎng)格式的頁面中都只包含了一些簡單的圖片，網(wǎng)站留白十分豐富，這也讓它看上去更加高大上。
啟示：合理使用圖片能夠有效提升網(wǎng)站的整體格調(diào)。
6. The Practical Man
The Practical Man網(wǎng)站使用了表單式的布局，強烈的配色、硬朗的線條、無襯線字體都與網(wǎng)站主營業(yè)務(wù)(男裝、男士用品)的理念很是契合，易給訪客留下鮮明、深刻的印象。除此以外，我們常見的商城網(wǎng)站通常都只在網(wǎng)站首屏使用一些非同尋常的設(shè)計，其他產(chǎn)品頁面采取常規(guī)的設(shè)計。而The Practical Man在這一點上的處理很是不同，它在整個網(wǎng)站中使用了一致的設(shè)計布局，即使是單個產(chǎn)品頁面的信息也被放置在一個個定義好的網(wǎng)格(比如價格、顏色、尺寸、概述等等)，設(shè)計手法很是新穎獨特。
啟示：非常規(guī)的商城設(shè)計易樹立獨特鮮明的網(wǎng)站風格。
7. Press
如果你很喜歡逛書店但卻沒有時間出門，不妨來Press網(wǎng)站看看吧，在這你可以感受到實體書店的韻味。Press網(wǎng)站充分利用好看的圖片、漂亮的排版來營造真實書店中寧靜的氛圍。首屏設(shè)有幻燈片效果，背景圖片會相繼出現(xiàn)。當你下拉鼠標時，就可以看見不同類型的書籍封面了，封面圖片的背景都是純色的(黑色或白色，這是為了減少對用戶不必要的干擾)。將鼠標移動到相應(yīng)書籍封面上，這還會出現(xiàn)相應(yīng)的細節(jié)描述。
啟示：少即是多，簡潔的布局也可以傳遞豐富的信息。
8. A Book Apart
A Book Apart也是一個銷售書籍等相關(guān)商品的商城網(wǎng)站。這個網(wǎng)站也充分利用了自身的優(yōu)勢，不使用漂亮、美觀的背景圖片，而是借助多彩的書本封面來輔助產(chǎn)品銷售。這在展示一個系列的書籍時尤為適用。
啟示：商城設(shè)計可充分結(jié)合自身產(chǎn)品的特點。
9. Ada Blackjack
Ada Blackjack是一個經(jīng)營手工包和皮革制品的品牌。盡管這個網(wǎng)站在整體設(shè)計上都偏于傳統(tǒng)、并不新穎，但它卻很善于使用大圖。產(chǎn)品圖片大多十分簡單、干凈，能讓產(chǎn)品自身散發(fā)出魅力，也能讓用戶聚焦于產(chǎn)品的品質(zhì)。除此以外，網(wǎng)站的Logo標志和主導航菜單是固定的，當用戶下拉滾動或低級進入單個產(chǎn)品頁面時，它們都是保持不變的，這能方便用戶進行點擊瀏覽。
啟示：簡潔的圖片可以用來彰顯產(chǎn)品的高品質(zhì)。
10. Bellroy
Bellroy是一家銷售錢包的商城網(wǎng)站。它的主頁布局相對比較簡單，主導航菜單、購物車、CTA按鈕等。不過當你深入探究時，就會發(fā)現(xiàn)這個網(wǎng)站其實有很多不同設(shè)計的產(chǎn)品頁面，重點突出不同的產(chǎn)品。另外，Bellroy還在網(wǎng)站中插入了有趣的演示視頻，以Slim Your Wallet教程為例(見下圖)，它對比了普通錢包和Bellroy錢包在插入多張卡片和零錢時的狀態(tài)，整個過程是動態(tài)的，以突出Bellroy錢包的容量和便捷性，這些視頻、動畫能有效促進用戶購買行為的發(fā)生。
啟示：有趣的演示視頻和互動性強的教程能夠極大地提升用戶的購買欲望。
快來起飛頁自助建站平臺（http://www.qifeiye.com/?t_wd=a5）搭建一個屬于自己的商城網(wǎng)站吧!
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
