今天還是圍繞頁(yè)面做視覺(jué)改版，改版的對(duì)象是一個(gè)學(xué)員提交的作品集項(xiàng)目中的首頁(yè)。而改版的核心原因，是因?yàn)樵谧髌芳捻?xiàng)目展示中，首頁(yè)通常就是項(xiàng)目的“門(mén)面”，是建立觀看者第一印象的關(guān)鍵頁(yè)面，也可以說(shuō)是整個(gè)項(xiàng)目中最重要的頁(yè)面（沒(méi)有之一）。

更多作品集干貨：

如果該頁(yè)面設(shè)計(jì)質(zhì)量不足，或是展示的效果不佳，那么觀看者對(duì)項(xiàng)目的評(píng)價(jià)就會(huì)直線下滑。所以做好首頁(yè)的必要性是毋庸置疑的，而下面就是我們本次改版的對(duì)象：

首頁(yè)優(yōu)化說(shuō)明

這次的優(yōu)化的目標(biāo)，是在原有的基礎(chǔ)上做簡(jiǎn)單的調(diào)試實(shí)現(xiàn)效果的提升，讓你們可以借鑒用極少的時(shí)間優(yōu)化自己的項(xiàng)目首頁(yè)，而不是把它們推翻重做。

所以我們先簡(jiǎn)單分析一遍原圖當(dāng)中存在的問(wèn)題，包含下面這些要點(diǎn)：

全局問(wèn)題：

1. 整體配圖非常復(fù)雜、凌亂，拉低頁(yè)面整體視覺(jué)效果
2. 使用的字體規(guī)格類型過(guò)多，信息的瀏覽不順暢
3. 主色出現(xiàn)的場(chǎng)景權(quán)重過(guò)低導(dǎo)致色彩呈現(xiàn)沒(méi)有主次
4. 頁(yè)面視覺(jué)重心整體靠下，強(qiáng)弱對(duì)比失衡

細(xì)節(jié)問(wèn)題：

① 頂部背景色“青黃不接”，過(guò)于朦朧的顏色和文字、組件無(wú)法很好的分隔，且搜索欄的輪廓比較奇怪，頂部欄整體內(nèi)容太多太擁擠。

② 強(qiáng)推和推薦模塊內(nèi)容字段都很分散，很難看清里面的內(nèi)容。

③ 月排行太擁擠，前三名書(shū)籍很難看清缺乏吸引力，下方文字也過(guò)小。

④ 底部導(dǎo)航的大黑描邊圖標(biāo)和上方的整體風(fēng)格不搭，非常突兀。

而要解決這些問(wèn)題，先不急著想推倒重做，而是先了解什么樣的綜合信息型頁(yè)面是合適的，適合作為項(xiàng)目第一個(gè)頁(yè)面展示。

我給出的建議包含下面幾點(diǎn)：

1. 色彩鮮艷明亮，品牌主色突出易于識(shí)別
2. 文字信息主次分明，尤其標(biāo)題信息易于辨識(shí)
3. 組件設(shè)計(jì)工整（異形輪廓少），視覺(jué)效果平衡
4. 配圖精挑細(xì)選，要拉高頁(yè)面視覺(jué)的檔次水平
5. 適當(dāng)控制整體字段和信息量，提供喘息空間
6. 統(tǒng)一圓角、投影、字號(hào)等小細(xì)節(jié)參數(shù)
7. 沒(méi)有把握的部分使用常規(guī)主流的布局方案（不出錯(cuò)）

基于上面的思路，我們開(kāi)始對(duì)原設(shè)計(jì)做個(gè)簡(jiǎn)單的優(yōu)化：

第一步，優(yōu)化頂部設(shè)計(jì)，將搜索欄獨(dú)立出來(lái)增加懸浮效果，強(qiáng)化分頁(yè)器標(biāo)題文字增加識(shí)別度。

第二步，優(yōu)化頂部推薦組件，移除背景色使用彩色標(biāo)簽，增加封面和標(biāo)題的尺寸。

第三步，優(yōu)化精選推薦組件，強(qiáng)化標(biāo)題，把標(biāo)簽換成常規(guī)設(shè)計(jì)樣式，再優(yōu)化下方書(shū)籍信息，增加空間大小。

第四步，優(yōu)質(zhì)排行組件，簡(jiǎn)單調(diào)整1、2、3名的排版方向，節(jié)約縱向空間，再加大封面的尺寸。

第五步，優(yōu)化底部導(dǎo)航，使用灰色實(shí)心圖標(biāo)，弱化圖標(biāo)的突出性，和上方設(shè)計(jì)能更好結(jié)合。

最后，在看看和原圖之間的對(duì)比，是否有了清晰的提升：

最后強(qiáng)調(diào)一點(diǎn)，就是作品集里首頁(yè)和項(xiàng)目里展示的首頁(yè)是 “不一樣” 的，如果實(shí)際項(xiàng)目里有很多限制導(dǎo)致視覺(jué)效果奇差無(wú)比（比如書(shū)籍封面就是亂），那么作為面試者是不會(huì)考慮你背后原因的，這項(xiàng)目就是通不過(guò)，連到面試的機(jī)會(huì)也沒(méi)有。

所以要放進(jìn)項(xiàng)目中肯定要優(yōu)化，而優(yōu)化也不能改太離譜，確保你改動(dòng)的結(jié)果全是經(jīng)得起解釋的，而不是做非常激進(jìn)（還做不好）的改版，導(dǎo)致界面充斥大量不成熟、無(wú)法解釋的設(shè)計(jì)。

結(jié)尾

如果沒(méi)有足夠信息就不要追求過(guò)度復(fù)雜的設(shè)計(jì)，簡(jiǎn)化后控制好細(xì)節(jié)遠(yuǎn)遠(yuǎn)比塞滿內(nèi)容的方案效果更好，看起來(lái)視覺(jué)觀感更佳。項(xiàng)目展示的界面要注重“展示”效果，而不只是孤立在你設(shè)計(jì)區(qū)域中央的畫(huà)布。

我們下篇再賤！

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」