不學(xué)就落伍咯！2016年電商設(shè)計(jì)的9個(gè)熱門(mén)趨勢(shì)（附案例）

@十萬(wàn)個(gè)為什麼?：Material Design、向上的響應(yīng)式、動(dòng)態(tài)搜索...... 如果你正要搭建（或者翻新）在線(xiàn)商城，你就得了解電商領(lǐng)域當(dāng)下的流行趨勢(shì)，今天我們來(lái)深入了解下即將主導(dǎo)2016年的熱門(mén)電商設(shè)計(jì)趨勢(shì)。

在當(dāng)今這個(gè)瞬息萬(wàn)變的電商世界，對(duì)于任何一位設(shè)計(jì)師，預(yù)測(cè)未來(lái)都極具挑戰(zhàn)。今天新潮，明天就會(huì)落伍！作為設(shè)計(jì)師，想要給顧客營(yíng)造順暢的購(gòu)物體驗(yàn)，同時(shí)使自己領(lǐng)先于競(jìng)爭(zhēng)對(duì)手，你得持續(xù)不斷評(píng)估當(dāng)下趨勢(shì)的價(jià)值。

明年將會(huì)流行的色彩：《2016流行這2種色彩！附優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)案例》

1）Material Design

Material Design繼續(xù)盛行，如今開(kāi)始大范圍被電商企業(yè)采用。自2014年發(fā)布起，鮮明的、專(zhuān)注內(nèi)容的設(shè)計(jì)風(fēng)格便開(kāi)始流行，而且還會(huì)在未來(lái)繼續(xù)引領(lǐng)風(fēng)潮。正是Material Design統(tǒng)一、切實(shí)、歡快的體驗(yàn)，跨越各種設(shè)備與平臺(tái)，使得電商網(wǎng)站如此迷人。

（注：以下網(wǎng)站不搭梯子訪(fǎng)問(wèn)速度會(huì)變慢）

Pa-design

盡管將Material Design應(yīng)用于在線(xiàn)商城是個(gè)讓人望而卻步的任務(wù)，還是有些電商敢于冒險(xiǎn)嘗試，成功地運(yùn)用了這種設(shè)計(jì)風(fēng)格，PA Design和Bewakoof就是兩個(gè)例子。

Bewakoof

2）隱藏式菜單

隱藏式菜單，最常見(jiàn)的一種變化是漢堡菜單，已經(jīng)極為盛行了，因?yàn)榭梢郧謇黼娚叹W(wǎng)站雜亂的版面。最初它們是為移動(dòng)端設(shè)計(jì)的，但現(xiàn)在也越來(lái)越多用在桌面端的設(shè)計(jì)中。

House of Fraser

2015年，許多在線(xiàn)銷(xiāo)售商在大大小小的屏幕上都使用了隱藏式導(dǎo)航菜單，節(jié)省了大量屏幕空間，這個(gè)趨勢(shì)在未來(lái)還會(huì)持續(xù)增長(zhǎng)。如今許多知名在線(xiàn)商城都使用了隱藏式菜單，例如House of Fraser和EtQ。

EtQ

3）向上的響應(yīng)式

響應(yīng)式設(shè)計(jì)是2016年大多數(shù)網(wǎng)站的基本要素，但除了優(yōu)化移動(dòng)端和平板，為大屏幕設(shè)備設(shè)計(jì)也至關(guān)重要。因?yàn)樵诟咔逶O(shè)備（例如電視）上瀏覽和購(gòu)物是大勢(shì)所趨。

Firebox

超過(guò)32%的互聯(lián)網(wǎng)用戶(hù)擁有1920像素甚至更高的設(shè)備，這說(shuō)明兼顧那些大屏幕有多么重要。整個(gè)2016年，會(huì)有越來(lái)越多電商網(wǎng)站致力于兼容大屏幕設(shè)備，比如Firebox、Smythson和Burberry。

Smythson

Burberry

4）豐富的動(dòng)畫(huà)

動(dòng)畫(huà)是吸引顧客、與他們溝通的良好方式，許多電商網(wǎng)站開(kāi)始將它注入設(shè)計(jì)中，讓在線(xiàn)購(gòu)物體驗(yàn)更加歡快好玩。如果使用位置和時(shí)機(jī)恰當(dāng)，動(dòng)畫(huà)會(huì)讓你的顧客感到你在真正關(guān)心他們的體驗(yàn)。

Nixon

在2016年，你會(huì)看到更多電商網(wǎng)站有創(chuàng)意地運(yùn)用動(dòng)畫(huà)——例如按鈕旋轉(zhuǎn)、圖標(biāo)轉(zhuǎn)動(dòng)和加載進(jìn)度條——為顧客留下深刻印象。想找點(diǎn)靈感嗎？看看Nixon、Fleet Feet Sports和Fallen Hero，它們?cè)谶\(yùn)用動(dòng)畫(huà)方面都做得非常棒。

Fleet Feet Sports

Fallen Hero

5）故事講述

在如今這個(gè)競(jìng)爭(zhēng)激烈的電商領(lǐng)域，只有故事講述能讓你的品牌鶴立雞群。用一種獨(dú)特且引人入勝的方式呈現(xiàn)內(nèi)容，好的故事不僅在品牌與顧客之間建立情感連接，也能增加忠誠(chéng)度與銷(xiāo)量。簡(jiǎn)單說(shuō)，故事講述能讓品牌起死回生。

