0 Comments

作品包装/展示中的用色

发布于:2016-11-10  |   作者:广州网站建设  |   已聚集:人围观

快年底了,大家又要开始着手整理这一年的作品集

那么如何快速的提升作品集的展示效果,增强自己作为专业设计师的逼格?

相信是很多同学关心的事

 

一说到作品包装,有些同学想到的是

套用Mockup

▽5cf15824183da84a0d304f32ec47.jpg

 

拉透视

▽

4c6358241894a84a0d304fd6dd50.jpg

 

还有一些同学在展示布局上特别用心

▽

7635582418aba84a0e282b4cb3ff.jpg

有人用了这些方法,作品立刻脱颖而出,而更多的被说成表面功夫,这是为什么?

排版固然重要,但色彩的运用同样不能忽视

有时色彩甚至是作品脱颖而出的关键

 



试想一下,在Dribbble 有很多高人气作品,虽然内容平平,但只要颜值到位,依然可以圈粉无数

▽

 

987958241972a84a0d304ff8cfd6.jpg

 

在这看脸的时代,没有颜值的作品,纵使布局考究,也鲜受关注

设计师的作品必须精致,像女人一样精致

衍生阅读《没义务透过邋遢的外表,发现你优秀的内在》

 

如何快速打造有颜值的作品包装,让你作品备受青睐

很多设计师都为此苦恼

今天就和大家聊聊,如何提高作品逼格

 

 

 

 

[ 前言 ]

 

首先你要明白一件事非常、非常、非常重要的事

作品包装不是设计图的简单罗列,更不是让你世界展现产品的线上截图,作品包装包好比女生用美颜相机自拍

▽

283a58241ae4a84a0d304f36a7e9.jpg

为的是展现作品最完美的一面,下面将为大家讲述,如何提升作品的颜值

 

 

NO.1 

包装色调

 

目前主流的 APP 界面配色都是下面这样

▽

 

4c9b58241bd3a84a0d304f44c122.jpg



APP 界面中品牌色已沦为点缀色,界面的颜色主要来自内容

且 APP 的品牌色通常不会随着设计师的主观意愿进行调整

既然设计师无法改变 UI 界面的颜色,那我们就从包装的背景色着手,常见的配色手法有四种:

 为方便选图,这一段均以小图片示意

 

 

1.同色系配色

(最常见)

 

b92558241beba84a0d304fe2210e.jpg

指主色和副色都在同一色相上,在配色上营造一致性

 

 

2.类似/邻近配色

 

985158241c1ca84a0d304f83f602.jpg

这种方法最为常见,可以让页面颜色更加丰富,且色相过度柔和,看起来非常和谐

 

 

3.中性配色

 

a1a058241c29a84a0e282b14caba.jpg

即背景以黑白灰为主,突出内容(UI 界面),使之不受背景色的干扰,这种配色不经非常经典,还很百搭

 

 

4.对比色配色

 

7c0258241c31a84a0e282bb6b623.jpg

背景和内容色彩间的对比形成强烈的视觉冲击,使内容变得更加突出

 

 

 

 

 

NO.2

界面色

 

上文提到,目前 UI 界面中的色彩主要来自内容

 

c8a058241c3fa84a0d304f8698d7.jpg

在新版 Apple Music 中,苹果让每张专辑自己说话:展现专辑本来之美

 

 

e2b258241c53a84a0e282b352030.jpg

类似的理念,在 Instagram 改版中也早有体现,其设计主管 Ian Spalter表示

「我们相信色彩应该直接来自社交的照片和视频才对」

 

对此,我们可以宽泛的理解为

界面色=内容色

 

 

如今,目前越来越多的 APP 朝着突出内容的方向发展

c7c758243168a84a0e282b5011bf.jpg

 

在内容变得越发突出的同时,内容的质量也变成一把双刃剑

 

好的内容不仅可以提升产品气质有的时候,可以撑起整个作品,如下

▽

dd9d58241c7fa84a0e282b7156e6.jpg7e9c58241c87a84a0e282bc48da8.jpg

 

而差的内容则却能让产品气质瞬间归零,以 Ins 为例

▽

 

85db58241c9ca84a0e282b4d834e.jpg

 

线上产品内容质量受 UGC、运营编辑、后台技术等多种限制,很难以最完美的效果呈现给大家

庆幸的是,设计师在包装环节可以通过自己精妙的配图,展现作品最完美的一面

但是,配图并不是简简单单的去扒一些美图那么简单

不仅要根据整个包装的配色反复斟酌,还要符合产品原有的气质,选图的思路如下

 

1.展现美的内容

0ee358241ca7a84a0e282b20e606.jpg

如果你对内容质量的把控度不高,建议你可挑选专业摄影师的作品

 

0bd058241cb0a84a0d304f5f3ba1.jpg

人像用模特硬照或明星写真(含网红),这类的图片都是经过专业修片,质量有保障

 

 

2.色调和谐

在确定包装的整体色调后,内容的色调根据包装的整体效果进行挑选

下面这张图来自Dribbble

