一个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

相关推荐

  • 两会唤醒全民关注用户体验

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    2018-03-28
  • Sketchbox:会画图就能使用的AR建模应用

    在目前的情况下设计虚拟现实和增强现实产品并不容易,仍存在挑战。Unity和Epic Games可以说是现在比较常用的编辑应用,帮助用户以非常精确的方式去编辑虚拟现实内容。但需要指出,这两者都是为已掌握相关技术的人群所提供的技术项目,虽然没必要会写代码,但是了解一些简单的原理和技术能达到的界限也还是需要的,从这方面看,设计VR或AR产品的门槛相对还是比较高的。最近,Y Combinator的最新一期项目中的Sketchbox可以帮助设计师...

    2018-03-23
  • 知识分享直播——用户体验招募

    如果你曾经沉迷直播,为喜欢的主播刷飞机火箭;如果你曾经将直播当作你学习的途径,获取信息;如果你对当下的直播平台设计有想法和建议;如果你希望在看直播的同时,不用送礼物,还能赚些小钱;如果。。。其实,没有这么多如果,只要你想参与到影响直播平台的用户体验设计的活动中,只要你不是直播的小白,那么请毫不犹豫地来参与我们的用户体验实验。我们会提供不低于50元人民币的报酬。01—研究课题在现行的直播用户界面的基础上,我们设计了一个辅助知识分享型主播及...

    2018-04-08
  • 欧洲刮起性爱机器人风,用户体验称比真人舒服;马化腾减持腾讯200万股,套现超6.4亿港元 | 早报

    语音版早报9.109月10日邦妹读新闻来自创业邦00:0004:09不可不知1、马化腾减持腾讯200万股 套现超6.4亿港元香港交易所资料显示,马化腾于9月5、6及7日,连续三天合计减持腾讯200万股,每股平均价介于321.64港元至323.521港元之间,持股量由8.71%降至8.69%,合共套现逾6.4亿港元。此时正值腾讯股价高点。马化腾今年4月连续4天减持,套现42.27亿元,其今年已合共套现近46亿元。2、传WePhone开发者...

    2018-01-31
  • 【干货知识】最全面的交互设计原则和理论汇总(下)

    【点击上方蓝字↑↑↑关注「艺恋优梦」获得每晚推送】防错原则:防错原则认为大部分的意外都是由设计的疏忽,而不是人为操作疏忽。通过改变设计可以把过失降到最低。该原则最初是用于工业管理的,但在交互设计也十分适用。如在硬件设计上的 USB 插槽;而在界面交互设计中也是可以经常看到,如当使用条件没有满足时,常常通过使功能失效来表示(一般按钮会变为灰色无法点击),以避免勿按。如上图所示极客公园的评论功能快,在留言框没有内容或邮箱格式不正确的时候是无...

    2018-04-11
  • 2016年移动应用设计趋势:神奇的微交互

    开发一个APP并上线了,你会觉得很了不起,同时呢它还有一个很酷的故事和视觉设计令人印象深刻。但这是不够的,它需要更多的东西,要让用户感觉这些元素活着。 这就是微交互! 图片来源:uxpin 当谈到设计一种上瘾的…

    2015-12-25
  • 3月19日部分上海实习信息汇总

    2018“猎萝卜”校园宣讲会 松江大学城专场人立方智能科技有限公司时间:3月22日 18:00-20:00地点:上海对外经贸大学 B303上海人立方智能科技有限公司,专注于人工智能与人才招聘,中国人力资源行业领军企业50强。猎萝卜(www.lieluobo.com)是公司创立于2017年的智能猎头招聘平台,服务于互联网、金融这两大领域国际知名客户及500强企业。平台上汇聚上千家优质的猎头公司,通过人工智能算法的引导,精准匹配中高端人才需...

    2018-03-19
  • 2018年3月交互设计招聘内推信息

    58体验设计团队——北京 交互视觉用研岗都有,欢迎各位朋友自荐或推荐,非常感谢。 简历可发给uxd-job@58ganji.com  是一直活泼可爱的团队~ 对于男设计师来说:100人里65%是女生 其中单身有1/4 机会还是很大的 阿里口…

    交互专题 2018-03-09
  • 从音乐属性改进用户体验,QQ音乐和虾米音乐如何再优化?

    本文将抛开市场占有率,将腾讯的QQ音乐与阿里的虾米音乐作对比,从音乐的本身属性和对人心理的影响出发,分析用户需求,对产品提出用户体验方面的优化建议。

    2017-05-18
  • 细节体验|你离用户只差一个好的交互

    上一篇我们简单的提到过“在合适的时机出现”这个交互细节打磨点,今天我们继续沿着这个点,剖析一些常见的交互细节点及案例。

    2017-05-18