第9章手機(jī)端店鋪首頁設(shè)計(jì)本章介紹：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展及普及，消費(fèi)者在手機(jī)端電商平臺進(jìn)行網(wǎng)購已經(jīng)成為日常生活的一部分。因此，手機(jī)端店鋪首頁的設(shè)計(jì)對于所有商家而言都至關(guān)重要，是電商視覺設(shè)計(jì)任務(wù)中的核心工作。本章針對手機(jī)端店鋪首頁的基本概念和設(shè)計(jì)規(guī)則等基礎(chǔ)知識進(jìn)行系統(tǒng)講解，并針對流行風(fēng)格與典型行業(yè)的手機(jī)端店鋪首頁進(jìn)行設(shè)計(jì)演練。通過對本章的學(xué)習(xí)，學(xué)生可以對手機(jī)端店鋪首頁的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識，了解手機(jī)端店鋪首頁的設(shè)計(jì)思路，掌握其制作方法。?了解手機(jī)端店鋪首頁的基本概念明確手機(jī)端店鋪首頁的設(shè)計(jì)規(guī)則知識目標(biāo)明確手機(jī)端店鋪首頁的設(shè)計(jì)思路掌握手機(jī)端店鋪首頁的制作方法能力目標(biāo)培養(yǎng)商業(yè)設(shè)計(jì)思維提高版式審美水平素養(yǎng)目標(biāo)9.1手機(jī)端店鋪概述設(shè)計(jì)手機(jī)端店鋪的必要性手機(jī)端店鋪與PC端店鋪的區(qū)別手機(jī)端店鋪的設(shè)計(jì)關(guān)鍵點(diǎn)隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展及普及，各大電商平臺相繼開發(fā)App，便于消費(fèi)者使用手機(jī)端進(jìn)行購物。因此，手機(jī)端店鋪的設(shè)計(jì)對于商家至關(guān)重要。設(shè)計(jì)精美的手機(jī)端店鋪9.1.1設(shè)計(jì)手機(jī)端店鋪的必要性1.設(shè)計(jì)尺寸不同手機(jī)端店鋪和PC端店鋪的設(shè)計(jì)尺寸大有不同，設(shè)計(jì)師不能將設(shè)計(jì)好的PC端店鋪圖片照搬到手機(jī)端店鋪，否則會產(chǎn)生界面混亂、顯示不全和效果不佳等問題。9.1.2手機(jī)端店鋪與PC端店鋪的區(qū)別手機(jī)端店鋪首頁P(yáng)C端店鋪首頁2.頁面布局不同由于設(shè)計(jì)尺寸不同，手機(jī)端店鋪與PC端店鋪的頁面布局也要有所區(qū)別，以此優(yōu)化消費(fèi)者在手機(jī)端店鋪的瀏覽體驗(yàn)。如在PC端店鋪使用左右布局的橫版海報(bào)，在手機(jī)端店鋪則需要將其設(shè)計(jì)成上下布局的豎版海報(bào)。手機(jī)端店鋪首頁P(yáng)C端店鋪首頁9.1.2手機(jī)端店鋪與PC端店鋪的區(qū)別3.構(gòu)成模塊不同手機(jī)端店鋪的構(gòu)成模塊劃分清晰，并且會根據(jù)設(shè)備特點(diǎn)加入更能吸引消費(fèi)者的模塊。如設(shè)計(jì)手機(jī)端店鋪首頁時(shí)，通常會在店招下方加入文字標(biāo)題、店鋪熱搜和店鋪會員等模塊，較PC端店鋪的模塊更加豐富。9.1.2手機(jī)端店鋪與PC端店鋪的區(qū)別手機(jī)端店鋪首頁

