實戰(zhàn)：My Alibaba后臺首頁及導(dǎo)航風(fēng)格改版項目總結(jié)

實戰(zhàn)：MyAlibaba后臺首頁及導(dǎo)航風(fēng)格改版項目總結(jié)

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