電子商務(wù)移動端商品詳情展示視覺設(shè)計分析

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

關(guān)鍵詞：電子商務(wù);移動電商;詳情頁設(shè)計

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

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

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

（一）過密的文字說明

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

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

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

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

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

二、詳情頁設(shè)計的要點

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

（一）營造真實

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

（二）營造邏輯

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

（三）營造氛圍

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

三、移動端詳情頁設(shè)計的制作流程

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

在很多領(lǐng)域都在講究“仿生學(xué)”，在移動端的電子商務(wù)活動中，我們也要講究“仿真學(xué)”，

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

參考文獻(xiàn)：

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

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

作者簡介：

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