app引导页图片素材-联想上门无忧app引导页设计

引导页,虽是每个app必备,在实际的使用中,其设计的效果并不容易达不到预期,用户常常不会仔细浏览这些引导的信息,对于引导的内容信息的接收程度会打折扣,很难全部吸收;还有不少情况下用户会跳过引导,忽略引导想提供的帮助信息。那如何使引导页引起用户的兴趣,让他们花费一点精力去吸收引导的内容信息呢?什么是优秀的引导页呢?

失败的理由有很多,成功的理由就那么几个,在笔者看来,成功的引导页归纳起来,具备以下特点:有趣,格逼,情怀,态度。

有趣:就是令人眼前一亮,展现与用户息息相关的图文,把用户吸引其中,加入点小游戏,让用户觉得有趣好玩。

情怀:情怀是目前的流行语,人文关怀的代名词,具备人文关怀的引导页,可以让用户产生共鸣,烦躁的心情变得恬静,舒适,用户自然会往下翻。

格逼、态度:有格逼有态度的引导页,表现出APP的独特气质,与众不同。

OK,说了这么多,下面展示下案例,欣赏下优秀的引导页,看看他们是怎样表现有趣、情怀、格逼和态度的。

1、还记得微信6.1的引导页么?不得不说微信6.1的引导页文案非常精彩,前两页像一个小游戏,统计你送出和收获的点赞数,吸引你往下翻,后两页点赞太容易,当面夸太难,画龙点睛,充满人文关怀,令人眼前一亮。

2、在微信在推出4.0版本的时候,新增加了类似Path和Instagram一样的相册功能,并且可以把相册分享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中,它非常成功的讲诉了一个关于相册功能的故事,并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以怎么样,让用户能明确感觉到与自己的关系。

3、Vida的引导页,对于一个新概念的新产品,用户需要对这些新的概念或内容有所理解才能更好的使用产品。

4、Between 令人眼前一亮的引导页面,讲建立与用户使用情景匹配的场景,让用户能建立一种熟悉的感受,能让用户对引导的功能点感同身受。

5、知乎的引导页,每页抛出一个需告知的点,让用户感觉到产品与自己是有关系的,现在所说的内容是与我相关的,我需要花费精力来关注一下。

6、CSDN引导页,快速简洁,每页8个字,干扰少,清晰明了。

#本文同步发布到 ,pm263为你提供更多更全的产品经理干货,欢迎大家访问。

上门无忧app是联想为上门服务的工程师们提供记录工单状态、查询备件信息、知识库学习等的一款应用。主要分为“工单、备件、学习、我的”四个模块,工单主要为工程师提供每一单服务的详细记录,工程师需要确认服务的每一个过程,从而确保服务质量;备件主要是服务中的更换备件信息;学习即知识库,工程师可在其中搜索到各类相关问题;我的――工程的个人信息页面。

于工程师:可以帮助工程师记忆,为工程师提效减负。

于公司:可以更好的管理每一个工程师,直接为工程师推送通知、对服务交付的细节进行考核。收集用户信息。

于用户:可以反馈回来的数据,提前知晓哪个工程师将于何时到达,为他进行服务。

现在出发/确认到达现场/确认离开现场/确认服务完成

客户类型、问卷信息、SLA

搜索关键词、文档分类、相关技术通报

从上图可以看出,整个引导页的设计以突出app的主要功能为目的,以粉灰色为基调,而风格则偏向扁平简约。这主要是考虑到app的设计风格也是简约为主,以红灰为主色调,多表单信息等。

引导页中所使用的颜色,大部分都有app中直接提取,再加上一些同色调的辅助色。

细心的人可能会发现,最后一张主体部分的红不如其他两张的颜色重。这是出于面与线的区别考虑,本身面看起来就比线要重,所有选择适当将面的颜色调亮,来保持平衡。

在引导页选择方案的时候,大家都更偏向于简约清新的风格,起初想做的温馨一点,着重体现工程师们的贴心服务,后来考虑到app的使用者是工程师们,所以更换为以突出功能为主。

最开始,大家都很喜欢自如这种小清新的手绘风格,色彩温暖,绘画精细,风格突出(个人觉得相比较图来说,字排的不太好看)。就个人而言,我也是想尝试一下这样的风格的。

