一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

在我们常规意义上组成一个APP的视觉风格有几大元素——颜色、交互元素、字体、阴影、ICON的图形等,但是有一个总容易被设计师们忽略的元素,它能给与用户一个非常直观的视觉记忆,大家却总是忽略,甚至做的很糟糕。那就是APP里面的配图。


在我们常规意义上组成一个APP的视觉风格有几大元素——颜色、交互元素、字体、阴影、ICON的图形等,但是有一个总容易被设计师们忽略的元素,它能给与用户一个非常直观的视觉记忆,大家却总是忽略,甚至做的很糟糕。那就是APP里面的配图。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(一)

从2015年开始,各大APP开始越来越少在升级新版本之后使用tutorial图(介绍、教育用户新版本的新功能),似乎产品经理们都意识到看tutorial图的寥寥无几,反而会让用户觉得很鸡肋体验差,而同时在appstore的中放置的APP截图也越来越趋向返璞归真,很少使用扁平式的插画来介绍功能,这使原本曾经在UI设计师们之间经常比拼的配图能力,似乎不那么被大家重视了。同时,也越来越多的UI设计师开始出现了找工作难的情况,一方面这当然是因为去年至今年整体互联网资金收紧,但是另一方面,也看到了公司的管理者们越来越轻视UI设计师存在的必要性了——因为似乎他们的作品都很相似,并没有那么多个性。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(独特的中国式扁平化引导页)

前几日有人咨询我一个问题——如何辨别一个UI设计师的好坏呢?他说自己看大家的作品都很像,似乎一下子没有了辨别的能力,我仔细思考了最近ui设计师作品的现状才发现,各种各样的网站上都发着各种各样排版精美、层次清晰、“very clean”的ui界面,这些基础能力很扎实的设计师发出来的页面作品自然而然会有极强的趋同性。而我也陷入了思考“如何判定一个ui设计师的好坏呢?如何让作品不再趋同?”

(二)

我想配图是一个重要的,同时极易被忽略的点。

废话少说,先放个人认为优秀的配图,让我们分析一下优秀的配图具备什么共同点:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(Airbnb 配图)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(google 日历配图)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(配图applemusic)

先放上三个大公司设计师的作品,看似眼花缭乱,但是却有一个共同点:他们都有着自己的风格、有着极强的设计感。

风格和设计感,听起来玄而又玄的词,但是本质就是——不趋同,要求自己的作品不能像市面上的公司一样,别人做成什么样自己就做成什么样,这样子就自然而然有了一个新的要求,那就是不仅要和市场上的不同,同时还要和自己产品的气质一致。

那么如何能拥有自己产品的配图风格呢?让我们来细细分析一下:

1. 色彩

这可能是在配图风格上最容易被忽略的点,因为大家都以为颜色的使用最容易雷同了,自从进入到扁平化以来,似乎市面上的配色都雷同了,根本分不出是什么产品的配色:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(配色极其雷同的配图)

究其原因非常简单,在进入到扁平年代之后,大家画法雷同的同时用色也只敢使用那些明度高、纯度高的色彩,尤其在背景颜色大量的使用的就是灰、蓝、橙色等,所以感觉相似性极高。让我们来看看同样是纯平的画法,国外优秀的配图是怎么做的:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(仍然是Airbnb的配图,不愧是老总是设计师的团队做出来的app……)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(麦当劳的APP配图,非常赞的插画)

airbnb这一组展示城市风采的配图,用色非常大胆,所谓的大胆不是用了大量的鲜亮的颜色,而是使用了大量的重色穿插和大量的纯度不高的颜色进行点缀,使得城市的感觉更加真实,反而比那些千篇一律的高纯度、高亮度的颜色组合要给人能留下更多深刻的印象。另外后面这一组插画,使用了强烈的光影反差、对比色反差,因为颜色的使用完全获得了自己的风格,这就是颜色使用的重要性。

2. 画法  

大家可能会疑惑,已经是扁平化的时代,大厂不更新风格,我们跟着瞎起什么哄呢?我不这么认为,没有任何人规定你必须和大厂的画法相同,而且apple和google都使用扁平的画法时风格还是有区别。这是为什么呢?

让我们来就着相同的扁平画法,来做一个细致的分析几个关键词:

(1)角度 [2.2d?2.5d?正侧?伪扁平?]

A:2.2d

我想我可能是第一次说2.2D的人,估计看官们肯定都觉得我疯了,但是2.2D是我对于正面45°视角的一种个人叫法,各位看官怎么称呼它是你们的自由了。让我们来看看2.2D的优秀配图:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同样是google的配图)

2.2d的优点在于它可以简单并且高效的丰富画面细节,当所有人都在用正侧面的扁平化时,往往需要更多的细节以与别人不同,这时候2.2d的方法就非常方便,同时,他只是给一些画面上的物品增加了一个侧面而已。

