导航:首页 > 软件资讯 > app引导页怎么做

app引导页怎么做

发布时间:2023-08-04 20:19:40

① 如何做好App的引导页

一、 目的区分

根据引导页的目的、出发点不同,可以将其分为功能介绍类、使用说明类、推广类、问题解决类,一般引导页不会超过5页。

1.功能介绍类

功能介绍类引导页主要是对产品的主要功能进行展示,让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面、插图的方式来展现。

以易信为例,采用文字与水彩插图结合的方式,文字分为2个层次,大标题与小标题,大标题是对主功能的概括,小文字是对其功能模块的详细描述或进一步补充说明。

2、使用说明类

使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。这类引导页大多采用箭头、圆圈进行标识,以手绘风格为主。以虾米音乐的引导页为例,对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。

3、推广类

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

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

4、问题解决类

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

二、表现方式

1、文字与界面组合

这是最常见的引导页面,简短的文字+该功能的界面,主要是运用在功能介绍类与使用说明类引导页。这种方式能较为直接地传达产品的主要功能,缺点在与过于模式化,显得千篇一律。

2、文字与插图组合

文字与插图的组合方式也是目前常见的形式之一。插图多具象,以使用场景、照片为主,来表现文字内容。

3、动态效果与音乐

除了静态页面外,开始流行具有动态效果的页面。在单个页面采用动画的形式,考虑好各个组件的先后快慢,打破原有的沉寂,让页面动起来。同时结合动效可以考虑页面间切换的方式,将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。在浏览引导页的时候,可以试着加入一些与动效节奏相符合的音乐,会是一种更加新颖的方式。

4、视频展示

在打开后通过播放视频的方式来介绍产品或传递一种理念,这种方式多见于偏生活记录类的应用,如拍照、运动类应用,给人传达青春活力、积极乐观的生活态度。优点:直观,动感,生活化。缺点:应用较大,视频播放会出现卡顿的情况。

三、 总结

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

1、文案言简意赅,突出核心。

根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。如果表达起来困难,可以辅助一小段文字进行解释或补充。因此在最终文案的确定上,要突出重点,多余的文字尽可能地进行删减。如果文案删减后字数还是过多,因考虑对文字进行分层,通过空格或逗号或换行的方式进行视觉优化。

精准贴切的文案也十分重要,将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计,文案与照片的吻合度,直接影响到情感传达的效果。

2、视觉聚焦

在单个引导页中,信息不宜过多,只阐述一个目的,所有元素都围绕这个目的进行展开。视觉聚焦包括两部分,一是文案的处理,要注意层次,主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素,要有一个视觉聚焦点,多个视觉元素的排布采用中心扩散的方式,聚焦点的视觉面积最大,同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律,从上到下,从左到右,从大到小。因此可以根据这个视线流的规律来进行引导页的设计。

如下图为天猫客户端的引导页,分析其视觉流发现,浏览的顺序从插图到主文案,再到辅助文案,缺点在首次看到的是插图而不是文案,插图相对文字理解相对困难,因此未能快速地获取该页的主要信息,可以考虑将文案与插图的位置进行互换,这样会好一些。

3、富于情感化

A、文案具象化

通过具体的元素、场景来表现文案,采用写实、半写实的方式进行表现,有些应用还会配以水彩风格。以天猫为例,天猫是一款购物应用,在设计上通过商场、店铺的实际场景的具体描绘,渲染轻松、欢快的购物过程。

B、页面动效、页面间交互方式的差异化

之前对于表现方式的归类已经讲到了动画及页面切换方式,如果增加了页面动效,利用动效,包括放大、缩小、平移、滚动、弹跳,表现形式更加多样化,会让引导页更有趣,注意力更为集中。

而页面间的切换方式除了传统的卡片左右滑动的方式外,可以结合线条、箭头等进行引导,通常会配合动效。例如网易新闻客户端、印象笔记·食记,它们在引导页的设计上采用了线条作为主线贯穿整个引导页面,小圆点显示当前的浏览进度,滑动的过程中有滚动视差的效果。

4、与产品、公司基调相一致

引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致,这样在用户还未使用具体产品前就给产品定下一个对应的基调。产品的特性决定了引导页的风格,产品是消费类、娱乐类、工具类还是其他,根据不同的产品特性决定了引导页是走轻松娱乐、小清新,还是规整、趣味性的风格,在最终的表现形式上也就会有完全不同的展现,是插图、界面、动画还是其他。如淘宝的娱乐、豆瓣的清新文艺、网络的工具、蝉游记的休闲等等,通过对比就能发现他们在引导页设计上的差异。

这样一方面有利于产品一脉相承,与产品使用体验相一致;另一方面也会进一步强化公司形象。

以来往为例,来往是一款针对个人用户的及时通讯应用,主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能,也是想给用户创造不一样的IM沟通方式。因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品。

又如网易彩票,引导页的主色选用了与网易自身的红色相一致的红色,在公司产品系统性上保持高度的一致性。

总之:想做好引导页的设计,在理解用户对引导页需求的基础上,怀揣热爱产品的情怀,依靠精致的布局,巧妙的构思,贴切的氛围渲染,再加一点点特色。当然光讲是枯燥的,还是需要设计师在具体的设计中不断实践,总结出新的观点与方法,探索出别具一格的引导页设计。

② APP 引导页设计1-引导页的分类

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

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

1.功能介绍类

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

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

2.推广类

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

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

3.搞笑卖萌类

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

