My Alibaba后臺首頁及導航風格改版項目總結
2012年第三季度時，我們對海外賣家版My Alibaba(以下簡稱MA)首頁進行改版，當時MA后臺的視覺已有規范，但很陳舊，如果按照原來的規范進行設計，也能順利的完成需求；但我們的前臺頁面經過2012年轟轟烈烈的改版已經有了全新的面貌，風格也趨向于平面、寬松、簡約；后臺還是多年未變的樣式，體驗相對陳舊而且不統一，同時集團提出 work in Alibaba的概念，也是時候對后臺進行一些改版優化了。
當然視覺風格不統一不是發起一個改版項目的唯一目的，最根本是要分析目前的界面存在的問題，通過解決問題進行優化，改版過程分成兩個步驟。
- 首頁框架結構及樣式
- 導航欄
先是進行了老頁面的框架結構及樣式的改動。
在國際站中會員類型繁多，在業務上為了滿足每個會員階段中的不同的需求，從而出現了多種版本的后臺首頁，在這過程中出現了歷史遺的留問：風格差異越大，用戶體驗上毫無延續性。在設計前簡單分析了后臺首頁功能本身作用于操作體驗的平衡性。
- 首頁更多是承載關鍵性動態提示、相關信息***層級入口和用戶操作的主行為。
- 比起前臺產品信息的可視化展示、后臺更多的作用是【工具】。
在交互階段從新調整了MA后臺信息結構。
把信息模塊中的需要強化的【待辦事項】和【會員生命周期引導】主要價值點內容放在了最核心位置，在用戶從免費會員到基礎認證會員，再到成為收費會員過程中這個結構始終不會有變化。
在之前的后臺有多個不同的尺寸版本，按DPL規范中的柵格公式從新劃分了左右框架。因后臺子頁面暫時不改動寬度，暫時采用了960px，但為后續改動為990px做了準備。
把關鍵信息內容展示在***屏，盡量顯示在500～600之間，現訪問國際站的用戶中縱向分辨率800以內設備的占據70%以上。
#p#
樣式風格：首先要考慮使用我們網站后臺的用戶群及商業屬性。用戶多為男性，屬于貿易類在線管理后臺。所以體現更加工具類特性的設計。在設計上盡量做了精簡，采用了全站統一式的灰色框體，也把信息塊之間用框體圈了起來，讓信息結構簡潔明了，也體現扁平的效果。
買家頭部搜索框：考慮到搜索不是用戶在后臺的主行為，同時為了減少用戶在操作中的干擾，弱化了整體搜索框。
最終設計稿：
此后單獨做了導航欄的改版。
把當前的ma后臺大多數頁面分為兩個模塊：一級二級導航區、內容操作區，從縮略圖可以看出目前的設計，導航的視覺層級高于內容操作區。
為了重新確定界面視覺層級，先問自己三個問題并進行回答：
1）用戶來到MA后臺某個界面如產品管理頁主要目的是什么？
對自己發布的產品進行管理（包括查看發布的產品是否通過審核、對未通過審核的產品進行編輯等）
2）用戶來到MA后臺某界面如何行為？
一般是先查看自己關心的內容如審核未通過的產品，然后進行相應的操作如編輯或刪除，用戶想要離開本頁面時，會去找導航
3）導航的作用是什么？
告訴用戶MA后臺有哪些內容可管理，當前你在哪個頁面，當用戶需要離開本頁面或迷路時，能快速找到他想要去的頁面
#p#
從以上對問題的解答，可初步得出結論：
MA后臺的導航是可以弱化的，但要固定導航的位置，同時清晰表達當前的位置
為了驗證這個分析思路的合理性，我還需要看看其他網站的做法：
1、支付寶首頁的改版，老版的視覺層級***的時導航及推廣的活動，問了周圍的同事，來到支付寶首頁最常用的功能是什么？基本上作為老用戶的我們主要是進行登錄操作；新版首頁針對新用戶強調了支付寶的核心價值，針對老用戶強調登錄操作，而原先視覺層級很高的導航被弱化，但仍然不失導航的作用。
2、Google+界面典型的以內容為中心，導航在側邊弱化，用戶需要切換時也能快速找到，同時也清晰的表明了當前的位置
經過前面的界面分析及競品分析，后面就是根據得出的結論進行設計了，在設計過程中，視覺需要解決的主要問題是，導航被弱化后，如何才能做到內容和導航的分離，使用戶來到MA后臺后，能快速定位到自己關注的內容部分
我們前后也嘗試了好幾種方案來達到這個目的：
版本1：將一級導航和頁頭統一用灰色底，形成一個整體，和內容分離
版本2：將導航弱化成灰色，100%通欄設計
***我們考慮MA首頁及子頁面的適用性，得出設計終稿
#p#
在項目推行過程中，因為后臺涉及到多個業務方，而且導航從原來視覺層級***，降到很弱，變化很大，大家雖然覺得前面的分析很有道理，但還是不免擔心因為視覺層級降弱，用戶找不到導航；基于業務方的接受度及用戶的接受度，我們借助用研團隊的在線調研工具來驗證哪個設計更優：
用研同學選取4000名海外用戶，將新老版本圖片分別發給2000名用戶，設置兩項任務：
1、首先看到的是MA首頁，需要對自己的產品進行管理，讓用戶點擊圖片上的區域（驗證一級導航）
2、進入產品管理頁面，用戶需要發布新產品，再次點擊（驗證二級導航）
從調研結果看：
在內容定位上，新版本導航用戶點擊率高于老版本
用戶尋找導航的速度，新版本也大大高于老版本。
用研的數據，驗證了新設計的體驗更優于老版本，對后面我們推進這個設計方案落地執行并上線，起了很大的幫助。
這個項目整個過程比較完整，我同時扮演了一次PM的角色，受益很多，讓我看到從視覺專業角度想辦法促進產品體驗，我們的設計是可被衡量的，設計師不僅僅是資源，我們也可以主導發起需求，來達到用戶體驗提升甚至促進業務目標達成的效果。
