不论是作品集还是项目汇报，都少不了UI效果图展示。虽然网上有很多样机模板可以用，但与其与胡乱套用，还不如自己学会怎么展示界面。

今天教大家一个简单的方法，只需五个步骤就可以立即提升界面展示的空间感。

看过之后，说不定你还可以举一反三，做出更多不同的创新。

1、准备界面

可以像这样把两个界面并列放到一起，这里我用的是一个正方形画布。

看起来很无聊就对了，因为这只是第一步。

2、旋转角度

如果什么东西都方方正正的，看起来会很没意思。更何况在三维空间看二维界面，肯定是不可能这么摆放得规矩。

于是我们把两个界面都向不同的方向旋转一点角度，例如下图右边是 -5 度，左边是 8 度。

同样是为了体现三维空间感，我们把这两个界面交叠一下，像是两张散落在桌面的扑克牌。

3、添加背景

什么东西都用白色背景多无聊？更何况很多界面本身就是白色背景，再往白色画布上放就要找不到边界了。

最简单的方法，就是把界面上的主题色直接用到背景上，这样即把界面体现出来了，又能保证整体色调。

但是这样做问题还是很明显：首先，背景太强容易分散注意力；其次，也许有少量页面用主题色作为背景，那就和画布区分不开了。

所以，比较简单的方法，就是把背景上的主题色往浅灰色靠一些，让它即保留在同一个色调，又不至于太抢眼。

另外可以给画布和界面都加个圆角，让它们看起来更有卡片的感觉。

4、绘制投影

阴影可以说是空间感的点睛之笔，所以很有讲究。

很多人直接给界面设置阴影效果，结果阴影紧贴着边缘，导致空间感较弱。

为了让阴影更加真实，最好是单独画一个阴影方块，叠放在两张界面之间。

这个方块可以直接用上层界面的形状，缩小一点、加大圆角并填充黑色，至于摆放位置，就想象一下自然投影效果吧。

5、模糊投影

投影肯定不能是一个黑色的圆角方块，所以要给它添加效果。

例如，我设置了 50 的模糊效果，和 20% 的不透明度。这个数值可以根据具体的情况，自己调节。

总结

第五个步骤完成后，和第一个步骤比起来，是不是感觉好多了？

你也可以用这个方法尝试不同的色调和排版：

原文地址：知乎

转载请注明：学UI网》如何提升UI效果图空间感？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

                                                            

 

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

 

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务