這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!

2024-5-22    前端達(dá)人

最近ui課學(xué)員開始做結(jié)課作業(yè),在給大家批作業(yè)的時(shí)候,發(fā)現(xiàn)很多同學(xué)對(duì)于包裝審美還是差一些,課上給大家實(shí)操了很多案例,今天給大家分享幾個(gè),比如一組的這塊需求分析,包裝的就不太行:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
有點(diǎn)太隨意了,包括文字的排版,還有標(biāo)題前面的兩個(gè)圓圈:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
如果我來(lái)包裝的話,一定要加點(diǎn)修飾,不能只是文字,比如加點(diǎn)圖標(biāo)或者加點(diǎn)卡片,我可以先把卡片加上,這樣會(huì)更加有聚焦的感覺:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
這時(shí)候我們可以想辦法加點(diǎn)顏色區(qū)分,比如用產(chǎn)品的主色:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
然后可以再給圓圈里面加點(diǎn)圖標(biāo),或者修飾元素,因?yàn)橐唤M同學(xué)已經(jīng)有了一些質(zhì)感圖標(biāo)的繪制,直接加上就可以了:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
然后再加上標(biāo)題:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
我們來(lái)對(duì)比下第一版和優(yōu)化后的效果:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
這里面其實(shí)差的僅僅只是一點(diǎn)點(diǎn)包裝審美和用心的態(tài)度,技法層面沒什么門檻,只有兩個(gè)質(zhì)感圖標(biāo),還都是一組同學(xué)自己畫的!
再舉一個(gè)1組同學(xué)的例子,他們?cè)谡故緢D表的時(shí)候,效果是這樣的:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
如果面試官用手機(jī)看你的作品,能看清楚啥呀,所以如果你覺得自己的作品做的還不錯(cuò),一定要學(xué)會(huì)放大展示局部,比如我們這樣優(yōu)化一下:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
是不是比剛才更加簡(jiǎn)潔大氣?
所以大家一定要記住,有優(yōu)秀的東西,一定要拿出來(lái)放大展示,我們看看3組同學(xué)的展示方式,就優(yōu)秀很多:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
再看5組的一個(gè)案例,這張圖:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
啥問題?是不是太空了,主次也不清晰,左上角的logo快比頁(yè)面還重了,所以我們一定要先解決畫面主次的問題,先把界面變大變飽滿:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
這時(shí)候可以再優(yōu)化一下左側(cè)文案的排版,稍微有點(diǎn)空曠:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
如果覺得層次還是不夠,可以把底色融入一個(gè)黑圈:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
這樣的話,把上面黑色的圖標(biāo)頁(yè),銜接在一起,就會(huì)好很多了:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
這是不是比最開始那頁(yè)的包裝強(qiáng)太多了:
這些包裝技巧,簡(jiǎn)單又出效果,不看一會(huì)就刪了!
 
 
所以大家在作品包裝展示的時(shí)候,一定要注意這些細(xì)節(jié),而且是非常細(xì)致的細(xì)節(jié),有時(shí)候真的就是差一點(diǎn)點(diǎn),感覺就不一樣了!
希望今天分享的這幾個(gè)包裝小案例,大家可以有所啟發(fā),后面我會(huì)經(jīng)常改ui課同學(xué)的作業(yè),尤其是這種細(xì)節(jié)上的改動(dòng),讓大家更好的做出精致作品!
加油,兄弟們!
 

藍(lán)藍(lán)設(shè)計(jì)(yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)軟件wpf開發(fā)、軟件vue開發(fā)



作者:菜心輕量文
鏈接:https://www.zcool.com.cn/article/ZMTYyMDA3Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

日歷

鏈接

個(gè)人資料

存檔