第9章手機端店鋪首頁設計本章介紹：隨著移動互聯網的發展及普及，消費者在手機端電商平臺進行網購已經成為日常生活的一部分。因此，手機端店鋪首頁的設計對于所有商家而言都至關重要，是電商視覺設計任務中的核心工作。本章針對手機端店鋪首頁的基本概念和設計規則等基礎知識進行系統講解，并針對流行風格與典型行業的手機端店鋪首頁進行設計演練。通過對本章的學習，學生可以對手機端店鋪首頁的設計有一個系統的認識，了解手機端店鋪首頁的設計思路，掌握其制作方法。?了解手機端店鋪首頁的基本概念明確手機端店鋪首頁的設計規則知識目標明確手機端店鋪首頁的設計思路掌握手機端店鋪首頁的制作方法能力目標培養商業設計思維提高版式審美水平素養目標9.1手機端店鋪概述設計手機端店鋪的必要性手機端店鋪與PC端店鋪的區別手機端店鋪的設計關鍵點隨著移動互聯網的發展及普及，各大電商平臺相繼開發App，便于消費者使用手機端進行購物。因此，手機端店鋪的設計對于商家至關重要。設計精美的手機端店鋪9.1.1設計手機端店鋪的必要性1.設計尺寸不同手機端店鋪和PC端店鋪的設計尺寸大有不同，設計師不能將設計好的PC端店鋪圖片照搬到手機端店鋪，否則會產生界面混亂、顯示不全和效果不佳等問題。9.1.2手機端店鋪與PC端店鋪的區別手機端店鋪首頁PC端店鋪首頁2.頁面布局不同由于設計尺寸不同，手機端店鋪與PC端店鋪的頁面布局也要有所區別，以此優化消費者在手機端店鋪的瀏覽體驗。如在PC端店鋪使用左右布局的橫版海報，在手機端店鋪則需要將其設計成上下布局的豎版海報。手機端店鋪首頁PC端店鋪首頁9.1.2手機端店鋪與PC端店鋪的區別3.構成模塊不同手機端店鋪的構成模塊劃分清晰，并且會根據設備特點加入更能吸引消費者的模塊。如設計手機端店鋪首頁時，通常會在店招下方加入文字標題、店鋪熱搜和店鋪會員等模塊，較PC端店鋪的模塊更加豐富。9.1.2手機端店鋪與PC端店鋪的區別手機端店鋪首頁

