整理了一個(gè)售前項(xiàng)目的案例，重新繪制了36個(gè)原型頁面，1張思維導(dǎo)圖，3張流程圖，2張對比圖，1張結(jié)構(gòu)圖，介紹一家百貨購物中心微信服務(wù)號改版的設(shè)計(jì)。

下文中，圖片不清晰可查看我的LOFTER使用圖片放大查看。

一、 用戶體驗(yàn)五要素

1. 戰(zhàn)略層

這其實(shí)是甲方公司的考慮，可以理解為大多數(shù)百貨行業(yè)都在通過移動端提供用戶更好服務(wù)，所以我們的甲方也在其中。

2. 范圍層

移動端是設(shè)計(jì)包括App和移動網(wǎng)頁端，包括各類新媒體，目前要解決的問題是，打通微信公眾服務(wù)號、App以及商城線下，為用戶提供全角度的服務(wù)。

3. 結(jié)構(gòu)層

微信公眾服務(wù)號的功能點(diǎn)，既要配合了其他服務(wù)渠道，也需要實(shí)現(xiàn)其自身的價(jià)值。在結(jié)構(gòu)設(shè)置上可以分為（1）配合線下的活動頁面（2）微信獨(dú)有的功能頁面（3）背靠完整的會員服務(wù)體系。核心是服務(wù)，對象是用戶，也就是會員。重點(diǎn)就是會員服務(wù)。

4. 框架層

目前的交互設(shè)計(jì)主要圍繞這個(gè)層次，要保證每個(gè)鏈接到頁面的跳轉(zhuǎn)邏輯時(shí)順暢的，且對應(yīng)結(jié)構(gòu)層來說是完整的，每個(gè)頁面的設(shè)計(jì)符合用戶的心理模型，且保留一定的再開發(fā)性，為日后的拓展鋪墊更多。

5. 表現(xiàn)層

微信公眾號的設(shè)計(jì)不同于App，所以就本項(xiàng)目的表現(xiàn)層基本在框架層上進(jìn)一步優(yōu)化，本文就省略了。

二、 競品分析

1. 選擇競品

找對競品很重要，同行業(yè)或者同用戶群，功能類似或者定位類似，都是需要考慮的，找了以下五個(gè)（橫向思考）：

1. 大悅城：年輕時(shí)尚，相同的用戶群。
2. 大丸百貨：外資百貨，高大上，相同的服務(wù)品質(zhì)。
3. K11：含藝術(shù)氣息的商業(yè)百貨。
4. 萬達(dá)：全國覆蓋面較廣的集團(tuán)公司。
5. 銀泰：浙江省較早開發(fā)互聯(lián)網(wǎng)的零售業(yè)百貨公司。

2. 對比分析類型百貨類公眾號的概括

可以得出每個(gè)競品的側(cè)重點(diǎn)不一，而結(jié)合起來反而是甲方所需要的部分。

總體看一共可參考的也只有三大功能點(diǎn)：會員、APP引流、商城，以及各自的特色服務(wù)，會根據(jù)商場的營銷活動而變動?？紤]到線上商城并不是甲方本次改版微信公眾號的的服務(wù)目的，就是省略了該部分的設(shè)計(jì)。

橫向的競品只需要概括到結(jié)構(gòu)層就可以了，框架層可以參考的競品是縱向的，各類可以實(shí)現(xiàn)該功能的App頁面的設(shè)計(jì)版式都是可以對比參考的，不需要只在同行業(yè)的限制內(nèi)。

需求分析思維導(dǎo)圖：

本案例的結(jié)構(gòu)設(shè)置如圖：

三、 解決方案及設(shè)計(jì)圖

1. 流程設(shè)計(jì)

既然結(jié)構(gòu)已設(shè)定，那流程必須走通才能繪制頁面。分別從菜單的每一欄繪制流程，并考慮欄目之間的聯(lián)系。

A．菜單1

B．菜單2

C．菜單3

（因?yàn)榇笮〉年P(guān)系，此處圖片被切片，原圖查看LOFTER）

2. 用戶體驗(yàn)設(shè)計(jì)

亮點(diǎn)一：

“會員中心”和“我的實(shí)體卡”之間，是可以通過手指向下滑和向上推來實(shí)現(xiàn)的。（如果沒有綁定實(shí)體卡，會有綁定彈窗的，綁定后是順滑的手勢操作）是輕度滑動，不是長按哦！

