【賣設不賣圖】詳情頁的FLOW就是這麼定

文章導讀：dangwomennayigechanpinyaozuoxiangqingyedeshihou
，shouxianshilejiechanpinshishiheshenmeyangdefengge，ranhoujiuyaoquzhaoyixiecankao，xianghuabandengcankaowangzhan，congzhongzhaodaoyixieshiheshejidecankao，xunzhaotongleideshejinengdagaizhidaozhegeleimudeshejishizenyangde，ranhoukeyizaizhaoqitaleimuxiangsidefenggezuoweicankaode，zaidaoxiangqingyedebankuaishianpai：首頁海報-設計解說-產品賣點-產品屬性-工藝說明-產品展示-產品細節等，然後是每個版塊的構圖設計，文案解說等，使詳情頁的思路明確統一。

正文：

現在我們以一個比較文藝的包包作為例子

，如圖

kekanchu，baobaoshiqingxiangyufuguqingwenyide，fuguqingwenyidefenggeyeshifuhebaobaodexiangqingyeshejide。danshiwomenyaozheshouxiangqingyedeshejideshihou
，zhefangmiandeneirongyeshiyaolejieyixiade，xianzaidebaobaoshejifenggeshiyouhenduode，youchaoliushishang，yougongnengxingde，youshangwuleixingdedengdeng
，tamendouyouzijidedingweifengge。chaoliushishangdeshejizhuyaohaishichengxianchuchaoliushishangjianyuefengge
，yougongnengxingdebaobaozhuyaodemaidianshigongnengdebufen
，shangwuleixingdeshiyaofuhenanshiduoyidiandeshejifengge。

那麼對照著包包和包包拍攝場景的圖片，所以是確定是比較適合複古輕文藝風
，輕文藝風和一些。

多使用中國元素的詳情頁設計又有一些不一樣的地方，我們所表現的設計是帶輕一點的複古文藝設計。

詳情頁的風格定了，接下來就是的元素要和風格相符合的
，例如字體，元素，文案等這些內容。

一．找參考

tongchangzhaocankaodeshihou，diyishijianjiuxiangdaoquhuabanzhaocankao，zaihuabanshangsousuobaobaoxiangqingyexuanzehuaban
，zaihuabanzhongxuanshiyingdewendangquxunzhaoshihezijixiangyaodecankaosheji，ruguozhaodecankaobushihenduo，keyidaoqitadewangzhan
，liru：黃(huang)蜂(feng)網(wang)，國(guo)外(wai)設(she)計(ji)欣(xin)賞(shang)網(wang)站(zhan)，或(huo)者(zhe)到(dao)淘(tao)寶(bao)上(shang)看(kan)其(qi)他(ta)店(dian)鋪(pu)的(de)設(she)計(ji)
，看(kan)得(de)多(duo)收(shou)集(ji)得(de)多(duo)對(dui)於(yu)自(zi)己(ji)接(jie)下(xia)來(lai)的(de)詳(xiang)情(qing)頁(ye)設(she)計(ji)是(shi)很(hen)有(you)幫(bang)助(zhu)的(de)
，思(si)路(lu)能(neng)更(geng)加(jia)的(de)清(qing)晰(xi)，內(nei)容(rong)也(ye)能(neng)豐(feng)富(fu)起(qi)來(lai)。

二
、詳情頁設計風格

詳情頁整體呈現的風格是複古輕文藝風
，然而在可以有簡約的設計風格，能顯大氣時尚。 

三、字體選擇

首先，詳情頁的字體選用的是思源宋體和思源黑體，宋體的選擇是因為適合文藝的風格
，然後可以zaizitishangshijialeshejiyuansujiushishiyonghuabizaizitishangshiyongmengbandiancaziti
，shizitichengxiandexiaoguoshiheqiangmiandekeliganshichabuduode，gengnengrongrudaochanpintupianzhong
；

我wo們men都dou知zhi道dao頁ye麵mian裏li麵mian呈cheng現xian的de字zi體ti使shi用yong不bu能neng超chao過guo三san種zhong
，這zhe樣yang可ke以yi保bao證zheng頁ye麵mian的de整zheng體ti協xie調tiao統tong一yi，然ran而er在zai字zi體ti大da小xiao的de使shi用yong也ye有you一yi定ding的de規gui律lv，標biao題ti和he二er級ji標biao題ti的de字zi體ti大da小xiao最zui好hao是shi定ding下xia來lai
，這zhe樣yang能neng使shi頁ye麵mian的de整zheng體ti性xing比bi較jiao統tong一yi。

