APP 引导页设计1-引导页的分类
因工作原因,笔者体验过很多APP,其UI是笔者比较关注的一部分,毕竟UI是第一印象嘛,大部分APP,引导页作为其的第一个入口,新装时启动都会先显示引导页,介绍其功能特性。APP体验多了,逐渐有点心得,这里笔者对市面上APP的引导页做下归类,细数归纳下对引导页的所见所想。
根据引导页的目的、出发点不同,可以将其分为功能介绍类、推广类、问题解决类、卖萌搞笑类,一般引导页不会超过5页,下面看看各类精彩纷呈的引导页。
1.功能介绍类
这样的引导页最直白的就是截图展示功能特点,或者用形象化的物体(如下图QQ改版升级,其引导页就用代表性的企鹅来表现APP的主要功能。)
用户需要一针见血,在这样一个网络化的时代,人们停留的时间越来越短,浏览你的APP界面时间不会超过3秒,在这样宝贵的3秒里,你需要用简要明白、通俗易懂的文案和界面呈现,突出重点即可,展示我们的功能展示页面。
2.推广类
推广类引导页除了有一些产品功能的介绍外,更多是想传达产品的态度,让用户更明白这个产品的情怀,并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人,用户只会不耐烦地想快速划过。而制作精良、有趣的引导页,用户会驻足观赏。
以淘宝旅行为例,淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用,在你出行前就帮你计划好所有的行程安排,只要一个行李箱,说走就走,与产品的理念相契合。而另外一款应用,选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
3.搞笑卖萌类
不知道怎么概括,就是说一个故事?通常会配合一些动画效果来辅助展示。
4 、问题解决类
问题解决类通过描述在实际生活中会遇到的问题,直击痛点,通过最后的解决方案让用户产生情感上的联系,让用户对产品产生好感,增加产品粘度。例如QQ浏览器的引导页设计,通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题(搜不到小说、看小说花钱、小说更新需要等)。
以上已经针对引导页的目的差异以及表现方式进行了相关归类,在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人,信息传达的效果更好。
#本文同步发布到 ,pm263为你提供更多更全的产品经理干货,欢迎大家访问。
联想上门无忧app引导页设计
上门无忧app是联想为上门服务的工程师们提供记录工单状态、查询备件信息、知识库学习等的一款应用。主要分为“工单、备件、学习、我的”四个模块,工单主要为工程师提供每一单服务的详细记录,工程师需要确认服务的每一个过程,从而确保服务质量;备件主要是服务中的更换备件信息;学习即知识库,工程师可在其中搜索到各类相关问题;我的――工程的个人信息页面。
于工程师:可以帮助工程师记忆,为工程师提效减负。
于公司:可以更好的管理每一个工程师,直接为工程师推送通知、对服务交付的细节进行考核。收集用户信息。
于用户:可以反馈回来的数据,提前知晓哪个工程师将于何时到达,为他进行服务。
现在出发/确认到达现场/确认离开现场/确认服务完成
客户类型、问卷信息、SLA
搜索关键词、文档分类、相关技术通报
从上图可以看出,整个引导页的设计以突出app的主要功能为目的,以粉灰色为基调,而风格则偏向扁平简约。这主要是考虑到app的设计风格也是简约为主,以红灰为主色调,多表单信息等。
引导页中所使用的颜色,大部分都有app中直接提取,再加上一些同色调的辅助色。
细心的人可能会发现,最后一张主体部分的红不如其他两张的颜色重。这是出于面与线的区别考虑,本身面看起来就比线要重,所有选择适当将面的颜色调亮,来保持平衡。
在引导页选择方案的时候,大家都更偏向于简约清新的风格,起初想做的温馨一点,着重体现工程师们的贴心服务,后来考虑到app的使用者是工程师们,所以更换为以突出功能为主。
最开始,大家都很喜欢自如这种小清新的手绘风格,色彩温暖,绘画精细,风格突出(个人觉得相比较图来说,字排的不太好看)。就个人而言,我也是想尝试一下这样的风格的。
看过整套,就会发现,其实这套引导页它所有的图画与文字的关联性并没有那么大,换句话说,也就是把图形放到其他的话术下,也是没有问题的。
而这次引导页的设计中,应该可以看到,每个页面的话术与图形的关联性极强。当然,我的这套引导页的设计也是借鉴了其他设计的,如下图:
上图是我在作图前的参考页面,都说天下设计一大抄,在开始一个新项目时,大部分的设计师都会选择到花瓣、千图、UI中国、站酷等各类设计网站上找素材,或者寻找所谓的“灵感”,这样的学习形式其实也挺好的,多去看,发现美的东西并去研究和学习,这也是提升自己的一种方法,但关键是怎么样把别人的东西变成自己的东西。
显然,我还做的不够。需要更多的思考,这也算是一次尝试吧,尝试分析作品,去看自己的不足。
可以看到,我几乎是整个借鉴了这个引导页的风格、形式等,但是具体的内容有很多区别,也做了一些改进。
例如,上图整套的设计都是以山和云为背景,但实际上这跟它所表现的内容,是没有任何关系的,所以只是单纯的背景。
而我在做的过程中,力求能够将背景和主题结合起来,起初的两张关联性都还不够,做到最后一张的时候,基本上是有密切的相关性了。
例如,力求风格、元素、颜色上的更加统一,希望能关注更多的细节等等。
曾经有一个设计师问我(其实是一次面试),你临摹这个icon,你知道它哪里做的好么?你知道它所在意的细节是什么吗?问的我一脸懵圈,说实话,在临摹的时候我确实没有去考虑它到底为什么好看,于是我只能老实的回答说不知道,并向他请教。
面试官很好,是一个很厉害的设计,于是开始跟我分析那套icon好在什么地方,注意的细节是哪里。于是我知道了,一个高UI跟一个入门级UI的区别在哪里,希望终有一日,我也可以成长到想要的样子。
其实我一般不喜欢分享自己的设计,因为觉得做得还不够好,献丑咯!
如何正确设计App引导页
目的区分
根据引导页的目的、出发点不同,可以将其分为功能介绍类、使用说明类、推广类、问题解决类,一般引导页不会超过5页。
功能介绍类
功能介绍类引导页主要是对产品的主要功能进行展示,让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面、插图的方式来展现。
以易信为例,采用文字与水彩插图结合的方式,文字分为2个层次,大标题与小标题,大标题是对主功能的概括,小文字是对其功能模块的详细描述或进一步补充说明。
2
使用说明类
使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。这类引导页大多采用箭头、圆圈进行标识,以手绘风格为主。以虾米音乐的引导页为例,对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。
3
推广类
推广类引导页除了有一些产品功能的介绍外,更多是想传达产品的态度,让用户更明白这个产品的情怀,并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人,用户只会不耐烦地想快速划过。而制作精良、有趣的引导页,用户会驻足观赏。
以淘宝旅行为例,淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用,在你出行前就帮你计划好所有的行程安排,只要一个行李箱,说走就走,与产品的理念相契合。而另外一款应用,选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
4
问题解决类
问题解决类通过描述在实际生活中会遇到的问题,直击痛点,通过最后的解决方案让用户产生情感上的联系,让用户对产品产生好感,增加产品粘度。例如QQ浏览器的引导页设计,通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题(搜不到小说、看小说花钱、小说更新需要等)。
表现方式
文字与界面组合
这是最常见的引导页面,简短的文字+该功能的界面,主要是运用在功能介绍类与使用说明类引导页。这种方式能较为直接地传达产品的主要功能,缺点在与过于模式化,显得千篇一律。
文字与插图组合
文字与插图的组合方式也是目前常见的形式之一。插图多具象,以使用场景、照片为主,来表现文字内容。
动态效果与音乐
除了静态页面外,开始流行具有动态效果的页面。在单个页面采用动画的形式,考虑好各个组件的先后快慢,打破原有的沉寂,让页面动起来。同时结合动效可以考虑页面间切换的方式,将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。在浏览引导页的时候,可以试着加入一些与动效节奏相符合的音乐,会是一种更加新颖的方式。
视频展示
在打开后通过播放视频的方式来介绍产品或传递一种理念,这种方式多见于偏生活记录类的应用,如拍照、运动类应用,给人传达青春活力、积极乐观的生活态度。优点:直观,动感,生活化。缺点:应用较大,视频播放会出现卡顿的情况。
总结
以上已经针对引导页的目的差异以及表现方式进行了相关归类,在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人,信息传达的效果更好。
文案言简意赅,突出核心
根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。如果表达起来困难,可以辅助一小段文字进行解释或补充。因此在最终文案的确定上,要突出重点,多余的文字尽可能地进行删减。如果文案删减后字数还是过多,因考虑对文字进行分层,通过空格或逗号或换行的方式进行视觉优化。
精准贴切的文案也十分重要,将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计,文案与照片的吻合度,直接影响到情感传达的效果。
视觉聚焦
在单个引导页中,信息不宜过多,只阐述一个目的,所有元素都围绕这个目的进行展开。
视觉聚焦包括两部分,一是文案的处理,要注意层次,主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素,要有一个视觉聚焦点,多个视觉元素的排布采用中心扩散的方式,聚焦点的视觉面积最大,同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律,从上到下,从左到右,从大到小。因此可以根据这个视线流的规律来进行引导页的设计。
如下图为天猫客户端的引导页,分析其视觉流发现,浏览的顺序从插图到主文案,再到辅助文案,缺点在首次看到的是插图而不是文案,插图相对文字理解相对困难,因此未能快速地获取该页的主要信息,可以考虑将文案与插图的位置进行互换,这样会好一些。
富于情感化
文案具象化
通过具体的元素、场景来表现文案,采用写实、半写实的方式进行表现,有些应用还会配以水彩风格。以天猫为例,天猫是一款购物应用,在设计上通过商场、店铺的实际场景的具体描绘,渲染轻松、欢快的购物过程。
页面动效、页面间交互方式的差异化
之前对于表现方式的归类已经讲到了动画及页面切换方式,如果增加了页面动效,利用动效,包括放大、缩小、平移、滚动、弹跳,表现形式更加多样化,会让引导页更有趣,注意力更为集中。
而页面间的切换方式除了传统的卡片左右滑动的方式外,可以结合线条、箭头等进行引导,通常会配合动效。例如网易新闻客户端、印象笔记・食记,它们在引导页的设计上采用了线条作为主线贯穿整个引导页面,小圆点显示当前的浏览进度,滑动的过程中有滚动视差的效果。
与产品、公司基调相一致
引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致,这样在用户还未使用具体产品前就给产品定下一个对应的基调。产品的特性决定了引导页的风格,产品是消费类、娱乐类、工具类还是其他,根据不同的产品特性决定了引导页是走轻松娱乐、小清新,还是规整、趣味性的风格,在最终的表现形式上也就会有完全不同的展现,是插图、界面、动画还是其他。如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等,通过对比就能发现他们在引导页设计上的差异。
这样一方面有利于产品一脉相承,与产品使用体验相一致;另一方面也会进一步强化公司形象。
以来往为例,来往是一款针对个人用户的及时通讯应用,主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能,也是想给用户创造不一样的IM沟通方式。因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品。
又如网易彩票,引导页的主色选用了与网易自身的红色相一致的红色,在公司产品系统性上保持高度的一致性。
总结
想做好引导页的设计,在理解用户对引导页需求的基础上,怀揣热爱产品的情怀,依靠精致的布局,巧妙的构思,贴切的氛围渲染,再加一点点特色。当然光讲是枯燥的,还是需要设计师在具体的设计中不断实践,总结出新的观点与方法,探索出别具一格的引导页设计。
