交互效果讓你的詳情頁麵duang起來

導讀：

   在這競爭激烈電商領域
， 運營，美工
、推廣、客服對店鋪的整個運營息息相關，缺一不可。今天
，咱們就來聊聊店鋪設計

，weishenmeshitandianpushejine，jiexialaijiangweinijiexiao。lianglideyemianzuinengyinrenzhuyi
，fengfudehuamiankeyirangpingfanputongdeyemiangengjiayouhuoli
，congerjiangditiaoshilv
，tigaozhuanhua。

正文： 

   盡管是普通的頁麵，也能擁有活力的一麵，而在其中起橋梁的就是——裝修。或許你會說裝修我也會，但，你真的懂嗎？還是隻會簡單的裝修。一個成功的店鋪離不開運營

，離不開設計
， 一(yi)個(ge)好(hao)的(de)頁(ye)麵(mian)需(xu)要(yao)符(fu)合(he)主(zhu)題(ti)地(di)去(qu)設(she)計(ji)，當(dang)然(ran)

，裝(zhuang)修(xiu)是(shi)每(mei)個(ge)頁(ye)麵(mian)的(de)必(bi)經(jing)之(zhi)路(lu)
，無(wu)論(lun)是(shi)普(pu)普(pu)通(tong)通(tong)的(de)頁(ye)麵(mian)還(hai)是(shi)高(gao)逼(bi)格(ge)的(de)頁(ye)麵(mian)，經(jing)過(guo)裝(zhuang)修(xiu)之(zhi)手(shou)
，就(jiu)像(xiang)經(jing)過(guo)層(ceng)層(ceng)的(de)精(jing)致(zhi)包(bao)裝(zhuang)，才(cai)可(ke)以(yi)完(wan)整(zheng)、更美好的呈現在大家麵前。

一、交互效果的應用

首(shou)先(xian)需(xu)明(ming)確(que)，要(yao)想(xiang)要(yao)一(yi)些(xie)豐(feng)富(fu)的(de)交(jiao)互(hu)效(xiao)果(guo)或(huo)是(shi)比(bi)較(jiao)智(zhi)能(neng)的(de)顯(xian)示(shi)，就(jiu)算(suan)是(shi)高(gao)級(ji)的(de)後(hou)台(tai)裝(zhuang)修(xiu)模(mo)板(ban)
，也(ye)是(shi)需(xu)要(yao)借(jie)助(zhu)其(qi)他(ta)工(gong)具(ju)來(lai)使(shi)用(yong)的(de)，比(bi)如(ru)倒(dao)計(ji)時(shi)。就(jiu)需(xu)要(yao)借(jie)助(zhu)外(wai)來(lai)工(gong)具(ju)的(de)使(shi)用(yong)，接(jie)下(xia)來(lai)就(jiu)為(wei)大(da)家(jia)引(yin)薦(jian)設(she)計(ji)師(shi)門(men)在(zai)裝(zhuang)修(xiu)時(shi)會(hui)經(jing)常(chang)用(yong)到(dao)的(de)工(gong)具(ju)——盛夏科技在線布局和醉語言編輯器。

（一）設置動態倒計時

shezhidaojishi
，yibanzaidacuhuodongzhonghuiyongdao，keyiqidaoxuanranhuodongjinzhangfenweidexiaoguo。ruxiatusuozhi，zuohaodaojishitupian
，shangchuantupiankongjianhou

，jinrushengxiakeji
，babeijinghechicuntiaozhenghao，zaidianji“倒計時”圖層，調整好下列的屬性
，最後點擊右上角的”生成代碼”即可（需注意選擇是淘寶店鋪還是天貓店鋪
，因為不同類型的顯示尺寸是不一樣的）。

（二）設置搜索框、視頻以及旺旺客服

搜索框可調節大小以及不透明度
，視頻可等比例調節大小，並將視頻鏈接放入即可。旺旺客服可調整顯示大圖小圖。如下圖：

（三）輪播海報的應用（不用買智能版依然可以用）

海(hai)報(bao)輪(lun)播(bo)
，對(dui)於(yu)用(yong)默(mo)認(ren)的(de)專(zhuan)業(ye)版(ban)模(mo)板(ban)的(de)店(dian)鋪(pu)，是(shi)沒(mei)有(you)全(quan)屏(ping)圖(tu)片(pian)輪(lun)播(bo)的(de)功(gong)能(neng)的(de)，但(dan)買(mai)模(mo)板(ban)的(de)每(mei)個(ge)月(yue)也(ye)要(yao)承(cheng)擔(dan)的(de)很(hen)大(da)的(de)費(fei)用(yong)，當(dang)然(ran)
，針(zhen)對(dui)的(de)一(yi)些(xie)小(xiao)商(shang)型(xing)的(de)店(dian)鋪(pu)。現(xian)在(zai)解(jie)決(jue)辦(ban)法(fa)來(lai)了(le)

，不(bu)用(yong)購(gou)買(mai)裝(zhuang)修(xiu)模(mo)板(ban)也(ye)可(ke)以(yi)實(shi)現(xian)全(quan)屏(ping)輪(lun)播(bo)海(hai)報(bao)的(de)效(xiao)果(guo)。同(tong)理(li)，打(da)開(kai)“盛夏科技”，點擊右側的“圖片輪播”層，在底部屬性裏即可添加輪播圖片以及鏈接

