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