网页设计 ? 视觉设计 ? 发UI作品前,你会包装你的效果图吗?

捕鱼达人手机版下载下载报道发UI作品前,你会包装你的效果图吗?_捕鱼达人手机版下载下载官网资讯

公布于: 视觉设计. 评论
赞助商链接

现在UI设计行业的需求已经饱和,找到一份称心的UI设计工作并不容易,若想感动教官,一份美丽的作品集是必不可少的,今天和大家分享一下效果图的包装方式,让作品更加突出、精巧,更能感动人。

下面我们从6个方面,说说一些设计图的包装方式:

  1. 斜放界面
  2. 产品和界面结合
  3. 平铺界面
  4. 摊开界面
  5. 背景图设计
  6. 用户+载体+使用场景的结合体现

1. 斜放界面

斜放界面设计非常活泼,整个界面有律动感,不会呆板,并且还会给人一种无线延伸的觉得。

图1

图2

但因为是斜放的界面,所以不可幸免的会让部分界面设计挡在版面之外,比如像图2的左下角的界面,只露出了非常少的一部分设计,其余部分都看不清楚,这个是斜放界面的一个缺点。大家在使用该方式体现效果时,布图需要小心一些,尽量把最重要的界面放到中间部分,其余界面再排到周围,会比较适合。

图3

2. 产品和界面结合

为了能够直观的看出设计在奔驰娱乐网站、Pad或者电脑上的界面效果,很多交互设计师会把实体的载体和界面结合展示,图4、图5和图6都是一些优秀的案例。

图4在展示时,把效果图和产品的简单介绍结合在了一起,觉得非常专业,是一种很好的效果图体现方法。

图4

另外,如果界面的设计质量非常好的话,只要干洁净净的把载体和界面摆在一起也是能够的,这样的方式会让读者更集中于具体的界面设计。比如图5中载体的颜色(奔驰娱乐网站的颜色)跟背景的颜色的统一,显得整个画面更加洁净利索。

图5

图6是网页设计最终效果图的体现案例,非常有创意性,一切的界面飘在空中,形式非常自由。

图6

但有一点需要留意的是,像图6这样排列时,大家肯定要掌握好其透视联系,以及把控好布图的自由程度是。上图中画面虽然是随意漂浮的体现形式,但是整体的界面摆放的方向都是统一的,这样利于察看界面里的内容,同时除了界面和产品之外没有其余杂七杂八的设计,不然会让画面显得“乱”过头。

3. 平铺界面

平铺界面是大家常使用的方法,也是最简单,也最有效的表示方法。像图7这样的干洁净净的对齐,能让考官一眼看出其联系,设计要素在设计中的应用,配色方案以及标识设计。

图7

但平铺界面,建议大家在内容设计和界面设计的质量都非常好的情况下使用,如果设计的界面内容非常多,且无法全部展示的话,大家能够挑选比较关键的Key Screens进行展示,如图8。

图8

4. 摊开界面

摊开界面形式,一般应用于滑动的界面之间是连在一起的情况。制作的方法是要用载体(奔驰娱乐网站、Pad、电脑等)来卡住需要显示的关键界面部分,其余没能进入到平面里的内容能够铺在载体周围,示意除了关键界面部分以外还有百家乐软件 系统的隐藏内容。

图9

图10

5. 背景图设计

背景图的设计能够跟交互产品本身的设计结合,背景和界面融合在一起,能够让版面更加自然。

比如说像图11,把界面的某个复杂的图案放大,将其当作是整个效果图的体现背景,能够幸免画面太单调。

图11

而图12则是从设计的要素中提取了颜色和形状,将这两者结协作为背景图,整体感非常强。

图12

另外,虚化也是很多交互设计师爱用的命令之一,虚化背景能够衬托主题,让读者更加集中于界面的设计,读者明白是其设计灵感是从何而来的,同时会给人一种优雅的模糊美。大家能够在制作效果图时,将其合理加入自己的设计中,能够起到很好的突出作用。

图13

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

场景的结合体现是一种还原使用场景的方法,这样的效果图最显著的特征便是更真实。

图14

一般来说,场景结合体现的手法多用在AR项目最终效果图中。因为AR本身需要采集真实场景的数据,并且要把虚拟的设计放到真实世界,让真实环境和虚拟信息在同一个画面或空间显示。像图15和图16都是很好的例子,这样的效果图放到作品集中,考官很容易就能够明白信息和环境之间的联系。

图16

图17

Final:以上只是几种效果图的体现方式,大家在做效果图时,更为重要的是,要考虑清楚自己设计中要凸显某几个界面,还是全部要展示出来,是要洁净简洁的效果,还是要用炫酷动感的设计等问题,只有对自己的设计有了肯定的把控后,才能更好的与这些效果体现形式相契合,从而实现最好的界面效果。

作者:康石石
来源:https://zhuanlan.zhihu.com/p/32302265

推举:察看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交百家乐软件 系统有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
捕鱼达人手机版下载微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关切我们的微博,谢谢撑腰。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。