推薦閱讀

正好最近有一個(gè)學(xué)員的提交的作業(yè)，在配圖上有比較明顯的問題，所以我們以它為案例進(jìn)行配圖的優(yōu)化。

下面是原圖：

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

一、首頁配圖優(yōu)化說明

首先做個(gè)簡單的配圖分析，作為新聞應(yīng)用來說，配圖的來源是非常靈活的，因?yàn)槿魏晤}材都可以是新聞的一部分，所以給了設(shè)計(jì)師非常大的發(fā)揮空間。接下來看首頁的用圖，能感覺到非?？桃獾赜现魃?，所以會(huì)顯得過于單調(diào)。并且多數(shù)圖片都缺乏主體，使得圖片的焦點(diǎn)松散，沒辦法支撐整個(gè)頁面的重心。

第一步先調(diào)整首頁的頂部輪播圖，這張圖會(huì)關(guān)聯(lián)到背后的淺色背景，以及下方藍(lán)、紅的瓷片區(qū)，主色很多再用藍(lán)色不合理。而作為頂部輪播圖要關(guān)聯(lián)最近熱點(diǎn)，且這個(gè)熱點(diǎn)應(yīng)該有良好配圖來源的，那我會(huì)先想到理想 L6 或小米 SU7 這些電車，以它們的新聞和圖片做首圖不會(huì)有任何不合理的地方。

理想官網(wǎng)雖然有很多優(yōu)秀圖例，比如下面這些：

但并不是所有單看優(yōu)秀的圖例都適合應(yīng)用到界面中，使用下來的結(jié)果會(huì)變成這樣：

這都是上面提到的問題，所以想要效果好就必須用更簡單的圖例，所以我只選擇主體突出背景內(nèi)容很少的單車圖例，然后再根據(jù)選的圖去修改對(duì)應(yīng)文章標(biāo)題，結(jié)果如下：

然后瓷片區(qū)內(nèi)用的鍵盤和標(biāo)題非常不搭，所以直接找個(gè) Openai 的創(chuàng)始人照片來替換：

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

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

然后我們?cè)偬暨x相關(guān)的新聞圖，比如娛樂八卦、科技動(dòng)態(tài)等，將圖片填入并替換標(biāo)題即可。

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

所以在這里我們可以應(yīng)用平面廣告圖（Banner 設(shè)計(jì)），但鑒于很多同學(xué)的平面水平……我不得不給出以下建議：

1. 找到合適的廣告圖 1：1 臨摹，同時(shí)練習(xí) Banner 設(shè)計(jì)
2. 直接應(yīng)用線上的成熟案例，截圖或者素材置入進(jìn)去

理論上 UI 設(shè)計(jì)里的配圖只要引用即可，這些次要廣告圖不想自己設(shè)計(jì)問題不會(huì)太大，一定程度上規(guī)避掉對(duì)應(yīng)能力不足的問題。否則獨(dú)立設(shè)計(jì)做出來的成果往往只能成為減分項(xiàng)，還要耗費(fèi)大量的時(shí)間去調(diào)整，降低設(shè)計(jì)的效率。

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

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

在最終效果中，最后一張廣告圖在底部其實(shí)平衡感并不好，在手機(jī)上瀏覽的時(shí)候因?yàn)閱纹料薷卟粫?huì)有感覺，但在界面的整屏展示中，效果是不太好的。

所以最后還可以把上面的專題圖也替換成廣告圖進(jìn)行呼應(yīng)，同時(shí)讓畫面的圖片類型更均衡。

二、其它頁面配圖優(yōu)化

接下來進(jìn)行頻道卡片的優(yōu)化，目前的配圖用了主色的圖片，所以形成了同色的背景，藍(lán)的太突出了。

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

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

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

這里用哪個(gè)結(jié)果是待定的，因?yàn)檫@里考慮得更遠(yuǎn)一點(diǎn)的話，就是選的配圖影響的不只是當(dāng)前頁面，而是和其它頁面擺在一起時(shí)的效果。

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

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

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

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

三、最終效果對(duì)比

下面是配圖更換前后的對(duì)比效果：

在這次案例里，只改圖會(huì)有比較大的局限性，如果想要發(fā)揮圖片的最大效果是需要調(diào)整組件樣式配合的。并且作為新聞?lì)惖膽?yīng)用，寫實(shí)性要求比較高，所以必須要保持克制不能在用圖上太浪，導(dǎo)致最終得成品 “一眼頂針”……

PS：因?yàn)槭茄菔疽膊幌胱鎏みM(jìn)，用力過猛對(duì)你們影響不好 =.. = ！

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

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

結(jié)尾

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

而這種配圖的選擇能力是會(huì)隨著經(jīng)驗(yàn)的增加越來越老練和高效的，在經(jīng)歷前期一兩年做圖 5 分鐘配圖兩小時(shí)的磨難以后，就能產(chǎn)生質(zhì)的飛躍，而屆時(shí)你們發(fā)現(xiàn) UI 設(shè)計(jì)師里還可以劃分成兩個(gè)類型，會(huì)用圖的和不會(huì)用圖的，而這個(gè)門檻是后者無法輕易超越的。

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

我們下篇再賤~

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