電商設(shè)計(jì)電子課件

第10章手機(jī)端活動(dòng)專(zhuān)題頁(yè)設(shè)計(jì)本章介紹：手機(jī)端活動(dòng)專(zhuān)題頁(yè)較PC端活動(dòng)專(zhuān)題頁(yè)的可視范圍變小，商品變得更加集中，更容易吸引用戶(hù)，因此手機(jī)端活動(dòng)專(zhuān)題頁(yè)的商品銷(xiāo)量更好。本章針對(duì)手機(jī)端活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型、呈現(xiàn)特點(diǎn)以及手機(jī)端店鋪活動(dòng)專(zhuān)題頁(yè)設(shè)計(jì)等基礎(chǔ)知識(shí)進(jìn)行系統(tǒng)講解，并針對(duì)流行風(fēng)格與典型行業(yè)的手機(jī)端活動(dòng)專(zhuān)題頁(yè)進(jìn)行設(shè)計(jì)演練。通過(guò)本章的學(xué)習(xí)，讀者可以對(duì)手機(jī)端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)有一個(gè)系統(tǒng)的認(rèn)識(shí)，并快速掌握手機(jī)端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)規(guī)范和制作方法，成功塑造出色精彩的手機(jī)端活動(dòng)專(zhuān)題頁(yè)。了解手機(jī)端活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型了解手機(jī)端活動(dòng)專(zhuān)題頁(yè)的呈現(xiàn)特點(diǎn)熟悉手機(jī)端活動(dòng)專(zhuān)題頁(yè)的版塊設(shè)計(jì)學(xué)習(xí)目標(biāo)

手機(jī)端活動(dòng)專(zhuān)題頁(yè)與PC端活動(dòng)專(zhuān)題頁(yè)一樣可以分為平臺(tái)專(zhuān)題頁(yè)和店鋪專(zhuān)題頁(yè)，其中手機(jī)端平臺(tái)專(zhuān)題頁(yè)Banner常設(shè)計(jì)為為橫屏小尺寸，而店鋪專(zhuān)題頁(yè)則設(shè)計(jì)為豎屏大尺寸。10.1手機(jī)端活動(dòng)專(zhuān)題頁(yè)的基本類(lèi)型手機(jī)端活動(dòng)專(zhuān)題頁(yè)10.2手機(jī)端活動(dòng)專(zhuān)題頁(yè)的呈現(xiàn)特點(diǎn)文字可見(jiàn)內(nèi)容精簡(jiǎn)層次分明重點(diǎn)突出手機(jī)端屏幕較PC端屏幕，在設(shè)計(jì)尺寸和觀看方式都發(fā)生了根本性變化。設(shè)計(jì)時(shí)，應(yīng)跳出大屏排版小而美的慣性思維，字號(hào)需要在24像素以上，以確保內(nèi)容的識(shí)別性和可讀性。10.2.1文字可見(jiàn)效果展示雖然專(zhuān)題頁(yè)擁有大量的促銷(xiāo)信息和商品信息，但手機(jī)端的屏幕空間有限，因此需要在表意明確與突出賣(mài)點(diǎn)的前提下，盡量做到信息內(nèi)容的精簡(jiǎn)，依次提高信息傳達(dá)的效率。10.2.2內(nèi)容精簡(jiǎn)效果展示專(zhuān)題頁(yè)作為各類(lèi)商品的總?cè)肟冢袚?dān)了流量分發(fā)和商品轉(zhuǎn)化的雙重作用，因此針對(duì)每個(gè)商品的信息設(shè)計(jì)都需要做到層次分明、條理清晰。通常商品的信息內(nèi)容會(huì)設(shè)計(jì)出商品名稱(chēng)、商品賣(mài)點(diǎn)、商品促銷(xiāo)、商品價(jià)格以及購(gòu)買(mǎi)按鈕五個(gè)層次，有時(shí)這幾個(gè)層次也可以根據(jù)需要合并在一起。10.2.3層次分明購(gòu)買(mǎi)按鈕五個(gè)層次盡管對(duì)活動(dòng)專(zhuān)題頁(yè)劃分了層級(jí)，但僅靠劃分層級(jí)的專(zhuān)題頁(yè)無(wú)法快速傳遞出核心信息，還需要設(shè)計(jì)師將核心層級(jí)進(jìn)行重點(diǎn)突出。通常會(huì)通過(guò)改變文字大小字重、改變文字顏色以及加入文字背景框這三種形式進(jìn)一步劃分主次關(guān)系，以上三種形式都是結(jié)合使用，較少單獨(dú)使用。10.2.4重點(diǎn)突出商品設(shè)計(jì)效果10.3手機(jī)端活動(dòng)專(zhuān)題頁(yè)的版塊設(shè)計(jì)手機(jī)端店鋪活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸手機(jī)端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面結(jié)構(gòu)課堂案例-手機(jī)端品質(zhì)國(guó)貨家電平臺(tái)專(zhuān)題頁(yè)設(shè)計(jì)

手機(jī)端活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸可以參考手機(jī)端電商平臺(tái)和店鋪首頁(yè)設(shè)計(jì)的尺寸進(jìn)行設(shè)置。通常將平臺(tái)專(zhuān)題頁(yè)的寬度設(shè)置為750像素，店鋪專(zhuān)題頁(yè)的寬度設(shè)置為1200像素，兩側(cè)的邊距一般有20px、24px、30px、32px、40px以及50px，建議采用30px以上的邊距。高度不限，可以根據(jù)商家不同需要進(jìn)行變化。10.3.1手機(jī)端店鋪活動(dòng)專(zhuān)題頁(yè)的設(shè)計(jì)尺寸手機(jī)端活動(dòng)專(zhuān)題頁(yè)與PC端活動(dòng)專(zhuān)題頁(yè)一樣，由Banner、活動(dòng)促銷(xiāo)區(qū)以及商品陳列區(qū)組成，參考1.5.3柵格系統(tǒng)確立好活動(dòng)專(zhuān)題頁(yè)的柵格，根據(jù)主流電商設(shè)計(jì)活動(dòng)專(zhuān)題頁(yè)的版塊尺寸，同樣可總結(jié)出緊湊型和寬松型共7種版塊，并根據(jù)不同呈現(xiàn)內(nèi)容進(jìn)行同類(lèi)型的組合使用。10.3.2手機(jī)端活動(dòng)專(zhuān)題頁(yè)的頁(yè)面結(jié)構(gòu)板塊類(lèi)型使用“新建參考線(xiàn)版面”命令建立參考線(xiàn)，使用“置入嵌入對(duì)象”命令置入圖片，使用“橫排文字”工具添加文字，使用“矩形”工具、“直線(xiàn)”工具、“橢圓”工具和“圓角矩形”工具繪制基本形狀，使用“添加圖層樣式”命令為圖形添加效果，使用“創(chuàng)建剪貼蒙版”命令調(diào)整圖片顯示區(qū)域。10.3.3課堂案例-手機(jī)端品質(zhì)國(guó)貨家電平臺(tái)專(zhuān)題頁(yè)設(shè)計(jì)效果展示學(xué)習(xí)使用繪圖工具、文字工具制作手機(jī)端初春煥新家電平臺(tái)專(zhuān)題頁(yè)。10.4課堂練習(xí)-手機(jī)端初春