f4f458241cc4a84a0d304f78c791.jpg

用下面两张图替换原作品中的图片,结果会怎么样?1



9b5e58241cd7a84a0d304f14cd8f.jpg

 

c1cf58241ce1a84a0d304f00e8f0.jpg



虽然内容质量过关,但却破坏了原包装的整体色调,拉低了展示效果

 

 

3.完善细节

我总结了几个选图要点,希望可以帮助大家把规避一些问题

 

①  烘托氛围

出于某些原因,国内很多设计师时常会出一些英文设计稿

29f758241cf6a84a0d304f9b3102.jpg

b80658241cfba84a0e282bad39b3.jpg

如果要做英文设计,在内容配图上最好以外国人为主

而类似于“今日故宫”这样带有中国风的产品,在选图的时候,如果插入老外图片则显得很跳戏

 

 

② 背景不重色



ad9158241d0aa84a0e282b1de3be.jpg

 

 

如果 UI 界面中背景为白色,那么图像背景色要避免大面积出现白色

避免与 UI 背景色相同,造成图片没有边缘感

 

 

③ 慎用蓝天白云



123b58241d16a84a0d304f0ffdc6.jpg

 

蓝天白云是中国民间最为常用的素材,作为一个有逼格的设计师你好意思在配图中出现这个?

如果要用,除了避免大面积出现以外,还要调整图片的整体色调

 

 

④ 主体适当



a4d658241d20a84a0d304fdb0ebe.jpg

 

尽可能选择或截取近景图

图像的主体可占到图片尺寸的1/2左右

 

 

 

 

案例分享

下面将实例讲解以往个人作品的包装思路

f19158241d6fa84a0d304ff8d1fc.jpg

 

 

背景

去年受某培训机构邀请,做一个通过配色提升包装效果的范例

范例主要想体现在简单排版的情况下精通过“色”的修改提升包装效果

 

 

包装对象

爱奇艺啪啪奇6.1设计图,如下

fbff58241d46a84a0e282bae7ace.jpg

 

 

 

包装开始

 

1.确定包装的主色

初步设定:产品的主色为绿色,故在整体配色上,以冷色系为主,同时选用绿色的类似色进行搭配



 

 

8f8158241d5ba84a0e282be76543.jpg丰富:接着我又在背景色中加入了紫色

不仅可以使包装颜色更加丰富,形成柔和的渐变,还可以增加一丝神秘感,提升整体感觉 



414558241e5ea84a0e282b5eabca.jpg

 

 

2.确定素材

原设计图中所用素材人物,多以微笑为主和蓝紫色的冷艳气息不符

为此我把目标锁定在面无表情的 Model 上,并结合展示布局

▽

12d458242cf9a84a0e282bdeda04.jpg

如果整体都是艳丽的颜色,不仅会造成视觉疲劳,且会降低素材的新意

所以需要找到蓝紫色和白色两套素材

原本打算以亚洲模特为主,无奈亚洲模特可用素材不多,不仅颜色相对单一,且多为杂志封面

▽

192e58241e71a84a0d304f8258b5.jpg

最终还是选用了国外模特

▽

b14c58241e7ca84a0d304f47c7ae.jpg

 

 

3.中文 or 英文

啪啪奇原始的设计稿为中文

我是真真切切不想将其替换成英文(嫌麻烦)

可在中文界面下,部分页面展示效果较差,大家可通过下面两组对比自行感受下

▽

a62458242b92a84a0e282b8b4c7e.jpg

最后出于对展示效果的考虑,还是将界面中的汉字替换成了英文

 

 

 

4.细节调整

至此,文字变成了英文,图片素材采用国外模特

为了进一步完善包装效果,打造一款纯英文的视觉体验

我将页面中的圆角改为直角(国外APP很少使用圆角),并调整蒙层的细节

▽

 

8ee658241f6fa84a0d304f60ddc8.jpg

 

同时将界面和包装中出现的社交图标,如QQ、微信、微博等国内应用

逐一换成Facebook、Twitter、Ins等国外应用

▽



f06e58241f61a84a0e282b8bc5a3.jpg

 

 

 

5. 输出成品

 

0fe458242e9ca84a0e282b62f924.jpg

 

 

 

 

 

 

 [ 后记 ]

b42c58242fc2a84a0e282b259346.jpg

以上三类产品,都可以通过上述办法快速提升包装效果

比如下面的界面

2b6558241feba84a0e282be53c47.jpg

虽然布局简单,却能做出酷炫的包装

▽

7e3758242fa9a84a0e282bd6b519.jpg

 

 

 

 

 

[ 结束语 ]

 

dee7582430d0a84a0d304ffeb912.jpg

 

作品的展示包装固然重要,但优秀的设计思维才是支撑设计师未来道路的基石

如果沉迷于包装,忽略真实的产品设计,反倒会给自己带来无尽的烦恼

 

『 颜值只能揽客,活好才是硬道理

设计师应当内外兼修 』

 

最后祝大家在年底收获更好的机会,2017年有更多更好的作品出街面世

飞机