優(yōu)化教程 | 沒想到,改完以后的畫面真的好了許多!

2021-11-10    seo達人



圖片

作業(yè)問題

我們先來看一下有哪些問題:首先就是模塊和首屏的疊壓不是很好;文案圖標(biāo)的處理不是很好,給人一種擁堵不整齊的感覺;圖片可以做一些簡單的處理手法,使其更加靈活。

圖片

 

第一步

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

圖片
 

第二步

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

圖片

 

第三步

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

圖片

 

最后

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

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

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

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

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


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