用戶體驗(yàn)分析：Alibaba國(guó)際站首頁改版小結(jié)
來源:網(wǎng)站推廣 2012-08-02
阿里巴巴國(guó)際站(Alibaba.com)是全球最大、最有影響力的B2B電子商務(wù)平臺(tái),是阿里巴巴集團(tuán)的旗艦公司。長(zhǎng)期以來,阿里巴巴國(guó)際站視覺風(fēng)格并未隨著業(yè)務(wù)的突飛猛進(jìn)而有更富魅力的改變,呈現(xiàn)在用戶面前的,依舊是稍顯過時(shí)的設(shè)計(jì)風(fēng)格。隨著用戶需求和公司業(yè)務(wù)的壓力,對(duì)網(wǎng)站的視覺重構(gòu)就成了迫在眉睫的事情,是時(shí)候來一次激動(dòng)人心變革了!
一. 目前線上版本分析:
改版前Alibaba國(guó)際站首頁
上圖為目前線上版本,較2009年的版本,總體設(shè)計(jì)風(fēng)格和信息結(jié)構(gòu)沒有太多的變化:
首頁沒有傳遞出Alibaba.com的業(yè)務(wù)方向和核心價(jià)值;
隨著業(yè)務(wù)方向發(fā)展,不能滿足業(yè)務(wù)需求;
設(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ù)。
通過用戶調(diào)研分析,目前網(wǎng)站用戶對(duì)Alibaba.com提供的這幾個(gè)核心服務(wù)的認(rèn)知度較低,所以這次首頁改版的首要目標(biāo)就是要進(jìn)行用戶教育并傳遞網(wǎng)站的核心服務(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)該有多余的零件。”對(duì)首頁信息進(jìn)行重新梳理,去掉長(zhǎng)期沒人運(yùn)營(yíng)的冗余信息;重新調(diào)整信息結(jié)構(gòu),核心位置傳遞網(wǎng)站核心價(jià)值信息;只專注那些用戶最需要的功能,用20%的基本功能去滿足80%用戶的需求。
新首頁最終線框圖
Alibaba.com主要功能區(qū),全站性買家主功能入口(頂部導(dǎo)航,類目,搜索);
核心服務(wù),網(wǎng)站服務(wù)以及用戶教育,對(duì)新買家的初步教育以及價(jià)值展示,老買家的流程引導(dǎo)和網(wǎng)站服務(wù)介紹;
網(wǎng)站運(yùn)營(yíng)區(qū)域(次banner運(yùn)營(yíng)活動(dòng),Bargain Buys,GSD產(chǎn)品區(qū)域);
推送熱門產(chǎn)品,展示和買家瀏覽行為相關(guān)的產(chǎn)品;網(wǎng)站Site Map以及應(yīng)用拓展。
四. 視覺推導(dǎo)——風(fēng)格、色彩
新視覺風(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)潔與直觀、Goole全新的UI體驗(yàn)、Android 4.0系統(tǒng)的平面化,各大主流界面的風(fēng)格都趨向于簡(jiǎn)潔,結(jié)構(gòu)清晰,信息突出,減少噪音。
新首頁視覺關(guān)鍵字
新首頁視覺關(guān)鍵字
尋找新色彩
通過視覺關(guān)鍵字尋找新色域
確定配色
確定配色
藍(lán)色是靈性知性兼具的色彩,在色彩心理學(xué)的測(cè)試中發(fā)現(xiàn)幾乎沒有人對(duì)藍(lán)色反感。明亮的天空藍(lán),象征希望、理性、理想、獨(dú)立等。ColourLovers.com公布了一項(xiàng)調(diào)查結(jié)果,美國(guó)前100大網(wǎng)站的Logo,主要使用12種顏色。其中,采用藍(lán)色的網(wǎng)站最多,紅色排在第二種。
五. 設(shè)計(jì)展示
我們把用戶需求轉(zhuǎn)化成信息結(jié)構(gòu),并在用戶群體的生活空間里尋找到網(wǎng)站的顏色趨向,接下來,我們把理論轉(zhuǎn)化為交互和視覺的表現(xiàn)方式,新的國(guó)際站設(shè)計(jì)風(fēng)格從而順利誕生了。
Alibaba國(guó)際站新首頁
一致性和標(biāo)準(zhǔn)化
一致性意味著產(chǎn)品界面的不同模塊要有相似的外觀、感覺和行為。這次改版,我們對(duì)網(wǎng)站核心頁面同時(shí)進(jìn)行了優(yōu)化,為用戶提供無縫而舒服的瀏覽體驗(yàn)。
Alibaba國(guó)際站新首頁_2
Icon重繪
老版本的Icon一是樣式不統(tǒng)一;二是原來的Icon質(zhì)感太重。在新版設(shè)計(jì)中,我們對(duì)新Icon全部采用扁平化處理,用實(shí)色填充新繪制的Icon更加能體現(xiàn)出新版本的簡(jiǎn)潔、清新。
Icon重繪
重新繪制UI組件
簡(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)。
重新繪制UI組件
六. 效果反饋
由于考慮到時(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)力!
文章編輯: 365webcall免費(fèi)在線客服(www.365webcall.com)
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊(cè) | 找回密碼 |  |
