購(gòu)物商城微信公眾號(hào)交互設(shè)計(jì)

設(shè)計(jì)背景

由于微信公眾號(hào)輕應(yīng)用的設(shè)計(jì)需要在微信的結(jié)構(gòu)框架中進(jìn)行，信息架構(gòu)和導(dǎo)航布局需要基于微信的開發(fā)接口和架構(gòu)來(lái)做，項(xiàng)目開始時(shí)微信針對(duì)公眾號(hào)的導(dǎo)航框架剛好有做出調(diào)整，在進(jìn)入公眾號(hào)里面的頁(yè)面后可以逐級(jí)返回上一級(jí)頁(yè)面，而不是之前直接返回到公眾號(hào)首頁(yè)。在微信改版之前，也做了一套微信輕應(yīng)用交互模板，由于輕應(yīng)用導(dǎo)航欄的調(diào)整，頁(yè)面留出了更多內(nèi)容顯示空間，頁(yè)面操作也流暢了許多。

圖1可以看出，如果在輕應(yīng)用頁(yè)面上要返回上一級(jí)頁(yè)面，需要設(shè)計(jì)一個(gè)單獨(dú)的導(dǎo)航條，這樣和微信已有的導(dǎo)航欄并在一起形成了雙導(dǎo)航欄，頁(yè)面顯得雞肋，出了占用屏幕空間外，操作起來(lái)也很累贅，還容易導(dǎo)致點(diǎn)擊錯(cuò)誤。

所以在新設(shè)計(jì)的輕應(yīng)用，去掉了先前的導(dǎo)航欄，增加了頁(yè)面空間。

項(xiàng)目需求

某商城需要?jiǎng)?chuàng)建自己的微信公眾號(hào)，用戶能在公眾號(hào)上購(gòu)物、注冊(cè)成為會(huì)員、綁定會(huì)員卡、會(huì)員卡充值和積分兌換。（購(gòu)物第一期不做）

需求分析

分兩個(gè)角色——商家和會(huì)員（消費(fèi)者），兩個(gè)場(chǎng)景——商城和會(huì)員卡。對(duì)于商家來(lái)說(shuō)：通過(guò)商城為消費(fèi)者（會(huì)員）提供購(gòu)物消費(fèi)場(chǎng)地；對(duì)于會(huì)員（消費(fèi)者）來(lái)說(shuō)：進(jìn)入商城就是消費(fèi)者，購(gòu)物消費(fèi)就是會(huì)員，消費(fèi)軌跡儲(chǔ)存在會(huì)員卡

由于第一期商城不做，分析會(huì)員卡的使用場(chǎng)景繪制了流程圖，生成信息架構(gòu)圖

兩個(gè)角色：商家（商城）和用戶，兩個(gè)場(chǎng)景（節(jié)點(diǎn)）：商城和會(huì)員卡

繪制界面

公眾號(hào)首頁(yè)

首頁(yè)有消息推送和兩個(gè)入口（商城、會(huì)員中心），消費(fèi)者在實(shí)際購(gòu)物中，就是帶上錢包（銀行卡）走進(jìn)商場(chǎng)挑選自己喜歡的商品，也就是說(shuō)，如果消費(fèi)者要成功購(gòu)買到商品，有兩個(gè)必須具備的，一是有商場(chǎng)，二是有錢（很重要）。所以把商城入口和會(huì)員中心放在首頁(yè)。會(huì)員中心包含：“會(huì)員卡” “我的資料”  “問(wèn)題反饋”  ，這里的會(huì)員卡實(shí)質(zhì)涵蓋了錢包的功能，在第一次關(guān)注成功后，系統(tǒng)會(huì)推送一條歡迎加入的消息，提供 “激活會(huì)員卡”入口，也可以直接點(diǎn)擊會(huì)員中心〉會(huì)員卡〉激活會(huì)員卡

