9-ecommerce-design-trends-1

@十萬個為什麼?:Material Design、向上的響應式、動態搜索…… 如果你正要搭建(或者翻新)在線商城,你就得了解電商領域當下的流行趨勢,今天我們來深入了解下即將主導2016年的熱門電商設計趨勢。

在當今這個瞬息萬變的電商世界,對于任何一位設計師,預測未來都極具挑戰。今天新潮,明天就會落伍!作為設計師,想要給顧客營造順暢的購物體驗,同時使自己領先于競爭對手,你得持續不斷評估當下趨勢的價值。

明年將會流行的色彩:《2016流行這2種色彩!附優秀網頁設計案例》

1)Material Design

Material Design繼續盛行,如今開始大范圍被電商企業采用。自2014年發布起,鮮明的、專注內容的設計風格便開始流行,而且還會在未來繼續引領風潮。正是Material Design統一、切實、歡快的體驗,跨越各種設備與平臺,使得電商網站如此迷人。

(注:以下網站不搭梯子訪問速度會變慢)

Pa-design

1lh20160125

盡管將Material Design應用于在線商城是個讓人望而卻步的任務,還是有些電商敢于冒險嘗試,成功地運用了這種設計風格,PA Design和Bewakoof就是兩個例子。

Bewakoof

2lh20160125

2)隱藏式菜單

隱藏式菜單,最常見的一種變化是漢堡菜單,已經極為盛行了,因為可以清理電商網站雜亂的版面。最初它們是為移動端設計的,但現在也越來越多用在桌面端的設計中。

House of Fraser

3lh20160125

2015年,許多在線銷售商在大大小小的屏幕上都使用了隱藏式導航菜單,節省了大量屏幕空間,這個趨勢在未來還會持續增長。如今許多知名在線商城都使用了隱藏式菜單,例如House of Fraser和EtQ。

EtQ

4lh20160125

3)向上的響應式

響應式設計是2016年大多數網站的基本要素,但除了優化移動端和平板,為大屏幕設備設計也至關重要。因為在高清設備(例如電視)上瀏覽和購物是大勢所趨。

Firebox

5lh20160125

超過32%的互聯網用戶擁有1920像素甚至更高的設備,這說明兼顧那些大屏幕有多么重要。整個2016年,會有越來越多電商網站致力于兼容大屏幕設備,比如Firebox、Smythson和Burberry。

Smythson

6lh20160125

Burberry

7lh20160125

4)豐富的動畫

動畫是吸引顧客、與他們溝通的良好方式,許多電商網站開始將它注入設計中,讓在線購物體驗更加歡快好玩。如果使用位置和時機恰當,動畫會讓你的顧客感到你在真正關心他們的體驗。

Nixon

8lh20160125

在2016年,你會看到更多電商網站有創意地運用動畫——例如按鈕旋轉、圖標轉動和加載進度條——為顧客留下深刻印象。想找點靈感嗎?看看Nixon、Fleet Feet Sports和Fallen Hero,它們在運用動畫方面都做得非常棒。

Fleet Feet Sports

9lh20160125

Fallen Hero

10lh20160125

5)故事講述

在如今這個競爭激烈的電商領域,只有故事講述能讓你的品牌鶴立雞群。用一種獨特且引人入勝的方式呈現內容,好的故事不僅在品牌與顧客之間建立情感連接,也能增加忠誠度與銷量。簡單說,故事講述能讓品牌起死回生。

Bonobos

11lh20160125

雖然電商網站講述故事并不容易,但許多快速成長的電商都在實踐這種策略,作為他們的優勢。有兩個電商網站充分利用了故事講述,Bonobos和Greats。

Greats

12lh20160125

6)卡片式設計

近幾年,卡片式(類卡片式)布局在設計師當中累積了極高的人氣,毫無疑問這個趨勢將延續至2016年甚至以后。首先,因為卡片是Material Design中最主要的元素之一;其次,因為它們在響應式設計中表現非常好。

Rejuvenation

13lh20160125

卡片布局最棒的一點就是對用戶友好。讓你可以排列組織產品,不僅讓訪客一眼看到所有相關信息,同時如果某件產品不合適,也能產生有效的增加銷售,讓顧客瀏覽更輕松。Rejuvenation和Lord & Taylor都將卡片運用得登峰造極了。

Lord & Taylor

14lh20160125

7)大號的活動文字

內容為王是當然的,但如何呈現內容反映了它的力量有多大!同往年一樣,2016年也會以大號的響應式文字著稱,它們適用于所有類型的設備,從小屏幕手機,到大屏幕桌面顯示器。

AYR

15lh20160125

要建立強有力的品牌視覺識別,文字至關重要,吸引潛在顧客購買你商城中的產品,大量的商城都熱衷于運用這種技巧。AYR、Nasty Gal和Brdr. Krüger都很好地運用了大號活動文字。

Nasty Gal

16lh20160125

Brdr. Krüger

17lh20160125

8)大幅背景

考慮過大號文字,我們再考慮一下大幅背景。它一直是最吸引人的網頁設計趨勢之一,所以并不意外,迷人的大幅產品照片在電商網站中得到廣泛運用,讓產品更能激發購買欲。全屏背景圖片或視頻,為在線商城賦予了非常清爽、專業、時髦的外觀,迫使潛在顧客進入商城后盡快購買。

Eyeheartworld

18lh20160125

雖然大幅背景在主頁上效果很好,它也能用在產品頁上,讓顧客沉浸其中。在產品詳情頁面使用沉浸的交互式圖片或視頻,讓訪客在點擊購買按鈕前,就感覺像擁有了它一樣。

Bugaboo

19lh20160125

9)動態搜索

最后,我注意到了一項新的設計趨勢異軍突起,動態搜索。2016年,許多電商網站會使用基于JavaScript和Ajax的搜索,動態展示產品。這項技術非常成功,尤其是當你有龐雜的產品系列。

JadoPado

20lh20160125

最具吸引力的電商網站案例,JadoPado,就運用了這項令人稱奇的技術。去他們網站看看,搜點什么,你會看到頁面展示的產品動態變化。還有另一個很棒的動態搜索案例,Stuart Weitzman。

Stuart Weitzman

21lh20160125

【技多不壓身的設計師工資更高!】

  1. 平面設計:《超贊!設計師完全自學指南》
  2. 交互設計:《交互設計師修煉指南!教你從零開始成為優秀交互設計師》
  3. UI設計:《超實用新手指南!零基礎如何自學UI設計?》
  4. 前端開發:《天貓高手來教你!零基礎如何系統地學習前端開發?》
  5. 摳圖技巧:《從菜鳥到高手!PHOTOSHOP摳圖全方位攻略》
  6. 配色方案:《色彩搭配速成!3個實用方法幫你全面搞定配色》
  7. DPI指南:《基礎知識學起來!為設計師量身打造的DPI指南》
  8. 交互設計自學路徑圖:《零基礎入門!給非科班生的自學路徑圖之交互設計篇》

原文地址:webdesignerdepot
譯文地址:colachan
譯者:@十萬個為什麼

uisdc-hao

【優設網 原創文章 投稿郵箱:2650232288@qq.com】

================關于優設網================
“優設網uisdc.com“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航:http://hao.uisdc.com/book/。
設計微博:擁有粉絲量104萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航:http://hao.uisdc.com

點贊
收藏 1

發表評論 已發布 2

還可以輸入 800 個字
 
 
載入中....
相關推薦
2 收藏