第5章手機(jī)端海報(bào)設(shè)計(jì)本章介紹：手機(jī)端海報(bào)設(shè)計(jì)和PC端海報(bào)設(shè)計(jì)一樣，也是電商視覺(jué)設(shè)計(jì)中的重要任務(wù)，手機(jī)端海報(bào)較PC端海報(bào)更便于傳播，精心設(shè)計(jì)的手機(jī)端海報(bào)能夠令消費(fèi)者快速了解平臺(tái)或店鋪的活動(dòng)信息以及促銷(xiāo)信息。本章針對(duì)手機(jī)端海報(bào)的基本概念、類(lèi)型與尺寸以及設(shè)計(jì)特點(diǎn)等知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的手機(jī)端海報(bào)進(jìn)行設(shè)計(jì)演練。通過(guò)對(duì)本章的學(xué)習(xí)，學(xué)生可以對(duì)手機(jī)端海報(bào)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，了解手機(jī)端海報(bào)的設(shè)計(jì)思路，掌握其制作方法。了解手機(jī)端海報(bào)的基本概念熟悉手機(jī)端海報(bào)的類(lèi)型與尺寸明確手機(jī)端海報(bào)的設(shè)計(jì)特點(diǎn)知識(shí)目標(biāo)明確手機(jī)端海報(bào)的設(shè)計(jì)思路掌握手機(jī)端海報(bào)的制作方法能力目標(biāo)培養(yǎng)人性化的設(shè)計(jì)意識(shí)提高精益求精的工作作風(fēng)素養(yǎng)目標(biāo)5.1手機(jī)端海報(bào)的基本概念手機(jī)端海報(bào)是用于在移動(dòng)設(shè)備上展示和推廣商品的圖像。手機(jī)端海報(bào)較PC端海報(bào)有著更加豐富的呈現(xiàn)類(lèi)型和表現(xiàn)形式。手機(jī)端海報(bào)手機(jī)端豎版海報(bào)手機(jī)端橫版海報(bào)5.2手機(jī)端海報(bào)的類(lèi)型與尺寸手機(jī)端豎版海報(bào)常作為平臺(tái)App閃屏頁(yè)、平臺(tái)App彈窗、手機(jī)端店鋪首頁(yè)和手機(jī)端店鋪專(zhuān)題頁(yè)出現(xiàn)。當(dāng)手機(jī)端豎版海報(bào)作為平臺(tái)App閃屏頁(yè)出現(xiàn)時(shí)，寬度為750px，高度為1624px。當(dāng)手機(jī)端豎版海報(bào)作為平臺(tái)App彈窗出現(xiàn)時(shí)，寬度建議在580px以內(nèi)，高度建議在1000px以內(nèi)。當(dāng)手機(jī)端豎版海報(bào)作為手機(jī)端店鋪首頁(yè)和手機(jī)端店鋪專(zhuān)題頁(yè)頭圖出現(xiàn)時(shí)，寬度為1200px，高度建議為120～2000px，可以使用3∶4的比例確定具體的高度。5.2.1手機(jī)端豎版海報(bào)手機(jī)端豎版海報(bào)手機(jī)端橫版海報(bào)常作為平臺(tái)App輪播圖、平臺(tái)App橫版廣告圖以及手機(jī)端平臺(tái)專(zhuān)題頁(yè)頭圖出現(xiàn)。手機(jī)端海報(bào)根據(jù)不同的展示位置，設(shè)計(jì)尺寸也會(huì)有所不同。手機(jī)端橫版海報(bào)寬度為750px，高度會(huì)根據(jù)不同的展示位置發(fā)生變化，可以根據(jù)不同的展示位置通過(guò)寬度和高度比例確定高度。當(dāng)手機(jī)端橫版海報(bào)作為平臺(tái)App輪播圖出現(xiàn)時(shí)，常用3:1比例。當(dāng)手機(jī)端橫版海報(bào)作為平臺(tái)App橫版廣告圖出現(xiàn)時(shí)，常用2:1比例。當(dāng)手機(jī)端橫版海報(bào)作為手機(jī)端平臺(tái)專(zhuān)題頁(yè)頭圖出現(xiàn)時(shí)，常用2:1比例。5.2.2手機(jī)端橫版海報(bào)手機(jī)端豎版海報(bào)5.3手機(jī)端海報(bào)的設(shè)計(jì)特點(diǎn)內(nèi)容更為簡(jiǎn)潔布局適配性強(qiáng)重視動(dòng)態(tài)效果由于手機(jī)屏幕相對(duì)較小，海報(bào)設(shè)計(jì)需要簡(jiǎn)潔明了，以確保信息能夠清晰地傳達(dá)給消費(fèi)者。5.3.1內(nèi)容更為簡(jiǎn)潔手機(jī)端海報(bào)設(shè)計(jì)師需要考慮不同手機(jī)設(shè)備的屏幕尺寸和分辨率，采用響應(yīng)式布局設(shè)計(jì)海報(bào)，海報(bào)適配的屏幕通常以豎屏或高度較低的橫屏為主，設(shè)計(jì)時(shí)需要確保海報(bào)在不同手機(jī)設(shè)備上都能夠呈現(xiàn)出最佳的效果。5.3.2布局適配性強(qiáng)手機(jī)端海報(bào)設(shè)計(jì)手機(jī)端海報(bào)時(shí)可添加一些與消費(fèi)者互動(dòng)的元素或者豐富的動(dòng)態(tài)效果等，使消費(fèi)者能夠與海報(bào)進(jìn)行互動(dòng)，增強(qiáng)消費(fèi)者的體驗(yàn)和參與感。5.3.3重視動(dòng)態(tài)效果手機(jī)端海報(bào)5.3.4課堂案例—設(shè)計(jì)家用電器手機(jī)端海報(bào)使用“圓柱體”和“細(xì)分曲面”工具，“擠壓”“內(nèi)部擠壓”和“循環(huán)/路徑切割”命令制作臺(tái)子和上方燈；使用“立方體”“圓柱體”“對(duì)稱”“擠壓”和“細(xì)分曲面”工具，“倒角”“內(nèi)部擠壓”“分裂”“擠壓”和“循環(huán)/路徑切割”命令制作商品；使用“合并項(xiàng)目”命令合并已制作完的模型和素材模型；使用“材質(zhì)”面板創(chuàng)建材質(zhì)并設(shè)置材質(zhì)參數(shù)；使用“渲染到圖像查看器”按鈕渲染圖像。效果圖使用Photoshop的繪圖工具、文字工具設(shè)計(jì)丹東草莓手機(jī)端海報(bào)。課堂練習(xí)—設(shè)計(jì)丹東草莓手機(jī)端海報(bào)效果圖使用Cinema4D的平面工具、造型工具、材質(zhì)工具及渲染工具和Photoshop的繪圖工具、文字工具設(shè)計(jì)美味茶飲手機(jī)端海報(bào)。課后習(xí)題—設(shè)計(jì)美味茶飲手機(jī)端海報(bào)效果圖第6章商品詳情頁(yè)設(shè)計(jì)本章介紹：商品詳情頁(yè)設(shè)計(jì)是電商視覺(jué)設(shè)計(jì)任務(wù)中的綜合型工作任務(wù)，精心設(shè)計(jì)的商品詳情頁(yè)能夠提升消費(fèi)者對(duì)商品的購(gòu)買(mǎi)欲望。本章針對(duì)商品詳情頁(yè)的基本概念和設(shè)計(jì)規(guī)則等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的商品詳情頁(yè)進(jìn)行設(shè)計(jì)演練。通過(guò)對(duì)本章的學(xué)習(xí)，學(xué)生可以對(duì)商品詳情頁(yè)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，了解商品詳情頁(yè)的設(shè)計(jì)思路，掌握其制作方法。了解商品詳情頁(yè)的基本概念明確商品詳情頁(yè)的設(shè)計(jì)規(guī)則知識(shí)目標(biāo)明確商品詳情頁(yè)的設(shè)計(jì)思路掌握商品詳情頁(yè)的制作方法能力目標(biāo)培養(yǎng)商業(yè)設(shè)計(jì)思維提高賣(mài)點(diǎn)提煉能力素養(yǎng)目標(biāo)6.1商品詳情頁(yè)概述商品詳情頁(yè)具有展現(xiàn)商品內(nèi)容、達(dá)成商品轉(zhuǎn)化的功能和作用。商品詳情頁(yè)的核心部分通常由商品焦點(diǎn)圖、賣(mài)點(diǎn)提煉、商品展示、細(xì)節(jié)展示、商品信息和其他模塊構(gòu)成。6.2商品焦點(diǎn)圖設(shè)計(jì)商品焦點(diǎn)圖的基本概念商品焦點(diǎn)圖的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木沙發(fā)商品焦點(diǎn)圖商品焦點(diǎn)圖即商品詳情頁(yè)中的商品Banner，類(lèi)似于店鋪首頁(yè)的輪播海報(bào)，用于令商品詳情頁(yè)中的商品更加吸引消費(fèi)者，更好地展示商品優(yōu)勢(shì)。6.2.1商品焦點(diǎn)圖的基本概念商品海報(bào)商品焦點(diǎn)圖可以根據(jù)適配平臺(tái)和尺寸分為兩類(lèi)，一類(lèi)是適配平臺(tái)以淘寶為代表的，寬度為750px的商品焦點(diǎn)圖；另一類(lèi)是適配平臺(tái)以京東和天貓為代表的，寬度為790px的商品焦點(diǎn)圖。兩者高度不限，通常建議為950px。這兩類(lèi)商品焦點(diǎn)圖的主標(biāo)題字號(hào)建議為60～70px，副標(biāo)題字號(hào)建議為40～50px，文字?jǐn)⑹鲎痔?hào)建議為25～30px。6.2.2商品焦點(diǎn)圖的設(shè)計(jì)規(guī)則使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具繪制基本圖形，使用“創(chuàng)建新的填充或調(diào)整圖層”按鈕為圖像校色。6.2.3課堂案例—設(shè)計(jì)實(shí)木沙發(fā)商品焦點(diǎn)圖效果圖賣(mài)點(diǎn)提煉的基本概念賣(mài)點(diǎn)提煉的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木沙發(fā)賣(mài)點(diǎn)提煉6.3賣(mài)點(diǎn)提煉設(shè)計(jì)賣(mài)點(diǎn)提煉即對(duì)商品特點(diǎn)和消費(fèi)者痛點(diǎn)的提煉，主要用于向消費(fèi)者展示商品獨(dú)特之處，令其產(chǎn)生購(gòu)買(mǎi)欲望。6.3.1賣(mài)點(diǎn)提煉的基本概念賣(mài)點(diǎn)提煉6.3.2賣(mài)點(diǎn)提煉的設(shè)計(jì)規(guī)則賣(mài)點(diǎn)提煉中的文本應(yīng)簡(jiǎn)短且具有說(shuō)服力，建議將其字號(hào)設(shè)置為30～40px，字體設(shè)置為黑體，賣(mài)點(diǎn)提煉中的圖標(biāo)應(yīng)醒目且和賣(mài)點(diǎn)呼應(yīng)。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具繪制基本圖形，使用“創(chuàng)建新的填充或調(diào)整圖層”按鈕為圖像校色。6.3.3課堂案例—設(shè)計(jì)實(shí)木沙發(fā)賣(mài)點(diǎn)提煉效果圖商品展示的基本概念商品展示的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木沙發(fā)商品展示6.4?商品展示設(shè)計(jì)商品展示即展示商品的內(nèi)容，通常一屏一賣(mài)點(diǎn)，進(jìn)一步實(shí)現(xiàn)展示商品優(yōu)勢(shì)、呈現(xiàn)商品功能的作用。6.4.1商品展示的基本概念商品展示6.4.2?商品展示的設(shè)計(jì)規(guī)則商品展示的設(shè)計(jì)規(guī)則與商品焦點(diǎn)圖的設(shè)計(jì)規(guī)則類(lèi)似。需要注意的是，因?yàn)樯唐氛故就ǔ０?～5張圖片，所以各圖片中商品的角度和背景既要有統(tǒng)一性又要有一定的區(qū)別，以免給消費(fèi)者帶來(lái)視覺(jué)疲勞。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具、“鋼筆”工具繪制基本圖形，使用“創(chuàng)建剪貼蒙版”快捷鍵實(shí)現(xiàn)新中式沙發(fā)商品展示。6.4.3課堂案例—設(shè)計(jì)實(shí)木沙發(fā)商品展示效果圖細(xì)節(jié)展示的基本概念細(xì)節(jié)展示的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木沙發(fā)細(xì)節(jié)展示6.5?細(xì)節(jié)展示設(shè)計(jì)細(xì)節(jié)展示即商品的細(xì)節(jié)放大圖，它將商品細(xì)節(jié)進(jìn)行最大限度的展示，可以使消費(fèi)者更加信任商品。6.5.1?細(xì)節(jié)展示的基本概念細(xì)節(jié)展示6.5.2?細(xì)節(jié)展示的設(shè)計(jì)規(guī)則細(xì)節(jié)展示在設(shè)計(jì)時(shí)不宜設(shè)計(jì)得太復(fù)雜，整體應(yīng)呈現(xiàn)簡(jiǎn)潔的效果。如果商品帶有背景，建議將背景設(shè)計(jì)為淺色，可以保證較好地展示商品細(xì)節(jié)。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具繪制基本圖形，使用“創(chuàng)建新的填充或調(diào)整圖層”按鈕為圖像校色，使用“創(chuàng)建剪貼蒙版”快捷鍵實(shí)現(xiàn)實(shí)木沙發(fā)細(xì)節(jié)展示。6.5.3課堂案例—設(shè)計(jì)實(shí)木沙發(fā)細(xì)節(jié)展示效果圖商品信息的基本概念商品信息的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木沙發(fā)商品信息6.6?商品信息設(shè)計(jì)商品信息即商品的真實(shí)數(shù)據(jù)。設(shè)計(jì)師需要將商品的尺寸、顏色等內(nèi)容充分展示給消費(fèi)者，幫助消費(fèi)者了解商品。6.6.1商品信息的基本概念商品信息6.6.2?商品信息的設(shè)計(jì)規(guī)則商品信息在設(shè)計(jì)時(shí)需要將大量的數(shù)據(jù)歸類(lèi)整理，并將數(shù)據(jù)以圖表的形式表現(xiàn)，令消費(fèi)者可以直觀地了解商品信息。使用“新建參考線”命令創(chuàng)建參考線，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“圓角矩形”工具、“直線”工具繪制基本圖形。6.6.3課堂案例—設(shè)計(jì)實(shí)木沙發(fā)商品信息效果圖其他模塊的基本概念其他模塊的設(shè)計(jì)規(guī)則課堂案例——設(shè)計(jì)實(shí)木沙發(fā)其他模塊6.7?其他模塊設(shè)計(jì)“質(zhì)量保證”即展示商品的相關(guān)證書(shū)，起到承諾商品質(zhì)量、增強(qiáng)消費(fèi)者信賴度的作用；“品牌實(shí)力”即展示所在店鋪的相關(guān)品牌故事，起到提升品牌氣勢(shì)、加深消費(fèi)者記憶的作用；“快遞售后”有時(shí)又稱為“買(mǎi)家須知”，包括快遞服務(wù)、退換流程、售后承諾等相關(guān)內(nèi)容，起到優(yōu)化消費(fèi)者購(gòu)買(mǎi)商品的體驗(yàn)、提高消費(fèi)者滿意度的作用。6.7.1?其他模塊的基本概念其他模塊6.7.2?其他模塊的設(shè)計(jì)規(guī)則其他模塊由于處于整個(gè)商品詳情頁(yè)接近尾部的位置，消費(fèi)者觀看時(shí)會(huì)產(chǎn)生一定的視覺(jué)疲憊感，因此在設(shè)計(jì)時(shí)一定要突出該模塊的重點(diǎn)，設(shè)計(jì)風(fēng)格以簡(jiǎn)潔、醒目為主。使