【解說】會員中心頁是會員體系的核心，實(shí)體卡是商城服務(wù)的基礎(chǔ)，所以這個(gè)手勢設(shè)計(jì)把實(shí)體卡“埋”在信息結(jié)構(gòu)的下一層，像是揭開了遮罩，通過手勢的下滑和上滑來查閱信息。既方便又眼前一亮。（靈感來源：material design的層級設(shè)計(jì)）。

亮點(diǎn)二：

彈窗比較多。

【解說】其實(shí)算不上亮點(diǎn)，彈出的好處在于不需要單獨(dú)做狀態(tài)頁面，而且不需要返回，直接右上角的叉叉就可以關(guān)閉，進(jìn)行其他操作，這樣做可以稍微減少頁面的跳轉(zhuǎn)，這樣減少加載頁面的時(shí)間，而且把是不是進(jìn)行下一步操作的權(quán)力還給用戶，部分的彈窗上還有交互功能。（發(fā)現(xiàn)自己大概是彈窗愛好者）

四、 設(shè)計(jì)說明

1. 微信最多3個(gè)一級菜單、5個(gè)子菜單條目。
2. 最左的第一個(gè)欄目，也就是菜單1，一般是剛關(guān)注公眾號后的點(diǎn)擊率最高的菜單欄目，適合根據(jù)具體商城線下營銷活動，通過更靈活的變動，來呼應(yīng)和烘托線下活動的氛圍。同時(shí)配上微信圖文宣傳，是可以達(dá)到良好的用戶交流的效果的。
3. 最右第三個(gè)的欄目，是最靠近右手觸控的范圍的，最容易響應(yīng)的會員體系，通過這個(gè)位置實(shí)現(xiàn)其服務(wù)是恰到好處的。
4. 負(fù)責(zé)引導(dǎo)App下載的欄目位于第二欄居中，相對來說，中間點(diǎn)開的隨機(jī)可能性是三欄最小的，站在用戶的角度，我們需要考慮到這樣一種心理狀態(tài)：“我都已經(jīng)關(guān)注你公眾號了，還要特地去下一個(gè)App看在你的商城里買東西，我又不是沒有淘寶或者其他購物軟件，除非我是腦殘粉，或者積分利益驅(qū)動，不然我懶得下載。”所以我的解決方案就是“萬達(dá)式”的，任務(wù)模式+利益驅(qū)動，欄目設(shè)置成“微信福利”，同時(shí)在App內(nèi)同步打卡數(shù)據(jù)，一方面促進(jìn)用戶使用App，一方面讓用戶看到欄目能實(shí)現(xiàn)的價(jià)值。當(dāng)然甲方還可以配上線上活動優(yōu)惠券等營銷手法，比如設(shè)置H5抽獎、游戲等活動，來突出“下載App”可以的到百盛更好的服務(wù)等，空出這個(gè)位置待后期。
5. 可以通過原型圖邊上的備注看出，菜單1、2都是可以引導(dǎo)到菜單3的，同時(shí)菜單3也等于是個(gè)流程的總和，達(dá)到了設(shè)計(jì)的核心。

五、 項(xiàng)目后續(xù)

你真的想知道嗎？

哈哈！未被采用！因?yàn)楫?dāng)年我在公司的時(shí)候，負(fù)責(zé)這個(gè)項(xiàng)目的人不是我，而且我們是乙方公司，甲方想換乙方是分分鐘的事情。

當(dāng)時(shí)看到這個(gè)項(xiàng)目的時(shí)候，是售前項(xiàng)目，也就是說，就算我們給甲方公司做好了競品和原型，甲方也可以不用，找別的公司開發(fā)，其中的原因有四個(gè)：

1. 我們做得不得甲方所愿
2. 價(jià)格問題
3. 甲方負(fù)責(zé)人有多個(gè)，并且是競爭關(guān)系
4. 甲方領(lǐng)導(dǎo)已承諾了其他合作公司，借我們的成品拿去給其他公司實(shí)現(xiàn)

事實(shí)上具體什么情況我也不知道，因?yàn)楹髞砦肄o職自學(xué)UX設(shè)計(jì)了，我純粹是對這個(gè)項(xiàng)目感興趣而做的設(shè)計(jì)方案。分享給各位。

以上，僅供參考，我非常想從事UX/UE/交互工作，學(xué)了各種書和軟件。本文只是個(gè)人小見，如果不符合的地方請指出！與君共勉！

作者：Eliza（森森），UX、交互設(shè)計(jì)新人、1年產(chǎn)品運(yùn)營&用研、2年新媒體運(yùn)營。誠意想找個(gè)UX/UE/交互工作，歡迎勾搭~sensen930@foxmail.com

本文由 @Eliza 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。