PC端店鋪首頁4.信息內容不同由于手機端相比PC端尺寸縮小，手機端店鋪需要在有限的空間進行設計，因此無法通過比較詳細的文字說明商品，而更適合通過精煉的文案介紹商品，并且對重要信息進行加重處理或調整顏色以表示強調。手機端店鋪首頁信息內容PC端店鋪首頁信息內容9.1.2手機端店鋪與PC端店鋪的區別消費者在手機端店鋪購物得到了便捷的體驗，但對于設計師來說，設計手機端店鋪卻面臨著設備尺寸限制等挑戰。因此在進行手機端店鋪設計時，設計師應該掌握其設計關鍵點，才能事半功倍，下面分別講解手機端店鋪的4個設計關鍵點。符合瀏覽規范統一平臺視覺進行頁面統一合理運用模塊9.1.3手機端店鋪的設計關鍵點9.2手機端店鋪首頁的設計規則輪播海報的設計規則優惠券的設計規則分類模塊的設計規則商品展示的設計規則底部信息的設計規則課堂案例——設計實木家具手機端店鋪首頁手機端店鋪首頁的輪播海報是設計師正式進行設計的模塊，其寬度為1200px，高度為120～2000px，支持.jpg或.png格式，大小不超過2MB。9.2.1輪播海報的設計規則輪播海報效果圖手機端店鋪首頁的優惠券可以依據8.4節對PC端店鋪首頁的優惠券的講解進行設計。需要注意的是，優惠券的設計尺寸、字號大小和色彩搭配要符合手機端的瀏覽規范。9.2.2優惠券的設計規則優惠券效果圖在手機端店鋪首頁中，消費者的瀏覽方式是上下滑動瀏覽，因此在設計時會盡量減少大規模的點擊交互，分類模塊通常保留在商品類型豐富的手機端店鋪首頁中。手機端店鋪首頁的分類模塊可以依據8.5節對PC端店鋪首頁的分類模塊的講解進行設計。需要注意的是，在設計手機端店鋪首頁的分類模塊時可能會進行簡化處理。9.2.3分類模塊的設計規則手機端首頁分類模塊（左）PC端首頁分類模（右）手機端店鋪首頁的商品展示可以依據8.6節對PC端店鋪首頁的商品展示的講解進行設計。但由于面積有限，手機端店鋪首頁的商品展示無法像PC端的一樣以一行4列的形式展示商品，通常會以1行1列、1行2列和1行3列的形式對商品進行展示。9.2.4商品展示的設計規則商品展示效果圖底部信息由于位于手機端店鋪首頁尾部，消費者在瀏覽時會容易產生視覺疲憊。因此，手機端的大部分店鋪會在其首頁刪除底部信息。在個別保留底部信息的手機端店鋪首頁中，設計師會將PC端店鋪首頁的底部信息做元素簡化或顏色變化等處理，以將其設計為手機端店鋪首頁的底部信息，用于減輕消費者瀏覽負擔，提高消費者觀看興趣。9.2.5底部信息的設計規則手機端店鋪首頁底部信息PC端店鋪首頁底部信息使用“新建參考線版面”命令創建參考線版面，使用“置入嵌入對象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“橢圓”工具和“圓角矩形”工具繪制基本圖形，使用“添加圖層樣式”按鈕為圖形添加效果，使用“創建剪貼蒙版”快捷鍵調整圖片顯示區域。9.2.6課堂案例—設計實木家具手機端店鋪首頁效果圖使用Photoshop的繪圖工具、文字工具設計護膚品手機端店鋪首頁。課堂練習—設計護膚品手機端店鋪首頁效果圖使用Photoshop的繪圖工具、文字工具設計數碼產品手機端店鋪首頁。課后習題—設計數碼產品手機端店鋪首頁效果圖第10章商品視頻拍攝與制作本章介紹：本章將詳細介紹商品視頻的拍攝與制作方法，包括商品視頻的基礎知識、商品視頻拍攝和商品視頻制作等。通過對本章的學習，學生可以掌握網店商品視頻的拍攝與制作方法，使商品視頻更容易吸引消費者的注意。?熟悉商品視頻的基礎知識熟悉商品視頻的拍攝流程知識目標熟練使用PremiereProCC2020掌握商品視頻的制作流程掌握運用后期技巧提升商品視頻質量的方法能力目標培養對視頻拍攝與制作的興趣培養商業思維素養目標10.1商品視頻的基礎知識視頻概述商品視頻的類型10.1.1視頻概述1．視頻的概念一系列的靜態圖像以電信號的方式加以捕捉、記錄、處理、存儲、傳送與重現等各種技術，然后當這些連續的靜態圖像以每秒超過24幀以上的速率變化時，由于人眼的視覺暫留效應，無法辨別單幅的靜態圖像，就會產生動態畫面的視覺效果，這樣的動態畫面叫作視頻。10.1.1視頻概述2．視頻的格式每個品牌的相機的視頻格式各有不同，它們都有各自固定的視頻格式，可以在后期制作中對視頻格式進行轉碼。佳能相機采用了MOV格式，松下和索尼相機則采用了AVCHD格式。尼康的部分相機的視頻格式為AVI，而其推出的部分新款相機也采用了MOV格式。10.1.1視頻概述3．視頻的分辨率與幀速率（1）分辨率分辨率反映了視頻的畫面尺寸，分辨率不同造成畫面尺寸的不同。分辨率越高，清晰度就越高，視頻所占用的內存空間就越大。分辨率10.1.1視頻概述（2）幀速率使用攝像機和帶有錄像功能的數碼相機時，不僅能夠控制視頻的分辨率，還能選擇每秒的幀數，也就是幀速率（framespersecond，FPS）。幀速率是指每秒刷新圖片的幀數（幀每秒），也可以理解為圖形處理器每秒能夠刷新的次數。不同的錄制設備會輸出不同的幀速率，常用的幀速率有24幀/秒、25幀/秒、30幀/秒、50幀/秒、60幀/秒等，如電影的幀速率標準為24幀/秒，電視劇的幀速率標準為25幀/秒、30幀/秒。每秒播放的畫面數量越多，視頻中的動作就會越流暢。1．主圖視頻主圖視頻主要應用在商品詳情頁中的主圖位置，用于展示商品的特點和賣點。在制作該視頻時，建議時長為5～60s，建議寬高比為16:9、1:1、3:4，建議尺寸為750px×1000px或以上。10.1.2商品視頻的類型主圖視頻10.2商品視頻拍攝商品視頻拍攝器材的準備商品視頻的拍攝流程課堂案例——拍攝手沖咖啡的主圖視頻10.2.1商品視頻拍攝器材的準備

