今天還是圍繞頁面做視覺改版，改版的對象是一個學員提交的作品集項目中的首頁。而改版的核心原因，是因為在作品集的項目展示中，首頁通常就是項目的“門面”，是建立觀看者第一印象的關鍵頁面，也可以說是整個項目中最重要的頁面（沒有之一）。

更多作品集干貨：

如果該頁面設計質量不足，或是展示的效果不佳，那么觀看者對項目的評價就會直線下滑。所以做好首頁的必要性是毋庸置疑的，而下面就是我們本次改版的對象：

首頁優化說明

這次的優化的目標，是在原有的基礎上做簡單的調試實現效果的提升，讓你們可以借鑒用極少的時間優化自己的項目首頁，而不是把它們推翻重做。

所以我們先簡單分析一遍原圖當中存在的問題，包含下面這些要點：

全局問題：

1. 整體配圖非常復雜、凌亂，拉低頁面整體視覺效果
2. 使用的字體規格類型過多，信息的瀏覽不順暢
3. 主色出現的場景權重過低導致色彩呈現沒有主次
4. 頁面視覺重心整體靠下，強弱對比失衡

細節問題：

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

② 強推和推薦模塊內容字段都很分散，很難看清里面的內容。

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

④ 底部導航的大黑描邊圖標和上方的整體風格不搭，非常突兀。

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

我給出的建議包含下面幾點：

1. 色彩鮮艷明亮，品牌主色突出易于識別
2. 文字信息主次分明，尤其標題信息易于辨識
3. 組件設計工整（異形輪廓少），視覺效果平衡
4. 配圖精挑細選，要拉高頁面視覺的檔次水平
5. 適當控制整體字段和信息量，提供喘息空間
6. 統一圓角、投影、字號等小細節參數
7. 沒有把握的部分使用常規主流的布局方案（不出錯）

基于上面的思路，我們開始對原設計做個簡單的優化：

第一步，優化頂部設計，將搜索欄獨立出來增加懸浮效果，強化分頁器標題文字增加識別度。

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

第三步，優化精選推薦組件，強化標題，把標簽換成常規設計樣式，再優化下方書籍信息，增加空間大小。

第四步，優質排行組件，簡單調整1、2、3名的排版方向，節約縱向空間，再加大封面的尺寸。

第五步，優化底部導航，使用灰色實心圖標，弱化圖標的突出性，和上方設計能更好結合。

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

最后強調一點，就是作品集里首頁和項目里展示的首頁是 “不一樣” 的，如果實際項目里有很多限制導致視覺效果奇差無比（比如書籍封面就是亂），那么作為面試者是不會考慮你背后原因的，這項目就是通不過，連到面試的機會也沒有。

所以要放進項目中肯定要優化，而優化也不能改太離譜，確保你改動的結果全是經得起解釋的，而不是做非常激進（還做不好）的改版，導致界面充斥大量不成熟、無法解釋的設計。

結尾

如果沒有足夠信息就不要追求過度復雜的設計，簡化后控制好細節遠遠比塞滿內容的方案效果更好，看起來視覺觀感更佳。項目展示的界面要注重“展示”效果，而不只是孤立在你設計區域中央的畫布。

我們下篇再賤！

歡迎關注作者的微信公眾號：「超人的電話亭」