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

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

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

當(dāng)一款小程序被用戶點(diǎn)開，從視覺體驗(yàn)到抓住用戶的眼球，如何才能得到用戶的認(rèn)同感和信任感？

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

~鼓掌~

~撒花~

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

以下內(nèi)容由獲獎代理商提供：

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

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

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

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

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

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

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

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

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

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

聊到這的時候，我心想客戶是不是覺得我是賣收銀軟件的?。〔煌?，我又跟客戶說，我覺得你實(shí)體做的很好，不能不做線上平臺化運(yùn)營建設(shè)了！此時客戶深深地被我的容貌吸引了，不對，是被我的言語吸引了！

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

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

小程序制作篇

反復(fù)研究了最后決定的功能搭配：微商城、微拼團(tuán)、內(nèi)容管理+、活動報(bào)名、萬能表單。沒毛??！開擼~

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

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

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

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

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

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

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

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