公眾號商城怎么設計（購物商城微信公眾號交互設計）

設計背景

由于微信(?Д?)公眾號輕應用的公眾??設計需要在微信的結構框架中進(jìn)行，信息架構和導航布局需要基于微信的號(hao)商開(kāi)發(fā)接口和架構來(lái)做，項目開(kāi)始時(shí)微信針對公眾號的城設城微導航框架剛好有做出調整，在進(jìn)入公眾號里面的計購交互頁(yè)面后可以逐級返回上一級頁(yè)面，而不是物商之前直接返回到公眾號首頁(yè)。在微信改版之前，(′▽?zhuān)?)眾號也做了一套微信輕應用交互模板，設計由于ヽ(′ー｀)ノ輕應用導航欄的公眾調整，頁(yè)面留出了更多內容顯示空間，號商頁(yè)面操作也流暢了許多微信公眾號用什么編輯器。城設城微

圖1可以看出，計購交互如果在輕應用頁(yè)面上ˉ\_(ツ)_/ˉ要返回上一級頁(yè)面，物商需要設計一個(gè)單獨的眾號導航條，這樣和微信已有的設計導航欄并在一??起形成了雙導航欄??，頁(yè)面顯得雞肋，公眾出了占用屏幕空間外，操作起來(lái)也很累贅，(′?ω?`)還容易導致點(diǎn)擊錯誤。

所以在新設計的輕應用，去掉了先前的導航欄，增加了(le)頁(yè)面空間。

項目需求

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

需求分析

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

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

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

繪制界面

公眾號首頁(yè)

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

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

會(huì )員卡激活流??程

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

設計出來(lái)后，感覺(jué)讓用戶(hù)去選擇入口激活，用戶(hù)容易出錯，而且體驗不流暢微信公眾號文章搜索

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

第二稿的設計智能化了，體驗流暢很多

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

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

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

會(huì )員??卡充值

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

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

訂單詳?情頁(yè)面

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

視覺(jué)設計

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

會(huì )員卡激活成功

會(huì )員卡中心

會(huì )員卡充值

訂單圖文詳情

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

雖然是個(gè)輕應用，項目不大??，在設計的時(shí)候，思考的地方不少，是一個(gè)不斷協(xié)調的(de)過(guò)程，和需求、視覺(jué)、開(kāi)發(fā)的小伙伴也討論很多，做平衡不容易，每個(gè)設計師都會(huì )有自己??不同的設計思維和方法，目標都是解決問(wèn)題并推動(dòng)項目??向好的方向發(fā)展。第一次把做過(guò)的項目經(jīng)歷發(fā)布出來(lái)，表述有很多不足之處，希望指正，一起交流

版權聲明：本文內容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻，該文觀(guān)點(diǎn)僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權，不承擔相關(guān)法律責任。如發(fā)現本站有涉嫌抄襲侵權/違法違規的內容， 請發(fā)送郵件至 [email protected] 舉報，一經(jīng)查實(shí)，本站將立刻刪除。