如何像“专业人士”一样展示UI设计稿？

静电说：不少小伙伴在初学界面设计过程中，通常是能做出来一张张的界面，但是拿出来给别人看的时候就很随意，设计稿一页一页的导出来就甩给了浏览者，那通常结果是不好的，给浏览者的感受大概率会很差。今天咱们来看看一些展示UI设计稿的小技巧。

当然，下面的描述仅仅是优雅的展示你的设计稿的一种方式，我们还有很多方式可以使用。不过，先从最简单的来吧。

第一步：设置画布

首先，制作一个宽度为1080-1080像素的画板。然后将设计屏幕放在中间。（在这之前需要把单张设计稿导出来为2x或者3x）

第二步：定位

现在，我们需要进行一些定位。您可以上下移动或左右旋转。让我们继续左右旋转。旋转与第一屏幕-5度和第二屏幕 与8度。确保它与画布的中心完全对齐。

第三步：设置背景

正确对齐后，我们将添加背景色。背景色将与设计的原色或主色相同。此外，为了使外观更好，我们可以将设计稿做成圆角。

第四步：设置对比

不管你使用怎样的背景色，有一个原则必须遵守，那就是要让你的背景和设计稿颜色产生比较强烈的对比，并且不能让设计稿的背景“淹没”到展示画布的背景色中。

第五步：设置阴影效果

对于阴影，请制作一个宽度为350px，高度为650px的矩形。将其放在屏幕之间。矩形的颜色是＃212121或＃262626，适当旋转角度。并在两者之间正确对齐。

为什么不用直接的投影来做呢？因为不够真实不够自然。使用上文介绍的方式产生的投影效果更好。

第六步：设置对象模糊

现在是最后一步，模糊这个矩形，模糊数值大概为50左右，然后记得降低透明度。这样可以呈现出两个设计稿之间的空间感和悬浮感。（不少阴影都是这么做出来的，而不单单使用“阴影”效果。）

第七步：做不同颜色和组合效果

倾斜或者不倾斜的，更换不同的颜色背景都OK，但是，悬浮的立体效果一定要真实，符合物理规律，这是非常重要的一点。

OK！现在把你的设计稿拿去给别人看，是不是比之前好多了？

原文：https://uxplanet.org/how-to-show-your-design-like-a-pro

作者：Vikalp Kaushik