這些包裝技巧，簡(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ì)就刪了！
 
 
啥問(wèn)題？是不是太空了，主次也不清晰，左上角的logo快比頁(yè)面還重了，所以我們一定要先解決畫面主次的問(wèn)題，先把界面變大變飽滿：
這些包裝技巧，簡(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ì)(sillybuy.com )是一家專注而深入的界面設(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è)人資料

存檔