1．拍攝設備（1）攝像機專業級高清攝像機對視頻的壓縮較小，還原度較高，使用它可以拍攝出高質量的視頻，但是專業級高清攝像機價格昂貴、體積大、不便于攜帶，如果不是專門從事視頻拍攝的公司，不建議購買和使用這種攝像機。家用數碼攝像機（digitalvideo，DV）價格適中、體積小、使用方便，拍攝的視頻清晰度也不錯。專業級高清攝像機家用DV10.2.1商品視頻拍攝器材的準備（2）手機使用手機拍攝視頻雖然方便，可是無法進行變焦，通過放大和縮小功能調節畫面時畫面質量會受到影響。并且攝影師在前后移動拍攝視頻時，容易出現廣角變形或穿幫等問題，并且手機不容易控制，會影響商品的視覺呈現效果。10.2.1商品視頻拍攝器材的準備（3）單反相機目前的單反相機不僅提供優質的視頻拍攝功能，并且在快捷鍵上放置了視頻檔位，操作變得非常方便。單反相機還可以更換不同的鏡頭，比如配合較大光圈的鏡頭時很容易產生好看的景深效果，使畫面賞心悅目。數碼單反相機10.2.1商品視頻拍攝器材的準備

2．輔助設備（1）變焦桿變焦桿減少了人手直接操作鏡頭時引起的畫面晃動，是使用單反相機拍攝視頻時用來控制景深效果的必備配件。使用時，將變焦桿套在相機鏡頭的變焦環上，通過調節變焦桿進行對焦可以使對焦操作更流暢。同時變焦桿也可作為一個參照物，有助于攝影師記住畫面清晰或模糊時變焦桿所處的位置，從而準確對焦。變焦桿10.2.1商品視頻拍攝器材的準備（2）三腳架挑選三腳架時要了解圖片攝影三腳架與視頻三腳架的區別。圖片攝影三腳架自重較輕，承重也較輕，云臺可以翻轉，相機上下轉動時不平滑。而視頻三腳架自重和承重都較重，備有手柄，并帶有阻尼，讓相機可以進行平滑的上下左右轉動。另外，視頻三腳架通常采用的是可分離式的云臺和腳架，以便攝影師可以在三腳架上使用不同的云臺。三腳架10.2.1商品視頻拍攝器材的準備（3）支撐系統當單反相機外掛的輔助設備比較多時，這些設備加大了相機的重量，因此僅靠手持單反相機拍攝視頻的話，就會產生晃動，而且單反相機的大畫幅與淺景深會放大這種不穩定感，大大降低了視頻的品質。因此，需要一個支撐系統將相機和其他輔助設備連接到一起，從而起到分攤整套設備的重量的作用。手柄與肩托設計可以保證手持拍攝的穩定與舒適度。支撐系統10.2.1商品視頻拍攝器材的準備（4）U型手提支架當低位拍攝時，可以將相機固定到U型手提支架上，便于多角度的拍攝，讓跟攝更加輕松自如。U型手提支架的頂部配有熱靴，可以放置麥克風與閃光燈等。還可以將手機固定在熱靴上，通過USB連接至相機上作為外部監視器對拍攝畫面進行監視。也可以將U型手提支架固定到三腳架上。U型手提支架10.2.1商品視頻拍攝器材的準備（5）腳輪腳輪是安裝在三腳架底部的，可以讓三腳架方便自如地移動的輔助工具。拍攝運動鏡頭時，可以使用腳輪來提高三腳架的穩定性。腳輪10.2.1商品視頻拍攝器材的準備（6）滑軌小車滑軌小車是一種便攜式裝備，它擺脫了傳統軌道及軌道車系統的困擾及約束，也沒有滑行長度的限制，滑動軌跡及弧度可靈活調整，機動性極強。在使用滑輪小車進行拍攝時，需要一個臺面支撐，然后在臺面上進行拍攝。因此當用于室內桌面拍攝時，使用滑軌小車是個不錯的選擇，而且它十分便宜。滑軌小車10.2.1商品視頻拍攝器材的準備（7）監視輔助設備在拍攝視頻時，攝影師需要通過監視判斷畫面的曝光、對焦、構圖、運動的位置等，雖然相機自帶液晶顯示屏，但是它們在很多條件下都很難滿足要求。取景眼罩外部監視器10.2.1商品視頻拍攝器材的準備3．燈光設備。（1）三基色柔光燈三基色柔光燈的外形和普通的節能燈一樣，但區別在于它是在玻璃燈管內壁涂有三基色熒光粉而制成的節能燈，熒光粉會在紫外線的激發下發出光亮，發光效率遠遠高于普通的節能燈。三基色柔光燈10.2.1商品視頻拍攝器材的準備（2）LED攝影燈LED攝影燈由LED高亮燈珠組成。它具有色溫準確、發光效率高、可以長時間照射而不會產生熱量、壽命長、節能、環保等特點，并且自帶光源，便于攜帶。但是它的燈光比較硬，需要另外配置柔光設備，而且其價格也比三基色柔光燈的高。LED攝影燈10.2.1商品視頻拍攝器材的準備

