購物商城微信公眾號交互設(shè)計

2 評論 17829 瀏覽 154 收藏 10 分鐘

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

1

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

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

項目需求

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

需求分析

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

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

1

兩個角色:商家(商城)和用戶,兩個場景(節(jié)點):商城和會員卡

繪制界面

公眾號首頁

1

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

(1.0版本完成會員中心模塊的設(shè)計,2.0版本完成商城模塊的設(shè)計)

會員卡激活流程

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

1

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

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

 

1

第二稿的設(shè)計智能化了,體驗流暢很多

會員卡頁面

1

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

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

會員卡充值

1

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

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

訂單詳情頁面

1

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

視覺設(shè)計

視覺設(shè)計師小哥超帥了,給我的感覺是他一稿就通過的(哈哈),最后的效果也是棒棒噠(點贊),上圖…

1

會員卡激活成功

2

會員卡中心

3

會員卡充值

4

訂單圖文詳情

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

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

最后,感謝視覺小哥的供圖 ?thx!

作者:村邊火車

來源:http://www.jianshu.com/p/cb1ec701d61b

 

 

 

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 公眾號叫啥啊,我想看看 0.0

    回復
  2. 嗯嗯

    來自廣東 回復