電商視覺設(shè)計(jì)課件 第8章 手機(jī)端店鋪首頁設(shè)計(jì)

第8章手機(jī)端店鋪首頁設(shè)計(jì)本章介紹：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展與普及，消費(fèi)者在手機(jī)端電商平臺(tái)進(jìn)行網(wǎng)購已經(jīng)成為主流。因此，手機(jī)端店鋪首頁的設(shè)計(jì)對于所有商家而言都至關(guān)重要，是電商視覺設(shè)計(jì)任務(wù)中的核心工作。本章針對手機(jī)端店鋪首頁的基本概念和模塊結(jié)構(gòu)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對流行風(fēng)格與典型行業(yè)的手機(jī)端店鋪首頁進(jìn)行設(shè)計(jì)演練。通過本章的學(xué)習(xí)，讀者可以對手機(jī)端店鋪首頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握手機(jī)端店鋪首頁的設(shè)計(jì)規(guī)范和制作方法，成功制作出具有強(qiáng)大購買力的手機(jī)端店鋪首頁。?了解手機(jī)端店鋪首頁的基本概念明確手機(jī)端店鋪首頁的模塊結(jié)構(gòu)知識(shí)目標(biāo)明確手機(jī)端店鋪首頁的設(shè)計(jì)思路掌握手機(jī)端店鋪首頁的制作方法能力目標(biāo)培養(yǎng)良好的手機(jī)端店鋪首頁設(shè)計(jì)的操作習(xí)慣培養(yǎng)對手機(jī)端店鋪首頁的審美鑒賞能力培養(yǎng)對手機(jī)端店鋪首頁的設(shè)計(jì)創(chuàng)意能力素質(zhì)目標(biāo)8.1手機(jī)端店鋪基本概述手機(jī)端店鋪設(shè)計(jì)的必要性手機(jī)端與PC端店鋪設(shè)計(jì)的區(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)超過使用電腦設(shè)備。淘寶、京東、一條等電商平臺(tái)適應(yīng)時(shí)代趨勢，相繼開發(fā)了App極大地滿足了廣大消費(fèi)者使用移動(dòng)設(shè)備隨時(shí)隨地網(wǎng)絡(luò)購物的需求。由于移動(dòng)設(shè)備有著方便靈活的特點(diǎn)，消費(fèi)者通過移動(dòng)設(shè)備網(wǎng)絡(luò)購物的數(shù)量不斷增多，甚至在重大節(jié)假日，通過手機(jī)端進(jìn)行購物的消費(fèi)者已經(jīng)遠(yuǎn)超越PC端。因此，手機(jī)端店鋪的設(shè)計(jì)與裝修對于所有商家而言都至關(guān)重要。設(shè)計(jì)精美的手機(jī)端店鋪8.1.1手機(jī)端店鋪設(shè)計(jì)的必要性1.設(shè)計(jì)尺寸不同手機(jī)端店鋪和電腦端店鋪的設(shè)計(jì)尺寸大有不同，電商視覺設(shè)計(jì)師不能將設(shè)計(jì)好的PC端店鋪圖片直接照搬到手機(jī)端店鋪，否則會(huì)引發(fā)界面混亂、顯示不全和效果不佳等問題。8.1.2手機(jī)端與PC端店鋪區(qū)別手機(jī)端店鋪首頁P(yáng)C端店鋪首頁2.頁面布局不同由于設(shè)計(jì)尺寸的不同，手機(jī)端店鋪與PC端店鋪的頁面布局也會(huì)有所區(qū)別，以此增強(qiáng)消費(fèi)者在手機(jī)端店鋪的瀏覽體驗(yàn)。例如，在PC端店鋪為左右布局的橫版海報(bào)，在手機(jī)端店鋪則需要設(shè)計(jì)成上下布局的豎版海報(bào)。手機(jī)端店鋪首頁8.1.2手機(jī)端與PC端店鋪區(qū)別PC端店鋪首頁3.模塊構(gòu)成不同手機(jī)端的模塊構(gòu)成劃分清晰，并且會(huì)根據(jù)設(shè)備特點(diǎn)加入更能吸引消費(fèi)者的模塊。例如，店鋪首頁中，手機(jī)端通常會(huì)在店招下方加入文字標(biāo)題、店鋪熱搜和店鋪會(huì)員等模塊，較PC端更加豐富。手機(jī)端店鋪首頁

