電子商務移動端商品詳情展示視覺設計分析

摘要：隨著電子技術(shù)的發(fā)展，移動端的設備越來越先進，功能越來越強大，改變著我們的生活，也改變著電子商務的購物模式，越來越多的消費者選擇手機、平板電腦等移動設備進行網(wǎng)上購物，人們都知道店鋪需要設置移動端的詳情頁來增加店鋪搜索權(quán)重，卻有很多賣家不知道店鋪的移動端詳情頁需要如何去做，才能有效的提高搜索權(quán)重。本文通過分析移動端商品詳情頁的視覺要點和制作流程，來提高商品轉(zhuǎn)化和消費者的停留時間，進行詳情頁的優(yōu)化，而不是單純的將PC端詳情頁修改上傳。

關鍵詞：電子商務;移動電商;詳情頁設計

電子商務的發(fā)端是PC端，商品的視覺展示也是根據(jù)PC端的格局進行的設計。在早期，通過手機等移動端進行線上購物，通常瀏覽的是縮小版的PC端網(wǎng)頁，PC端的顯示窗口要比移動端大很多，特別是詳情頁，PC端會做的很長，有的長度甚至要超過一萬像素，在利用手機等移動端設備去瀏覽這些商品的網(wǎng)頁的時候，就會發(fā)生商品圖片展示不全、文字信息太小等等，無法識別商品信息的情況出現(xiàn)，這樣會丟掉大量的消費者流量。以淘寶為例，在近幾年的雙十一、雙十二等活動中，必須設置單獨的移動端詳情頁才能參加這些大型活動，不難看出平臺的官方對移動端商品視覺展示的重視程度。再以天津市高職電子商務技能大賽為例，美工模塊的裝修分為PC端、移動端、跨境端，早幾屆的比賽中，只有PC端和移動端，是以PC端的設計為主，特別是移動端的商品詳情頁就是PC端的縮小版，發(fā)展到近一二年的比賽中，為了取得比較好的成績，移動端的設計不能再是PC端的縮小版，而是對PC端詳情頁優(yōu)化、或者獨立制作，國賽中亦是如此，移動端的視覺設計權(quán)重在提高，越來越受到重視。因此，移動端商品的視覺展示，特別是詳情頁的設計，顯得尤為重要，在下文中，我將分析目前移動端詳情頁存在的普遍問題、詳情頁設計要點、移動端詳情頁的制作流程。

一、移動端詳情頁的普遍問題

在前文中提到的商品信息顯示不全的問題，只需要根據(jù)平臺移動端的格式要求，設置好參數(shù)，對PC端詳情頁優(yōu)化或者獨立制作就可以解決。在移動端詳情頁的內(nèi)容制作上，還需要注意以下幾點問題。

（一）過密的文字說明

在商品的詳情頁展示中，有些賣家為了突出商品的信息，會用大篇幅的文字去描述商品的信息、店鋪的服務和對商品的感悟等等，這樣做的初衷本實為了讓消費者能夠更詳細、切實的了解商品，但是根據(jù)研究機構(gòu)的統(tǒng)計，如果商品詳情頁的文字內(nèi)容超過七成，消費者是不愿意去仔細閱讀的，特別是當文字的排版擁擠、緊密，會在視覺效果上引發(fā)消費者的畏懼感，密密麻麻的文字會讓消費者失去繼續(xù)深入了解商品的耐心。特別是在移動端，消費者對商品的瀏覽具有偶然性，可能是在空閑間隙刷出來的商品，剛性的需求不強烈，密集的文字說明無法激發(fā)消費者的沖動消費。所以在設計移動端詳情頁的時候，需要考慮手機、平板電腦等移動端設備的屏幕大小，減少大篇幅文字的出現(xiàn)，提煉關鍵詞，排版上以圖文結(jié)合的形式出現(xiàn)，讓商品的信息顯得主次分明，有節(jié)奏感對消費者有視覺導向作用，在能夠突出商品主要信息的視覺情況下，減少消費者的閱讀負擔，減少商品的文字表達。

