Photoshop CC網店美工全能一本通課件

項目簡介：隨著移動互聯網的發(fā)展及普及，消費者在手機端電商平臺進行網購已經成為了主流現象。因此，手機端店鋪首頁的設計對于所有商家而言都至關重要，是網店美工設計任務中的核心工作。本章針對手機端店鋪的基本概述和首頁模塊設計等基礎知識進行系統講解，并針對流行風格和典型行業(yè)的手機端店鋪首頁進行設計演練。通過本章的學習，讀者可以對手機端店鋪首頁的設計有一個系統的認識，并快速掌握手機端店鋪首頁的設計規(guī)范和制作方法，成功制作出具有強大購買力的手機端店鋪首頁。第7章手機端店鋪首頁設計課堂學習目標掌握手機端店鋪基本概述熟悉手機端店鋪首頁模塊設計7.1手機端店鋪基本概述手機端店鋪設計的必要性手機端與PC端店鋪設計的區(qū)別手機端店鋪設計的關鍵點

7.1.1手機端店鋪設計的必要性隨著移動互聯網的發(fā)展及普及，大眾使用移動設備上網的時間遠遠超過使用電腦設備。淘寶、京東、一條等各大電商平臺適應時代趨勢，相繼開發(fā)App，便于廣大消費者使用移動設備進行購物。由于移動設備有著方便靈活的特點，極大地滿足了消費者可以隨時隨地進行購物的需求。如今，消費者通過移動設備進行購物的數量不斷增多，甚至在重大節(jié)假日，通過手機端進行購物的消費者已經遠超越PC端。因此，手機端店鋪的設計與裝修對于所有商家而言都至關重要。

7.1.2手機端與PC端店鋪設計的區(qū)別在店鋪設計與裝修過程中，部分網店美工會把PC端店鋪的圖片直接運用到手機端店鋪中，這會產生尺寸不合適和呈現效果不理想等問題。手機端店鋪的設計看似簡單，實則大有名堂，對最終的商品成交起著關鍵作用。下面分別對手機端和PC端的區(qū)別進行介紹。

1.設計尺寸不同手機端店鋪和PC端店鋪的設計尺寸大不相同，網店美工不能將設計好的PC端店鋪圖片直接照搬到手機端店鋪，否則會引發(fā)界面混亂、顯示不全和呈現效果不佳等問題。以店鋪首頁為例，手機端店鋪首頁的寬度通常設計為1200像素，而PC端店鋪首頁的寬度一般設計為1920像素。7.1.2手機端與PC端店鋪設計的區(qū)別

2.頁面布局不同由于設計尺寸的不同，手機端店鋪與PC端店鋪的頁面布局也要有所區(qū)別，以此增強消費者對手機端店鋪的瀏覽體驗。例如，在PC端店鋪使用左右布局的橫版海報，而在手機端店鋪則需要設計成上下布局的豎版海報。7.1.2手機端與PC端店鋪設計的區(qū)別

3.構成模塊不同手機端的構成模塊劃分清晰，并且會根據設備特點加入更能吸引消費者的模塊。如店鋪首頁，手機端通常會在店招下方加入文字標題、店鋪熱搜和店鋪會員等模塊，較PC端內容更加豐富。7.1.2手機端與PC端店鋪設計的區(qū)別

4.信息內容不同:由于設計尺寸縮小，手機端店鋪需要在有限的空間內進行設計。因此相較于PC端店鋪，手機端無法通過比較詳細的文字說明商品，只會選擇更為重要的文案內容，并且對價格進行加重和調整顏色等處理以突出強調，令其更適合在手機端展示。7.1.2手機端與PC端店鋪設計的區(qū)別

7.1.3手機端店鋪設計的關鍵點消費者在手機端店鋪購物得到了便捷的體驗，但對于網店美工而言，設計手機端店鋪卻面臨著設備的設計尺寸有限等挑戰(zhàn)。因此在進行手機端店鋪設計與裝修時，應該掌握其以下4個設計關鍵點，才能事半功倍。1.符合瀏覽規(guī)范為了保證消費者在手機端購物的瀏覽體驗，設計時需要保證符合手機端的規(guī)范。如設計尺寸、字號大小和色彩搭配等都要按照手機端的設計規(guī)范進行，以避免消費者因瀏覽問題降低購物欲望。2.統一平臺視覺手機端店鋪設計雖然要根據手機端的特點進行調整，但也要注意與PC端店鋪的視覺進行統一呼應，不能令消費者有進入兩家不同店鋪的錯覺。因此兩者的設計均應保留相通的視覺元素，以提升品牌關聯性。

