本文授權轉自：菜心設計鋪（ID：caixinshejipu）

如何打造更優質的首頁？今天看下ui課學員作業優化的過程！

先來看看優化前后的效果對比：

1.Banner優化

因為是一款旅游產品的首頁設計，我們可以增強一些旅行的氛圍感，把Banner圖放大，再換一張比較有度假氛圍的圖片：

頂部區域只有一個圖片，層次還是不夠，我們可以在圖片底部加個漸變線條裝飾，豐富層次：

2.圖標優化

原設計中的找搭子圖標比較普通，怎么給圖標添加創意點呢？

先來理解下它的含義，找搭子應該是兩個陌生人之間的交流，一般開啟陌生人的交流會從一個「嗨~」的表情包開始：

有了一個方向之后，我們可以多去找找不同類型的表情包參考，大致可以分為三類：

文字類方向不適合延展，我們可以按前兩種類型延展ICON：

對比兩種類型的圖標，第1個方向的手的造型更加飽滿，也更有記憶點，找搭子圖標優化就完成啦：

3.瓷片區優化

原頁面中的三個卡片只有文字，設計也比較平：

先增加圖片讓卡片信息更飽滿：

再增加一個按鈕，吸引用戶點擊：

再嘗試讓圖片破出背景，增加設計感：

卡片內容豐富后，我們先給卡片做出異形，增加卡片的亮點：

這樣嘗試之后發現圖片下方背景很空，我們可以把文案挪到左邊，圖片放到右側，減少負空間：

再給圖片加一點傾斜：

排版做好后再來豐富卡片的層次，把單色改成漸變，加入白色，讓卡片更透氣：

再把按鈕也改成漸變色：

最后再加重主標題文案，讓主、次文案的字重對比更明顯：

一起看下優化前后的對比：

4.Tab欄優化

原頁面中Tab欄圖標旅行元素比較少：

我們可以結合「出行」、「度假」關鍵詞重新畫一下：

再來優化下「發布」，「發布」作為比較重要的功能，現在的加號設計太常見了：

我們可以把「發布」特殊設計下，想起之前網上看到的一張照片：

用手比做取景框代替常見的加號，一個比較有特色的「發布」ICON就做好了：

「我的」既要有人的元素還要能體現度假、旅行的感覺，讓我想起出去玩推開酒店窗戶看到美景時開心的心情，可以把窗戶和歡呼小人結合起來作為「我的」ICON：

整體優化完成后，一起來看看優化前后的效果吧：

5.總結

讓我們回顧下本次都做了哪些優化吧：

1.ICON的靈感來源多種多樣，表情包、照片都可以成為ICON設計的靈感

2.常規卡片變成異形，然后讓內容破出卡片都是可以增加設計感的方式

3.圖標最好和產品屬性結合起來設計，常見形狀+一點旅行元素就可以出很好的效果

最后再來看下優化前后的效果吧：

文章轉載：菜心設計鋪，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/BBMu8tjOZ6QVndx7GagpKA

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯系，若涉及內容或作品等版權問題，煩請原作者聯系我們，給出內容所在的網址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯系微信：18802086168

聯系電話：18802086168

編排 | 黃春燕

終審 | 蘇 菁

點這里，學習更多設計知識！