奪冠魔方超級頁(yè)面制作大賽獲獎作品（七）| 小程序「美業(yè)優(yōu)品」是怎樣煉成的？

作者：奪冠小妹 2019-02-27 10:08:11

第一屆奪冠魔方超級頁(yè)面制作大賽的圓滿(mǎn)收官，一不小心就引起軒然大波。

當一款小程序被用戶(hù)點(diǎn)開(kāi)，從視覺(jué)體驗到抓住用戶(hù)的眼球，如何才能得到用戶(hù)的認同感和信任感？

在我們公布獲獎作品出來(lái)后，許多代理商反饋，是否可以邀請獲獎代理商分享制作小程序的經(jīng)驗……考慮到活動(dòng)的目的是為了挖掘更多精美的小程序案例，和促進(jìn)奪冠魔方各位代理商相互學(xué)習。因此，我們邀請了獲獎代理商為大家準備一系列文章供參考，希望能夠為你帶來(lái)啟發(fā)。

~鼓掌~

~撒花~

第七期：「美業(yè)優(yōu)品」
小程序介紹：美業(yè)優(yōu)品從事美甲、美睫、美容、美發(fā)服務(wù)類(lèi)行業(yè)，作者分享了從業(yè)務(wù)洽談、到小程序制作的經(jīng)歷，「美業(yè)優(yōu)品」獲得“超級高手”的魅力是因為…
使用模塊：微商城、微拼團、內容管理+、活動(dòng)報名、萬(wàn)能表單、超級頁(yè)面。

以下內容由獲獎代理商提供：

首先，很榮幸獲得第一屆奪冠魔方超級頁(yè)面制作大賽的超級高手，也讓我見(jiàn)到了許多優(yōu)秀的作品。我想了許久，我這篇分享文章到底分享什么才有價(jià)值？我決定將我們從業(yè)務(wù)洽談到小程序功能策劃及制作流程分享給大家。

在分享之前，我不得不為奪冠點(diǎn)個(gè)贊！奪冠的超級頁(yè)面功能的確很強大，強大到你無(wú)法想象。

同時(shí)也感謝奪冠技術(shù)部門(mén)的鼎力配合支持，才讓美業(yè)優(yōu)品這個(gè)小程序超預期的完成。也讓客戶(hù)對我們“刮目相看”。

業(yè)務(wù)洽談篇

美業(yè)優(yōu)品這個(gè)客戶(hù)，是我們主動(dòng)上門(mén)洽談的。客戶(hù)是在我們成都當地經(jīng)營(yíng)美業(yè)產(chǎn)品批發(fā)及美業(yè)職業(yè)技能培訓，（PS美業(yè)：指從事美甲、美睫、美容、美發(fā)服務(wù)類(lèi)行業(yè)）這個(gè)客戶(hù)也是我親自洽談溝通的。

一到客戶(hù)公司，就發(fā)現有許多可以利用我們小程序實(shí)現智能化，聊上幾句，我就說(shuō)：“劉總！我至少可以讓你一年省下近20萬(wàn)，而且讓你的客戶(hù)更愿意選擇在你家進(jìn)貨，同時(shí)也讓你的每個(gè)門(mén)店從銷(xiāo)售到收銀再到銷(xiāo)售員工業(yè)績(jì)提成實(shí)現全智能化，提升整個(gè)工作效率及業(yè)績(jì)增長(cháng)”。我心想此時(shí)客戶(hù)肯定再想又來(lái)了一個(gè)說(shuō)得好聽(tīng)的吹牛大王~客戶(hù)還是被我的話(huà)給吸引住了，還是想看看我葫蘆里到底賣(mài)的什么藥...

我為什么說(shuō)能為客戶(hù)一年省下近20萬(wàn)，我看他們的批發(fā)門(mén)店還是在用很傳統的經(jīng)營(yíng)方式，銷(xiāo)售陪客戶(hù)選貨，介紹產(chǎn)品，客戶(hù)選好走到收銀位置，收銀員一個(gè)一個(gè)看商品編碼開(kāi)單，還要多數兩遍免得出錯，開(kāi)完單客戶(hù)對單付錢(qián)（基本都是移動(dòng)支付），我一下就想到為什么不能客戶(hù)進(jìn)店，銷(xiāo)售接待客戶(hù)溝通需求，然后引導客戶(hù)掃碼（利用對應銷(xiāo)售員分銷(xiāo)小程序碼）進(jìn)入小程序需要什么添加購物車(chē)在線(xiàn)購買(mǎi)，然后放個(gè)云打印機打單，配貨。

哈哈，這樣是不是就從銷(xiāo)售——收銀——銷(xiāo)售員業(yè)績(jì)提成計算一下就解決了！完美

一個(gè)門(mén)店就是兩個(gè)打單收銀的，有3個(gè)門(mén)店啊。一個(gè)收銀工資一個(gè)月在4500，那不是3個(gè)門(mén)店X2位收銀X4500元X12個(gè)月=32.4萬(wàn)。媽呀~我還估計少了...這個(gè)賬給客戶(hù)一算，從客戶(hù)眼神里感覺(jué)我好像說(shuō)的對！