，導航開關以及箭頭可自行選擇隱藏，最後直接點擊生成代碼即可。

（四）鼠標經過彈出圖層

鼠標經過彈出圖層，也就是開關燈效果， 將寶貝圖片和鼠標經過的圖片依次更新上去，調節好大小生成代碼即可

，是不是很簡單呢。

（五）多層固定背景代碼

duocenggudingbeijing
，shijiaohuxiaoguoqizhongyizhong，zaiyemianshangdexiaoguobiaoxianshiyouyicengshigudingde
，lingwaiyicengkeyizaiqigudingbeijingshanggundongzhanshi。yibanyunyongzaifenleibanner的海報上，圖片是固定背景——jpg格式，上麵的文字是可以滾動的——png格式。按下圖所示，複製圖片鏈接地址，替換紅色的文字
，對於png的透明圖，需要複製代碼去替換。然後即可去後台利用自定義模塊去編輯即可。

二
、裝修必備橋梁

（一）淘寶天貓店鋪優惠券鏈接轉換工具

有裝修過後台的人都會知道，pc端的優惠券鏈接和無線端的優惠券鏈接是不一樣的
，在這就給大家獻上寶典——淘寶天貓店鋪優惠券鏈接轉換工具。

http://www.ahatao.com/pc2wap/

直接複製鏈接點擊生成即可獲取無線端的鏈接地址

，是不是很方便呀。

（二）1920尺寸全屏頁麵生成

你可知道這是什麼呢，一般情況下，無論是天貓還是淘寶店鋪，頁麵上的寬度是做1920px的de，但dan你ni在zai裝zhuang修xiu的de時shi候hou，是shi否fou有you遇yu到dao過guo這zhe樣yang的de情qing況kuang呢ne，直zhi接jie把ba圖tu片pian放fang上shang去qu，卻que不bu會hui居ju中zhong顯xian示shi


，而er是shi偏pian移yi了le位wei置zhi，這zhe時shi候hou就jiu需xu要yao借jie助zhu這zhe個ge工gong具ju來lai限xian製zhi它ta啦la——戰國策。http://moban.cn/gongju/index.php?t=quanpin

如上圖所示，將代碼粘貼進選框中
，然後點擊“生成全屏代碼”，複製代碼去裝修後台即可
，此處需要注意的是，在進行第二次生成全屏代碼時需要點擊左邊的“清空代碼”，不然會導致生成的是亂碼。

（三）如何獲取天貓淘寶的主圖原圖

最(zui)後(hou)這(zhe)一(yi)招(zhao)很(hen)神(shen)奇(qi)的(de)哦(o)，不(bu)知(zhi)道(dao)你(ni)有(you)沒(mei)有(you)發(fa)現(xian)，淘(tao)寶(bao)的(de)主(zhu)圖(tu)獲(huo)取(qu)直(zhi)接(jie)右(you)擊(ji)就(jiu)可(ke)以(yi)複(fu)製(zhi)圖(tu)片(pian)了(le)，但(dan)這(zhe)招(zhao)在(zai)天(tian)貓(mao)卻(que)不(bu)頂(ding)用(yong)
，那(na)到(dao)底(di)可(ke)以(yi)怎(zen)麼(me)拿(na)到(dao)圖(tu)片(pian)呢(ne)
，在(zai)主(zhu)圖(tu)中(zhong)選(xuan)擇(ze)你(ni)想(xiang)要(yao)的(de)圖(tu)片(pian)，在(zai)小(xiao)圖(tu)中(zhong)右(you)擊(ji)“在新標簽中打開圖片”，此時在新窗口裏會看到一張小圖，隻要將紅框裏的尺寸限製刪除，就可以得到主圖原圖的大小。

五、總結

交jiao互hu效xiao果guo的de應ying用yong，可ke以yi給gei頁ye麵mian增zeng加jia幾ji分fen活huo力li
，但dan是shi，也ye不bu是shi說shuo交jiao互hu效xiao果guo越yue多duo越yue好hao，太tai多duo的de話hua反fan而er會hui擾rao亂luan整zheng個ge頁ye麵mian。特te別bie是shi對dui於yu電dian商shang頁ye麵mian
，簡jian單dan的de交jiao互hu效xiao果guo在zai頁ye麵mian上shang呈cheng現xian會hui美mei觀guan活huo力li了le很hen多duo，但dan應ying用yong過guo多duo的de話hua會hui產chan生sheng視shi覺jiao疲pi勞lao的de。以yi上shang所suo說shuo的de交jiao互hu效xiao果guo就jiu有you：

1.設置倒計時

2.設置搜索框
、視頻、旺旺客服

3.輪播海報的應用

4.鼠標經過彈出圖層

另外，在裝修過程中也需要借助一些工具

，方便我們工作的進行
，例如生成全屏代碼,優惠券轉換工具
，以及日常工作時需要用到的ps快捷鍵技能
，通過一些技巧來提高我們工作的效率與質量。