電商視覺設計課件 第8章 手機端店鋪首頁設計

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

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

手機端首頁分類模塊（左）

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