不論是作品集還是項目匯報，都少不了UI效果圖展示。雖然網上有很多樣機模板可以用，但與其與胡亂套用，還不如自己學會怎么展示界面。

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

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

1、準備界面

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

看起來很無聊就對了，因為這只是第一步。

2、旋轉角度

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

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

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

3、添加背景

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

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

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

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

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

4、繪制投影

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

很多人直接給界面設置陰影效果，結果陰影緊貼著邊緣，導致空間感較弱。

為了讓陰影更加真實，最好是單獨畫一個陰影方塊，疊放在兩張界面之間。

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

5、模糊投影

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

例如，我設置了 50 的模糊效果，和 20% 的不透明度。這個數值可以根據具體的情況，自己調節。

總結

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

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

原文地址：知乎

轉載請注明：學UI網》如何提升UI效果圖空間感？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務