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

相关推荐

  • About Axure

    About Axure 8.0Axure:产品人必备必会的软件,快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。1.Axures的安装官方下载地址:https://www.axure.com/download汉化包地址:http://www.iaxure.com/menupage/download.html国内下载地址:https://pan....

    2018-05-08
  • 用户体验升级|丝滑般享受的执剑人单点登录功能来了!

    各位票据市场上的辛勤工作的票友们,大家在这春回大地的时节是否为了美好的明天在努力耕作呢?“执剑人”为了使用户更方便、更快捷地在互联网平台上进行票据流转交易,已经隆重上线账户单点登录功能,交易时平台切换跳转超便捷!只需要登录一次即可完成交易1过去:用户在执剑人合作平台进行票据流转交易时,需要在平台账号、执剑人账号不停的切换,操作比较不便。未接单点登录的平台时这样的2现在:一家企业账号在执剑人和执剑人合作平台上,登录的时候只要一次登录,退出...

    2018-04-15
  • 华为朱平:用大服务把用户体验引向极致

    4月12日,华为新旗舰手机P20系列发布,同时还发布了保时捷设计Mate RS,以及多款产品。2018年,是手机市场艰难的一年,4G换机和消费升级带来的市场红利正在逐渐失去,5G尚未到来,市场进入一个相对低潮期。这样一个情况下,众多手机厂商面临了较大的市场压力。在这样困难的市场环境下,华为怎么巩固自己的市场地位,甚至扩大市场?华为一惯的态度就是用产品说话,用大大领先对手的产品来证明自己。其实我关心的是,华为P20
    Pro这样的产品,已...

    2018-04-21
  • UI设计中下拉刷新有什么讲究?

    最早的下拉刷新 设计源自于Tweetie 这款应用的设计,设计师Loren Brichter 是这种令人欲罢不能的交互的缔造者。现在,下拉刷新 的交互几乎无处不在,但即便如此也让人无法轻易忽视它带来的快感。从Twitter 到 Gmail,从QQ到新浪微博,它几乎存在于你触手可及的每一个应用当中。

    2017-05-16
  • web端和移动端产品设计的区别

    移动设备发展非常迅速,移动端产品越来越多。今天小编来扒一扒web端与移动端产品设计有哪些不同。 场景不同,需求不同 首先,两者对应的需求场景不同,这会相应地导致功能点的优先级变动,进而影响到界面控件和信息…

    交互设计 2015-06-15
  • 从交互层面探讨:不一样的 App 该如何设计?

    针对APP同质化现象,本文作者从从交互层面探索了不一样的 App 该如何设计,且谈及自己的解决方案。值得一读。     “首先占据人们大多数时间的同类型APP内容高度同质化,而风格取决于内容,在平庸的内容下只能诞生风格平庸的APP设计。其次,对于以商业目标为根本的APP应用设计开发,设计风格的投入产出比并不高(游戏依然除外),设计模式的流行以及交互方式的单一使得保守的设计投入产出更高。最后在现今的消费领域,功能主义盛行,界面设计中理性居于主导地位,设计风格显示不是理性思考的首要考量目标。”

    2017-05-04
  • “来电”性格测试的交互设计历程

    来电,是一个主打免费通话的纯语音应用。从14年7月份低调发布Lightalk1.1后,历经3个版本,终于在1.4版更名为来电并投入推广了。除了运用一些传统的渠道推广,来电也尝试在应用内嵌一个提供分享的入口,鼓励用户做…

    交互设计 2015-04-10
  • iOS系统设计细节|人性化带来更好的产品设计

    从今年3月份使用苹果以来,偶尔会在某个不经意的瞬间,感受到ios系统设计的人性化之处,深刻感受到了简约不简单的魅力。

    2017-05-22
  • 设计思考模式:“删除、组织、隐藏、附加”

    Giles Colborne简约四策略是“删除、组织、隐藏、转移”,由于“转移”在实际设计过程中比较少运用到,所以我根据elya的知乎回答把四策略定义为“删除、组织、隐藏、附加”,elya没有解释她的理解,所以我根据自己理解重新定义。“删除每个页面上一半的文字,然后把剩下的文字再去掉一半。”(《Don’t make me think》中Krug可用性第三定律)“点击多少次都没关系,只要每次点击都是无须思考,明确无误的选择。”(《Don’t make me think》中Krug可用性第二定律》)

    2017-06-04
  • 一套交互设计工具推荐

    刚开始接触交互设计往往会面临自己的想法找不到合适的方法输出。所以完成基本工作同时也在积极寻找、学习适合自己又和工作环境相匹配的工具。与团队成员配合的时候没有人会在意你是用什么工具,成员们只想看到设计师产出的输出物。这个时候针对不同任务类型和团队大小找到合适的工具可以让设计师迅速输出团队想要的结果输出物,事半功倍。

    2017-05-28