電商設(shè)計(jì)電子課件

第8章手機(jī)端店鋪首頁(yè)設(shè)計(jì)本章介紹：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展及普及，消費(fèi)者在手機(jī)端電商平臺(tái)進(jìn)行網(wǎng)購(gòu)已經(jīng)成為了主流現(xiàn)象。因此，手機(jī)端店鋪首頁(yè)的設(shè)計(jì)對(duì)于所有商家而言都至關(guān)重要，是電商設(shè)計(jì)任務(wù)中的核心工作。本章針對(duì)手機(jī)端店鋪的基本概述和首頁(yè)模塊設(shè)計(jì)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的手機(jī)端店鋪首頁(yè)進(jìn)行設(shè)計(jì)演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)手機(jī)端店鋪首頁(yè)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握手機(jī)端店鋪首頁(yè)的設(shè)計(jì)規(guī)范和制作方法，成功制作出具有強(qiáng)大購(gòu)買(mǎi)力的手機(jī)端店鋪首頁(yè)。了解手機(jī)端店鋪首頁(yè)的基本概念明確手機(jī)端店鋪首頁(yè)的模塊結(jié)構(gòu)學(xué)習(xí)目標(biāo)8.1手機(jī)端店鋪基本概述手機(jī)端店鋪設(shè)計(jì)的必要性手機(jī)端與PC端店鋪區(qū)別手機(jī)端店鋪的設(shè)計(jì)關(guān)鍵點(diǎn)隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展及普及，大眾使用移動(dòng)設(shè)備上網(wǎng)的時(shí)間遠(yuǎn)遠(yuǎn)超過(guò)使用電腦設(shè)備。淘寶、京東、一條等各大電商平臺(tái)適應(yīng)時(shí)代趨勢(shì)，相繼開(kāi)發(fā)App便于廣大消費(fèi)者使用移動(dòng)設(shè)備進(jìn)行購(gòu)物。由于移動(dòng)設(shè)備有著方便靈活的特點(diǎn)，極大地滿足了消費(fèi)者可以隨時(shí)隨地進(jìn)行購(gòu)物的需求。設(shè)計(jì)精美的手機(jī)端店鋪8.1.1手機(jī)端店鋪設(shè)計(jì)的必要性1.設(shè)計(jì)尺寸不同手機(jī)端店鋪和電腦端店鋪的設(shè)計(jì)尺寸大有不同，網(wǎng)店美工人員不能將設(shè)計(jì)好的電腦端店鋪圖片直接照搬到手機(jī)端店鋪，否則會(huì)引發(fā)界面混亂、顯示不全和效果不佳等問(wèn)題。以店鋪首頁(yè)為例，手機(jī)端首頁(yè)寬度為通常設(shè)計(jì)為1200像素，而電腦端店鋪的首頁(yè)寬度一般為1920像素。8.1.2手機(jī)端與PC端店鋪區(qū)別2.頁(yè)面布局不同由于設(shè)計(jì)尺寸的不同，手機(jī)端店鋪與PC端店鋪的布局也要有所區(qū)別，以此增強(qiáng)手機(jī)端店鋪的瀏覽體驗(yàn)。如在PC端店鋪為左右布局的橫版海報(bào)，在手機(jī)端店鋪則需要設(shè)計(jì)成上下布局的豎版海報(bào)。

手機(jī)端店鋪首頁(yè)P(yáng)C端店鋪首頁(yè)8.1.2手機(jī)端與PC端店鋪區(qū)別3.構(gòu)成模塊不同手機(jī)端的構(gòu)成模塊劃分清晰，并且會(huì)根據(jù)設(shè)備特點(diǎn)加入更能吸引消費(fèi)者的模塊。如店鋪首頁(yè)，手機(jī)端通常會(huì)在店招下方加入文字標(biāo)題、店鋪熱搜和店鋪會(huì)員等模塊，較PC端更加豐富。手機(jī)端店鋪首頁(yè)P(yáng)C端店鋪首頁(yè)8.1.2手機(jī)端與PC端店鋪區(qū)別4.信息內(nèi)容不同:由于尺寸縮小，手機(jī)端店鋪需要在有限的空間進(jìn)行設(shè)計(jì)。因此相較于PC端店鋪，手機(jī)端無(wú)法通過(guò)比較詳細(xì)的文字說(shuō)明商品，只會(huì)選擇更為重要的文案內(nèi)容，并且對(duì)價(jià)格進(jìn)行加重和調(diào)整顏色以做強(qiáng)調(diào)，令其更適合在手機(jī)端展示。

