移動端店鋪的視覺設(shè)計與裝修網(wǎng)店美工視覺設(shè)計實戰(zhàn)教程（全彩微課版第3版）第8章目錄Contents移動端店鋪首頁設(shè)計基礎(chǔ)移動端店鋪首頁設(shè)計8.28.1移動端商品詳情頁設(shè)計8.3實戰(zhàn)演練8.5移動端店鋪裝修8.48.1.1移動端店鋪首頁與PC端店鋪首頁的區(qū)別3尺寸對比移動端店鋪首頁一般要求頁面寬度為750像素，而PC端店鋪首頁的寬度為950像素。布局對比分類對比移動端店鋪首頁不但省略了邊角的活動模塊以及詳細(xì)的廣告文案，而且將PC端店鋪首頁的三欄圖片展示精簡為兩欄，并將海報中的文案、價格等信息通過加大文字、加深色彩等方式突出顯示，使其更適合移動端店鋪首頁的布局需求。移動端店鋪首頁追求更加精簡的內(nèi)容展示，不會使用過多的文字，常使用加粗文字的方式增加可讀性；而PC端店鋪首頁，則會使用較多文字內(nèi)容來說明商品的賣點、優(yōu)惠活動等信息。移動端店鋪首頁的分類模塊比較簡潔、清晰，常使用分類圖標(biāo)，而PC端店鋪首頁的分類信息則更詳細(xì)。內(nèi)容對比移動端店鋪首頁與PC端店鋪首頁的區(qū)別主要體現(xiàn)在尺寸、布局、內(nèi)容、分類4個方面。8.1.2移動端店鋪首頁模塊的組成4ABCDE圖文類模塊營銷互動類模塊寶貝類模塊視頻類模塊LiveCard模塊8.1.3移動端店鋪首頁設(shè)計的注意事項5移動端店鋪裝修通常會受到移動端設(shè)備屏幕大小的限制，由于店鋪首頁能承載的信息有限，所以網(wǎng)店美工在設(shè)計移動端店鋪首頁時，還需注意以下4個方面。四三二一注重感官的習(xí)慣性與舒適性合理控制頁面的長度把握頁面整體內(nèi)容與PC端的視覺統(tǒng)一目錄Contents移動端店鋪首頁設(shè)計基礎(chǔ)移動端店鋪首頁設(shè)計8.28.1移動端商品詳情頁設(shè)計8.3實戰(zhàn)演練8.5移動端店鋪裝修8.48.2.1輪播海報設(shè)計7移動端的輪播海報用于展示多商品、多主題，要求寬度為1200像素、高度為600像素~2000像素，文件大小不超過2MB，數(shù)量在1~4張，格式為JPG或PNG。下面制作“沁心生鮮”移動端店鋪的輪播海報，其具體操作步驟如下。繪制陰影輸入文本123為文字創(chuàng)建剪切蒙版8.2.1輪播海報設(shè)計8最終效果54涂抹裝飾矩形調(diào)整圖像位置繪制底紋768.2.2單圖海報設(shè)計9單圖海報用于展示單商品、單個主題，要求寬度為1200像素、高度為120像素~2000像素，文件大小不超過2MB，數(shù)量在1~4張，格式為JPG或PNG。下面制作“沁心生鮮”移動端店鋪單圖海報，其具體操作步驟如下。3背景圖片模糊部分圖像12置入圖片8.2.2單圖海報設(shè)計10補足陰影54設(shè)置添加漸變疊加參數(shù)繪制陰影并調(diào)整繪制圓角矩形768.2.2單圖海報設(shè)計118最終效果設(shè)置漸變疊加和投影參數(shù)98.2.3優(yōu)惠券設(shè)計12與PC端相比，移動端優(yōu)惠券的位置更加顯眼，引流效果更佳，并且在尺寸要求上也不嚴(yán)格，可以根據(jù)店鋪首頁整體設(shè)計來決定。下面制作“沁心生鮮”移動端店鋪的優(yōu)惠券，其具體操作步驟如下。12繪制矩形創(chuàng)建剪貼蒙版輸入文本38.2.3優(yōu)惠券設(shè)計13564繪制垂直虛線制作其他兩張優(yōu)惠券繪制矩形并置入圖片設(shè)置投影參數(shù)78.2.4商品分類設(shè)計14與PC端相比，移動端首頁的商品分類設(shè)計其字體大小更大，分類板塊更加簡潔、數(shù)量更少，尺寸也無嚴(yán)格要求，只需寬度在1200像素以內(nèi)即可。下面制作“沁心生鮮”移動端店鋪的分類設(shè)計，其具體操作步驟如下。輸入文字12繪制矩形3繪制矩形和正圓8.2.4商品分類設(shè)計154“生肉蛋禽”分類最終效果56制作其余分類8.2.5商品展示圖設(shè)計16為了更多地展示店鋪內(nèi)的熱賣商品、上新商品等，可在店鋪首頁添加商品展示圖。要求寬度為1200像素，支持JPG和PNG格式。下面制作“沁心生鮮”移動端店鋪的商品展示圖設(shè)計，其具體操作步驟如下。13輸入文本設(shè)置漸變參數(shù)2復(fù)制投影效果輸入文本48.2.5商品展示圖設(shè)計17576修改文本內(nèi)容復(fù)制圖層組并調(diào)整位置繪制圓角矩形最終效果8目錄Contents移動端店鋪首頁設(shè)計基礎(chǔ)移動端店鋪首頁設(shè)計8.28.1移動端商品詳情頁設(shè)計8.3實戰(zhàn)演練8.5移動端店鋪裝修8.48.3.1移動端商品詳情頁的特征19由于移動端與PC端的差異，以及使用移動端購物的特點，移動端商品詳情頁總體上呈現(xiàn)以下4個特征。尺寸更小賣點更加精練頁面切換不便頁面文件的容量更小8.3.2移動端商品詳情頁的設(shè)計要點20圖片的大小不能太大，否則容易出現(xiàn)加載緩慢的問題，影響消費者的購物體驗，此時應(yīng)在保證圖片清晰度的同時壓縮圖片大?。恍枰⒁獾氖?，商品細(xì)節(jié)圖不能太小，應(yīng)盡量保證清晰度，讓消費者能夠看見詳細(xì)的商品細(xì)節(jié)，以此產(chǎn)生購買欲望。圖片圖片里的文字、商品信息和商品描述文字都不能太小，否則容易導(dǎo)致閱讀困難，無法向消費者傳達商品信息。文字合理控制頁面展示的信息量，省略一些無關(guān)緊要的內(nèi)容，減少消費者瀏覽的時間，防止消費者因瀏覽時間過長降低對商品的好感度。商品設(shè)計要點8.3.3設(shè)計移動端商品詳情頁21在進行模塊裝修時，網(wǎng)店美工要先進入裝修頁面，選擇并添加想要的模塊，并在右側(cè)模塊面板上對圖片、文本、視頻、鏈接等進行編輯，即可完成裝修。下面我們以裝修輪播圖海報為例，介紹模塊裝修的方法，其具體操作步驟如下。21涂抹交界處繪制光線效果繪制圓角矩形焦點圖效果348.3.3設(shè)計移動端商品詳情頁2265信息展示圖創(chuàng)建剪貼蒙版賣點說明圖178.3.3設(shè)計移動端商品詳情頁238創(chuàng)建剪貼蒙版最終效果目錄Contents移動端店鋪首頁設(shè)計基礎(chǔ)移動端店鋪首頁設(shè)計8.28.18.3實戰(zhàn)演練8.5移動端店鋪裝修8.4移動端商品詳情頁設(shè)計8.4.1移動端店鋪首頁裝修25“沁心生鮮”移動端店鋪設(shè)計完成后，便需要先裝修店鋪首頁。網(wǎng)店美工在裝修時，要先進入裝修頁面，選擇并添加想要的模塊，并在右側(cè)模塊面板上編輯圖片、文本、視頻、鏈接等，其具體操作步驟如下。選擇“輪播圖海報”模塊21單擊“裝修頁面”按鈕8.4.1移動端店鋪首頁裝修263打開對話框4裝修效果單圖海報裝修效果58.4.2移動端店鋪商品詳情頁裝修27網(wǎng)店美工裝修商品詳情頁時，要先發(fā)布對應(yīng)的商品，進行相應(yīng)操作后才能裝修詳情頁，其具體操作步驟如下。1調(diào)整圖片順序詳情頁裝修效果2目錄Contents移動端店鋪首頁設(shè)計基礎(chǔ)移動端店鋪首頁設(shè)計8.28.18.3實戰(zhàn)演練8.5移動端店鋪裝修8.4移動端商品詳情頁設(shè)計8.5實戰(zhàn)演練—制作茶葉店鋪移動端首頁2901020304添加商品圖片，添加投影通過形狀、圖像和文字的搭配，制作優(yōu)惠券和商品展示模塊輸入促銷文本，添加裝飾通過置入素材制作背景1.?設(shè)計思路8.5實戰(zhàn)演練—制作茶葉店鋪移動端首頁30使用“投影”圖層樣式添加商品的投影。1使用“橢圓工具”繪制優(yōu)惠券形狀；使用“剪貼蒙版”命令美化優(yōu)惠券；使用“橫排文字工具”輸入文本。2使用“圓角矩形工具”繪制商品展示區(qū)域。32.?知識要點8.5實戰(zhàn)演練—制作茶葉店鋪移動端首頁313.操作步驟以下為茶