電子商務(wù)視覺設(shè)計-第6章-網(wǎng)店首頁視覺設(shè)計

電商視覺設(shè)計第6章

網(wǎng)店首頁視覺設(shè)計熟悉首頁的作用。熟悉PC端首頁框架布局。6.1首頁視覺設(shè)計基礎(chǔ)3網(wǎng)店首頁是一個醒目且關(guān)鍵的部位，首頁視覺設(shè)計的好壞能在一定程度上影響消費者是否下單購買，首頁也是決定網(wǎng)店整體風格的重要一環(huán)。6.1.1首頁的作用4首頁是商家向消費者展示商品的載體，它相當于實體店鋪的門面，門面的裝修直接影響商品的價值呈現(xiàn)。下面介紹首頁的作用。1．提高消費者對網(wǎng)店的信任度圖6-1所示是精心設(shè)計裝修的網(wǎng)店首頁，它呈現(xiàn)給消費者的是官方的、品牌感十足的、高品質(zhì)的網(wǎng)店形象，在不知不覺中提高了消費者對網(wǎng)店的信任度，而且商品的價值也得到了很好的體現(xiàn)。設(shè)計優(yōu)秀的網(wǎng)店首頁會增加消費者的頁面停留時間、訪問深度、點擊率等。6.1.1首頁的作用52．傳達網(wǎng)店活動信息網(wǎng)店首頁是網(wǎng)店信息量最大、最集中的地方，消費者了解商品往往是從網(wǎng)店的首頁開始的。圖6-2所示的網(wǎng)店首頁在第一屏中把網(wǎng)店的元宵節(jié)促銷活動信息傳達給消費者，再通過文案引起消費者的情感共鳴，從而提高網(wǎng)店的轉(zhuǎn)化率。6.1.1首頁的作用63．傳達品牌形象網(wǎng)店首頁可以把網(wǎng)店的風格、品牌、經(jīng)營理念和文化等信息準確地傳達給消費者，這些都會為網(wǎng)店的形象加分，有利于網(wǎng)店品牌的形成。圖6-3所示為某品牌網(wǎng)店的首頁，起到了傳達品牌形象的作用。6.1.1首頁的作用74．增強網(wǎng)店誘惑力消費者在進入網(wǎng)店后，第一眼看到的就是網(wǎng)店首頁。這時，消費者對網(wǎng)店中銷售的商品還不了解，對商品的質(zhì)量也無法評定，而一個設(shè)計精美的首頁就可以給消費者留下美好的第一印象，從而使消費者對品牌和商品產(chǎn)生好感。6.1.1首頁的作用85．網(wǎng)店流量的中轉(zhuǎn)站圖6-5所示的網(wǎng)店首頁上的活動入口、分類導(dǎo)航、優(yōu)惠券等都起到疏導(dǎo)流量的作用，可以有效降低整個網(wǎng)店的跳失率。6.1.2首頁的設(shè)計思路9在設(shè)計首頁之前，電商視覺設(shè)計師需要明確網(wǎng)店首頁的設(shè)計思路。根據(jù)網(wǎng)店運營的需求，通?？梢园丫W(wǎng)店首頁的設(shè)計思路分成活動型首頁的設(shè)計思路、品牌宣傳型首頁的設(shè)計思路。1．活動型首頁的設(shè)計思路每家網(wǎng)店或大或小總會舉辦一些促銷活動，不同的促銷力度對于消費者的吸引力有很大的差別。6.1.2首頁的設(shè)計思路102．品牌宣傳型首頁的設(shè)計思路首頁的作用不僅體現(xiàn)在流量疏導(dǎo)上，它對于品牌的推廣也至關(guān)重要。品牌的成長離不開曝光度，而首頁又是網(wǎng)店流量較集中的頁面，利用首頁去提升品牌的知名度是一種常用的方法。6.1.3PC端首頁框架布局11網(wǎng)店的框架就像商場的布局，消費者進入商場先看到什么、后看到什么必須有邏輯，符合瀏覽習(xí)慣。進行網(wǎng)店頁面裝修時，應(yīng)首先對網(wǎng)店的整體頁面進行布局。頁面布局要有條理和層次感，應(yīng)盡可能采取簡單、層次分明的結(jié)構(gòu)，以便消費者瀏覽商品。首頁的布局從上到下可以分為頁頭、主體和頁尾3部分。頁頭由網(wǎng)店招牌和導(dǎo)航模塊構(gòu)成，位置在頁面的最上方；主體由圖片輪播、客服中心、商品分類、促銷活動區(qū)、商品展示區(qū)等模塊構(gòu)成，其布局可以靈活調(diào)整；頁尾由自定義內(nèi)容模塊構(gòu)成，一般為分類導(dǎo)航及售后服務(wù)等，位于頁面底部。6.2首頁視覺設(shè)計水平的評價指標12判斷一個網(wǎng)店首頁的設(shè)計是否合規(guī)，可以從首頁跳失率、首頁點擊率、首頁人均點擊次數(shù)和首頁平均停留時間4個指標來評價。6.2.1首頁跳失率13首頁跳失率是指消費者通過某種渠道進入網(wǎng)店后，只訪問了首頁一個頁面就離開的訪問次數(shù)占該入口總訪問次數(shù)的比例，它是衡量被訪問首頁質(zhì)量的一個重要因素。例如，在訪問網(wǎng)店的100個人中，有80個人看了網(wǎng)店首頁一個頁面就跳出，意味著該頁面的跳失率為80%。電商運營者需要隨時觀察網(wǎng)店的各項數(shù)據(jù)，并根據(jù)數(shù)據(jù)變化情況對頁面進行優(yōu)化與調(diào)整。6.2.2首頁點擊率14首頁點擊率是商品在首頁展現(xiàn)后的被點擊比例，首頁點擊率=首頁點擊量÷首頁展現(xiàn)量。從首頁點擊率可以看出網(wǎng)店推廣的商品是否吸引人。首頁點擊率越高，說明商品對消費者的吸引力越強；首頁點擊率越低，說明商品對消費者的吸引力越差，這時就需要對網(wǎng)店首頁進行優(yōu)化。影響點擊率的重要因素有圖片、銷量和價格，如果商品有著吸引人的圖片，較高的銷量及較低的價格，就可以有效增加點擊率。6.2.3首頁人均點擊次數(shù)15首頁人均點擊次數(shù)是指在一段時間內(nèi)人均點擊了多少次網(wǎng)店首頁。假設(shè)某日點擊某網(wǎng)店的訪問者數(shù)量為150人，在此期間點擊本網(wǎng)店首頁的總訪問數(shù)量為600次，那么首頁人均點擊次數(shù)為：600次÷150人=4次/人。首頁人均點擊次數(shù)可以用來測試訪客黏度，如果首頁的客戶體驗做得很差，訪客進入首頁后，找不到自己想要的商品，訪客自然就會馬上離開。因此，運營者要根據(jù)首頁人均點擊次數(shù)來優(yōu)化網(wǎng)店首頁整體的導(dǎo)航，美化商品圖片，這對留住訪客非常重要。6.2.4首頁平均停留時間16首頁平均停留時間：訪問網(wǎng)店首頁的所有訪客總的停留時長÷訪客數(shù)。和首頁人均點擊次數(shù)一樣，首頁平均停留時間也可以用來判斷一個網(wǎng)店首頁是否能留住訪客。行業(yè)性質(zhì)的不同導(dǎo)致每個行業(yè)的訪客在網(wǎng)店中停留的時間差異很大。在進行分析時，可以以一段時間內(nèi)訪客在網(wǎng)店首頁的平均停留時間為基數(shù)，記錄下這段時間的銷售量。以后再拿新數(shù)據(jù)做對比，就知道隨著平均停留時間變化，銷量是提高了還是下降了。一般情況下，訪客平均停留時間越長，說明網(wǎng)店的留客工作做得越到位。6.3?設(shè)計分類導(dǎo)航模塊17網(wǎng)店的分類導(dǎo)航模塊是網(wǎng)店內(nèi)容架構(gòu)的體現(xiàn)，網(wǎng)店的分類導(dǎo)航模塊是否合理是評價網(wǎng)店易用性的重要指標之一。6.3.1分類導(dǎo)航模塊常見的表現(xiàn)形式18分類導(dǎo)航模塊是每個網(wǎng)店首頁都不可或缺的內(nèi)容，它的作用是幫助消費者快速地找到目標商品，幫助商家快速地管理自己網(wǎng)店內(nèi)的商品。從網(wǎng)店運營角度來說，分類導(dǎo)航模塊的作用是把網(wǎng)店的流量合理地分配給不同的商品或者頁面，從而達到預(yù)期的效果。網(wǎng)店首頁頂部分類導(dǎo)航模塊的效果如圖6-15所示。6.3.2分類導(dǎo)航模塊的設(shè)計原則19分類導(dǎo)航模塊的設(shè)計在整個網(wǎng)店設(shè)計中的地位舉足輕重。在設(shè)計中，要注意以下設(shè)計原則。完整性多維度明確性易用性清晰性6.3.3設(shè)計分類導(dǎo)航模塊20下面使用Photoshop設(shè)計分類導(dǎo)航模塊，效果如圖6-20所示，具體操作步驟如下。6.3.3設(shè)計分類導(dǎo)航模塊21（1）啟動Photoshop，選擇“文件”|“新建”命令，彈出“新建”對話框。將“寬度”設(shè)置為1000像素，“高度”設(shè)置為600像素，“分辨率”設(shè)置為72像素/英寸，“顏色模式”選擇“RGB顏色”，“背景內(nèi)容”設(shè)置為“白色”，如圖6-21所示。（2）設(shè)置完畢，單擊“確定”按鈕，新建一個背景為白色的空白文檔，如圖6-22所示。6.3.3設(shè)計分類導(dǎo)航模塊22（3）選擇工具箱中的漸變工具，雙擊工具選項欄中的“點按可編輯漸變”下拉列表框，如圖6-23所示，彈出“漸變編輯器”對話框。在該對話框中設(shè)置第一個色標的顏色為深紅色（#23060f），第二個色標的顏色為“#fca6bf”，如圖6-24所示。6.3.3設(shè)計分類導(dǎo)航模塊23（4）設(shè)置完畢，單擊“確定”按鈕。按住鼠標左鍵，在舞臺中拖曳，對背景進行填充，如圖6-25所示。（5）選擇“文件”|“打開”命令，彈出“打開”對話框，在該對話框中選擇“花1”文件，如圖6-26所示。6.3.3設(shè)計分類導(dǎo)航模塊24（6）單擊“打開”按鈕，打開“花1”圖片文件，如圖6-27所示。（7）按“Ctrl+A”組合鍵將圖像全部選中，選擇“編輯”|“拷貝”命令，復(fù)制圖像，如圖6-28所示。6.3.3設(shè)計分類導(dǎo)航模塊25（8）返回文檔，選擇“編輯”|“粘貼”命令，粘貼圖像，然后選擇工具箱中的移動工具，將圖像移動到文檔的左上角，如圖6-29所示。（9）選擇工具箱中的橫排文字工具，在工具選項欄中將字號設(shè)置為36點，然后在背景圖片上輸入文字“花樣少女”，如圖6-30所示。6.4設(shè)計輪播圖片26很多網(wǎng)店首頁的第一屏都是輪播圖片，輪播圖片承擔著確立網(wǎng)店的視覺風格、傳達網(wǎng)店的活動信息等重要責任。需要注意的是，在設(shè)計時，要保證這個區(qū)域在不同的屏幕分辨率下都能夠清晰地展現(xiàn)出來。6.4.1輪播圖片的設(shè)計要素27要使輪播圖片達到美觀、吸引消費者注意的效果，就要對每張輪播圖片的主題、構(gòu)圖和配色等視覺設(shè)計要素進行綜合考慮。1．主題輪播圖片要突出網(wǎng)店的主題，無論是新品上市還是活動促銷，輪播圖片都需要圍繞主題來設(shè)計。一般情況下，輪播圖片的主題通過商品和文字描述來體現(xiàn)，將描述提煉成簡練的文字主題，并將主題放在輪播圖片的第一視覺點，讓消費者直觀地看到出售的商品，并根據(jù)商品和活動選擇合適的背景。6.4.1輪播圖片的設(shè)計要素282．構(gòu)圖輪播圖片的構(gòu)圖方式可以分為左右構(gòu)圖、左中右三分構(gòu)圖、上下構(gòu)圖和斜切構(gòu)圖4種。（1）左右構(gòu)圖是比較典型的構(gòu)圖方式，一般分為左圖右文或左文右圖兩種模式。圖6-48所示為典型的左右構(gòu)圖效果。6.4.1輪播圖片的設(shè)計要素293．配色在配色時，對重要的文字信息要用突出、醒目的顏色進行強調(diào)，通過明暗對比和不同顏色的搭配來確定對應(yīng)的風格，背景顏色應(yīng)該統(tǒng)一，不要使用太多的顏色，以免頁面雜亂。圖6-52所示為比較漂亮的配色效果。6.4.2設(shè)計輪播圖片的文案30下面介紹輪播圖片的視覺文案的設(shè)計知識，包括聚焦消費者視線和構(gòu)成輪播圖的三要素。1．聚焦消費者視線網(wǎng)店首頁的輪播圖片可以在一定程度上聚焦消費者的視線，如圖6-53所示，讓其有繼續(xù)瀏覽頁面的興趣。首頁輪播圖片是消費者進入網(wǎng)店后第一時間看到的內(nèi)容，如果這部分內(nèi)容能夠吸引消費者的注意，會大大提高其繼續(xù)瀏覽網(wǎng)店頁面的可能性。6.4.2設(shè)計輪播圖片的文案312．構(gòu)成輪播圖片的三要素網(wǎng)店首頁中的輪播圖片基本上都是由3個要素組成的，即唯美絢麗的背景，完整精致的商品形象，以及精心編排的廣告文案，如圖6-54所示。6.4.3設(shè)計輪播圖片32下面介紹輪播圖片的設(shè)計方法，完成效果如圖6-58所示，具體操作步驟如下。6.4.3設(shè)計輪播圖片33（1）啟動Photoshop，打開6.3.3小節(jié)制作的文件，如圖6-59所示。（2）選擇“文件”“置入嵌入對象”命令，在該對話框中選擇“|lou”圖片文件，單擊“置入”按鈕，如圖6-61所示。6.4.3設(shè)計輪播圖片34（3）置入圖片文件，并將其移動到相應(yīng)的位置，如圖6-61所示。（4）置入其他的素材文件，然后將其移動到舞臺中相應(yīng)的位置，如圖6-62所示。6.4.3設(shè)計輪播圖片35（5）選擇工具箱中的橫排文字工具，在舞臺中輸入文字“時尚女裝，優(yōu)雅魅力”，設(shè)置字號為30點，字體為“黑體”，顏色為黃色，如圖6-63所示。（6）選擇工具箱中的矩形工具，按住鼠標左鍵在舞臺中繪制矩形，并為其設(shè)置填充顏色，如圖6-64所示。6.4.3設(shè)計輪播圖片36（7）選擇“圖層”|“圖層樣式”|“投影”命令，彈出“圖層樣式”對話框。在該對話框中將“角度”設(shè)置為-24度，“距離”設(shè)置為5像素，“大小”設(shè)置為5像素，“不透明度”設(shè)置為75%，如圖6-65所示。（8）單擊“確定”按鈕，應(yīng)用圖層樣式后的效果如圖6-66所示。6.4.3設(shè)計輪播圖片37（9）選擇工具箱中的橫排文字工具，在舞臺中輸入文字“618年中盛典”，設(shè)置字號為24點，字體為“黑體”，顏色為粉紅色，如圖6-67所示。（10）選擇工具箱中的直線工具，設(shè)置“填充”的顏色為粉紅色，按住鼠標左鍵繪制線條，如圖6-68所示。6.5?設(shè)計商品展示區(qū)38商品展示區(qū)主要用于展示不同類型的商品，該區(qū)域是首頁中商品數(shù)量最多的區(qū)域，其作用是引導(dǎo)消費者下單購買。6.5.1商品展示模塊的類型39（1）使用系統(tǒng)自帶的商品展示模塊，如圖6-72所示。系統(tǒng)自帶模塊分成自動推薦和手動推薦兩類，相對而言比較中規(guī)中矩。當商品呈現(xiàn)較多時，使用這種模塊容易讓人產(chǎn)生視覺疲勞。6.5.1商品展示模塊的類型40（2）使用從網(wǎng)店裝修市場購買的商品展示模塊，如圖6-73所示。商家可以根據(jù)自己的偏好和網(wǎng)店的風格去選擇商品展示模板。在購買模板時，商家不僅要從自身的角度去選擇，還要從消費者的角度去思考。6.5.1商品展示模塊的類型41（3）使用個性化設(shè)計的商品展示模塊，如圖6-74所示。商家利用裝修后臺的自定義模塊做個性化設(shè)計的商品陳列，可以更大程度地呈現(xiàn)商品的誘惑力、價值等，對體現(xiàn)商品的質(zhì)感、品牌感都有很大的幫助。6.5.2優(yōu)化商品陳列42商品陳列是一門綜合藝術(shù)，它集廣告性、藝術(shù)性、真實性于一體，通過不同的表達方式，將頁面內(nèi)的商品以更加美觀的方式呈現(xiàn)給消費者。商品陳列的目的是塑造品牌形象，提高商品的感知價值，促使消費者下單購買。優(yōu)化商品陳列應(yīng)從以下幾個方面進行。1．醒目陳列2．關(guān)聯(lián)搭配陳列3．主推陳列4．裸露陳列6.5.3設(shè)計商品展示區(qū)43制作商品展示區(qū)時，為了吸引消費者的注意，通常需要結(jié)合商品圖片、商品名稱、商品價格等信息對推薦的商品進行展示。下面制作商品展示區(qū)，效果如圖6-79所示，具體操作步驟如下。6.6?應(yīng)用實例——切割網(wǎng)店首頁44網(wǎng)店首頁設(shè)計完成后，還需要對其進行切割，使其可以方便地應(yīng)用于網(wǎng)頁中。切割并保存網(wǎng)店首頁的具體操作步驟如下。6.6?應(yīng)用實例——切割網(wǎng)店