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

相关推荐

  • iOS和Android规范解析——搜索

    各位亲爱的读者小伙伴们,前面一系列文章为大家介绍了各种弹出物的用法,从今天起,我们开始介绍其它的非弹出类控件。此篇要说的是搜索。

    2017-04-29
  • 如何从细节上真正节省用户的时间,从而带给用户更好的体验

    来源:优设网 作者:阿布编译 我们的用户是很珍惜时间的,我们也不应该随意浪费。在每个项目中都问自己两个问题:“我们是在消耗用户的时间来节省自己的时间吗?”“在这里要如何节省用户的时间?”在西方社会中,什么是…

    2014-09-21
  • SKETCH | 周鸿祎自述:我的价值观

    在这本书的开头,我想讲讲影响我价值观的电影和书。说到价值观,有的人可能要笑了:都什么年代了,还讲价值观?虽然这本书的书名是《我的互联网方法论》,但这并不是按图索骥的说明书,你如果认为读完本书,就会做产品了,就能向互联网转型了,对不起,真的是做不到。赵括把兵书读了千百遍,在纸上推演了千百遍,到了实际的战场上,还是一个输。因为无论是做互联网产品,还是传统企业向互联网转型,能不能做得成,是看你能不能创新。而能不能创新,除了你的技能、阅历、领导...

    2018-04-26
  • 用户体验的目标是做到“自然”

    不想错过精彩的荔枝话题,点击文章左上角关注“荔枝3十1”。每晚10:00点荔枝陪你说一事晚安文/励志妹图/荔枝工作室经作者授权发布用户体验的目标是做到“自然”导语“自然的体验是不需要用户去思考的。”1需要用文字来解释的交互不是好交互(1)我观察3岁的小孩用iphone很容易上手。比如,iphone的开锁,小孩甚至不用学就会用。因为触摸是人的天性,同时iphone通过箭头图标,向右滑动的文字条(小孩看不懂文字),来暗示手指触摸向右滑动来解...

    2018-04-28
  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • Axure RP 8.0安装图解

    Axure RP 8.0下载链接:链接:https://pan.baidu.com/s/1jJFQwLK 密码:3d1yAxure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illu...

    2018-03-24
  • 盘点 Smartisan OS 历代亮点, 罗永浩凭借用户体验翻身?

    #交互学堂#今天为大家盘点一下锤粉骄傲的资本,那些#Smartisan OS# 中具有启发性的系统层优化,从远到近从大到小,从 Smartisan OS v1.3 到 最新的 Smartisan OS 3.1,这算是一份锤子给智能手机操作系统的独特贡献…

    2016-11-01
  • 美国|四大艺术院校交互设计解析,不要等毕业后才发现读了个假的专业

    今天的主题是交互设计,有同学希望了解美国开设此类专业的院校,并获取各个院校的教学内容侧重方面的信息。于是,康石石选择了美国四所具有代表性的院校为同学们进行介绍:艺术中心设计学院(ACCD)卡内基梅隆大学(CMU)纽约视觉艺术学院(SVA)普瑞特设计学院(Pratt)一、艺术中心设计学院(Art Center College of Design)交互设计:本科ACCD交互设计专业只开设本科阶段课程,学习时长8个学期。尖端的课程设置,旨在培...

    2018-05-07
  • 案例分析:聊聊扁平化设计的六点优势

    著名的艺术家 Edgar Degas 曾经说过,艺术并不是你所看到的东西,而是你让别人看到所看到的东西。平面设计能够通过调整形状、阴影、字体的笔触、字母间距来调整观看者的情绪和感受,在这一点上,它和艺术是共通的。作为目前设计的大趋势,扁平化设计,无疑也具备着同样的特征。

    2017-05-10
  • 12个很不错的UI交互设计动效灵感

    转自:设计达人(ID:shejidaren888)链接:http://www.shejidaren.com/ui-interactions-01.htmlUI动效设计是每位设计师们的一个进阶技能,我们做动效时,不仅仅要有用,而且还有好看哦,今天达人分享来自muzili整…

    2017-08-02