PC端店鋪首頁4.信息內(nèi)容不同由于手機(jī)端相比PC端尺寸縮小，手機(jī)端店鋪需要在有限的空間進(jìn)行設(shè)計(jì)，因此無法通過比較詳細(xì)的文字說明商品，而更適合通過精煉的文案介紹商品，并且對重要信息進(jìn)行加重處理或調(diào)整顏色以表示強(qiáng)調(diào)。手機(jī)端店鋪首頁信息內(nèi)容PC端店鋪首頁信息內(nèi)容9.1.2手機(jī)端店鋪與PC端店鋪的區(qū)別消費(fèi)者在手機(jī)端店鋪購物得到了便捷的體驗(yàn)，但對于設(shè)計(jì)師來說，設(shè)計(jì)手機(jī)端店鋪卻面臨著設(shè)備尺寸限制等挑戰(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)一平臺視覺進(jìn)行頁面統(tǒng)一合理運(yùn)用模塊9.1.3手機(jī)端店鋪的設(shè)計(jì)關(guān)鍵點(diǎn)9.2手機(jī)端店鋪首頁的設(shè)計(jì)規(guī)則輪播海報(bào)的設(shè)計(jì)規(guī)則優(yōu)惠券的設(shè)計(jì)規(guī)則分類模塊的設(shè)計(jì)規(guī)則商品展示的設(shè)計(jì)規(guī)則底部信息的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木家具手機(jī)端店鋪首頁手機(jī)端店鋪首頁的輪播海報(bào)是設(shè)計(jì)師正式進(jìn)行設(shè)計(jì)的模塊，其寬度為1200px，高度為120～2000px，支持.jpg或.png格式，大小不超過2MB。9.2.1輪播海報(bào)的設(shè)計(jì)規(guī)則輪播海報(bào)效果圖手機(jī)端店鋪首頁的優(yōu)惠券可以依據(jù)8.4節(jié)對PC端店鋪首頁的優(yōu)惠券的講解進(jìn)行設(shè)計(jì)。需要注意的是，優(yōu)惠券的設(shè)計(jì)尺寸、字號大小和色彩搭配要符合手機(jī)端的瀏覽規(guī)范。9.2.2優(yōu)惠券的設(shè)計(jì)規(guī)則優(yōu)惠券效果圖在手機(jī)端店鋪首頁中，消費(fèi)者的瀏覽方式是上下滑動(dòng)瀏覽，因此在設(shè)計(jì)時(shí)會盡量減少大規(guī)模的點(diǎn)擊交互，分類模塊通常保留在商品類型豐富的手機(jī)端店鋪首頁中。手機(jī)端店鋪首頁的分類模塊可以依據(jù)8.5節(jié)對PC端店鋪首頁的分類模塊的講解進(jìn)行設(shè)計(jì)。需要注意的是，在設(shè)計(jì)手機(jī)端店鋪首頁的分類模塊時(shí)可能會進(jìn)行簡化處理。9.2.3分類模塊的設(shè)計(jì)規(guī)則手機(jī)端首頁分類模塊（左）PC端首頁分類模（右）手機(jī)端店鋪首頁的商品展示可以依據(jù)8.6節(jié)對PC端店鋪首頁的商品展示的講解進(jìn)行設(shè)計(jì)。但由于面積有限，手機(jī)端店鋪首頁的商品展示無法像PC端的一樣以一行4列的形式展示商品，通常會以1行1列、1行2列和1行3列的形式對商品進(jìn)行展示。9.2.4商品展示的設(shè)計(jì)規(guī)則商品展示效果圖底部信息由于位于手機(jī)端店鋪首頁尾部，消費(fèi)者在瀏覽時(shí)會容易產(chǎn)生視覺疲憊。因此，手機(jī)端的大部分店鋪會在其首頁刪除底部信息。在個(gè)別保留底部信息的手機(jī)端店鋪首頁中，設(shè)計(jì)師會將PC端店鋪首頁的底部信息做元素簡化或顏色變化等處理，以將其設(shè)計(jì)為手機(jī)端店鋪首頁的底部信息，用于減輕消費(fèi)者瀏覽負(fù)擔(dān)，提高消費(fèi)者觀看興趣。9.2.5底部信息的設(shè)計(jì)規(guī)則手機(jī)端店鋪首頁底部信息PC端店鋪首頁底部信息使用“新建參考線版面”命令創(chuàng)建參考線版面，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創(chuàng)建剪貼蒙版”快捷鍵調(diào)整圖片顯示區(qū)域。9.2.6課堂案例—設(shè)計(jì)實(shí)木家具手機(jī)端店鋪首頁效果圖使用Photo