看过整套,就会发现,其实这套引导页它所有的图画与文字的关联性并没有那么大,换句话说,也就是把图形放到其他的话术下,也是没有问题的。

而这次引导页的设计中,应该可以看到,每个页面的话术与图形的关联性极强。当然,我的这套引导页的设计也是借鉴了其他设计的,如下图:

上图是我在作图前的参考页面,都说天下设计一大抄,在开始一个新项目时,大部分的设计师都会选择到花瓣、千图、UI中国、站酷等各类设计网站上找素材,或者寻找所谓的“灵感”,这样的学习形式其实也挺好的,多去看,发现美的东西并去研究和学习,这也是提升自己的一种方法,但关键是怎么样把别人的东西变成自己的东西。

显然,我还做的不够。需要更多的思考,这也算是一次尝试吧,尝试分析作品,去看自己的不足。

可以看到,我几乎是整个借鉴了这个引导页的风格、形式等,但是具体的内容有很多区别,也做了一些改进。

例如,上图整套的设计都是以山和云为背景,但实际上这跟它所表现的内容,是没有任何关系的,所以只是单纯的背景。

而我在做的过程中,力求能够将背景和主题结合起来,起初的两张关联性都还不够,做到最后一张的时候,基本上是有密切的相关性了。

例如,力求风格、元素、颜色上的更加统一,希望能关注更多的细节等等。

曾经有一个设计师问我(其实是一次面试),你临摹这个icon,你知道它哪里做的好么?你知道它所在意的细节是什么吗?问的我一脸懵圈,说实话,在临摹的时候我确实没有去考虑它到底为什么好看,于是我只能老实的回答说不知道,并向他请教。

面试官很好,是一个很厉害的设计,于是开始跟我分析那套icon好在什么地方,注意的细节是哪里。于是我知道了,一个高UI跟一个入门级UI的区别在哪里,希望终有一日,我也可以成长到想要的样子。

其实我一般不喜欢分享自己的设计,因为觉得做得还不够好,献丑咯!

因工作原因,笔者体验过很多APP,其UI是笔者比较关注的一部分,毕竟UI是第一印象嘛,大部分APP,引导页作为其的第一个入口,新装时启动都会先显示引导页,介绍其功能特性。APP体验多了,逐渐有点心得,这里笔者对市面上APP的引导页做下归类,细数归纳下对引导页的所见所想。

根据引导页的目的、出发点不同,可以将其分为功能介绍类、推广类、问题解决类、卖萌搞笑类,一般引导页不会超过5页,下面看看各类精彩纷呈的引导页。

1.功能介绍类

这样的引导页最直白的就是截图展示功能特点,或者用形象化的物体(如下图QQ改版升级,其引导页就用代表性的企鹅来表现APP的主要功能。)

用户需要一针见血,在这样一个网络化的时代,人们停留的时间越来越短,浏览你的APP界面时间不会超过3秒,在这样宝贵的3秒里,你需要用简要明白、通俗易懂的文案和界面呈现,突出重点即可,展示我们的功能展示页面。

2.推广类

推广类引导页除了有一些产品功能的介绍外,更多是想传达产品的态度,让用户更明白这个产品的情怀,并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人,用户只会不耐烦地想快速划过。而制作精良、有趣的引导页,用户会驻足观赏。

以淘宝旅行为例,淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用,在你出行前就帮你计划好所有的行程安排,只要一个行李箱,说走就走,与产品的理念相契合。而另外一款应用,选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。

3.搞笑卖萌类

不知道怎么概括,就是说一个故事?通常会配合一些动画效果来辅助展示。

4 、问题解决类

问题解决类通过描述在实际生活中会遇到的问题,直击痛点,通过最后的解决方案让用户产生情感上的联系,让用户对产品产生好感,增加产品粘度。例如QQ浏览器的引导页设计,通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题(搜不到小说、看小说花钱、小说更新需要等)。

以上已经针对引导页的目的差异以及表现方式进行了相关归类,在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人,信息传达的效果更好。

#本文同步发布到 ,pm263为你提供更多更全的产品经理干货,欢迎大家访问。