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