B:2.5d

2.5d恐怕在大家印象中最深的就是当初高德的引导页,有相当一段时间都是使用了2.5D的风格,这种风格使用起来并不简单,但是掌握规律之后就没那么复杂了。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(艺术家Igor Kozak 作品)

再创作不规则物体的插图(比如图二的“人”),2.5D就需要比较扎实的绘画功底,对设计师基础素质要求较高,所以使用人数不多,在这个角度里面仍可以有很大的发挥余地。

C:正侧面

这恐怕是设计师们扁平的入门角度,难度低,使用人数多,想要做正侧面的扁平化插画做的出彩,就需要对画法中其他几点(阴影、图形)有着比较深的考究,否则画出来就像烂大街的UI配图,没有任何的代表性。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同样是google的配图)

D:伪扁平

在C4D兴起的这个时代,只用AI、PS、SKETCH已经不再能满足用户追求新鲜的眼球了,所以逐渐兴起了许多看似是扁平化,但是本质却是使用C4D建模渲染之后做出的作品:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同样是google设计团队的作品)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(艺术家Guillaume Kurkdjian作品)

(2)阴影 【无阴影?有阴影?强阴影?逆光?】

A:无阴影

无阴影当然是一种风格了,很多国内设计师的无阴影风格的配图显得特别的傻,原因是当元素被一层层削弱到越来越少时,图形的能力、用色的考究都会让一副正侧面无阴影的配图立分高下,换而言之UI设计师的能力就在这个地方得到了体现。能力差的无阴影正侧面配图,会非常像儿童画。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同样是google的配图)

B:有阴影

阴影分很多种,Material Design中的纸质阴影是一种类型(即绘画的形象之间的层级),物体本身的阴影也是一种类型,娴熟的使用阴影固然很重要,但是找到自己使用阴影的风格更加的重要,比如:只有在圆柱体时才使用阴影?只有在人物脚部使用一个顶光的投影?阴影是否使用几何形?这些都是不同的阴影风格的组成部分。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(TBWA Shanghai 工作室为中国女排设计的插画)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(dribbble上北京的ui设计师“包子二蛋”作品)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同样是google的配图)

Google的很多配图都在阴影部分加入了噪点,这也是使自家的阴影更加的有质感,与市面上简单的扁平化有一个区分。

C:强阴影

强阴影的应用在之前的色彩部分已经有提及过了,再放几张图你们感受一下。

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(艺术家Malika Favre 作品)

D:逆光

这个需要相当的功底和审美了,但是同样的,也非常少的人会这么做,所以如果使用逆光的扁平化配图,做得好的时候会很有独特的风格,这是BEHANCE上的大神dani montesinos做的扁平化视频RIVER的截图,非常有感觉:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(3)图形  【几何化?人物比例?人物形象?】

A:几何化

何为几何化?不是让画面上充斥着正方形、三角形、圆形等等,而是画面上所有的分块都是由标准的几何形进行组合得来的,这样的画面会有一种规律的美感:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(Nod young 设计的表情)

B:人物比例

当我们画的形象千篇一律时,竟然大家都不会尝试着去改变一下笔下的人物的比例,Google的人物形象比例就和国内的风格大相径庭,头身比例几乎相反,反而有种新的时尚感~

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同样是google的配图)

C:人物形象

我不得不说,国内不仅人物形象的比例千篇一律,人物的形象更是夸张的相似,原因只能是在形象这件事上没有下功夫,看看下面的两个GIF中人物的形象多么的栩栩如生:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(dribbble上的设计师Markus Magnusson作品)

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

(同上)

同样是一张人脸,如果画的与别家没什区别的话,怎么显得出自己家产品的自己的特色呢?国内的SAME这个APP,在这点上就做的比较出色,它的整套视觉都是有联系的,将自己APP的形象深深的植入到了使用者的心里:

一个APP的视觉风格:配图是一个重要的,同时极易被忽略的点

人物形象当然不仅仅只是人物的脸,还有人物的衣着、身体的画法是什么样的?身体中的尖角是怎么处理的?手脚的画法是什么样的?等等等,这些都是设计师需要考虑的地方,而且笔者认为,每为一个新的产品设计APP时,就要考虑使用与众不同的人物形象,这才是设计师真正珍贵的地方——能为不同的产品穿上新设计的“衣服”。

总结

仅仅是扁平化的配图,我就唠叨了这么多,可见在这个时代,UI设计师自然不会变成一种统一化的技术工人,而是仍然能充满了个性与不同,作品也自然分高低,那么除了上面说的构成风格的要点,真正做到有个人的风格还需要什么努力呢?我认为是两点:

  1. 保持手绘的习惯!
  2. 不要只看设计类的作品!

各位设计师们,共勉!

 

作者:Balance Yan

来源:微信公众号【ME网易移动设计】

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25716/