（二）過于夸張的商品圖片

在對商品進行展示的時候，有些賣家為了增強圖片的吸引力，抓住消費者移動端購物的偶然性，對圖片的視覺效果做了很深入的修飾，夸張一點的說，將每一張商品圖片都做成了商品的海報圖，讓詳情頁的震撼力十足，以為能夠吸引消費的注意力。然而根據(jù)研究機構(gòu)的數(shù)據(jù)統(tǒng)計，近八成的消費者會更關注展示的圖片是不是商品的實拍圖，消費者更希望能夠看到的商品圖片是真實的、全面的、細節(jié)的、清晰的等等，而不是那些過分夸張的商品海報圖、宣傳圖。在商品移動端的詳情頁中插入和商品相關的海報圖片確實能夠在一定程度上營造吸睛的視覺效果，但是如果過多的使用修飾痕跡重的海報圖、宣傳圖，就不能很好地客觀地展示商品的真實狀態(tài)，缺乏真實感，真實感是促成消費者購物沖動的因素之一。所以在設計移動端詳情頁的時候，可以在詳情頁的頂端設計一副和商品相關的海報圖進行宣傳鋪墊即可，先引發(fā)爆點吸引消費者注意力，讓消費者有興趣進一步瀏覽商品的詳情頁面，然后緊接著就要對商品進行詳細的展示了，展示一定要用商品實拍圖，將商品的外形、質(zhì)地、顏色、款式、功能、特點等信息進行真實、全面、清晰的展示，保證圖片的真實性，提高商品的真實感，觸發(fā)消費者下單。

（三）過多的關聯(lián)商品

在對移動端的詳情頁設置關聯(lián)商品的時候，有些賣家還是停留在PC端詳情頁的設計理念之下，想多設置關聯(lián)商品，給店鋪引流，這種設計手段在PC端還行得通，PC端的屏幕夠大，設置一排，甚至兩排的關聯(lián)商品都不會影響消費者瀏覽商品的視覺效果，而且PC端大多通過寬帶上網(wǎng)，網(wǎng)速穩(wěn)定，圖片、熱點圖層多一些也可以順利打開。但是移動端就很不一樣，比如移動的主力手機的屏幕相對較小，在手機上瀏覽商品詳情頁的時候，當關聯(lián)多的時候，會影響消費者想要快速瀏覽商品詳細信息的需求，且手機購物有一定的偶然性，在消費者坐地鐵、地下停車場、野外等信號較弱的場所進行線上購物的時候，關聯(lián)商品圖片、熱點圖層的增多，會影響商品詳情頁的打開速度。根據(jù)研究機構(gòu)的數(shù)據(jù)統(tǒng)計，過多的與商品無關的信息展示，是消費者不喜歡的視覺元素，如果消費者在通過手機等移動設備瀏覽商品詳情的時候，過多的無用信息會降低頁面的打開速度，也會影響消費者查看商品信息的效率，這時消費者很有可能急于瀏覽商品信息，快速滑動屏幕而忽略關聯(lián)商品模塊，失去引流的作用，或者消費者失去耐心去了別的店鋪，以致流量的損失。所以對于關聯(lián)商品的展示，賣家一定要控制好比例，一般在移動端的關聯(lián)商品在2-3款為宜，并且是與詳情頁有聯(lián)系的或者配套的商品，才能更好的留住消費者，引起消費者的關注。

二、詳情頁設計的要點

在移動詳情頁出現(xiàn)的種種問題中，根本問題是詳情頁設計的思路問題，移動端的詳情頁設計來源于PC端，對于同一件商品它們也有著同樣的設計思路，但是在PC端的基礎上要做好優(yōu)化，根據(jù)手機等移動設備的特點，提供給消費者更好的商品瀏覽體驗。在移動端的詳情頁設計制作中，應該更要注意營造商品展示的真實、邏輯和氛圍。

（一）營造真實

