My Alibaba后臺(tái)首頁(yè)及導(dǎo)航風(fēng)格改版項(xiàng)目總結(jié)

2012年第三季度時(shí)，我們對(duì)海外賣家版My Alibaba(以下簡(jiǎn)稱MA)首頁(yè)進(jìn)行改版，當(dāng)時(shí)MA后臺(tái)的視覺已有規(guī)范，但很陳舊，如果按照原來的規(guī)范進(jìn)行設(shè)計(jì)，也能順利的完成需求；但我們的前臺(tái)頁(yè)面經(jīng)過2012年轟轟烈烈的改版已經(jīng)有了全新的面貌，風(fēng)格也趨向于平面、寬松、簡(jiǎn)約；后臺(tái)還是多年未變的樣式，體驗(yàn)相對(duì)陳舊而且不統(tǒng)一，同時(shí)集團(tuán)提出work in Alibaba的概念，也是時(shí)候?qū)笈_(tái)進(jìn)行一些改版優(yōu)化了。

當(dāng)然視覺風(fēng)格不統(tǒng)一不是發(fā)起一個(gè)改版項(xiàng)目的唯一目的，最根本是要分析目前的界面存在的問題，通過解決問題進(jìn)行優(yōu)化，改版過程分成兩個(gè)步驟。

1. 首頁(yè)框架結(jié)構(gòu)及樣式
2. 導(dǎo)航欄

先是進(jìn)行了老頁(yè)面的框架結(jié)構(gòu)及樣式的改動(dòng)。

在國(guó)際站中會(huì)員類型繁多，在業(yè)務(wù)上為了滿足每個(gè)會(huì)員階段中的不同的需求，從而出現(xiàn)了多種版本的后臺(tái)首頁(yè)，在這過程中出現(xiàn)了歷史遺的留問：風(fēng)格差異越大，用戶體驗(yàn)上毫無延續(xù)性。在設(shè)計(jì)前簡(jiǎn)單分析了后臺(tái)首頁(yè)功能本身作用于操作體驗(yàn)的平衡性。

1. 首頁(yè)更多是承載關(guān)鍵性動(dòng)態(tài)提示、相關(guān)信息第一層級(jí)入口和用戶操作的主行為。
2. 比起前臺(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ì)員過程中這個(gè)結(jié)構(gòu)始終不會(huì)有變化。

在之前的后臺(tái)有多個(gè)不同的尺寸版本，按DPL規(guī)范中的柵格公式從新劃分了左右框架。因后臺(tái)子頁(yè)面暫時(shí)不改動(dòng)寬度，暫時(shí)采用了960px，但為后續(xù)改動(dòng)為990px做了準(zhǔn)備。

把關(guān)鍵信息內(nèi)容展示在第一屏，盡量顯示在500～600之間，現(xiàn)訪問國(guó)際站的用戶中縱向分辨率800以內(nèi)設(shè)備的占據(jù)70%以上。

樣式風(fēng)格：首先要考慮使用我們網(wǎng)站后臺(tái)的用戶群及商業(yè)屬性。用戶多為男性，屬于貿(mào)易類在線管理后臺(tái)。所以體現(xiàn)更加工具類特性的設(shè)計(jì)。在設(shè)計(jì)上盡量做了精簡(jiǎn)，采用了全站統(tǒng)一式的灰色框體，也把信息塊之間用框體圈了起來，讓信息結(jié)構(gòu)簡(jiǎn)潔明了，也體現(xiàn)扁平的效果。

買家頭部搜索框：考慮到搜索不是用戶在后臺(tái)的主行為，同時(shí)為了減少用戶在操作中的干擾，弱化了整體搜索框。

最終設(shè)計(jì)稿：

此后單獨(dú)做了導(dǎo)航欄的改版。

把當(dāng)前的ma后臺(tái)大多數(shù)頁(yè)面分為兩個(gè)模塊：一級(jí)二級(jí)導(dǎo)航區(qū)、內(nèi)容操作區(qū)，從縮略圖可以看出目前的設(shè)計(jì)，導(dǎo)航的視覺層級(jí)高于內(nèi)容操作區(qū)。

為了重新確定界面視覺層級(jí)，先問自己三個(gè)問題并進(jìn)行回答：

1）用戶來到MA后臺(tái)某個(gè)界面如產(chǎn)品管理頁(yè)主要目的是什么？

