123,123

文章分類選擇

電腦辦公平面設(shè)計(jì) 室內(nèi)設(shè)計(jì) 室外設(shè)計(jì) 機(jī)械設(shè)計(jì) 工業(yè)自動(dòng)化影視動(dòng)畫程序開發(fā) 網(wǎng)頁設(shè)計(jì) 會(huì)計(jì)課程興趣成長(zhǎng) AIGC

相關(guān)推薦

您可能對(duì)下面課程感興趣

優(yōu)化排版案列

發(fā)布時(shí)間:2021-12-14 10:12 [ 我要自學(xué)網(wǎng)原創(chuàng) ] 發(fā)布人: hh71427-2 閱讀: 1531

作業(yè)問題

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

第一步

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

第二步

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

第三步

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

最后

添加裝飾線條增加細(xì)節(jié)，并對(duì)圖標(biāo)部分線條進(jìn)行替換顏色的處理，處理好整體的細(xì)節(jié)畫面就改好了，我們一起來看下前后的對(duì)比吧！

相較于原稿，優(yōu)化之后畫面看著更加清爽干凈，畫面的透氣性也好了許多，整體畫面的質(zhì)感提升了許多。

上一篇: 如何為產(chǎn)品快速構(gòu)建合理的UI動(dòng)效

下一篇: 原來這幾個(gè)效果這么簡(jiǎn)單就完成了！

文章評(píng)論

0 條評(píng)論按熱度排序按時(shí)間排序 0/350

遵守中華人民共和國(guó)的各項(xiàng)道德法規(guī)，
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。