所以兄弟們！跟這些實(shí)干派的老板們談，要找他們算賬啊~不算不知道，一算嚇一跳！這樣機會(huì )還是挺大的~（不知道這算不算經(jīng)驗哈）

聊到這的時(shí)候，我心想客戶(hù)是不是覺(jué)得我是賣(mài)收銀軟件的??！不妥，我又跟客戶(hù)說(shuō)，我覺(jué)得你實(shí)體做的很好，不能不做線(xiàn)上平臺化運營(yíng)建設了！此時(shí)客戶(hù)深深地被我的容貌吸引了，不對，是被我的言語(yǔ)吸引了！

我說(shuō)：“劉總，剛剛節省開(kāi)支又能提升工作效率的只是最基本的！你想想，你的客戶(hù)有的都那么遠，那不是每次補貨都要跑一趟，多不好啊，即使不跑，跟銷(xiāo)售微信對接進(jìn)貨購物體驗感也不好??！我們可以打造一個(gè)客戶(hù)在小程序里又可以在線(xiàn)視頻學(xué)習行業(yè)最新的一些技能或者開(kāi)店經(jīng)營(yíng)指南的東西，讓客戶(hù)沒(méi)事就可以進(jìn)入我們小程序來(lái)學(xué)習學(xué)習，這樣我們的轉化率是不是就更高些~我想給你打造一個(gè)有價(jià)值的行業(yè)內容輸出、在線(xiàn)商城購物體驗感強、會(huì )員留存沉淀為一體的全營(yíng)銷(xiāo)平臺”…

又談了些小程序運營(yíng)方式，這下客戶(hù)恍然大悟了！我也成功為客戶(hù)道明我的目的了~談了個(gè)好價(jià)，成交！

小程序制作篇

反復研究了最后決定的功能搭配：微商城、微拼團、內容管理+、活動(dòng)報名、萬(wàn)能表單。沒(méi)毛??！開(kāi)擼~

進(jìn)入超級頁(yè)面，發(fā)現頁(yè)面管理里最多只能支持8個(gè)頁(yè)面，我一下覺(jué)得不夠啊~我在想要不頁(yè)面妥協(xié)就控制在8個(gè)，想了好久覺(jué)得還是不妥！然后，跟總部說(shuō)了下，一會(huì )兒就從以前的8個(gè)頁(yè)面變成了20個(gè)頁(yè)面了，再次給奪冠點(diǎn)個(gè)贊！真棒~(yú)

首先，把頁(yè)面規劃好，小程序用戶(hù)端菜單最多展示5個(gè)，做好暫時(shí)出來(lái)的5個(gè)頁(yè)面的菜單圖標，每個(gè)圖片建議出兩個(gè)，一個(gè)未選中狀態(tài)和一個(gè)選中狀態(tài)的，這樣才好看嘛，也符合UI規范，尺寸大小嘛，都有標識80X80像素。

注意：分享標題一定要改，像美業(yè)優(yōu)品，首頁(yè)的分享標題就用的美業(yè)優(yōu)品sologon：做美業(yè)，就上美業(yè)優(yōu)品~（美業(yè)優(yōu)品小程序LOGO及小程序名稱(chēng)和sologon是我們公司一并策劃的）至于分享圖片嘛，就看自己了哈，反正我是一個(gè)追求極致的人，就做了！這樣客戶(hù)也會(huì )覺(jué)得超專(zhuān)業(yè)，哈哈~

頁(yè)面里面內容設計呢，我們主要用PS和AI軟件，至于這個(gè)設計嘛，還是要有些規范才好看，文字字體，我建議用免商用版權的思源黑體，字號大小要規范，標題字號一樣大，內容字號一樣大，顏色統一才好看~其次就是頁(yè)面顏色配色了，不能太花哨，符合大眾審美，免得整的太LOW~

當在PS里完成了設計，就用PS的切片工具進(jìn)行切片，切片導出為Web所用格式，這樣圖片精度夠高，圖片數據還小，這樣免得用戶(hù)端網(wǎng)絡(luò )加載過(guò)慢~用戶(hù)體驗感不好！

在使用超級頁(yè)面制作時(shí)我每個(gè)頁(yè)面里用的自定義組件的輪播組件和熱區組件，輪播組件主要用于頁(yè)面設計里的輪播 banner，咱們的組件屬性里都可以對組件一些細節做調整。

這里給大家說(shuō)下，下間距開(kāi)與不開(kāi)取決于頁(yè)面的整體設計，組件高度，就是里面放置的圖片高度的像素是多少，比如我這張圖是：750*540 像素，那我就把組件高度設置在 540。這樣輪播里圖片的展示才是完整的~

接下來(lái)就是給大家聊聊咱們超級好用的熱區組件了！這家伙的功能的確是實(shí)用，猛啊~我整個(gè)美業(yè)優(yōu)品的頁(yè)面基本就靠這個(gè)，熱區組件，可以自動(dòng)識別圖片的像素大小，設置熱點(diǎn)就更猛了，一張圖片里可以設置很多的鏈接，直到你畫(huà)不下熱點(diǎn)鏈接小框框~當然一個(gè)圖里的鏈接入口不要太密了，不好！