阿里巴巴國際版網(wǎng)站改版總結(jié)

阿里巴巴國際站(Alibaba.com)是全球最大、最有影響力的B2B電子商務(wù)平臺,是阿里巴巴集團的旗艦公司。長期以來,阿里巴巴國際站視覺風(fēng)格并未隨著業(yè)務(wù)的突飛猛進而有更富魅力的改變,呈現(xiàn)在用戶面前的,依舊是稍顯過時的設(shè)計風(fēng)格。隨著用戶需求和公司業(yè)務(wù)的壓力,對網(wǎng)站的視覺重構(gòu)就成了迫在眉睫的事情,是時候來一次激動人心變革了!
一. 目前線上版本分析
1. 首頁沒有傳遞出Alibaba.com的業(yè)務(wù)方向和核心價值;
2. 隨著業(yè)務(wù)方向發(fā)展,不能滿足業(yè)務(wù)需求;
3. 設(shè)計風(fēng)格過時,設(shè)計風(fēng)格不統(tǒng)一。
二. 用戶需求分析
分析用戶需求之前,一起來看一下外貿(mào)B2B生意從工廠到發(fā)貨的重要環(huán)節(jié)有哪些,Alibaba對應(yīng)這些環(huán)節(jié)有哪些相關(guān)配套服務(wù)。

三. 信息推導(dǎo)——框架結(jié)構(gòu)
William Strunk和E. B. White的《The Elements of Style》里寫到:”越精簡的文字越有力。一句話里不應(yīng)該有多余的詞兒,一段話里不應(yīng)該有多余的句子。同樣,一幅畫里不應(yīng)該有多余的線條,一臺機器也不應(yīng)該有多余的零件?!?/p>
對首頁信息進行重新梳理,去掉長期沒人運營的冗余信息;重新調(diào)整信息結(jié)構(gòu),核心位置傳遞網(wǎng)站核心價值信息;只專注那些用戶最需要的功能,用20%的基本功能去滿足80%用戶的需求。
新首頁最終線框圖

新視覺風(fēng)格探索主要從以下幾個維度考慮
1. 色調(diào),感受,明亮的,柔和的,還是暗沉的;
2. Icon,字體,統(tǒng)一性,傳達的感覺,Icon和字體要有連續(xù);
3. 松緊度,留白,行間距,字間距,寬松度;
4. 結(jié)構(gòu),整齊的,流式的,開放的,還是閉合的。
設(shè)計趨勢
近幾年來,隨著Metro風(fēng)格的簡潔與直觀、Google全新的UI體驗、Android 4.0系統(tǒng)的平面化,各大主流界面的風(fēng)格都趨向于簡潔,結(jié)構(gòu)清晰,信息突出,減少噪音。
新首頁視覺關(guān)鍵字

確定配色

五. 設(shè)計展示
我們把用戶需求轉(zhuǎn)化成信息結(jié)構(gòu),并在用戶群體的生活空間里尋找到網(wǎng)站的顏色趨向,接下來,我們把理論轉(zhuǎn)化為交互和視覺的表現(xiàn)方式,新的國際站設(shè)計風(fēng)格從而順利誕生了。

一致性意味著產(chǎn)品界面的不同模塊要有相似的外觀、感覺和行為。這次改版,我們對網(wǎng)站核心頁面同時進行了優(yōu)化,為用戶提供無縫而舒服的瀏覽體驗。

老版本的Icon一是樣式不統(tǒng)一;二是原來的Icon質(zhì)感太重。在新版設(shè)計中,我們對新Icon全部采用扁平化處理,用實色填充新繪制的Icon更加能體現(xiàn)出新版本的簡潔、清新。

簡單和統(tǒng)一是體驗的關(guān)鍵。新繪制的UI組件,盡可能的去減低UI元素的強度;新繪制的Button采用CSS3實現(xiàn)圓角和漸變;每個組件有2-3個不同的尺寸,盡最大可能為用戶帶來統(tǒng)一的體驗。

由于考慮到時間和篇幅問題,這次小結(jié)還有很多細節(jié)沒有分析到,比如首頁為什么采用990px網(wǎng)格系統(tǒng),布局上采用怎樣的邏輯路徑是合理而有效的等。后續(xù)會繼續(xù)給大家分享。
新首頁發(fā)布后,做了A/B測試,做了針對新首頁的用戶調(diào)研,新的視覺風(fēng)格也得到了多數(shù)用戶的肯定。
引用一位歸國華僑對阿里巴巴國際站改版的評論
新首頁改版只是我們跨出優(yōu)化阿里巴巴國際站體驗的第一步,后續(xù)還會對整站其他頁面繼續(xù)分期進行優(yōu)化。
感謝大家長期以來對阿里巴巴國際站UED的關(guān)注和支持,有任何建議和意見歡迎在此跟帖回復(fù),您的參與和支持將是阿里巴巴國際站UED進步的動力!
來源:阿里巴巴國際站UED
馬云確實是中國一大驕傲