UI界面設(shè)計(jì)

如何提高界面設(shè)計(jì)配圖的逼格？

1921

作為UI設(shè)計(jì)，在一款產(chǎn)品沒有落地之前，效果最主要的作用就是讓別人對我們的界面產(chǎn)生好感，同時(shí)在發(fā)表作品或者找工作的時(shí)候，我們的設(shè)計(jì)稿也是有很大的門面作用的。

圖片在整個(gè)界面中占比是非常大的，所以界面中的每一個(gè)圖片都不能馬虎對待，那么在界面設(shè)計(jì)的時(shí)候，需要注意圖片的選擇方法，以及圖片和界面的統(tǒng)一性的問題。

1、挑選配圖的常見過錯(cuò)

在為產(chǎn)品找配圖的時(shí)候，是一個(gè)很艱難的過程，好的圖片能夠讓界面達(dá)到更好的視覺效果，但是我們常常找圖找到后面的時(shí)候會(huì)陷入死胡同，比如我某次漫畫首頁的練習(xí)，找圖找到奔潰的那種，因?yàn)槭锹?，所以覺得需要畫風(fēng)一致的首頁，因此我鉆的第一個(gè)死胡同是強(qiáng)烈追求畫風(fēng)一致，導(dǎo)致忽略了圖片還需要視覺簡單同時(shí)重心一致的地方，如下圖第一個(gè)失敗的案例:

那時(shí)候是為了與banner的畫風(fēng)保持一致，但是這個(gè)畫風(fēng)其實(shí)比較特殊并且少見，我又不愿意放棄我好不容易過了的banner圖（重新找很難得），然后我選擇了更難的一條路，就是上面看到的那樣，下面所有的封面都是配合banner圖的。

封面效果不好自然是要修改的，下面就陷入第二個(gè)死胡同，重心不在一個(gè)點(diǎn)上，同時(shí)沒有封面該有的故事性，但是還是比上面的好一點(diǎn)的，如我第二個(gè)失敗的封面為例：

找圖片真的是一件很難的事情，小聲說：如果有小伙伴們有好的網(wǎng)站推薦（不是很貴的也可以），記得留言區(qū)給出鏈接，團(tuán)子給你比小心心。我覺得要找重心差不多，畫風(fēng)一致的，并且要讓用戶有點(diǎn)擊欲的真的怪難找的。

這里要插播一個(gè)要封面有故事性的小話題，舉個(gè)目前我見到的最好的例子，《七月與安生》的電影海報(bào)，可以看好久的那種，一張圖片就大致能夠看出這個(gè)電影的故事性，如果兩者位置翻轉(zhuǎn)，可能又是另一番景象了，當(dāng)然我的漫畫封面沒有這么高的要求，但是還是要有所表現(xiàn)的，如下圖所示：

所以找封面就開始側(cè)重于有故事類或者本身就是動(dòng)漫的封面或者情節(jié)圖，同時(shí)把握封面的一致性以及人物的重點(diǎn)，想清楚了要表達(dá)的效果以及側(cè)重點(diǎn)是什么，這樣找起來還是比較難，但是比之前沒有想清楚要什么會(huì)簡單很多。請看我的第三稿：

從上面三個(gè)不同封面的界面來看，我們可以很明顯的看出來封面對于界面的差別還是比較大的，當(dāng)然不是說我最后一稿就是最好的，只是希望大家能夠看到我的進(jìn)步以及思考的過程。

封面難找的地方在于我們一開始沒有想清楚我們的產(chǎn)品定位以及需要表現(xiàn)出來的效果，比如說漫畫界面，需要的圖片就是有故事張力以及整體視覺一致，但是類似漫畫、視頻還有小說類的封面都是屬于比較難找的類型，大家可以通過作者或者是風(fēng)格來搜索，會(huì)比較好找一點(diǎn)（但前提在于這個(gè)作者比較多產(chǎn)。。。）

保持統(tǒng)一

可能是因?yàn)榕鋱D比較難，所以我另外一個(gè)很常見的問題就是，不同的界面圖片風(fēng)格就不太一樣了，主要是因?yàn)樵谧霎?dāng)前頁面的時(shí)候，配圖就會(huì)忘記考慮別的頁面了，導(dǎo)致不同的頁面配圖風(fēng)格都是各不相同（百變小櫻就是我。。。）如下圖所示：

這是我做的首頁、運(yùn)營業(yè)和詳情頁，配圖就是三種不同的風(fēng)格了，其實(shí)這樣看起來詳情頁的配圖展現(xiàn)出來的效果是最好的，因?yàn)殡m然我的產(chǎn)品是K12，但是其實(shí)真正的用戶是家長，因此配圖上以插畫為主，但是不能過于太幼齡，所以配圖的風(fēng)格以簡約、大氣同時(shí)形式上也可以特別一點(diǎn)比較好。再看我改好了的一版：