小纽扣

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

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

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

 

1、准备界面

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

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

 

2、旋转角度

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

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

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

 

3、添加背景

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

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

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

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

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

 

4、绘制投影

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

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

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

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

 

5、模糊投影

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

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

 

总结

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

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

 

原文地址:知乎

作者:ZoeYZ

转载请注明:学UI网 » 如何提升UI效果图空间感?

登录收藏
 
你可能喜欢的:
业务想大多全,用户要精准简,首页设计该如何破局?业务想大多全,用户要精准简,首页设计该如何破局?
最近访谈了海外用户,总结几点意外收获最近访谈了海外用户,总结几点意外收获
案例锦囊|交互设计中「情感化」设计优秀案例(二)案例锦囊|交互设计中「情感化」设计优秀案例(二)
15条APP体验设计的思路分析15条APP体验设计的思路分析
设计师如何提升总结力设计师如何提升总结力
淘宝订单页改版分析:如何提高支付转化率淘宝订单页改版分析:如何提高支付转化率
如何高效地进行网页设计?重点关注这些要素如何高效地进行网页设计?重点关注这些要素
工作经验| B 端产品组件设计细节及经验分享(三)工作经验| B 端产品组件设计细节及经验分享(三)
作品集别用这几个设计目标了,太老套作品集别用这几个设计目标了,太老套
iOS 规范与 Material Design 哪里不同?官网总结了这几点iOS 规范与 Material Design 哪里不同?官网总结了这几点