Alibaba國際站首頁改版小結(jié)

時間：2023-04-25 23:27:01 | 來源：網(wǎng)站運營

時間：2023-04-25 23:27:01 來源：網(wǎng)站運營

Alibaba國際站首頁改版小結(jié)：阿里巴巴國際站（Alibaba.com）是全球最大、最有影響力的B2B電子商務平臺，是阿里巴巴集團的旗艦公司。長期以來，阿里巴巴國際站視覺風格并未隨著業(yè)務的突飛猛進而有更富魅力的改變，呈現(xiàn)在用戶面前的，依舊是稍顯過時的設(shè)計風格。隨著用戶需求和公司業(yè)務的壓力，對網(wǎng)站的視覺重構(gòu)就成了迫在眉睫的事情，是時候來一次激動人心變革了！
一. 目前線上版本分析



上圖為目前線上版本，較2009年的版本，總體設(shè)計風格和信息結(jié)構(gòu)沒有太多的變化：
1. 首頁沒有傳遞出http://Alibaba.com的業(yè)務方向和核心價值；
2. 隨著業(yè)務方向發(fā)展，不能滿足業(yè)務需求；
3. 設(shè)計風格過時，設(shè)計風格不統(tǒng)一。

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



通過用戶調(diào)研分析，目前網(wǎng)站用戶對http://Alibaba.com提供的這幾個核心服務的認知度較低，所以這次首頁改版的首要目標就是要進行用戶教育并傳遞網(wǎng)站的核心服務。

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



四. 視覺推導——風格、色彩
新視覺風格探索主要從以下幾個維度考慮
1. 色調(diào)，感受，明亮的，柔和的，還是暗沉的；
2. Icon，字體，統(tǒng)一性，傳達的感覺，Icon和字體要有連續(xù)；
3. 松緊度，留白，行間距，字間距，寬松度；
4. 結(jié)構(gòu)，整齊的，流式的，開放的，還是閉合的。

設(shè)計趨勢
近幾年來，隨著Metro風格的簡潔與直觀、Google全新的UI體驗、Android 4.0系統(tǒng)的平面化，各大主流界面的風格都趨向于簡潔，結(jié)構(gòu)清晰，信息突出，減少噪音。
新首頁視覺關(guān)鍵字



通過視覺關(guān)鍵字尋找新色域



確定配色



藍色是靈性知性兼具的色彩，在色彩心理學的測試中發(fā)現(xiàn)幾乎沒有人對藍色反感。明亮的天空藍，象征希望、理性、理想、獨立等。http://ColourLovers.com公布了一項調(diào)查結(jié)果，美國前100大網(wǎng)站的Logo，主要使用12種顏色。其中，采用藍色的網(wǎng)站最多，紅色排在第二種。

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



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



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



重新繪制UI組件
簡單和統(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)研，新的視覺風格也得到了多數(shù)用戶的肯定。
引用一位歸國華僑對阿里巴巴國際站改版的評論
新首頁改版只是我們跨出優(yōu)化阿里巴巴國際站體驗的第一步，后續(xù)還會對整站其他頁面繼續(xù)分期進行優(yōu)化。
感謝大家長期以來對阿里巴巴國際站UED的關(guān)注和支持，有任何建議和意見歡迎在此跟帖回復，您的參與和支持將是阿里巴巴國際站UED進步的動力！


原文鏈接：阿里巴巴國際UED團隊 " Alibaba國際站首頁改版小結(jié)