3.頁面視覺統一除了進行平臺與平臺之間的視覺統一，還需要保證頁面本身以及頁面之間的視覺統一。設計單張頁面時，整張頁面需要和諧統一，并且各個頁面之間也可以相互銜接，以促成更多交易。4.合理運用模塊手機端店鋪設計時不要為了豐富內容而加入大量模塊，而應根據店鋪特點和活動要求，合理使用。整體信息量要合適，如店鋪首頁多控制在6個屏幕以內，這樣不會顯得繁瑣雜亂，以便于消費者愉悅輕松地進行瀏覽。7.1.3手機端店鋪設計的關鍵點7.2手機端店鋪首頁模塊設計輪播海報設計優(yōu)惠券設計分類模塊設計商品展示設計底部信息設計模塊合并設計

7.2.1輪播海報設計手機端店鋪首頁的輪播海報是網店美工正式進行設計的模塊，其寬度為1200像素，高度為120~2000像素，支持jpg或png格式，大小不超過2MB。

下面為制作手機端家居網店首頁輪播海報的設計方法，在設計過程中，我們圍繞主體物雙人床進行創(chuàng)意。背景為室內場景圖，凸顯產品主題。色彩選取白色、桔黃色和深棕色，分別體現了整潔、溫馨和舒適。字體選用黑體呼應主題。7.2.1輪播海報設計

7.2.2優(yōu)惠券設計網店美工在進行手機端首頁的優(yōu)惠券設計時，設計尺寸、字號大小和色彩搭配等要符合手機端瀏覽規(guī)范。

7.2.2優(yōu)惠券設計下面為制作手機端家居網店首頁優(yōu)惠券的方法，在設計過程中，我們結合輪播海報，圍繞店鋪優(yōu)惠活動進行創(chuàng)意。將背景變?yōu)榧兩顑热菀鬃x。色彩選取中藍色、灰色和中黃色分別體現了清新、穩(wěn)重和舒適。優(yōu)惠信息以標簽的形式出現，具有直觀的特點。

7.2.3分類模塊設計在手機端店鋪中，消費者進行瀏覽使用的是上下滑動的方式，因此網店美工在移動端店鋪設計時應盡量減少大規(guī)模的點擊交互，所以分類模塊通常在商品類型豐富的PC端店鋪中進行保留，同時手機端首頁分類模塊的設計會進行簡化處理，以節(jié)約面積。

下面為制作手機端家居網店首頁分類模塊的方法，在設計過程中，我們結合輪播海報，圍繞店鋪產品分類進行創(chuàng)意。將背景變?yōu)榧兩?，令內容易讀。色彩延用優(yōu)惠券模塊中的配色。圖標采用了與家居相關的線性圖標呈現了簡約精致的特點。整體排版簡潔清晰。7.2.3分類模塊設計

7.2.4商品展示設計手機端店鋪首頁的商品展示由于面積有限，無法像PC端那樣一行4列的展示商品，通常會以1行1列、1行2列或1行3列的形式進行展示。當以1行1列展示商品時，可以做成單圖海報，其寬度為1200像素，高度為120~2000像素。當以1行2列或1行3列展示商品時，可以在模塊中的最上方加入Banner提升美感。Banner的寬度為1200像素，高度為376像素或591像素，支持jpg或png格式，大小不超過2MB。

下面為制作手機端家居網店首頁商品展示的方法，在設計過程中，我們結合輪播海報，圍繞店鋪熱銷產品進行創(chuàng)意。將背景變?yōu)榧兩蜐u變色，令內容易讀。色彩延用優(yōu)惠券模塊中的配色。整體排版整齊有序，一目了然。7.2.4商品展示設計

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

下面為制作手機端家居網店首頁底部信息的方法，在設計過程中，我們結合輪播海報，圍繞店鋪簡介進行創(chuàng)意。背景為產品實拍圖，凸顯網店經營方向。色彩沿用商品展示中的配色。7.2.5底部信息設計

7.2.6模塊合并設計制作完成各個模塊后，需要將模塊合并形成一張完整的店鋪首頁。下面為制作手機端家居網店首頁模塊合并的方法。在設計過程中，圍繞主體物頭戴式耳機進行創(chuàng)意。背景為漸變色、純色與圖片相結合的形式，增加多種元素實現點綴效果。色彩選取亮藍色、深紫色和玫紅色分別體現了科技、時尚和悅耳。字體選用方正粉絲天下簡體和黑體起到了呼應主題的作用。采用黃金比例分割的左右構圖表現和諧美感。圖標采用了與數碼產品相關的線性圖標呈現了簡約精致的特點。整體設計充滿特色，契合主題。7.3課堂實訓-手機端