優(yōu)化教程 | 沒(méi)想到，改完以后的畫(huà)面真的好了許多！

2021-11-10    seo達(dá)人



圖片

作業(yè)問(wèn)題

我們先來(lái)看一下有哪些問(wèn)題：首先就是模塊和首屏的疊壓不是很好；文案圖標(biāo)的處理不是很好，給人一種擁堵不整齊的感覺(jué)；圖片可以做一些簡(jiǎn)單的處理手法，使其更加靈活。

圖片

 

第一步

我們先將下方模塊和首屏之間拉開(kāi)距離，之后填充同色系的藍(lán)色作為最下方背景的顏色，之后將圖片上方飽和度提高，再把產(chǎn)品和模塊邊緣處進(jìn)行摳圖，做出破圖的視覺(jué)效果，復(fù)制多個(gè)泡泡增加畫(huà)面的氛圍。

圖片
 

第二步

將文案簡(jiǎn)單編排拉開(kāi)間距放到畫(huà)面當(dāng)中，這里注意一下原稿的圖標(biāo)信息我沒(méi)有放在文案組下方，當(dāng)我們文案很多的時(shí)候不要都放在一起，應(yīng)該學(xué)會(huì)合理的分配空間。

圖片

 

第三步

這里我另起了一個(gè)模塊和當(dāng)前模塊進(jìn)行連接關(guān)聯(lián)，有些小伙伴可能感覺(jué)不是雙數(shù)的圖標(biāo)很難做的規(guī)整，其實(shí)大家應(yīng)該換個(gè)思考方式，先把圖標(biāo)規(guī)整的排列后，空余的負(fù)空間可以通過(guò)哪些元素進(jìn)行填補(bǔ)。

圖片

 

最后

添加裝飾線條增加細(xì)節(jié)，并對(duì)圖標(biāo)部分線條進(jìn)行替換顏色的處理，處理好整體的細(xì)節(jié)畫(huà)面就改好了，我們一起來(lái)看下前后的對(duì)比吧！
圖片
相較于原稿，優(yōu)化之后畫(huà)面看著更加清爽干凈，畫(huà)面的透氣性也好了許多，整體畫(huà)面的質(zhì)感提升了許多。  
 
原文地址：三個(gè)小美工（公眾號(hào)）  
作者：Three  
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》優(yōu)化教程 | 沒(méi)想到，改完以后的畫(huà)面真的好了許多！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


分享本文至：

日歷

鏈接

個(gè)人資料

存檔