交互设计的效果图也就是最终的产品图，在作品集里，好的效果图可以向考官展示你优秀的平面设计能力、信息组织能力、创新能力，可以说精湛的效果表现会给作品集大大加分。

但是很多同学在完成具体的内容设计之后，在最终呈现阶段就手足无措了，直接用up或者AI做出效果图，直接搬进作品集。这样的效果图会大大降低考官对你的作品集的好感度。这里康诗诗整理了近期比较流行的几种最终呈现形式，并对它们做了一些分析sketch up 效果，帮助大家找到适合自己的效果图。

1.倾斜界面

对角线状的接口设计显得非常活泼，整个界面很有韵律感，并不呆板，给人一种无线延伸的感觉。

图1

图 2

但因为界面倾斜，难免会有部分界面设计被遮挡在布局之外。例如图2左下角，只有极小部分设计露出，其余设计看不清楚。这是倾斜界面的弊端。使用这种方式表达效果时，布局需要更加谨慎，尽量将最重要的界面放在中间，其他界面则围绕其排列。

图 3

2. 产品与界面集成

为了能够直观的看到设计在手机、pad或者电脑上的界面效果，很多交互设计师会把实体载体与界面结合起来进行展示，图4、图5、图6就是一些很好的例子。

图4将效果图和产品的简单介绍结合在一起，感觉非常专业，是一种很好的效果图呈现方式。

图 4

另外，如果界面的设计质量很好，那么将载体和界面整齐地放在一起也是可以的。这样读者会更加关注具体的界面设计。例如图5中载体的颜色（手机颜色）和背景颜色是统一的，使得整个画面看起来更加干净。

图 5

图6是网页设计最终效果图示例，非常有创意，所有界面都悬浮在空中，形式非常自由。

图 6

但有一点要注意，像图6这样排列的时候一定要掌握透视关系，控制好布局的自由度。上图中的图片虽然是浮动形式，但整体界面摆放的方向是统一的，有利于查看界面内的内容。同时除了界面和产品之外，不能有其他杂乱的设计，否则画面会显得太过“混乱”。

3.平铺界面

平铺界面是常用的方法，也是最简单有效的表达方式。像图7这样整洁的排列可以让观察者一眼就看出设计中设计元素的关系、应用、配色方案和标志设计。

图 7

不过建议大家在内容设计和界面设计质量都非常好的情况下，才使用平铺界面，如果设计的界面内容比较多，无法全部显示出来sketch up 效果，可以选择比较关键的键进行显示，如图8所示。

图 8

4. 扩展界面

铺展开来界面形式一般用在滑动界面相连的场合，制作方法是用载体（手机、pad、电脑等）遮挡住需要显示的重点界面部分，其他不能进入平面的内容可以铺展开来放在载体的周围，表示重点界面部分之外还有更多的隐藏内容。

图 9

图10

5.背景图片设计

背景图的设计可以和交互产品本身的设计相结合，将背景和界面融为一体，让布局更加自然。

例如如图11所示，将界面上一个复杂的图案放大，作为整个效果图的背景，可以避免画面过于单调。

图11

而图12则从设计元素中提取颜色和形状，将两者结合作为背景图像，使其具有很强的整体感。

图12

另外，模糊也是很多交互设计师爱用的命令之一。模糊的背景可以衬托主题，让读者更加专注于界面的设计。读者了解设计灵感从何而来，会给人一种优雅朦胧的美感。在做效果图的时候，可以合理地将其添加到自己的设计中，可以起到很好的突出作用。

图13

6、用户+载体+使用场景的结合

场景组合表达是还原使用场景的一种方法，这样的效果图最明显的特点就是更加逼真。

图14

一般来说，AR项目的最终效果图多采用场景结合的表达手法。这是因为AR本身需要从现实场景中采集数据，将虚拟的设计放入现实世界，让现实环境和虚拟信息在同一屏幕或空间中展示。图15和图16就是很好的例子。当这样的效果图放入作品集时，考官很容易就能理解信息和环境之间的关系。

图15

图16

最后：以上只是效果图的几种表达方式，在做效果图的时候，更重要的是要考虑你的设计中是突出某些界面，还是全部展示，是要干净简洁的效果，还是要用炫酷动感的设计。只有对自己的设计有一定的把控，才能更好地与这些效果表达方式搭配，达到最佳的界面效果。

如有侵权请联系删除！