(1.0版本完成會(huì)員中心模塊的設(shè)計(jì)，2.0版本完成商城模塊的設(shè)計(jì)）

會(huì)員卡激活流程

由于要考慮到線下已辦理會(huì)員卡的用戶，在第一次設(shè)計(jì)的時(shí)候，分了兩個(gè)的入口，有會(huì)員卡的選擇綁定，輸入會(huì)員卡號(hào)碼，新會(huì)員選擇激活，輸入手機(jī)號(hào)碼

設(shè)計(jì)出來(lái)后，感覺讓用戶去選擇入口激活，用戶容易出錯(cuò)，而且體驗(yàn)不流暢

最后和需求的小伙伴溝通，問(wèn)了商城業(yè)務(wù)人員，其實(shí)消費(fèi)者在線下辦理會(huì)員卡時(shí)，需要填寫手機(jī)號(hào)碼，這一點(diǎn)很重要，因?yàn)樾聲?huì)員激活時(shí)也需要手機(jī)號(hào)碼，于是統(tǒng)一使用手機(jī)號(hào)碼來(lái)激活，如果已有在實(shí)體店辦理會(huì)員卡，會(huì)給出提示再進(jìn)行線上激活，如果之前沒有辦理，默認(rèn)手機(jī)號(hào)為會(huì)員卡號(hào)，直接激活，然后修改交易密碼

第二稿的設(shè)計(jì)智能化了，體驗(yàn)流暢很多

會(huì)員卡頁(yè)面

會(huì)員卡頁(yè)在第一稿設(shè)計(jì)的時(shí)候，頂部為banner區(qū)域，商品廣告向用戶推送，但最后和需求小伙伴討論后，決定不放廣告推送，理由是這個(gè)輕應(yīng)用中已經(jīng)有獨(dú)立的商城入口，消息推送也會(huì)涉及到商品的推送，輕應(yīng)用本質(zhì)就是輕，作為用戶來(lái)講，錢包里（會(huì)員卡）更希望是私人的，比較有安全感，但可以保留，給商城方自己來(lái)決策。

于是把banner區(qū)域換成一張會(huì)員卡貼圖，根據(jù)會(huì)員級(jí)別（由消費(fèi)情況、積分、年限來(lái)決定）的不同顯示不同的貼圖，就如線下的白金卡、vip卡同理，出了享受的折扣、服務(wù)不一樣外，也是會(huì)員身份的象征。

會(huì)員卡充值

作為商城方，希望消費(fèi)者充值更多的錢到會(huì)員卡中，增加在本商城的消費(fèi)額度，留住消費(fèi)者，于是提供了充值即享受折扣的消費(fèi)策略，來(lái)刺激消費(fèi)者充值，采用類似于購(gòu)買購(gòu)物卡的充值方式設(shè)計(jì)，這里邊有包含消費(fèi)者消費(fèi)行為的考慮，一般在購(gòu)買商品的時(shí)候，商品的價(jià)格出現(xiàn)整數(shù)的情況比較少，如果采用整數(shù)充值，能夠保證會(huì)員卡上有余額，誰(shuí)會(huì)愿意浪費(fèi)自己的錢呢？

消費(fèi)者作為應(yīng)用的用戶，操作越簡(jiǎn)單，花費(fèi)時(shí)間越少越好，這種設(shè)計(jì)也避免了用戶輸入，直接選擇面值即可充值（微信支付）

訂單詳情頁(yè)面

訂單詳情頁(yè)的設(shè)計(jì)主要考慮在不同網(wǎng)絡(luò)環(huán)境下查看詳情，默認(rèn)為圖文顯示，如果是網(wǎng)絡(luò)環(huán)境較差，加載很慢時(shí)，也可以主動(dòng)切換到文本顯示查看，縮短用戶等待時(shí)間，提升用戶體驗(yàn)。

視覺設(shè)計(jì)

視覺設(shè)計(jì)師小哥超帥了，給我的感覺是他一稿就通過(guò)的（哈哈），最后的效果也是棒棒噠（點(diǎn)贊），上圖...

會(huì)員卡激活成功

會(huì)員卡中心

會(huì)員卡充值

訂單圖文詳情

微信公眾號(hào)在14年10月份上線，不論是消費(fèi)者或合作方反響都很好，也使我們順其自然地拿到了二期商城開發(fā)的合約

雖然是個(gè)輕應(yīng)用，項(xiàng)目不大，在設(shè)計(jì)的時(shí)候，思考的地方不少，是一個(gè)不斷協(xié)調(diào)的過(guò)程，和需求、視覺、開發(fā)的小伙伴也討論很多，做平衡不容易，每個(gè)設(shè)計(jì)師都會(huì)有自己不同的設(shè)計(jì)思維和方法，目標(biāo)都是解決問(wèn)題并推動(dòng)項(xiàng)目向好的方向發(fā)展。

標(biāo)題名稱：購(gòu)物商城微信公眾號(hào)交互設(shè)計(jì)
文章起源：http://www.bm7419.com/news7/162407.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有微信公眾號(hào)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)