Bonobos

雖然電商網(wǎng)站講述故事并不容易，但許多快速成長(zhǎng)的電商都在實(shí)踐這種策略，作為他們的優(yōu)勢(shì)。有兩個(gè)電商網(wǎng)站充分利用了故事講述，Bonobos和Greats。

Greats

6）卡片式設(shè)計(jì)

近幾年，卡片式（類(lèi)卡片式）布局在設(shè)計(jì)師當(dāng)中累積了極高的人氣，毫無(wú)疑問(wèn)這個(gè)趨勢(shì)將延續(xù)至2016年甚至以后。首先，因?yàn)榭ㄆ荕aterial Design中最主要的元素之一；其次，因?yàn)樗鼈冊(cè)陧憫?yīng)式設(shè)計(jì)中表現(xiàn)非常好。

Rejuvenation

卡片布局最棒的一點(diǎn)就是對(duì)用戶(hù)友好。讓你可以排列組織產(chǎn)品，不僅讓訪(fǎng)客一眼看到所有相關(guān)信息，同時(shí)如果某件產(chǎn)品不合適，也能產(chǎn)生有效的增加銷(xiāo)售，讓顧客瀏覽更輕松。Rejuvenation和Lord & Taylor都將卡片運(yùn)用得登峰造極了。

Lord & Taylor

7）大號(hào)的活動(dòng)文字

內(nèi)容為王是當(dāng)然的，但如何呈現(xiàn)內(nèi)容反映了它的力量有多大！同往年一樣，2016年也會(huì)以大號(hào)的響應(yīng)式文字著稱(chēng)，它們適用于所有類(lèi)型的設(shè)備，從小屏幕手機(jī)，到大屏幕桌面顯示器。

AYR

要建立強(qiáng)有力的品牌視覺(jué)識(shí)別，文字至關(guān)重要，吸引潛在顧客購(gòu)買(mǎi)你商城中的產(chǎn)品，大量的商城都熱衷于運(yùn)用這種技巧。AYR、Nasty Gal和Brdr. Krüger都很好地運(yùn)用了大號(hào)活動(dòng)文字。

Nasty Gal

Brdr. Krüger

8）大幅背景

考慮過(guò)大號(hào)文字，我們?cè)倏紤]一下大幅背景。它一直是最吸引人的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)之一，所以并不意外，迷人的大幅產(chǎn)品照片在電商網(wǎng)站中得到廣泛運(yùn)用，讓產(chǎn)品更能激發(fā)購(gòu)買(mǎi)欲。全屏背景圖片或視頻，為在線(xiàn)商城賦予了非常清爽、專(zhuān)業(yè)、時(shí)髦的外觀，迫使?jié)撛陬櫩瓦M(jìn)入商城后盡快購(gòu)買(mǎi)。

Eyeheartworld

雖然大幅背景在主頁(yè)上效果很好，它也能用在產(chǎn)品頁(yè)上，讓顧客沉浸其中。在產(chǎn)品詳情頁(yè)面使用沉浸的交互式圖片或視頻，讓訪(fǎng)客在點(diǎn)擊購(gòu)買(mǎi)按鈕前，就感覺(jué)像擁有了它一樣。

Bugaboo

9）動(dòng)態(tài)搜索

最后，我注意到了一項(xiàng)新的設(shè)計(jì)趨勢(shì)異軍突起，動(dòng)態(tài)搜索。2016年，許多電商網(wǎng)站會(huì)使用基于JavaScript和Ajax的搜索，動(dòng)態(tài)展示產(chǎn)品。這項(xiàng)技術(shù)非常成功，尤其是當(dāng)你有龐雜的產(chǎn)品系列。

JadoPado

最具吸引力的電商網(wǎng)站案例，JadoPado，就運(yùn)用了這項(xiàng)令人稱(chēng)奇的技術(shù)。去他們網(wǎng)站看看，搜點(diǎn)什么，你會(huì)看到頁(yè)面展示的產(chǎn)品動(dòng)態(tài)變化。還有另一個(gè)很棒的動(dòng)態(tài)搜索案例，Stuart Weitzman。

Stuart Weitzman

【技多不壓身的設(shè)計(jì)師工資更高！】

1. 平面設(shè)計(jì)：《超贊！設(shè)計(jì)師完全自學(xué)指南》
2. 交互設(shè)計(jì)：《交互設(shè)計(jì)師修煉指南！教你從零開(kāi)始成為優(yōu)秀交互設(shè)計(jì)師》
3. UI設(shè)計(jì)：《超實(shí)用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計(jì)？》
4. 前端開(kāi)發(fā)：《天貓高手來(lái)教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開(kāi)發(fā)？》
5. 摳圖技巧：《從菜鳥(niǎo)到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個(gè)實(shí)用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識(shí)學(xué)起來(lái)！為設(shè)計(jì)師量身打造的DPI指南》
8. 交互設(shè)計(jì)自學(xué)路徑圖：《零基礎(chǔ)入門(mén)！給非科班生的自學(xué)路徑圖之交互設(shè)計(jì)篇》

原文地址：webdesignerdepot
譯文地址：colachan
譯者：@十萬(wàn)個(gè)為什麼

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線(xiàn)端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量104萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com