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

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

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

一、移動(dòng)端詳情頁(yè)的普遍問(wèn)題

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

（一）過(guò)密的文字說(shuō)明

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

（二）過(guò)于夸張的商品圖片

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

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

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

二、詳情頁(yè)設(shè)計(jì)的要點(diǎn)

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

（一）營(yíng)造真實(shí)

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

（二）營(yíng)造邏輯

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

（三）營(yíng)造氛圍

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

三、移動(dòng)端詳情頁(yè)設(shè)計(jì)的制作流程

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

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

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

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

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

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

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

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

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

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

四、總結(jié)

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

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

參考文獻(xiàn)：

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

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

作者簡(jiǎn)介：

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