電商設計電子課件

第8章手機端店鋪首頁設計本章介紹：隨著移動互聯(lián)網(wǎng)的發(fā)展及普及，消費者在手機端電商平臺進行網(wǎng)購已經(jīng)成為了主流現(xiàn)象。因此，手機端店鋪首頁的設計對于所有商家而言都至關(guān)重要，是電商設計任務中的核心工作。本章針對手機端店鋪的基本概述和首頁模塊設計等基礎知識進行系統(tǒng)講解，并針對流行風格與典型行業(yè)的手機端店鋪首頁進行設計演練。通過本章的學習，讀者可以對手機端店鋪首頁的設計有一個系統(tǒng)的認識，并快速掌握手機端店鋪首頁的設計規(guī)范和制作方法，成功制作出具有強大購買力的手機端店鋪首頁。了解手機端店鋪首頁的基本概念明確手機端店鋪首頁的模塊結(jié)構(gòu)學習目標8.1手機端店鋪基本概述手機端店鋪設計的必要性手機端與PC端店鋪區(qū)別手機端店鋪的設計關(guān)鍵點隨著移動互聯(lián)網(wǎng)的發(fā)展及普及，大眾使用移動設備上網(wǎng)的時間遠遠超過使用電腦設備。淘寶、京東、一條等各大電商平臺適應時代趨勢，相繼開發(fā)App便于廣大消費者使用移動設備進行購物。由于移動設備有著方便靈活的特點，極大地滿足了消費者可以隨時隨地進行購物的需求。設計精美的手機端店鋪8.1.1手機端店鋪設計的必要性1.設計尺寸不同手機端店鋪和電腦端店鋪的設計尺寸大有不同，網(wǎng)店美工人員不能將設計好的電腦端店鋪圖片直接照搬到手機端店鋪，否則會引發(fā)界面混亂、顯示不全和效果不佳等問題。以店鋪首頁為例，手機端首頁寬度為通常設計為1200像素，而電腦端店鋪的首頁寬度一般為1920像素。8.1.2手機端與PC端店鋪區(qū)別2.頁面布局不同由于設計尺寸的不同，手機端店鋪與PC端店鋪的布局也要有所區(qū)別，以此增強手機端店鋪的瀏覽體驗。如在PC端店鋪為左右布局的橫版海報，在手機端店鋪則需要設計成上下布局的豎版海報。

手機端店鋪首頁PC端店鋪首頁8.1.2手機端與PC端店鋪區(qū)別3.構(gòu)成模塊不同手機端的構(gòu)成模塊劃分清晰，并且會根據(jù)設備特點加入更能吸引消費者的模塊。如店鋪首頁，手機端通常會在店招下方加入文字標題、店鋪熱搜和店鋪會員等模塊，較PC端更加豐富。手機端店鋪首頁PC端店鋪首頁8.1.2手機端與PC端店鋪區(qū)別4.信息內(nèi)容不同:由于尺寸縮小，手機端店鋪需要在有限的空間進行設計。因此相較于PC端店鋪，手機端無法通過比較詳細的文字說明商品，只會選擇更為重要的文案內(nèi)容，并且對價格進行加重和調(diào)整顏色以做強調(diào)，令其更適合在手機端展示。