手機(jī)端店鋪首頁(yè)信息內(nèi)容PC端店鋪首頁(yè)信息內(nèi)容8.1.2手機(jī)端與PC端店鋪區(qū)別1.符合瀏覽規(guī)范為了保證消費(fèi)者在手機(jī)端購(gòu)物的的瀏覽體驗(yàn)，設(shè)計(jì)時(shí)需要保證符合手機(jī)端的規(guī)范。如設(shè)計(jì)尺寸、字號(hào)大小、圖片尺寸和色彩搭配等都要按照手機(jī)端的規(guī)范進(jìn)行，避免出現(xiàn)瀏覽問(wèn)題，降低消費(fèi)者購(gòu)物欲望。2.統(tǒng)一平臺(tái)視覺(jué)設(shè)計(jì)手機(jī)端店鋪雖然要根據(jù)手機(jī)端的特點(diǎn)進(jìn)行調(diào)整，但也要注意與PC端店鋪的視覺(jué)進(jìn)行統(tǒng)一呼應(yīng)，不能令消費(fèi)者感到是進(jìn)入了兩個(gè)不同的店鋪。因此應(yīng)保留相通的視覺(jué)元素，提升品牌關(guān)聯(lián)性。8.1.3手機(jī)端店鋪的設(shè)計(jì)關(guān)鍵點(diǎn)3.進(jìn)行頁(yè)面統(tǒng)一除了進(jìn)行平臺(tái)與平臺(tái)之間的視覺(jué)統(tǒng)一，還需要保證頁(yè)面本身以及頁(yè)面之間的視覺(jué)統(tǒng)一。設(shè)計(jì)單張頁(yè)面時(shí)，整張頁(yè)面需要和諧統(tǒng)一，并且各個(gè)頁(yè)面之間也可以相互銜接，促成交易。4.合理運(yùn)用模塊手機(jī)端店鋪設(shè)計(jì)時(shí)不要為了豐富內(nèi)容而加入大量模塊，應(yīng)根據(jù)店鋪特點(diǎn)和活動(dòng)要求，合理使用。整體信息量要合適，如首頁(yè)多控制在6個(gè)屏幕以內(nèi)，這樣不會(huì)顯得繁瑣雜亂，可以令消費(fèi)者愉悅輕松地進(jìn)行瀏覽。8.1.3手機(jī)端店鋪的設(shè)計(jì)關(guān)鍵點(diǎn)8.2手機(jī)端店鋪首頁(yè)設(shè)計(jì)輪播海報(bào)設(shè)計(jì)優(yōu)惠券設(shè)計(jì)分類模塊設(shè)計(jì)商品展示設(shè)計(jì)底部信息設(shè)計(jì)手機(jī)端店鋪首頁(yè)的寬度為1200像素，高度不限，其設(shè)計(jì)模塊可以根據(jù)商家不同需要和后臺(tái)裝修模塊進(jìn)行組合變化。首頁(yè)的核心模塊通常由店招、文字標(biāo)題、店鋪熱搜、輪播海報(bào)、優(yōu)惠券、分類模塊、商品展示、底部信息、排行榜和逛逛更多構(gòu)成。手機(jī)端店鋪首頁(yè)設(shè)計(jì)8.2手機(jī)端店鋪首頁(yè)設(shè)計(jì)

手機(jī)端店鋪的首頁(yè)輪播海報(bào)是網(wǎng)店美工人員正式進(jìn)行設(shè)計(jì)的模塊，其寬度為1200像素，高度為120像素-2000像素，支持jpg或png格式，大小不超過(guò)2兆。8.2.1輪播海報(bào)設(shè)計(jì)輪播海報(bào)效果圖

手機(jī)端首頁(yè)的優(yōu)惠券可以依據(jù)5.2.3中PC端首頁(yè)優(yōu)惠券的講解進(jìn)行設(shè)計(jì)。需要注意的是，設(shè)計(jì)尺寸、字號(hào)大小和色彩搭配要符合手機(jī)端瀏覽規(guī)范。8.2.2優(yōu)惠券設(shè)計(jì)輪播海報(bào)效果圖

在手機(jī)端店鋪中，消費(fèi)者進(jìn)行瀏覽的方式是上下滑動(dòng)的方式，因此在設(shè)計(jì)時(shí)會(huì)盡量減少大規(guī)模的點(diǎn)擊交互，所以分類模塊通常在商品類型豐富的店鋪中進(jìn)行保留。手機(jī)端首頁(yè)分類模塊的設(shè)計(jì)可以依據(jù)5.2.4中PC端首頁(yè)分類模塊的講解進(jìn)行設(shè)計(jì)。需要注意的是，在手機(jī)端中的分類模塊設(shè)計(jì)有時(shí)會(huì)在設(shè)計(jì)上進(jìn)行簡(jiǎn)化處理，以節(jié)約面積。8.2.3分類模塊設(shè)計(jì)

手機(jī)端首頁(yè)分類模塊（左）

PC端首頁(yè)分類模塊（右）月燁家居旗艦店手機(jī)端首頁(yè)的商品展示可以依據(jù)5.2.5中PC端首頁(yè)商品展示的講解進(jìn)行設(shè)計(jì)。但由于面積有限，手機(jī)端首頁(yè)的商品展示無(wú)法向PC端那樣一行4列的展示商品，通常會(huì)以1行1列、1行2列和1行3列的形式進(jìn)行展示，當(dāng)以1行1列展示商品時(shí)，可以做成單圖海報(bào)，其寬度為1200像素，高度為120像素-2000像素。當(dāng)以1行2列或1行3列展示商品時(shí)，頭部可加入Banner提升美感，Banner的寬度為1200像素，高度為376像素或591像素，支持jpg/png格式，大小不超過(guò)2兆。8.2.4商品展示設(shè)計(jì)手機(jī)端首頁(yè)商品展示效果8.2.4商品展示設(shè)計(jì)

底部信息由于位于頁(yè)面尾部，消費(fèi)者在瀏覽時(shí)會(huì)容易產(chǎn)生視覺(jué)疲憊。因此，手機(jī)端的大部分店鋪會(huì)去除底部信息。在個(gè)別保留底部信息的手機(jī)端店鋪中，會(huì)將PC端首頁(yè)的底部信息做元素簡(jiǎn)化或顏色變化等處理來(lái)進(jìn)行設(shè)計(jì)，以減輕消費(fèi)者瀏覽負(fù)擔(dān)、吸引消費(fèi)者觀看興趣。8.2.5底部信息設(shè)計(jì)

手機(jī)端店鋪首頁(yè)底部信息PC端店鋪首頁(yè)底部信息

使用“新建參考線版面”命令建立參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具、“橢圓”工具、“多邊形”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。8.2.