設計背景

由于微信公眾號輕應用的設計需要在微信的結構框架中進行，信息架構和導航布局需要基于微信的開發接口和架構來做，項目開始時微信針對公眾號的導航框架剛好有做出調整，在進入公眾號里面的頁面后可以逐級返回上一級頁面，而不是之前直接返回到公眾號首頁。在微信改版之前，也做了一套微信輕應用交互模板，由于輕應用導航欄的調整，頁面留出了更多內容顯示空間，頁面操作也流暢了許多。

圖1可以看出，如果在輕應用頁面上要返回上一級頁面，需要設計一個單獨的導航條，這樣和微信已有的導航欄并在一起形成了雙導航欄，頁面顯得雞肋，出了占用屏幕空間外，操作起來也很累贅，還容易導致點擊錯誤。

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

項目需求

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

需求分析

分兩個角色——商家和會員（消費者），兩個場景——商城和會員卡。對于商家來說：通過商城為消費者（會員）提供購物消費場地；對于會員（消費者）來說：進入商城就是消費者，購物消費就是會員，消費軌跡儲存在會員卡

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

兩個角色：商家（商城）和用戶，兩個場景（節點）：商城和會員卡

繪制界面

公眾號首頁

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

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

會員卡激活流程

由于要考慮到線下已辦理會員卡的用戶，在第一次設計的時候，分了兩個的入口，有會員卡的選擇綁定，輸入會員卡號碼，新會員選擇激活，輸入手機號碼

設計出來后，感覺讓用戶去選擇入口激活，用戶容易出錯，而且體驗不流暢

最后和需求的小伙伴溝通，問了商城業務人員，其實消費者在線下辦理會員卡時，需要填寫手機號碼，這一點很重要，因為新會員激活時也需要手機號碼，于是統一使用手機號碼來激活，如果已有在實體店辦理會員卡，會給出提示再進行線上激活，如果之前沒有辦理，默認手機號為會員卡號，直接激活，然后修改交易密碼

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

會員卡頁面

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

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

會員卡充值

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

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

訂單詳情頁面

訂單詳情頁的設計主要考慮在不同網絡環境下查看詳情，默認為圖文顯示，如果是網絡環境較差，加載很慢時，也可以主動切換到文本顯示查看，縮短用戶等待時間，提升用戶體驗。

視覺設計

視覺設計師小哥超帥了，給我的感覺是他一稿就通過的（哈哈），最后的效果也是棒棒噠（點贊），上圖...

會員卡激活成功

會員卡中心

會員卡充值

訂單圖文詳情

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

雖然是個輕應用，項目不大，在設計的時候，思考的地方不少，是一個不斷協調的過程，和需求、視覺、開發的小伙伴也討論很多，做平衡不容易，每個設計師都會有自己不同的設計思維和方法，目標都是解決問題并推動項目向好的方向發展。

標題名稱：購物商城微信公眾號交互設計
文章起源：http://newbst.com/news7/162407.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有微信公眾號等

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