My Alibaba后臺(tái)首頁(yè)及導(dǎo)航風(fēng)格改版項(xiàng)目總結(jié)
![](http://image.woshipm.com/wp-files/img/107.jpg)
![](https://image.woshipm.com/wp-files/2013/06/38fc6fa326d62cd6a72dfbe7d8051d58.jpg)
首頁(yè)框架結(jié)構(gòu)及樣式
導(dǎo)航欄
先是進(jìn)行了老頁(yè)面的框架結(jié)構(gòu)及樣式的改動(dòng)。
在國(guó)際站中會(huì)員類型繁多,在業(yè)務(wù)上為了滿足每個(gè)會(huì)員階段中的不同的需求,從而出現(xiàn)了多種版本的后臺(tái)首頁(yè),在這過(guò)程中出現(xiàn)了歷史遺的留問(wèn):風(fēng)格差異越大,用戶體驗(yàn)上毫無(wú)延續(xù)性。在設(shè)計(jì)前簡(jiǎn)單分析了后臺(tái)首頁(yè)功能本身作用于操作體驗(yàn)的平衡性。
首頁(yè)更多是承載關(guān)鍵性動(dòng)態(tài)提示、相關(guān)信息第一層級(jí)入口和用戶操作的主行為。
比起前臺(tái)產(chǎn)品信息的可視化展示、后臺(tái)更多的作用是【工具】。
在交互階段從新調(diào)整了MA后臺(tái)信息結(jié)構(gòu)。
把信息模塊中的需要強(qiáng)化的【待辦事項(xiàng)】和【會(huì)員生命周期引導(dǎo)】主要價(jià)值點(diǎn)內(nèi)容放在了最核心位置,在用戶從免費(fèi)會(huì)員到基礎(chǔ)認(rèn)證會(huì)員,再到成為收費(fèi)會(huì)員過(guò)程中這個(gè)結(jié)構(gòu)始終不會(huì)有變化。
![](https://image.woshipm.com/wp-files/2013/06/a7f6241445a3a3bfbd7dc31d1cc778e0.png)
![](https://image.woshipm.com/wp-files/2013/06/ab79ef9fed838f076c05c4d6242f04fb.png)
![](https://image.woshipm.com/wp-files/2013/06/73cab4ddac408e4977b96492ecae81c1.png)
![](https://image.woshipm.com/wp-files/2013/06/d465c7998c31cb06e744bb9d7c72636e.png)
![](https://image.woshipm.com/wp-files/2013/06/5db7cfbc82d4f7b40fcebdb7151d7b9e.png)
![](https://image.woshipm.com/wp-files/2013/06/f2348eeedd9d83d7293b6a1895fd3ab7.png)
把當(dāng)前的ma后臺(tái)大多數(shù)頁(yè)面分為兩個(gè)模塊:一級(jí)二級(jí)導(dǎo)航區(qū)、內(nèi)容操作區(qū),從縮略圖可以看出目前的設(shè)計(jì),導(dǎo)航的視覺(jué)層級(jí)高于內(nèi)容操作區(qū)。
![](https://image.woshipm.com/wp-files/2013/06/35f06a98a8564ecbaf14a2017e00a497.png)
1)用戶來(lái)到MA后臺(tái)某個(gè)界面如產(chǎn)品管理頁(yè)主要目的是什么?
對(duì)自己發(fā)布的產(chǎn)品進(jìn)行管理(包括查看發(fā)布的產(chǎn)品是否通過(guò)審核、對(duì)未通過(guò)審核的產(chǎn)品進(jìn)行編輯等)
2)用戶來(lái)到MA后臺(tái)某界面如何行為?
一般是先查看自己關(guān)心的內(nèi)容如審核未通過(guò)的產(chǎn)品,然后進(jìn)行相應(yīng)的操作如編輯或刪除,用戶想要離開(kāi)本頁(yè)面時(shí),會(huì)去找導(dǎo)航
3)導(dǎo)航的作用是什么?
告訴用戶MA后臺(tái)有哪些內(nèi)容可管理,當(dāng)前你在哪個(gè)頁(yè)面,當(dāng)用戶需要離開(kāi)本頁(yè)面或迷路時(shí),能快速找到他想要去的頁(yè)面
從以上對(duì)問(wèn)題的解答,可初步得出結(jié)論:
MA后臺(tái)的導(dǎo)航是可以弱化的,但要固定導(dǎo)航的位置,同時(shí)清晰表達(dá)當(dāng)前的位置
為了驗(yàn)證這個(gè)分析思路的合理性,我還需要看看其他網(wǎng)站的做法:
1、支付寶首頁(yè)的改版,老版的視覺(jué)層級(jí)最高的時(shí)導(dǎo)航及推廣的活動(dòng),問(wèn)了周圍的同事,來(lái)到支付寶首頁(yè)最常用的功能是什么?基本上作為老用戶的我們主要是進(jìn)行登錄操作;新版首頁(yè)針對(duì)新用戶強(qiáng)調(diào)了支付寶的核心價(jià)值,針對(duì)老用戶強(qiáng)調(diào)登錄操作,而原先視覺(jué)層級(jí)很高的導(dǎo)航被弱化,但仍然不失導(dǎo)航的作用。
![](https://image.woshipm.com/wp-files/2013/06/96f7c4ded36995a4fc624f51c40dd24e.png)
![](https://image.woshipm.com/wp-files/2013/06/07fd3574e5c17044f02ad3c12a0e5442.jpg)
我們前后也嘗試了好幾種方案來(lái)達(dá)到這個(gè)目的:
版本1:將一級(jí)導(dǎo)航和頁(yè)頭統(tǒng)一用灰色底,形成一個(gè)整體,和內(nèi)容分離
![](https://image.woshipm.com/wp-files/2013/06/60bac12fc52f444be5ef8d78b2a5ece9.jpg)
![](https://image.woshipm.com/wp-files/2013/06/15f61ccbb03d19f406522a1b4c3e0b65.jpg)
![](https://image.woshipm.com/wp-files/2013/06/54ebace3ec02642615aec483d3fc5dcc.jpg)
用研同學(xué)選取4000名海外用戶,將新老版本圖片分別發(fā)給2000名用戶,設(shè)置兩項(xiàng)任務(wù):
1、首先看到的是MA首頁(yè),需要對(duì)自己的產(chǎn)品進(jìn)行管理,讓用戶點(diǎn)擊圖片上的區(qū)域(驗(yàn)證一級(jí)導(dǎo)航)
2、進(jìn)入產(chǎn)品管理頁(yè)面,用戶需要發(fā)布新產(chǎn)品,再次點(diǎn)擊(驗(yàn)證二級(jí)導(dǎo)航)
從調(diào)研結(jié)果看:
在內(nèi)容定位上,新版本導(dǎo)航用戶點(diǎn)擊率高于老版本
![](https://image.woshipm.com/wp-files/2013/06/e79fe09e8f285bf0b1b1d3b5b2aadda7.jpg)
![](https://image.woshipm.com/wp-files/2013/06/49a8c9226b1dd5f30564ae07947b5287.jpg)
這個(gè)項(xiàng)目整個(gè)過(guò)程比較完整,我同時(shí)扮演了一次PM的角色,受益很多,讓我看到從視覺(jué)專業(yè)角度想辦法促進(jìn)產(chǎn)品體驗(yàn),我們的設(shè)計(jì)是可被衡量的,設(shè)計(jì)師不僅僅是資源,我們也可以主導(dǎo)發(fā)起需求,來(lái)達(dá)到用戶體驗(yàn)提升甚至促進(jìn)業(yè)務(wù)目標(biāo)達(dá)成的效果。
來(lái)源:pmtoo
- 目前還沒(méi)評(píng)論,等你發(fā)揮!