4．錄音設備（1）外接麥克風單反相機的機體中都配有內置麥克風，但指向性很差。在空曠的環境中拍攝時，捕獲到的聲音非常小，會有很多回音。在錄音的同時，也會錄下變焦、電流等雜音，這些雜音在后期制作時被刪除。外接話筒10.2.1商品視頻拍攝器材的準備（2）領夾式無線麥克風領夾式無線麥克風具有體積小、重量輕、靈敏度高、噪音低、可承受高分貝的聲壓級而不失真、有指向性等特點而被廣泛應用。領夾式無線話筒10.2.2商品視頻的拍攝流程在實際拍攝前，攝影師有很多的準備工作需要進行，包括準備拍攝前期需要的工作內容、學習實際拍攝中的拍攝技巧，以及了解拍攝后期的視頻處理及交付方法等。拍攝流程圖1．制作視頻腳本。10.2.3課堂案例—拍攝手沖咖啡的主圖視頻視頻腳本10.2.3課堂案例—拍攝手沖咖啡的主圖視頻

2．考察拍攝場地拍攝場地為一家布置得十分溫馨的咖啡館。拍攝前對咖啡館進行實地考察，重點考察咖啡館的采光情況。這間咖啡館臨街，有較大的窗戶，采光很好，因此無須準備其他的燈光設備。在現場，根據環境和光線條件，事先將制作咖啡的位置固定好，這樣可以節省拍攝時間。拍攝場地10.2.3課堂案例—拍攝手沖咖啡的主圖視頻3．其他準備工作（1）準備道具除了手沖咖啡壺套裝，畫面中還有其他的元素，包括咖啡師的手和服裝、咖啡杯、熱水壺、裝咖啡的器皿以及桌面等，這些也是畫面的組成部分，所以也要精心準備這些道具。（2）工作人員分配拍攝此視頻共需要多名工作人員，其中包括導演、負責拍攝視頻的攝影師、負責拍攝照片的攝影師、咖啡師等。10.2.3課堂案例—拍攝手沖咖啡的主圖視頻4．視頻實際拍攝在腳本已經制作好的情況下，拍攝當天只需要按照腳本計劃好的每一個鏡頭保質保量地完成拍攝即可。拍攝鏡頭10.3商品視頻制作PremiereProCC2020基本操作商品視頻的制作流程課堂案例——制作手沖咖啡的主圖視頻10.3.1

PremiereProCC2020基本操作1．項目文件的基本操作在啟動PremiereProCC2020開始進行視頻制作前，必須先創建新的項目文件或打開已存在的項目文件，這是PremiereProCC2020最基本的操作之一。（1）新建項目文件（2）打開已存在的項目文件（3）保存項目文件（4）關閉項目文件10.3.1

PremiereProCC2020基本操作2．撤銷與重做操作通常情況下，一個完整的項目需要經過反復地調整、修改與比較才能完成，因此，PremiereProCC2020提供了“撤銷”與“重做”命令。在編輯視頻或音頻時，如果用戶的上一步操作是錯誤的，或對操作得到的效果不滿意，選擇“編輯→撤銷”命令即可撤銷該操作，如果連續選擇此命令，則可連續撤銷前面的多步操作。如果要取消撤銷操作，可選擇“編輯→重做”命令。例如，刪除一個素材，通過“撤銷”命令撤銷操作后，如果還想將這個素材刪除，則只要選擇“編輯→重做”命令即可。10.3.1

PremiereProCC2020基本操作3．設置自動保存（1）選擇“編輯→首選項→自動保存”命令，彈出“首選項”對話框。自動保存設置10.3.1

PremiereProCC2020基本操作4．導入素材PremiereProCC2020支持大部分主流的視頻、音頻及圖像文件格式。選擇“文件→導入”命令，在“導入”對話框中選擇所需要的文件格式和文件并確認即可導入素材。（1）導入圖層文件（2）導入圖片10.3.1

PremiereProCC2020基本操作

5．解釋素材對于項目的素材文件，可以通過解釋素材修改其屬性。在“項目”面板中的素材上單擊鼠標右鍵，在彈出的快捷菜單中選擇“修改→解釋素材”命令，彈出“修改剪輯”對話框。修改剪輯對話框10.3.1

PremiereProCC2020基本操作

6．改變素材名稱在“項目”面板中的素材上單擊鼠標右鍵，在彈出的快捷菜單中選擇“重命名”命令，素材會處于可編輯狀態，為其輸入新名稱即可。“重命名”命令10.3.1

PremiereProCC2020基本操作

7．利用素材庫組織素材可以在“項目”面板建立一個素材箱（即素材文件夾）用于管理素材。使用素材庫，可以將節目中的素材分門別類、有條不紊地進行組織，這在組織包含大量素材的復雜節目時特別有用。素材箱10.3.1

PremiereProCC2020基本操作

8．查找素材在PremiereProCC2020的“項目”面板中可以根據素材名、屬性或附屬的說明和標簽查找素材，如可以查找所有文件格式相同的素材，如查找