三、圖片處理

然ran後hou我wo們men能neng看kan到dao上shang麵mian的de兩liang張zhang圖tu片pian是shi一yi樣yang的de
，第di一yi張zhang是shi原yuan來lai的de圖tu片pian，第di二er張zhang是shi處chu理li之zhi後hou的de圖tu片pian，把ba包bao包bao以yi外wai的de背bei景jing
，物wu品pin都dou調tiao成cheng統tong一yi的de色se調tiao
，使shi包bao包bao的de顏yan色se能neng突tu顯xian出chu來lai，也ye能neng使shi設she計ji獨du特te，所suo以yi第di二er張zhang處chu理li後hou的de圖tu片pian能neng突tu出chu產chan品pin，能neng吸xi引yin到dao消xiao費fei者zhe的de目mu光guang，也ye能neng使shi與yu其qi他ta店dian鋪pu的de複fu古gu文wen藝yi風feng的de包bao包bao店dian鋪pu設she計ji不bu一yi樣yang。

（調色前）

（調色後）

四、設計元素選擇

詳(xiang)情(qing)頁(ye)元(yuan)素(su)的(de)使(shi)用(yong)
，在(zai)詳(xiang)情(qing)頁(ye)的(de)底(di)麵(mian)是(shi)使(shi)用(yong)了(le)牆(qiang)的(de)素(su)材(cai)，這(zhe)樣(yang)是(shi)為(wei)了(le)能(neng)襯(chen)托(tuo)詳(xiang)情(qing)頁(ye)整(zheng)體(ti)性(xing)的(de)性(xing)調(tiao)和(he)風(feng)格(ge)，使(shi)頁(ye)麵(mian)的(de)展(zhan)現(xian)是(shi)更(geng)統(tong)一(yi)的(de)。還(hai)有(you)的(de)就(jiu)是(shi)在(zai)展(zhan)示(shi)包(bao)包(bao)的(de)時(shi)候(hou)，使(shi)用(yong)正(zheng)方(fang)形(xing)的(de)框(kuang)框(kuang)或(huo)者(zhe)是(shi)其(qi)他(ta)的(de)形(xing)狀(zhuang)來(lai)展(zhan)現(xian)的(de)時(shi)候(hou)，能(neng)看(kan)得(de)出(chu)正(zheng)方(fang)形(xing)的(de)正(zheng)正(zheng)方(fang)方(fang)的(de)邊(bian)緣(yuan)太(tai)實(shi)了(le)
，和(he)整(zheng)體(ti)性(xing)是(shi)有(you)一(yi)點(dian)不(bu)合(he)適(shi)的(de)，所(suo)以(yi)在(zai)圖(tu)形(xing)上(shang)的(de)邊(bian)緣(yuan)上(shang)做(zuo)了(le)一(yi)些(xie)的(de)虛(xu)化(hua)，不(bu)整(zheng)齊(qi)
，自(zi)然(ran)的(de)效(xiao)果(guo) 。

zheyangdehua
，nengyuxiangqingyededimiandeqiangmiansucaigengnenghenhaoderonghezaiyiqi。shidangdeshiyongyixieyuansushixiangqingyefenggetongyihefengfuqilai，kanqilaibingbufaweide。

五、文案抒情

現在呢就是要說到這個詳情頁的一個亮點的地方
，就是文案的情感表達，在首圖海報的文案介紹是：“遇見如此讓我心動的你”所以能貫穿整個詳情頁的一個思路的方法，大家也知道的套路：遇見-相識-相知-相愛…

當中的二級標題的內容可以到百度搜索遇見的句子
，從中找比較適合的文案來襯托標題的意思！有趣
，有內涵的文案能使詳情頁的內容豐富
，耐人尋味~

總結:

總體的思路就是這樣的，我的FLOWzhejiushizheyangdingxialaide，zuomeiyiyangdesheji，shouyexiandinghaochanpindeshejifengge，ranhouzaijieheqitadeshejiyuansulaidapeizhenggeshejidefengge，shizhenggeshejidezhengtixingtongyi，xietiaoxinghaoyidian
，bazhexiedounonghaole

，nidexiangqingyeshejiziranbuhuibirenjiadecha
，erqieganggangde！