8.1.2手機(jī)端與PC端店鋪區(qū)別PC端店鋪首頁4.信息內(nèi)容不同由于尺寸縮小，手機(jī)端店鋪需要在有限的空間內(nèi)進(jìn)行設(shè)計(jì)。因此相較于PC端店鋪，手機(jī)端無法通過比較詳細(xì)的文字說明商品，只會(huì)選擇更精練的文案內(nèi)容，并且對價(jià)格的字體進(jìn)行加粗和調(diào)整顏色，以強(qiáng)調(diào)價(jià)格，令其更適合在手機(jī)端展示。手機(jī)端店鋪首頁信息內(nèi)容8.1.2手機(jī)端與PC端店鋪區(qū)別PC端店鋪首頁信息內(nèi)容電商視覺設(shè)計(jì)師面臨著手機(jī)端店鋪設(shè)計(jì)尺寸小等挑戰(zhàn)。因此在進(jìn)行手機(jī)端店鋪設(shè)計(jì)時(shí)，電商視覺設(shè)計(jì)師應(yīng)該掌握其設(shè)計(jì)關(guān)鍵點(diǎn)，才能事半功倍，下面分別講解手機(jī)端店鋪的4個(gè)設(shè)計(jì)關(guān)鍵點(diǎn)。符合瀏覽規(guī)范統(tǒng)一平臺(tái)視覺進(jìn)行頁面統(tǒng)一合理運(yùn)用模塊8.1.3手機(jī)端店鋪設(shè)計(jì)的關(guān)鍵點(diǎn)8.2手機(jī)端店鋪首頁設(shè)計(jì)輪播海報(bào)設(shè)計(jì)優(yōu)惠券設(shè)計(jì)分類模塊設(shè)計(jì)商品展示設(shè)計(jì)底部信息設(shè)計(jì)應(yīng)用案例——設(shè)計(jì)簡約家具手機(jī)端店鋪首頁手機(jī)端店鋪首頁的輪播海報(bào)是電商視覺設(shè)計(jì)師正式進(jìn)行設(shè)計(jì)的模塊，其寬度為1200像素，高度為120像素～2000像素，支持.jpg或.png格式，大小不超過2兆。8.2.1輪播海報(bào)設(shè)計(jì)輪播海報(bào)效果圖手機(jī)端店鋪首頁的優(yōu)惠券可以依據(jù)5.2.3節(jié)中PC端首頁優(yōu)惠券的方法進(jìn)行設(shè)計(jì)。需要注意的是，設(shè)計(jì)尺寸、字號(hào)大小和色彩搭配等要符合手機(jī)端瀏覽規(guī)范。8.2.2優(yōu)惠券設(shè)計(jì)優(yōu)惠券效果圖在手機(jī)端店鋪中，消費(fèi)者進(jìn)行瀏覽時(shí)通常采用上下滑動(dòng)的方式，因此電商視覺設(shè)計(jì)師在設(shè)計(jì)時(shí)應(yīng)盡量減少大規(guī)模的點(diǎn)擊交互，所以分類模塊通常在商品類型豐富的店鋪中進(jìn)行保留。手機(jī)端首頁分類模塊的設(shè)計(jì)可以依據(jù)5.2.4節(jié)中PC端首頁分類模塊的方法進(jìn)行設(shè)計(jì)。需要注意的是，在手機(jī)端中的分類模塊有時(shí)會(huì)在設(shè)計(jì)上進(jìn)行簡化處理，以節(jié)約面積。8.2.3分類模塊設(shè)計(jì)

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

PC端首頁分類模塊（右）月燁家居旗艦店手機(jī)端店鋪首頁的商品展示可以依據(jù)5.2.5節(jié)中PC端首頁商品展示的講解進(jìn)行設(shè)計(jì)。但由于設(shè)計(jì)尺寸有限，手機(jī)端店鋪首頁的商品展示無法像PC端那樣一行4列，通常會(huì)以1行1列、1行2列和1行3列的形式進(jìn)行展示。8.2.4商品展示設(shè)計(jì)商品展示效果圖由于底部信息位于店鋪首頁的尾部，消費(fèi)者在瀏覽該模塊時(shí)會(huì)容易產(chǎn)生視覺疲憊。因此，手機(jī)端的大部分店鋪會(huì)去除底部信息。在個(gè)別保留底部信息的手機(jī)端店鋪中，會(huì)將PC端店鋪首頁的底部信息做內(nèi)容簡化或顏色變化等處理，以吸引消費(fèi)者觀看興趣、減輕消費(fèi)者瀏覽負(fù)擔(dān)。8.2.5底部信息設(shè)計(jì)手機(jī)端店鋪首頁底部信息PC端店鋪首頁底部信息使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具、“橢圓”工具、“多邊形”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。8.2.6應(yīng)用案例——設(shè)計(jì)簡約家具手機(jī)端店鋪首頁效果圖使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”“圓角矩形”“直線”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“添加圖層蒙版”命令調(diào)整圖片顯示區(qū)域。課堂實(shí)訓(xùn)——設(shè)計(jì)數(shù)碼產(chǎn)