今天的改版來(lái)自一個(gè)在國(guó)外工作的同學(xué)，主要負(fù)責(zé)的是國(guó)外電商類網(wǎng)站的設(shè)計(jì)。

因?yàn)橐倚鹿ぷ魉栽跍?zhǔn)備作品集，雖然國(guó)外的就業(yè)環(huán)境中對(duì)UI作品集的要求更多偏向UX分析和過程展示，視覺以簡(jiǎn)潔干練的界面為主。

但不代表簡(jiǎn)潔的界面就不能表現(xiàn)設(shè)計(jì)專業(yè)性，優(yōu)秀的設(shè)計(jì)在投遞的過程中也會(huì)產(chǎn)生正面的影響。

下圖就是項(xiàng)目中的某個(gè)界面：

以目前的質(zhì)量來(lái)講，顯然是不能符合我的要求。包括眾多細(xì)節(jié)處理的隨意、視覺要素的不統(tǒng)一、色彩應(yīng)用的不合理等等。雖然和這個(gè)同學(xué)有溝通，但他依舊沒有感覺界面這些細(xì)節(jié)有什么問題，這也是很多不注重細(xì)節(jié)的設(shè)計(jì)師的通病。

首先明確改版的目標(biāo)，防止部分同學(xué)理解錯(cuò)誤上價(jià)值觀：

不大改原頁(yè)面結(jié)構(gòu)、布局上，優(yōu)化色彩、字體、間距來(lái)提升設(shè)計(jì)效果

改版說(shuō)明

1.頁(yè)頭部分

頁(yè)頭部分的核心問題在中下側(cè)的導(dǎo)航上，作為網(wǎng)站的主要導(dǎo)航，在這個(gè)場(chǎng)景中放中間并不會(huì)覺得有太高的權(quán)重，因?yàn)橐曈X的主要順序是從左往右的。且LOGO的對(duì)齊方式并不和諧，顯得左上角的元素很混亂。右側(cè)的兩個(gè)按鈕顏色不合適，這不應(yīng)該是強(qiáng)調(diào)用戶去觸發(fā)的按鈕，且間距和尺寸不合理。

所以主要針對(duì)這幾個(gè)要素做出調(diào)整，導(dǎo)航左移，右側(cè)按鈕和間距優(yōu)化，以及調(diào)整部分字體的屬性。

2.篩選模塊

在篩選模塊中，原來(lái)的樣式粗糙度相信大家直接能感覺得出來(lái)，主要問題出在每一欄的上下間距，選項(xiàng)左右間距的前后統(tǒng)一。然后就是一些多余的要素，比如more按鈕的外邊框，多選前面增加的多選框。

我們的改動(dòng)中對(duì)間距進(jìn)行了調(diào)整，同時(shí)優(yōu)化字體，修改表頭背景色，以及為下方展開的面板添加投影，增加前后的層次感。

3.商品模塊

商品卡片使用的布局排版比較奇怪，先標(biāo)題 - 再價(jià)格 - 再商品的做法是不太合理的，并且標(biāo)題作為商品識(shí)別的第一個(gè)標(biāo)識(shí)還會(huì)被隱藏。接著就是下方的加入購(gòu)物車按鈕，并不會(huì)真的讓用戶產(chǎn)生點(diǎn)擊欲望，因?yàn)檎加妹娣e過大反而缺少對(duì)比不夠突出。

所以調(diào)整了卡片的設(shè)計(jì)，去掉邊框讓畫面更干凈一點(diǎn)，然后優(yōu)化元素的布局位置，并縮小購(gòu)物車按鈕。

4.優(yōu)化廣告橫幅

正式上線后很多廣告橫幅可能采用的是谷歌廣告聯(lián)盟之類推送的站外廣告，里面的設(shè)計(jì)不可控。在項(xiàng)目?jī)?nèi)畫個(gè)占位符丟那邊都行，但是作為作品集內(nèi)的頁(yè)面那么放就會(huì)顯得非常潦草。

所以改是肯定得改，但絕對(duì)不是把它做復(fù)雜?？梢灾苯訁⒖碱愃频墓倬W(wǎng)的一些橫幅設(shè)計(jì)，用最簡(jiǎn)單但是效果好的方式來(lái)處理就可以了。

5.模塊間距優(yōu)化

最后，就是優(yōu)化整體內(nèi)容的間距，要讓畫面看起有主次、有歸類，那么上下級(jí)元素的間距需要有更好的表現(xiàn)，根據(jù)親密性原理來(lái)分配對(duì)應(yīng)的間距。

經(jīng)過以上幾個(gè)簡(jiǎn)單的調(diào)整，我們最后再看一遍前后的效果對(duì)比，是否有效果的提升。

結(jié)尾

今天這個(gè)小改版就是給大家做個(gè)參考，上面改后的效果是一個(gè)基礎(chǔ) UI 應(yīng)該輸出界面的 “底線”。

因?yàn)檫@里面沒有太多技巧性還是經(jīng)驗(yàn)性的東西，純粹就是對(duì)細(xì)節(jié)上心程度的反應(yīng)。

在職業(yè)招聘市場(chǎng)要求越來(lái)越高的背景之下，這種基本問題扣分，就更不用談后面更高層次的業(yè)務(wù)、產(chǎn)品思維的理解了。

希望大家在做作品集的時(shí)候能重視起來(lái)，自己仔細(xì)檢查，并做好優(yōu)化和調(diào)整。

我們下次再賤~

B端產(chǎn)品設(shè)計(jì)課程第八期開啟正式招生了，課程介紹點(diǎn)擊鏈接查看：

課前預(yù)習(xí)和咨詢服務(wù)都準(zhǔn)備好了，還不快來(lái)～