手機端店鋪首頁信息內(nèi)容PC端店鋪首頁信息內(nèi)容8.1.2手機端與PC端店鋪區(qū)別1.符合瀏覽規(guī)范為了保證消費者在手機端購物的的瀏覽體驗，設計時需要保證符合手機端的規(guī)范。如設計尺寸、字號大小、圖片尺寸和色彩搭配等都要按照手機端的規(guī)范進行，避免出現(xiàn)瀏覽問題，降低消費者購物欲望。2.統(tǒng)一平臺視覺設計手機端店鋪雖然要根據(jù)手機端的特點進行調(diào)整，但也要注意與PC端店鋪的視覺進行統(tǒng)一呼應，不能令消費者感到是進入了兩個不同的店鋪。因此應保留相通的視覺元素，提升品牌關(guān)聯(lián)性。8.1.3手機端店鋪的設計關(guān)鍵點3.進行頁面統(tǒng)一除了進行平臺與平臺之間的視覺統(tǒng)一，還需要保證頁面本身以及頁面之間的視覺統(tǒng)一。設計單張頁面時，整張頁面需要和諧統(tǒng)一，并且各個頁面之間也可以相互銜接，促成交易。4.合理運用模塊手機端店鋪設計時不要為了豐富內(nèi)容而加入大量模塊，應根據(jù)店鋪特點和活動要求，合理使用。整體信息量要合適，如首頁多控制在6個屏幕以內(nèi)，這樣不會顯得繁瑣雜亂，可以令消費者愉悅輕松地進行瀏覽。8.1.3手機端店鋪的設計關(guān)鍵點8.2手機端店鋪首頁設計輪播海報設計優(yōu)惠券設計分類模塊設計商品展示設計底部信息設計手機端店鋪首頁的寬度為1200像素，高度不限，其設計模塊可以根據(jù)商家不同需要和后臺裝修模塊進行組合變化。首頁的核心模塊通常由店招、文字標題、店鋪熱搜、輪播海報、優(yōu)惠券、分類模塊、商品展示、底部信息、排行榜和逛逛更多構(gòu)成。手機端店鋪首頁設計8.2手機端店鋪首頁設計

手機端店鋪的首頁輪播海報是網(wǎng)店美工人員正式進行設計的模塊，其寬度為1200像素，高度為120像素-2000像素，支持jpg或png格式，大小不超過2兆。8.2.1輪播海報設計輪播海報效果圖

手機端首頁的優(yōu)惠券可以依據(jù)5.2.3中PC端首頁優(yōu)惠券的講解進行設計。需要注意的是，設計尺寸、字號大小和色彩搭配要符合手機端瀏覽規(guī)范。8.2.2優(yōu)惠券設計輪播海報效果圖

在手機端店鋪中，消費者進行瀏覽的方式是上下滑動的方式，因此在設計時會盡量減少大規(guī)模的點擊交互，所以分類模塊通常在商品類型豐富的店鋪中進行保留。手機端首頁分類模塊的設計可以依據(jù)5.2.4中PC端首頁分類模塊的講解進行設計。需要注意的是，在手機端中的分類模塊設計有時會在設計上進行簡化處理，以節(jié)約面積。8.2.3分類模塊設計

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

PC端首頁分類模塊（右）月燁家居旗艦店手機端首頁的商品展示可以依據(jù)5.2.5中PC端首頁商品展示的講解進行設計。但由于面積有限，手機端首頁的商品展示無法向PC端那樣一行4列的展示商品，通常會以1行1列、1行2列和1行3列的形式進行展示，當以1行1列展示商品時，可以做成單圖海報，其寬度為1200像素，高度為120像素-2000像素。當以1行2列或1行3列展示商品時，頭部可加入Banner提升美感，Banner的寬度為1200像素，高度為376像素或591像素，支持jpg/png格式，大小不超過2兆。8.2.4商品展示設計手機端首頁商品展示效果8.2.4商品展示設計

底部信息由于位于頁面尾部，消費者在瀏覽時會容易產(chǎn)生視覺疲憊。因此，手機端的大部分店鋪會去除底部信息。在個別保留底部信息的手機端店鋪中，會將PC端首頁的底部信息做元素簡化或顏色變化等處理來進行設計，以減輕消費者瀏覽負擔、吸引消費者觀看興趣。8.2.5底部信息設計

手機端店鋪首頁底部信息PC端店鋪首頁底部信息

使用“新建參考線版面”命令建立參考線，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線”工具、“橢圓”工具、“多邊形”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。8.2.