4 、问题解决类

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

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

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

③ APP启动页设计详解

下面所写启动页内容,包含启动页、开屏广告、引导页、品牌展示等。

1)按能否跳过启动页分类:

2)按启动页页数分类:

3)按启动页更新频率分类:

4)按照是否跳出启动页分类:

动态图片类型的APP启动页,多见是企业logo或slogan动态加载,例如滴滴出行、优步。

短视频形式的启动页,时间基本上已经超过2-3秒,故很少有APP启动页是采用短视频的。

引导页建议由前端加载显示,不需要在后台上传推送给前端

PS: 展示频率规则参考

用户第一次打开当前版本展示,后续打开不再展示,当检测到有新版本更新时再展示(根据业务需求调整展示频率),引导面一般采用3-4个页面为佳,因每个页面需要手动滑动所以用户每次启动都展示会造成用户的反感,增加进入首页成本。

④ APP 引导页设计3-优秀的引导页

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

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

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

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

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

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

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

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

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

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

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

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

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

⑤ 移动APP前置引导页设计

用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。

◇ 前置型的引导: 在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。

◇ 过程中的引导: 在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导,loading等等待状态中的引导,拆分包袱的逐步引导,巧设默认值的功能引导,tips引导,浮点引导,遮罩聚焦式引导,触发式引导,任务演练式引导等。

带领用户更快速达到使用目标,在用户使用产品过程中及时给予帮助,排除适用障碍。

最核心的设计技巧有4点: 精简与合理使用 & 细致编排 & 有效的注意力 & 构建特色。

◇ 精简与合理使用

  只做必要的引导页内容。没必要的引导内容会增加信息的冗余性,冲淡真正需要用户关注的信息的注意力与精力。适合与否的依据主要是在真实的使用场景中,用户是希望能对这个产品有个大致的了解,还是希望快速启动产品立即使用,在使用的过程中再慢慢学习。

◇ 细致编排

讲建立与用户使用情景匹配的场景,让用户能建立一种熟悉的感受,能让用户对引导的功能点感同身受。

串联的故事一般而言都是多页的形式。一步抛出一个需告知的点,循序渐进的解说。故事可以只围绕一个功能点来叙述,也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。由于每次一个告知点,多会采用聚焦的设计手法,把视觉注意力吸引到每个告知点上。

痛点渲染,建立一个用户在实际生活中会遇到的类似的不便的场景,让用户能感受到共鸣,唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案,可以让用户感觉,戳痛点的手法比较适用于实用的工具性的功能引导。

◇  有效的注意力

1、 注意力是记忆力的基础,记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力,良好的记忆力是建立在良好的注意力基础上的。

当界面中的信息聚焦在某一点上时,用户能快速准确定位到需要阅读的信息内容上,达到消化信息的目的。

聚焦的设计手法有很多种,如通过光影的方式,将亮光的部分打在最需要用户关注的信息上;虚化背景的方式,突出前面的信息内容;放大镜方式,将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法,还可以运用其他的方式来聚焦,只要可以达到效果即可。

2、图片传递信息,人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。在不同的图片中,人们对人脸,美女,笑容,具有动感的照片更容易引起用户的注意。

3、现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力> 对于静态内容的注意力。所以除了静态图片的方式,我们完全可以通过适当增加动态内容来吸引用户的注意力。

4、控制文案字数,人类对于内容的短时记忆的容量有限,一般为7 ± 2项目,一般为7 ± 2,即5 ~ 9个项目,这也就是平常我们所说的记忆广度。)超过9个字符,用户是很难记忆的且容易受到干扰而发生遗忘。

如果精简后依然超出极限字符数,那么可以对文案内容分层次。通过排版的方式,突出需要用户记忆的字符,弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。通过断句的方式,将长的文案变为短的子单元,这样可以扩大短时记忆的容量。断句可以通过打标点,留空格,断行的方式来实现。

◇ 构建特色

背景图片的摄影角度或风格/后期处理/色调;版式编排的设计风格/版式布局/配色方案;文案的行文风格;多屏切换方式也可以考虑

构建特色并不需要对所有内容的元素都进行,即使只在一个内容点上进行特色构建也是可以的,但是需要做到的是这个点上的特色要非常明显,用户容易感知到。

引导页适合阐述产品的概况内容(如具有产品的概念,产品的核心功能,具有竞争力的功能点或用户痛点,以及会影响到初次使用的操作方式的内容),建立起用户对产品的大致认知;而不太适用于阐述过于细节的产品内容,因为此时用户还无法进行相应的信息匹配,细节内容会不容易理解。

阅读全文

与app引导页怎么做相关的资料

热点内容
android开源集合 浏览:860
华为云服务器登录密码和账号 浏览:154
中世纪java程序员 浏览:786
什么开发引擎使用python 浏览:176
sh脚本运行命令 浏览:316
广联达加密锁怎么看到期 浏览:172
cad轨迹命令 浏览:979
同事刷到女程序员自媒体视频 浏览:571
校验算法的缺点是什么 浏览:717
PHP商品分类功能实现 浏览:330
php取字符串中间 浏览:432
程序员经常用工具 浏览:837
降服主力指标源码主图 浏览:502
python实用库 浏览:693
电脑默认7个文件夹 浏览:13
新唐单片机安装c51后编译错误 浏览:532
红包源码引流神器 浏览:235
学生初中毕业撕书解压 浏览:749
命令方块刷铜点教学 浏览:692
php邮件订阅系统 浏览:999