改版思路

背景：為上海通用五菱官方網(wǎng)站做視覺改版

目的：

1.     提升界面美觀程度

2.     增加首頁內(nèi)容的展示內(nèi)容，使用戶減少點(diǎn)擊

3.     運(yùn)用斜切的排版形式，體現(xiàn)出汽車的動(dòng)力和速度感

問題：

1.     banner與下面展示圖重復(fù)

2.     導(dǎo)航欄點(diǎn)擊之后的交互效果不明顯

3.     導(dǎo)航欄中得按鈕有的是無內(nèi)容的

4.     頁面展示內(nèi)容較少

設(shè)計(jì)重點(diǎn)：

提升產(chǎn)品質(zhì)量，增加圖片的展示內(nèi)容，增加視覺沖擊力，更加能激發(fā)用戶的購買欲望，進(jìn)一步增加交互效果

突出圖片的展示區(qū)域，根據(jù)產(chǎn)品內(nèi)容的不多進(jìn)行不同的排版布局方式，設(shè)計(jì)時(shí)，要保持企業(yè)顏色的使用

                                            改版之前的頁面

需求拆解

內(nèi)容類型：企業(yè)的汽車產(chǎn)品展示居多，深淺色混合使用，更顯活力

用戶：男性居多，注重圖片的展示整體內(nèi)容和細(xì)節(jié)的部分

產(chǎn)品需求：刺激用戶的視覺，增加購買的欲望

結(jié)構(gòu)布局：分類要足夠清晰，注重用戶的交互效果，根據(jù)不同板塊可以采用不同的布局方式，但是要突出汽車的動(dòng)力和速度感

視覺確定：增強(qiáng)視覺的沖擊力，使文字和內(nèi)容對(duì)比突出，運(yùn)用汽車官網(wǎng)常用的白色為背景，采用LOGO上得紅色進(jìn)行點(diǎn)綴

視覺定義

色彩：白色和黑色為底，企業(yè)LOGO的紅色進(jìn)行點(diǎn)綴

布局：頭部導(dǎo)航欄采用左邊LOGO，中間選項(xiàng)卡，右邊是常用功能按鈕圖標(biāo)的方式進(jìn)行排版，下方依次是banner、廣告語、優(yōu)惠專區(qū)、精彩瞬間、尾部，每個(gè)板塊根據(jù)需要突出的內(nèi)容不同，再進(jìn)行不同的排版方式

視覺特性：產(chǎn)品統(tǒng)一，質(zhì)感統(tǒng)一，基調(diào)統(tǒng)一

設(shè)計(jì)優(yōu)化點(diǎn)

提升品牌的氣質(zhì)，提升產(chǎn)品的知名度

增強(qiáng)用戶的視覺感受，增強(qiáng)用戶對(duì)產(chǎn)品的好感程度

能夠刺激到用戶的購買欲望

設(shè)計(jì)一致性

產(chǎn)品統(tǒng)一，基調(diào)統(tǒng)一，交互效果統(tǒng)一，排版布局方式保持一致

設(shè)計(jì)規(guī)范性

圖標(biāo)、顏色、字體、交互等樣式均能夠體現(xiàn)出汽車的動(dòng)力和速度的感覺

                                              改版之后的界面