在線下購物時，消費者從多種感官渠道獲取商品信息，而線上購物只能通過圖片等視覺感官來了解商品。這時賣家在設計商品詳情頁的內(nèi)容中要模擬線下購物方式的流程，引導消費者了解商品，以商品的真實狀態(tài)，贏得消費的信任，保持商品真實的感覺，才能促使消費者下單購買。真實感可以通過商品的高清大圖展示、商品細節(jié)展示、場景圖片展示來變現(xiàn)，也可以通過買家秀來展示，或者通過視頻、直播的形式來展示。不管使圖片還是視頻，都要線下的購物流程出發(fā)，賣家以消費者的購物視角展示商品，從多角度的商品展示開始，展現(xiàn)商品全貌、全款，并添加文字或者語言對圖片、視頻內(nèi)容進行描述，添加細節(jié)、特點的說明，對商品的細節(jié)、特點、用法等等都要有相應的展示，讓商品更加真實的呈現(xiàn)給消費者，樹立店鋪的好口碑，迎來更多的顧客和訂單。

（二）營造邏輯

在進行詳情頁的設計制作時，賣家不僅要注意對商品描述內(nèi)容語句的邏輯，也要設計好詳情頁的整體邏輯關系。將消費者最想看到的商品信息放在詳情頁的頂端，通過展示商品特性、到商品特點，到商品的作用，到商品的質(zhì)量這個邏輯來確定商品詳情頁信息的前后順序，這樣一步步的引發(fā)消費的好感，增強其信賴感和購買欲望，完成下單。在移動端，邏輯順序的營造和PC端又有很大的不同，在PC端的詳情頁中可以放置關聯(lián)商品、活動信息、優(yōu)惠券、新品推薦等很多附加的信息，移動端的瀏覽連貫性不如PC端，并且消費者在移動端頁面的停留時間較短，這些附加的信息在移動端則顯得不是很實用，移動端的邏輯是一定要直截了當?shù)倪M入商品的主題，這就要求在移動端的前三屏內(nèi)容設計中，必須要對商品的外形、質(zhì)地、顏色、款式等主要信息做清晰的描述。在商品詳情頁的前三屏中，最多只占用一屏做為非商品展示的內(nèi)容區(qū)域，最好只占半屏，這樣在移動端商品詳情頁的第一屏中就既有商品的關鍵信息又有商品本身的展示信息，有助于保持詳情頁內(nèi)容的連貫性、邏輯性。

（三）營造氛圍

前面說到詳情頁的設計要以消費者在線下的購物視角展示商品，在線下購物時，會有導購等人員對消費者進行服務，那么在線上，圖片、文字等視覺信息就是線上購物的服務員，充滿親切感的圖文信息能夠營造出一種愉快、輕松的購物氛圍，拉近賣家和消費者的之間的心理距離。在文字信息的展示上，不要以大段的文字出現(xiàn)，可以用對話的形式出現(xiàn)，以對話的形式向消費者傳達商品信息，比如可以采用問答的對話形式，不僅能夠消除消費者對商品的疑問，也同時獲得了猶如線下購物一樣的體驗，越真實、越親切，越能讓消費者放下心中戒備，提高購買的可能性。在圖文的背景色可采用紅色、橙色等激進的顏色，配以有緊迫感的輔助圖形、背景圖形，營造很多人爭相購買的氣氛，模仿線下購物環(huán)境中，人們喜歡扎堆購物、湊熱鬧的購物心理，促進消費者跟風消費、購買，這點在沖動型消費中尤為重要，會帶動不少消費者下單購買。

三、移動端詳情頁設計的制作流程

移動端的詳情頁制作可以參考PC端的方法，根據(jù)移動端詳情頁所需要的要點進行調(diào)整后，流程如下：確定商品的頁面風格、搜集與商品相關素材、構(gòu)建詳情頁框架布局、確定主色調(diào)的配色方案、選擇合適的字體類型、在軟件中排版設計、修改定稿、將長圖進行切片處理和優(yōu)化儲存、上傳電商平臺的后臺。

