提升界面展示的空間感，只需這五個步驟！

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

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

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

準(zhǔn)備界面

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

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

旋轉(zhuǎn)角度

如果什么東西都方方正正的，看起來會很沒意思。更何況在三維空間看二維界面，肯定是不可能擺放得這么規(guī)矩。于是我們把兩個界面都向不同的方向旋轉(zhuǎn)一點(diǎn)角度，例如下圖右邊是 -5 度，左邊是 8 度。

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

添加背景

什么東西都用白色背景多無聊？更何況很多界面本身就是白色背景，再往白色畫布上放就要找不到邊界了。最簡單的方法，就是把界面上的主題色直接用到背景上，這樣既把界面體現(xiàn)出來了，又能保證整體色調(diào)。

但是這樣做問題還是很明顯：首先，背景太強(qiáng)容易分散注意力；其次，也許有少量頁面用主題色作為背景，那就和畫布區(qū)分不開了。所以，比較簡單的方法，就是把背景上的主題色往淺灰色靠一些，讓它既保留在同一個色調(diào)，又不至于太搶眼。另外可以給畫布和界面都加個圓角，讓它們看起來更有卡片的感覺。

繪制投影

陰影可以說是空間感的點(diǎn)睛之筆，所以很有講究。很多人直接給界面設(shè)置陰影效果，結(jié)果陰影緊貼著邊緣，導(dǎo)致空間感較弱。為了讓陰影更加真實(shí)，最好是單獨(dú)畫一個陰影方塊，疊放在兩張界面之間。這個方塊可以直接用上層界面的形狀，縮小一點(diǎn)、加大圓角并填充黑色，至于擺放位置，就想象一下自然投影效果吧。

模糊投影

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

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

總結(jié)

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

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

歡迎關(guān)注作者的微信公眾號：「體驗(yàn)進(jìn)階」