對(duì)自己發(fā)布的產(chǎn)品進(jìn)行管理（包括查看發(fā)布的產(chǎn)品是否通過審核、對(duì)未通過審核的產(chǎn)品進(jìn)行編輯等）

2）用戶來到MA后臺(tái)某界面如何行為？

一般是先查看自己關(guān)心的內(nèi)容如審核未通過的產(chǎn)品，然后進(jìn)行相應(yīng)的操作如編輯或刪除，用戶想要離開本頁(yè)面時(shí)，會(huì)去找導(dǎo)航

3）導(dǎo)航的作用是什么？

告訴用戶MA后臺(tái)有哪些內(nèi)容可管理，當(dāng)前你在哪個(gè)頁(yè)面，當(dāng)用戶需要離開本頁(yè)面或迷路時(shí)，能快速找到他想要去的頁(yè)面

從以上對(duì)問題的解答，可初步得出結(jié)論：

MA后臺(tái)的導(dǎo)航是可以弱化的，但要固定導(dǎo)航的位置，同時(shí)清晰表達(dá)當(dāng)前的位置

為了驗(yàn)證這個(gè)分析思路的合理性，我還需要看看其他網(wǎng)站的做法：

1、支付寶首頁(yè)的改版，老版的視覺層級(jí)最高的時(shí)導(dǎo)航及推廣的活動(dòng)，問了周圍的同事，來到支付寶首頁(yè)最常用的功能是什么？基本上作為老用戶的我們主要是進(jìn)行登錄操作；新版首頁(yè)針對(duì)新用戶強(qiáng)調(diào)了支付寶的核心價(jià)值，針對(duì)老用戶強(qiáng)調(diào)登錄操作，而原先視覺層級(jí)很高的導(dǎo)航被弱化，但仍然不失導(dǎo)航的作用。

2、Google+界面典型的以內(nèi)容為中心，導(dǎo)航在側(cè)邊弱化，用戶需要切換時(shí)也能快速找到，同時(shí)也清晰的表明了當(dāng)前的位置

經(jīng)過前面的界面分析及競(jìng)品分析，后面就是根據(jù)得出的結(jié)論進(jìn)行設(shè)計(jì)了，在設(shè)計(jì)過程中，視覺需要解決的主要問題是，導(dǎo)航被弱化后，如何才能做到內(nèi)容和導(dǎo)航的分離，使用戶來到MA后臺(tái)后，能快速定位到自己關(guān)注的內(nèi)容部分

我們前后也嘗試了好幾種方案來達(dá)到這個(gè)目的：

版本1：將一級(jí)導(dǎo)航和頁(yè)頭統(tǒng)一用灰色底，形成一個(gè)整體，和內(nèi)容分離

版本2：將導(dǎo)航弱化成灰色，100%通欄設(shè)計(jì)

最后我們考慮MA首頁(yè)及子頁(yè)面的適用性，得出設(shè)計(jì)終稿

在項(xiàng)目推行過程中，因?yàn)楹笈_(tái)涉及到多個(gè)業(yè)務(wù)方，而且導(dǎo)航從原來視覺層級(jí)最高，降到很弱，變化很大，大家雖然覺得前面的分析很有道理，但還是不免擔(dān)心因?yàn)橐曈X層級(jí)降弱，用戶找不到導(dǎo)航；基于業(yè)務(wù)方的接受度及用戶的接受度，我們借助用研團(tuán)隊(duì)的在線調(diào)研工具來驗(yàn)證哪個(gè)設(shè)計(jì)更優(yōu)：

用研同學(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)擊率高于老版本

用戶尋找導(dǎo)航的速度，新版本也大大高于老版本。

用研的數(shù)據(jù)，驗(yàn)證了新設(shè)計(jì)的體驗(yàn)更優(yōu)于老版本，對(duì)后面我們推進(jìn)這個(gè)設(shè)計(jì)方案落地執(zhí)行并上線，起了很大的幫助。

這個(gè)項(xiàng)目整個(gè)過程比較完整，我同時(shí)扮演了一次PM的角色，受益很多，讓我看到從視覺專業(yè)角度想辦法促進(jìn)產(chǎn)品體驗(yàn)，我們的設(shè)計(jì)是可被衡量的，設(shè)計(jì)師不僅僅是資源，我們也可以主導(dǎo)發(fā)起需求，來達(dá)到用戶體驗(yàn)提升甚至促進(jìn)業(yè)務(wù)目標(biāo)達(dá)成的效果。