1. 首頁沒有傳遞出Alibaba.com的業(yè)務(wù)方向和核心價(jià)值;

2. 隨著業(yè)務(wù)方向發(fā)展，不能滿足業(yè)務(wù)需求;

3. 設(shè)計(jì)風(fēng)格過時(shí)，設(shè)計(jì)風(fēng)格不統(tǒng)一。

　　二. 用戶需求分析

分析用戶需求之前，一起來看一下外貿(mào)B2B生意從工廠到發(fā)貨的重要環(huán)節(jié)有哪些，Alibaba對(duì)應(yīng)這些環(huán)節(jié)有哪些相關(guān)配套服務(wù)。

　　三. 信息推導(dǎo)——框架結(jié)構(gòu)

William Strunk和E. B. White的《The Elements of Style》里寫到：”越精簡(jiǎn)的文字越有力。一句話里不應(yīng)該有多余的詞兒，一段話里不應(yīng)該有多余的句子。同樣，一幅畫里不應(yīng)該有多余的線條，一臺(tái)機(jī)器也不應(yīng)該有多余的零件?！?/p>

對(duì)首頁信息進(jìn)行重新梳理，去掉長(zhǎng)期沒人運(yùn)營(yíng)的冗余信息;重新調(diào)整信息結(jié)構(gòu)，核心位置傳遞網(wǎng)站核心價(jià)值信息;只專注那些用戶最需要的功能，用20%的基本功能去滿足80%用戶的需求。

新首頁最終線框圖

新視覺風(fēng)格探索主要從以下幾個(gè)維度考慮

1. 色調(diào)，感受，明亮的，柔和的，還是暗沉的;

2. Icon，字體，統(tǒng)一性，傳達(dá)的感覺，Icon和字體要有連續(xù);

3. 松緊度，留白，行間距，字間距，寬松度;

4. 結(jié)構(gòu)，整齊的，流式的，開放的，還是閉合的。

設(shè)計(jì)趨勢(shì)

近幾年來，隨著Metro風(fēng)格的簡(jiǎn)潔與直觀、Google全新的UI體驗(yàn)、Android 4.0系統(tǒng)的平面化，各大主流界面的風(fēng)格都趨向于簡(jiǎn)潔，結(jié)構(gòu)清晰，信息突出，減少噪音。

新首頁視覺關(guān)鍵字

確定配色

　　五. 設(shè)計(jì)展示

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

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

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

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

由于考慮到時(shí)間和篇幅問題，這次小結(jié)還有很多細(xì)節(jié)沒有分析到，比如首頁為什么采用990px網(wǎng)格系統(tǒng)，布局上采用怎樣的邏輯路徑是合理而有效的等。后續(xù)會(huì)繼續(xù)給大家分享。

新首頁發(fā)布后，做了A/B測(cè)試，做了針對(duì)新首頁的用戶調(diào)研，新的視覺風(fēng)格也得到了多數(shù)用戶的肯定。

引用一位歸國(guó)華僑對(duì)阿里巴巴國(guó)際站改版的評(píng)論

新首頁改版只是我們跨出優(yōu)化阿里巴巴國(guó)際站體驗(yàn)的第一步，后續(xù)還會(huì)對(duì)整站其他頁面繼續(xù)分期進(jìn)行優(yōu)化。

感謝大家長(zhǎng)期以來對(duì)阿里巴巴國(guó)際站UED的關(guān)注和支持，有任何建議和意見歡迎在此跟帖回復(fù)，您的參與和支持將是阿里巴巴國(guó)際站UED進(jìn)步的動(dòng)力!

來源：阿里巴巴國(guó)際站UED