不論是作品集還是項(xiàng)目匯報(bào)，都少不了UI效果圖展示。雖然網(wǎng)上有很多樣機(jī)模板可以用，但與其與胡亂套用，還不如自己學(xué)會(huì)怎么展示界面。

今天教大家一個(gè)簡單的方法，只需五個(gè)步驟就可以立即提升界面展示的空間感。

看過之后，說不定你還可以舉一反三，做出更多不同的創(chuàng)新。

1、準(zhǔn)備界面

可以像這樣把兩個(gè)界面并列放到一起，這里我用的是一個(gè)正方形畫布。

看起來很無聊就對(duì)了，因?yàn)檫@只是第一步。

2、旋轉(zhuǎn)角度

如果什么東西都方方正正的，看起來會(huì)很沒意思。更何況在三維空間看二維界面，肯定是不可能這么擺放得規(guī)矩。

于是我們把兩個(gè)界面都向不同的方向旋轉(zhuǎn)一點(diǎn)角度，例如下圖右邊是 -5 度，左邊是 8 度。

同樣是為了體現(xiàn)三維空間感，我們把這兩個(gè)界面交疊一下，像是兩張散落在桌面的撲克牌。

3、添加背景

什么東西都用白色背景多無聊？更何況很多界面本身就是白色背景，再往白色畫布上放就要找不到邊界了。

最簡單的方法，就是把界面上的主題色直接用到背景上，這樣即把界面體現(xiàn)出來了，又能保證整體色調(diào)。

但是這樣做問題還是很明顯：首先，背景太強(qiáng)容易分散注意力；其次，也許有少量頁面用主題色作為背景，那就和畫布區(qū)分不開了。

所以，比較簡單的方法，就是把背景上的主題色往淺灰色靠一些，讓它即保留在同一個(gè)色調(diào)，又不至于太搶眼。

另外可以給畫布和界面都加個(gè)圓角，讓它們看起來更有卡片的感覺。

4、繪制投影

陰影可以說是空間感的點(diǎn)睛之筆，所以很有講究。

很多人直接給界面設(shè)置陰影效果，結(jié)果陰影緊貼著邊緣，導(dǎo)致空間感較弱。

為了讓陰影更加真實(shí)，最好是單獨(dú)畫一個(gè)陰影方塊，疊放在兩張界面之間。

這個(gè)方塊可以直接用上層界面的形狀，縮小一點(diǎn)、加大圓角并填充黑色，至于擺放位置，就想象一下自然投影效果吧。

5、模糊投影

投影肯定不能是一個(gè)黑色的圓角方塊，所以要給它添加效果。

例如，我設(shè)置了 50 的模糊效果，和 20% 的不透明度。這個(gè)數(shù)值可以根據(jù)具體的情況，自己調(diào)節(jié)。

總結(jié)

第五個(gè)步驟完成后，和第一個(gè)步驟比起來，是不是感覺好多了？

你也可以用這個(gè)方法嘗試不同的色調(diào)和排版：

原文地址：知乎

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》如何提升UI效果圖空間感？

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

                                                            

 

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

 

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)