第一步是確定商品的頁面風格。頁面風格主要根據(jù)商品本身的屬性、特點、功能等信息來確定。比如在全網(wǎng)搜索巧克力，可以發(fā)現(xiàn)巧克力的詳情頁風格都是很柔滑的感覺，視覺元素中圖形采用圓形或者圓角的流線型為主，顏色的過渡柔和，文字信息是以圓角、纖細的字體表現(xiàn)的。如果在全網(wǎng)搜索機油，風格和巧克力會截然相反，詳情頁都是很硬朗的風格，視覺元素中圖形多以方形或者多邊形為主，顏色的過渡明顯，文字信息是以尖銳、粗獷的字體表現(xiàn)的。

第二步是搜集與商品相關素材。通過前期的商品實拍獲得商品本身的素材，搜索與商品相關的網(wǎng)站或者從自己的素材庫中提煉與商品相關的素材。

第三步是構(gòu)建詳情頁框架布局。根據(jù)商品的推廣文案、活動策劃，結(jié)合商品進行框架布局。一般來說框架由海報圖模塊、商品賣點圖模塊、商品參數(shù)模塊、優(yōu)劣勢對比模塊、商品大圖展示模塊、商品細節(jié)圖展示模塊、商品包裝模塊、商品認證模塊、售后模塊組成。

第四步是確定主色調(diào)的配色方案。如果店鋪是單一品牌，且品牌有企業(yè)VI視覺規(guī)范，則可以直接使用品牌的標準色、輔助色進行設計，如果沒有可以從商品本身的外形顏色上提取主色調(diào)及配色，或從商品的商標中提取，或從商品的聯(lián)想屬性中提取配色方案。

第五步是選擇合適的字體類型。字體起到對商品進行直白的解釋說明的作用，也能起到畫面的引導作用，并對商品的調(diào)性有一定的影響，所以要根據(jù)商品的屬性選擇相應的字體。

第六步是在軟件中排版設計。商品詳情頁是在Photoshop軟件中制作的，畫面元素不能太多，尤其是移動端的設計，要簡潔、清爽、透氣、有節(jié)奏感。并且在排版上注意手機屏幕的大小，以一屏的大小為一個畫面來顯示一個圖片的主要內(nèi)容。

第七步是修改定稿。制作初稿導出圖片格式，提交運營審稿或者上線測試，進行局部調(diào)整、修改，再定稿。

第八步是將長圖進行切片處理和優(yōu)化儲存。制作好的詳情頁是一張長圖，高度有時會達到上萬像素，所以要使用Photoshop進行切片，對圖片優(yōu)化處理，保證圖片在清晰的情況下占存儲最小，讓消費者在移動端能夠更快的刷新出商品詳情頁。

第九步是上傳電商平臺的后臺。把切好的詳情頁圖片按照順序上傳到店鋪的后臺圖片空間，上架新商品的時候就可以直接導入新設計好的詳情頁了。

四、總結(jié)

在很多領域都在講究“仿生學”，在移動端的電子商務活動中，我們也要講究“仿真學”，

不同于PC端，消費者在固定的場所進行線上購物，手機等移動設備的使用場合非常多，移動端的店鋪視覺效果、商品詳情展示頁面要從真實感、邏輯感、氛圍感這三點出發(fā)，在線上營造出線下購物環(huán)境的代入感，以合理的制作流程來設計詳情頁，引導消費者完成下單。

參考文獻：

[1]洪圣武，王英彥.增強現(xiàn)實在移動電子商務中的應用[J].無線互聯(lián)科技，2015（04）：82-83.

[2]陳強.移動互聯(lián)網(wǎng)時代視覺化一致性的品牌營銷研究[D].西南大學，2017.

作者簡介：

高文翔，男，1989年04月，民族：漢，山西大同人，碩士學位，天津交通職業(yè)學院，研究方向：視覺傳達、電子商務。