(0)
CatherineCatherine
上一篇 2017-05-12 02:45
下一篇 2017-05-12 04:41

相关推荐

  • APP设计:那些打动人心的设计点(一)

    打造用户喜欢的产品,让产品从能用、好用到爱用,是每个互联网从业者的使命,为你的APP增添一些打动人心的小设计,不失为一个好办法。当然,前提是该设计能为用户带来价值,千万不要为了设计而设计。

    2017-05-06
  • 交互动画设计案例—1688首页动效

    随着CSS3和HTML5的发展,越来越多狂拽炫酷叼炸天的动效在网页设计上遍地开花,根据最新的浏览器市场份额报告,IE6的份额已经降到了5.21%,这简直是一个喜大普奔的消息,做动效可以完全不care低端浏览器的时代已经在…

    2015-04-24
  • 为女性设计APP的7个小技巧

    Groove CEO解释了如何以正确的方式为女性设计APP。 提示:如果你将花,心形,及娃娃混在一起设计,那你可能需要重新思考你的设计。 当我的公司Groove着手建立一个定期跟踪器,我们知道这将是一个挑战。 搜索以女性客户为…

    2015-04-28
  • 未来美甲店一定赢在“用户体验” | 互联互生

    咱们来假想一个情景,你到一个新公司第一天上班,你刚到公司门口,就有一位打扮非常正式的女士专门迎接你。她领着你在公司走了一圈,介绍了各部门的情况,然后把你送到你的办公桌。你发现办公桌上挂着一个横幅,上面写着“新人在这儿!”全公司都能看见。你打开电脑,屏幕是一张代表公司理念的美丽图片。办公桌上有一份给你的礼物,是不锈钢做的一个公司产品的模型。你刚连上电子邮件,就收到 CEO 亲自写给你的信,对你各种鼓励、希望你能度过愉快的一天,也希望你在公...

    2018-04-29
  • 交互设计是一个什么样的专业? | 大咖说

    近些年来,交互设计这个词越来越多的出现在我们的生活中,是一个仿佛到处都有,但却又“看不见,摸不着”的东西。所以到底什么是交互设计?百度解释如下交互设计(英文Interaction Design, 缩写IXD),是定义、设计人造系统的行为的设计领域,它定义了两个或多个互动的个体之间交流的内容和结构,使之互相配合,共同达成某种目的。交互设计努力去创造和建立的是人与产品及服务之间有意义的关系,以“在充满社会复杂性的物质世界中嵌入信息技术”为中...

    2018-02-14
  • 产品设计中关于表格设计的一些经验分享

    由于长时间主导后台产品的设计服务,表格的大量应用,总结了些许经验,通过半个月的断断续续的整理归纳,希望对你有所帮助,欢迎阅读!

    2017-05-18
  • 2019届及以后实习|互联派、苹果、百度等一大波实习来咯!

    今天的实习信息也是满满的哦~快跟着派派一起来看看吧~互联派、苹果、法国优格、百度、京东等多个岗位等你投递~面向人群2019届及以后,包括2019届、2020届、2021届同学,以下的岗位都可以投递哦~岗位预览◆互联派/用户运营实习生/大连◆互联派/新媒体运营(内容编辑)实习生/大连◆网易有道广告优化实习生◆苹果/数据分析实习生/北京◆法国优格/财务助理实习生/上海◆百度/HR实习生(招聘方向)/北京/可转正◆百度/人力资源实习生/北京◆...

    2018-03-23
  • Axure实例:即刻 app 产品需求文档

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放不了了之冰淇 - 分手快乐作者:T.zh来源:简书以下我的Axure原型截图:目录:1.概述1.1产品介绍1.2需求整理2.版本信息2.1修订历史2.2版本规划3.产品逻辑3.1产品信息图3.2产品结构图3.3部分业务流程图4.产品设计4.1全局说明4.2部分功能需求说明4.3部分交互设计1. 概述1.1 产品介绍1.1.1 文档属性1.1.2 产品综述1.2 需求整理1.2.1...

    2018-03-08
  • 译文|移动体验设计禁忌

    就移动用户体验设计而言,不断地实践是检验其好坏的一条必经之路。在这篇文章中我们聚焦于基础。我们需要去解决的是如何避免打断用户或者强迫用户思考的问题。

    2017-05-20
  • 用户体验之网站导航设计师指南

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。“如果用户在导航上遇到困难,他们通常会犹豫是否要回到网站上。”大多数人可能有过这样的体验,当你打开了一个APP,由于没有导航或者导航设计不合理,你花费了很多时间去寻找你需要的东西。那么你很可能不会逗留在这个页面,甚至不会再想使用这个网站。那么你如何创造出“清晰,简单,一致”的导航呢?让我们来模拟一个场景,你在一个星期天的早晨出门去买自己喜欢...

    2018-03-14