新春福利放送！2018年商城網站流行設計趨勢大集合

+ 查看更多

 

相比展示型網站來說，商城網站的競爭總是更加激烈。這是因為，一方面，市場上已經存在不少比較成熟、知名度高的綜合電商平臺，比如淘寶、京東等；另一方面，互聯網的快速發展使得建站門檻大大降低，越來越多的個人或企業開始涌向線上搭建屬于自己的獨立商城網站。在前有“猛虎”后有追兵的大環境下，我們如何才能做好網站自身建設，快速抓住用戶，從眾多競爭對手中脫穎而出？怎樣才能打造出一個擁有高銷量和高轉化率的商城？今天小飛就帶來了2018年商城領域正悄然流行的7種設計趨勢，希望能帶給大家一些啟發或靈感。快來一起看看吧！

 

 

 

在2017年，長滾動這種設計手法十分流行。這是因為與點擊設計相較而言，滾動設計的操作更加簡單。另外，它還提供了更加順暢、完整的信息流，能夠吸引用戶在不知不覺中進行持續地瀏覽。目前很多社交軟件平臺就使用了無限滾動的設計方式。在2018年，我們也可以在建設商城網站時多結合這種設計方法，比如在網頁中設置滾動式的產品圖片，滾動式的圖片設置不僅比傳統的幻燈片式更加簡單（不需要進行點擊即可查看圖片），還能給用戶提供流線型的瀏覽體驗，提高用戶查看更多內容的可能性。

 

 

 

 

商城的產品頁面通常需要包含很多元素，比如產品圖片、產品描述、產品說明、用戶評價等，這時如何合理安排不同元素幫助建立有效的視覺信息流就顯得十分重要了。元素疊加設計的出現恰好就能輕松解決這個問題，元素疊加設計是指通過不同元素之間的互相疊加實現用戶視線的自然下移，讓用戶沿著既定的軌跡進行瀏覽。以下圖為例，頁面上的兩張圖片在部分區域重疊，這樣一來，用戶在瀏覽完左上方的圖片后，視線會自動下移到右下角的圖片。除了實現圖片之間的自然過渡，這種方式還可以用在其它各種元素上，比如實現從文本到圖片再到矢量圖形的過渡。對了，我們還可以通過元素疊加設計來重點突出圖片的某個位置，或某個需要特別關注的產品規格。

 

 

 

 

商城網站中的產品圖片設計從來就不是一件易事。因為產品圖片常常需要“身兼多職”：既要足夠有趣，有效吸引用戶注意力，又應足夠簡潔，能起到突出產品本身的作用。也就是說，產品圖片要兼具審美性和功能性，為用戶提供愉悅的瀏覽體驗和詳盡的產品信息，想要做到這一點談何容易？不過，最近設計師們倒是發現了一種比較有效的圖片形式：動態的真人試用圖片。真人試用的產品圖片很早就出現了，不過現在一些商城開始將它與動態設計結合起來了，這能給用戶耳目一新的感覺，同時還能讓用戶對產品有更加深刻的認識。下圖為某個網站洗發水產品的真人試用圖片。

 

 

 

 

在網站中使用視頻的好處應該不用小飛多做介紹了吧。視頻擁有靜態圖片無法比擬的優勢，它簡單直觀、互動性強，能夠在短時間內將大量的信息以易于理解的方式傳遞給用戶。現在很多商城也在網站中使用視頻這種方式進行產品講解，不過今天小飛要介紹的是產品視頻集錦。產品視頻集錦與傳統的視頻媒體不同，它一般聚焦于一個主題，綜合了各種相關的GIF動畫、視頻片段等，沒有配音，長度也比較短。在網站中使用這種形式的視頻能給產品賦予與眾不同的生機與活力，也更能將你的網站與競爭對手的區別開來。不過，如何做好視頻的有效剪輯卻并不簡單，有空小飛再跟大家仔細探討一下。

 

 

 

 

在現有的商城網站中，我們經常看到產品圖片被放置在產品頁面的左上方，只占一小塊區域，而更多的頁面空間留給了產品描述、產品規格、用戶評價等區塊。似乎產品圖片就應該是這般大小的，其實，商站產品圖片的尺寸設置沒有任何標準，只要能夠突出產品特點、符合設計美感就OK了。因此，在2018年，我們可以嘗試打破產品圖片的常規尺寸，在產品頁面放置超大尺寸的圖片，下圖就是一個很好的范例。超大尺寸的產品圖片，不管是作為產品主圖上還是分頁設計的一部分，都比普通大小的產品圖片更具表現力，更能給用戶帶來沉浸感。

 

 

 

 

著陸頁設計對商城網站也同樣重要。因為它通常代表了用戶對于網站的第一印象，直接決定著用戶的下一步行為：是繼續點擊，瀏覽產品，還是關掉窗口，直接退出。為了第一時間吸引用戶的注意，提高網站流量的轉化率，我們在設計商城網站的著陸頁時一定要多聚焦于產品本身。一般來說，一個成功的產品著陸頁通常包括機智的營銷文本、好看的產品圖片、平整的圖標、印象深刻的數字、顯眼的CTA按鈕。只有這樣，訪客才能在僅瀏覽網站著陸頁時就對產品有足夠的了解。當然，商城著陸頁的設計也應足夠簡潔，重點突出產品的某些特點。

 

 

 

 

與展示型網站不同，商城網站中通常還會設置產品類別頁面。產品類別頁面是主頁和產品頁面之間的"中間頁面"，一個出色的產品類別頁面可以驅動用戶去探索更多的產品（甚至是他們不怎么需要的），也能讓用戶的購物過程更加高效，大大提升網站的轉化率。在2018年，我們可以結合多種設計技巧來建設產品類別頁面，比如滾動設計、微妙動效等，讓產品類別頁面更具創意。下圖就是一個很好的例子，這個產品類別頁面主要展示了商品的4個分類：上裝、下裝、套裝、外套，而通過使用真人圖片、GIF動畫、微妙動效等，用戶也會更有興趣在網站上進行探索。

 

 

 

快來起飛頁自助建站平臺搭建一個響應式網站吧！