推薦閱讀

正好最近有一個學員的提交的作業，在配圖上有比較明顯的問題，所以我們以它為案例進行配圖的優化。

下面是原圖：

聲明：這次的優化以優化配圖為主，為了更好地進行前后對比，基本不修改原界面布局和樣式。

一、首頁配圖優化說明

首先做個簡單的配圖分析，作為新聞應用來說，配圖的來源是非常靈活的，因為任何題材都可以是新聞的一部分，所以給了設計師非常大的發揮空間。接下來看首頁的用圖，能感覺到非常刻意地迎合主色，所以會顯得過于單調。并且多數圖片都缺乏主體，使得圖片的焦點松散，沒辦法支撐整個頁面的重心。

第一步先調整首頁的頂部輪播圖，這張圖會關聯到背后的淺色背景，以及下方藍、紅的瓷片區，主色很多再用藍色不合理。而作為頂部輪播圖要關聯最近熱點，且這個熱點應該有良好配圖來源的，那我會先想到理想 L6 或小米 SU7 這些電車，以它們的新聞和圖片做首圖不會有任何不合理的地方。

理想官網雖然有很多優秀圖例，比如下面這些：

但并不是所有單看優秀的圖例都適合應用到界面中，使用下來的結果會變成這樣：

這都是上面提到的問題，所以想要效果好就必須用更簡單的圖例，所以我只選擇主體突出背景內容很少的單車圖例，然后再根據選的圖去修改對應文章標題，結果如下：

然后瓷片區內用的鍵盤和標題非常不搭，所以直接找個 Openai 的創始人照片來替換：

再往下的新聞列表根據最近能想到的一些事件去找圖，秉承 “先找圖，后配字” 的思路完成，同時為了兼顧真實性新聞類型就得不一樣，上面用了車的圖下面專題就要換別的類型（也可能是廣告），比如最近的蘋果 iPad Pro 新聞，雖然本來要找 iPad 的圖但沒找到合適的，看到華為的，那就順帶把標題改成兩者對比的即可：

再下面就是視頻卡片，作為視頻的封面首先高度是可以優化的，不一定要按原比例顯示節省空間，所以線上 APP 的視頻卡片都有目的性的縮短了高度。

然后我們再挑選相關的新聞圖，比如娛樂八卦、科技動態等，將圖片填入并替換標題即可。

再往下是一個更偏向廣告類型的專題，而在這里要強調第二個問題，前面所有的圖例用的都是攝影圖，但一個圖片內容多的頁面要對圖片進行管控并不只是攝影圖本身的特點，還要對圖片的類型做出更改，比如使用平面廣告或插畫等其它元素。

所以在這里我們可以應用平面廣告圖（Banner 設計），但鑒于很多同學的平面水平……我不得不給出以下建議：

1. 找到合適的廣告圖 1：1 臨摹，同時練習 Banner 設計
2. 直接應用線上的成熟案例，截圖或者素材置入進去

理論上 UI 設計里的配圖只要引用即可，這些次要廣告圖不想自己設計問題不會太大，一定程度上規避掉對應能力不足的問題。否則獨立設計做出來的成果往往只能成為減分項，還要耗費大量的時間去調整，降低設計的效率。

下面是選擇成品替換的效果，廣告圖的高度會根據成品圖的要求做出一定的調整（這里改了后續其它同類組件高度也改）：

這樣我們就完成了初步的首頁配圖的調整，可以看看下面前后對比：

在最終效果中，最后一張廣告圖在底部其實平衡感并不好，在手機上瀏覽的時候因為單屏限高不會有感覺，但在界面的整屏展示中，效果是不太好的。

所以最后還可以把上面的專題圖也替換成廣告圖進行呼應，同時讓畫面的圖片類型更均衡。

二、其它頁面配圖優化

接下來進行頻道卡片的優化，目前的配圖用了主色的圖片，所以形成了同色的背景，藍的太突出了。

在頁面中反復應用主色沒有必要，但作為第二頁面又強行引入別的明亮的色系也沒必要，所以我打算一開始就找比較寫實沉重的照片，顏色壓暗。

想起來最近巴以沖突的照片再次獲得荷賽獎，就去搜了下荷賽獎（新聞攝影獎項）相關的優秀作品，有不少符合我們的需求而且畫面也充滿故事性，作品也有完整的事件說明：

然后就是用這些圖片來替換原來的圖例了：

這里用哪個結果是待定的，因為這里考慮得更遠一點的話，就是選的配圖影響的不只是當前頁面，而是和其它頁面擺在一起時的效果。

在接下來的視頻合集頁面中，作為一個視頻專題內容要有關聯性，那么前面的攝影組圖就有發揮空間，作為一個關聯性的頁面直接用成套的圖例進行填充而不是另起爐灶。

接著是話題頁面，和上面視頻合集類似，下面的圖片內容有關聯性，所以選擇一個主題或找到一張錨點圖例以后，以它展開置入其它同類型圖片。

這里我選擇用 AI 相關的話題，這樣可以用 3D 相關的場景圖做新聞封面而不是只有攝影圖：

最后就是剩下的推薦頁面了，按常規思路替換下圖片即可：

三、最終效果對比

下面是配圖更換前后的對比效果：

在這次案例里，只改圖會有比較大的局限性，如果想要發揮圖片的最大效果是需要調整組件樣式配合的。并且作為新聞類的應用，寫實性要求比較高，所以必須要保持克制不能在用圖上太浪，導致最終得成品 “一眼頂針”……

PS：因為是演示也不想做太激進，用力過猛對你們影響不好 =.. = ！

雖然沒有把整個項目所有圖片改一遍，但還是選出多個頁面的目的，就是為了表明配圖是具有全局性要求的，需要考慮和其它頁面排列時的協調性，是整體的拼圖。

而根據應用題材、配色的差異，配圖的整體應用邏輯也不同，比如潮流、運動、電商、音樂的類型適合色彩多沖擊力強的，閱讀、新聞、AI、B 端類的應用適合色彩均勻不突出的類型。這些都要靠設計師嘗試不同的方案選擇最好的那一個。

結尾

花費那么大的力氣選圖看似和 UI 界面本身關系不大，但在激烈的人才市場競爭過程中，配圖的好壞就是能直接影響招聘方的心態，只是大多數面試官口嫌體正直而已。

而這種配圖的選擇能力是會隨著經驗的增加越來越老練和高效的，在經歷前期一兩年做圖 5 分鐘配圖兩小時的磨難以后，就能產生質的飛躍，而屆時你們發現 UI 設計師里還可以劃分成兩個類型，會用圖的和不會用圖的，而這個門檻是后者無法輕易超越的。

順便說一句，以前有整理過配圖的一些素材，后來鏈接失效沒更新了，可以不用糾結那些素材了，畢竟年代久遠了，而且高質量的配圖應用是無法用事先準備的批量素材滿足的。

我們下篇再賤~

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