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

相关推荐

  • UX分析:朋友圈的外链知多少?

    用户体验设计的核心是用户,而用户是通过社交媒体相联系的,在设计app应用时,我们会更在意app内的使用,而会忽略app外的使用。当我在朋友圈里看到这些外链的时候就想到了要写这样一篇文章,略显粗浅笨拙,如有不当之处请不吝指教。“来跳坑吧,下载我吧,打开我吧”!

    2017-05-08
  • 交互设计文档怎么写? | 设计基础

    摘要交互设计师的工作虽不只是画交互稿子,但是好的交互稿不仅能够完美阐释产品内容和设计师的设计思路,还能够在项目各方协调工作中起到重要作用。保证完整的呈现产品需求和设计思路的交互稿,能够让各方工作人员有一致的工作目标,而有良好体验的交互稿,还能够便于各方理解,提高后期开发对设计的还原度,提高各方工作效率。对于一个设计团队来说,统一的文档规范和设计规范,不仅能够减少合作方的学习成本,提升设计师和设计部门影响力。即使产品不同需求不同设计师不同...

    2018-02-09
  • 设计的三个层次,帮你重开情感化设计的大门

    我们正在进入一个信息复杂度远超以往的时代。我们所面对的是一个物质和信息都极大丰富的世界,从产品竞争的角度上来说,越来越激烈的对抗和冲击是必然的。许多产品已经从单纯的“谈配置”过渡到了“谈感情”的阶段,情感化设计已经在不同的设计领域中崭露头角,甚至成为了最核心的组成部分。

    2017-05-15
  • 一次关于梦想、音乐和代码的交互设计体验

    ▲ Arcade Fire··[Way to Go] 这是树林里的一次漫步, 这是一次惊人的互动体验。 一个不安分的全景, 一次手工制作动画, 用360度视频(精选)拍摄, 混合着音乐、梦想、还有…

    2017-08-02
  • UNStudio:健康城市,基于未来的设计

    📌 编辑 |Cassi.W编者按:城市公共环境作为人们共同的“家”,需要群策群力共同营造。城市公共基础设施作为“城市家居”是人们日常生活舒适感、安全感的主要保证。第二届“衲田杯”可持续设计国际竞赛正在火热报名中,你的脑洞是否还够用?“新技术引领下的智慧城市家居”有很多可能性,需要大家去探索、去研究、去发现。本期我们将走近UNStudio事务所的智慧城市实践,为你的方案增添一点灵感!- UNStudio -Ben van Berkel本·...

    2018-03-17
  • 我的设计流程|学会这3招,跟反复改稿Say No!

    设计师要想摆脱反复改稿的噩梦,自身就必须要更加专业以及见多识广,要么你能选择去跟一群专业的人共事,要么是你能用你的专业引导或配合别人按你的思路走。

    2017-05-15
  • 交互说明标注工具合集

    最近很多同学在问交互原型里里的标注怎么做的? 其实很多原型工具可以做到例如Axure、justinmind,但是做起来比较慢且不美观。有没有专业的工具呢?这不我们介绍几款常见的产品。   Specctr 首先是由 Onpixel …

    2016-04-06
  • 初步谈谈iOS11的交互设计

    这是一篇很赶的文章。源于我看到iOS11的介绍后的一些想法,希望能在此跟大家聊聊。从iOS11的更新中我们可以看到苹果的两个方向:1、提升iOS的生产力;2、应用之间更加的无缝衔接和单应用的无声扩张。我们来看第一个…

    2017-08-01
  • 交互设计 | “综合类&艺术类”院校申请侧重点指南

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-21
  • apple watch 中文手册:开始

    重要 本文档是开发过程中使用的API或者技术的初步文档。苹果提供该文档以便于开发者使用苹果产品上使用技术和编程接口。后期该文档中信息会有所变动,所以依据本文档开发的软件应当使用最终的操作系统软件进行测试…

    2015-06-15