‘壹’ APP 引导页设计1-引导页的分类
因工作原因，笔者体验过很多APP，其UI是笔者比较关注的一部分，毕竟UI是第一印象嘛，大部分APP，引导页作为其的第一个入口，新装时启动都会先显示引导页，介绍其功能特性。APP体验多了，逐渐有点心得，这里笔者对市面上APP的引导页做下归类，细数归纳下对引导页的所见所想。
根据引导页的目的、出发点不同，可以将其分为功能介绍类、推广类、问题解决类、卖萌搞笑类，一般引导页不会超过5页，下面看看各类精彩纷呈的引导页。
1.功能介绍类
这样的引导页最直白的就是截图展示功能特点，或者用形象化的物体（如下图QQ改版升级，其引导页就用代表性的企鹅来表现APP的主要功能。）
用户需要一针见血，在这样一个网络化的时代，人们停留的时间越来越短，浏览你的APP界面时间不会超过3秒，在这样宝贵的3秒里，你需要用简要明白、通俗易懂的文案和界面呈现，突出重点即可，展示我们的功能展示页面。
2.推广类
推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。而制作精良、有趣的引导页，用户会驻足观赏。
以淘宝旅行为例，淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用，在你出行前就帮你计划好所有的行程安排，只要一个行李箱，说走就走，与产品的理念相契合。而另外一款应用，选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
3.搞笑卖萌类
不知道怎么概括，就是说一个故事？通常会配合一些动画效果来辅助展示。
4 、问题解决类
问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。例如QQ浏览器的引导页设计，通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题（搜不到小说、看小说花钱、小说更新需要等）。
以上已经针对引导页的目的差异以及表现方式进行了相关归类，在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人，信息传达的效果更好。
#本文同步发布到 pm263.com ，pm263为你提供更多更全的产品经理干货，欢迎大家访问。
‘贰’ 移动APP界面设计的工作流程是什么
现在做设计，如果说你是平面设计师，不足为奇，如果说你是网页设计师，哎哟，不错哦，如果是你是设计APP界面设计师的，那也许听着就有点不让人明白了，后来看看他们手机上安装的各种应用，才明白，移动APP界面设计师是做什么的。
本文不讲述移动界面设计师的介绍，总体来说是针对移动端APP应用做的界面设计，但是很多人不清楚移动APP界面设计师的工作流程是怎样的，在此，北大青鸟ui培训老师带你一步一步了解。
第一步：交互流程设计
APP的交互流程设计，简单来说就是构造框架，像造房子一样，有了清楚的平面图纸才可以增砖添瓦，设计交互流程时应该对应用的功能需求有清晰的把握。
第二步：风格定位
比如说图片分享类应用图片是最重要的视觉元素，应用的设计风格应当符合视觉流程，table需要引导用户操作。
第三步：功能icon设计
功能图标即在你的应用中，充当表达某一操作或功能示意的图形，功能图标设计应极可能形象，简洁，以准确表达其代表的功能。
第四步：界面视觉效果整体优化
选用图片的时候，应该尽量按照应用的风格选取，比如这APP主打是图片分享，那么可以选取视觉靓丽，有冲击力的图片添加分享。
第五步：应用icon设计
对这款APP进行最终的icon设计，能够最优化的，最靓丽的代表这款APP的特色，品牌等形象。
第六步：完稿交接软件工程师
我们做移动界面设计，做的是各个页面的形象，具体功能实现是需要与软件工程师沟通的，在能够完成软件开发的情况下，进行一步步的界面设计，最大化增加用户体验，吸引用户，最终完美的完成这份设计。
以上内容是作者对我们学习UID培训课程的同学在以后的移动界面工作当中的一个工作流程的简单介绍，以后学员如果在UID培训课程当中学习到第三阶段的界面设计课程的话，一定要好好研究，老师对于界面设计的操作流程一定会更加的细致讲解。
‘叁’ 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引导页设计注意事项有哪些
好的引导在多个方面都是具有一致性的。视觉风格的塑造、表达的产品理念和产品特点都应该和它所属的产品、定位与品牌相符合，这样用户在使用产品的时候就会对产品有一个大致的基调认识和感受。产品的定位会决定引导的方向和路线，以及最终引导的表现形式上，所以引导是最能体现产品基调和品牌性的地方。引导的一致性除了保证了产品与使用体验相互一致，同时也能进一步强化用户对产品的认知以及延续品牌印象。如下例：
界面来自Telegram
从一致性来看，Telegram的前置引导是我觉得比较有代表性的，这组引导页面里，每一页元素看似简单但是很有细节，图示风格统一，主标题都是一个词，表达很干脆简练。这组引导页整体与Telegram的产品所透露的特性一致，高效，干净，这种传达出来的气质贯通整个产品。特别是每个图示都做了小动画，让用户更加直观得感受到它所传达的信息，这种细节更容易触动到用户，获得用户对产品品质的认可。
产生共鸣
前面有提到一个应用里好的引导不仅能使他们对一个应用有好感，也可能更容易得留住他们，而这里的关键就是能够让用户产生共鸣。通过对产品自身的深刻了解并洞察目标用户心理，结合产品特性与用户的痛点，进而以视觉和文案渲染出氛围从而传达出相关的理念，勾起用户情感打动用户。让用户产生共鸣，有利于用户对产品在情感上的认同，这种认同感会增进用户对产品的进一步使用和探索。
‘伍’ 如何做好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前置引导页设计
用户初次使用该移动产品时，给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。
◇ 前置型的引导： 在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。
◇ 过程中的引导： 在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导，loading等等待状态中的引导，拆分包袱的逐步引导，巧设默认值的功能引导，tips引导，浮点引导，遮罩聚焦式引导，触发式引导，任务演练式引导等。
带领用户更快速达到使用目标，在用户使用产品过程中及时给予帮助，排除适用障碍。
最核心的设计技巧有4点： 精简与合理使用 & 细致编排 & 有效的注意力 & 构建特色。
◇ 精简与合理使用
只做必要的引导页内容。没必要的引导内容会增加信息的冗余性，冲淡真正需要用户关注的信息的注意力与精力。适合与否的依据主要是在真实的使用场景中，用户是希望能对这个产品有个大致的了解，还是希望快速启动产品立即使用，在使用的过程中再慢慢学习。
◇ 细致编排
讲建立与用户使用情景匹配的场景，让用户能建立一种熟悉的感受，能让用户对引导的功能点感同身受。
串联的故事一般而言都是多页的形式。一步抛出一个需告知的点，循序渐进的解说。故事可以只围绕一个功能点来叙述，也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。由于每次一个告知点，多会采用聚焦的设计手法，把视觉注意力吸引到每个告知点上。
痛点渲染，建立一个用户在实际生活中会遇到的类似的不便的场景，让用户能感受到共鸣，唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案，可以让用户感觉，戳痛点的手法比较适用于实用的工具性的功能引导。
◇ 有效的注意力
1、 注意力是记忆力的基础，记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力，良好的记忆力是建立在良好的注意力基础上的。
当界面中的信息聚焦在某一点上时，用户能快速准确定位到需要阅读的信息内容上，达到消化信息的目的。
聚焦的设计手法有很多种，如通过光影的方式，将亮光的部分打在最需要用户关注的信息上;虚化背景的方式，突出前面的信息内容;放大镜方式，将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法，还可以运用其他的方式来聚焦，只要可以达到效果即可。
2、图片传递信息，人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。在不同的图片中，人们对人脸，美女，笑容，具有动感的照片更容易引起用户的注意。
3、现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力> 对于静态内容的注意力。所以除了静态图片的方式，我们完全可以通过适当增加动态内容来吸引用户的注意力。
4、控制文案字数，人类对于内容的短时记忆的容量有限，一般为7 ± 2项目，一般为7 ± 2，即5 ~ 9个项目，这也就是平常我们所说的记忆广度。)超过9个字符，用户是很难记忆的且容易受到干扰而发生遗忘。
如果精简后依然超出极限字符数，那么可以对文案内容分层次。通过排版的方式，突出需要用户记忆的字符，弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。通过断句的方式，将长的文案变为短的子单元，这样可以扩大短时记忆的容量。断句可以通过打标点，留空格，断行的方式来实现。
◇ 构建特色
背景图片的摄影角度或风格/后期处理/色调;版式编排的设计风格/版式布局/配色方案;文案的行文风格;多屏切换方式也可以考虑
构建特色并不需要对所有内容的元素都进行，即使只在一个内容点上进行特色构建也是可以的，但是需要做到的是这个点上的特色要非常明显，用户容易感知到。
引导页适合阐述产品的概况内容(如具有产品的概念，产品的核心功能，具有竞争力的功能点或用户痛点，以及会影响到初次使用的操作方式的内容)，建立起用户对产品的大致认知;而不太适用于阐述过于细节的产品内容，因为此时用户还无法进行相应的信息匹配，细节内容会不容易理解。
‘柒’ uniapp开发App引导页
App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片，用于告知用户产品的功能及特点。好的引导页会促使用户对产品增加更多的兴趣，当然这是UI设计的能力体现了，尽管很多人都会快速的滑过。对于开发人员怎么去添加这几张图片只有在用户第一次打开app时展示呢。
以uniapp开发的项目为例：在onLaunch函数中，检查flag是否为false，如果为false,则跳转到引导页面，在引导页中可设置跳转到首页。注意，最好用reLaunch，避免，用户物理按键返回；为true，则存储flag到本地。原理既是如此；但是实际开发时，会发现，存在闪屏现象，这样用户的体验就不太好，所以比较关键的地方就在于这块，还是以uniapp为例，需要在uniapp的源码视图下将splashscreen的设置进行修改，将autoclose改为false，在onLaunch中通过设置延迟时间调用plus.navigator.closeSplashscreen方法来关闭启动图。delay设置为0。这样启动图的设置就ok了。
以下封装了检查是否进入引导页的方法，仅供参考下：
Tip:在多次的应用中发现，如果在手机本身比较卡的情况下，用户在第一次开启app时，还是会存在首页在引导页之前出现，这种情况的处理方式是将引导页默认设置为主页，即在路由管理中，将引导页写在第一个，然后通过flag去判断是否跳转到首页；
以上的引导页开发只是提供一种思路，还有很多其他的方式，比如后端去控制是否展示引导页，引导页的动态变化。当然问题本身不难实现，关键在于实际应用时所存在的问题。
‘捌’ 如何App实现引导页和欢迎页
欢迎页：这个在我们的微信里面就有这个，我们每一次打开微信的时候都有一个地球，那么这样就是欢迎页。欢迎页具有良好的数据缓存作用。
引导页：就是我们没次安装一个app的时候，前面都有几个图片。那么这个引导页有哪些作用，第一：它有教我们怎么使用这个app和接受这app。第二：有宣传的作用。
我们在这个功能中用到的知识点有ViewPage、ViewPage的适配器PageAdapter、ViewPage的滑动改变事件、、RadioGroupRadioButton的点击事件。
好，现在我们接下来上代码了。
这个就是我的项目结构。其中WActivity.class是欢迎页、FActivity.class是引导页、MyAdapter.class是ViewPage的适配、BasePageListen实现页面滑动的接口。
第一个我们先写WActivity这个类。
package com.example.office.startapp;
import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class WActivity extends AppCompatActivity {
private SharedPreferences sp;
private boolean isFirst;
//欢迎页面
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_w);
//获得共享参数对象
sp=getSharedPreferences("first", Context.MODE_PRIVATE);
//参数二 如果sp文件中没有记录的话 返回的默认值
isFirst=sp.getBoolean("isFirst",true);
//这里面的判断就是 如果是第一次进入app 那就跳转引导页
//不是第一次就跳到主页面
new Handler().postDelayed(new Runnable() {
SharedPreferences.Editor editor;
Intent intent;
@Override
public void run() {
if(isFirst){
intent =new Intent(WActivity.this,FActivity.class);
startActivity(intent);
WActivity.this.finish();
//把数据保存到sp里面
//获取可以向sp里面写入数据的对象
editor=sp.edit();
editor.putBoolean("first",false);
//提交我们的数据
editor.commit();
}else {
intent=new Intent(WActivity.this,MainActivity.class);
startActivity(intent);
WActivity.this.finish();
}
}
},1500);
}
}
下面我们就写MyAdpter这个类
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
/**
* Created by OFFICE on 2016/8/9.
*/
public class MyAdapter extends PagerAdapter{
private List< ImageView > list;
private Context context;
public MyAdapter(Context context, List<ImageView> list) {
this.context = context;
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
//里面有一个方法必须删除super.不删除会报错
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
}
}
我们写BasePageListen这个类
import android.support.v4.view.ViewPager;
/**
* Created by OFFICE on 2016/8/9.
*/
public class BasePageListen implements ViewPager.OnPageChangeListener{
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
最后我们写FActivit
import android.content.Intent;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
//引导页
public class FActivity extends AppCompatActivity {
private List<ImageView> list;
private RadioGroup radioGroup;
private ViewPager viewPager;
private ImageView imageView1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_f);
viewPager= (ViewPager) findViewById(R.id.viewPage);
radioGroup= (RadioGroup) findViewById(R.id.radiogroup);
imageView1= (ImageView) findViewById(R.id.image) ;
initView();
imageView1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(FActivity.this, MainActivity.class);
startActivity(intent);
FActivity.this.finish();
}
});
MyAdapter myAdapter=new MyAdapter(this,list);
viewPager.setAdapter(myAdapter);
//viewPage变动RadioButton也在变动
viewPager.addOnPageChangeListener(new BasePageListen(){
@Override
public void onPageSelected(int position) {
RadioButton radioButton= (RadioButton) radioGroup.getChildAt(position);
radioButton.setChecked(true);
if(position==list.size()-1){
imageView1.setVisibility(View.VISIBLE);
}else {
imageView1.setVisibility(View.GONE);
}
}
});
//当点击RadioButton的时候，viewpage也在改变
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
viewPager.setCurrentItem(checkedId);
}
});
}
private void initView(){
int [] images={R.mipmap.yd1,R.mipmap.yd2,R.mipmap.yd3};
list=new ArrayList<ImageView>();
for(int i=0;i<images.length;i++){
ImageView imageView=new ImageView(this);
imageView.setImageResource(images[i]);
list.add(imageView);
RadioButton radioButton=new RadioButton(this);
//设置radioButton的id
radioButton.setId(i);
//把ReaioButton放在group
radioGroup.addView(radioButton);
}
//设置默认选中的第一个按钮
//获得下标为0的按钮对象
RadioButton radioButton= (RadioButton) radioGroup.getChildAt(0);
radioButton.setChecked(true);
}
}
好了，复制上去就可以实现上面的效果。
‘玖’ html5 做app引导页怎么做
H5e教育Html5开发为您解答：
1、制作html5引导页面。
2、把做好的页面放入Android工程中assets文件夹下。
3、利用WebView加载asset文件夹下的html文件。
4、在引导页最后一页的按钮上捕捉点击事件，结束引导页，进入程序。
‘拾’ App用户引导页如何引人入胜
引导页是用户在首次安装并打开应用后，呈现给用户的说明书。目的是希望用户能在最短的时间内，了解这个应用的主要功能、操作方式并迅速上手，开始体验之旅。既然是说明书那难免不受待见，因为我们的用户总是傲娇，他们不喜欢被教育、被说明，他们喜欢一口气划过引导页，直接上手，但是在碰到问题、遇到挫折的时候又会各种别扭。所以这就需要设计师非常用心的去处理引导页的设计。丰富多彩、风格迥异的引导页设计 有些引导页则沉稳大气，适合资讯类的应用，给人以可信赖感。例如搜狐新闻客户端的引导页设计，摒除了所有多余的设计，用干净的界面及有力的文字体现了整个应用真实可信的媒体平台的定位。 有些引导页则轻松、活泼，适合日常工具或者休闲类的应用，让用户感受到贴心和放松。例如UC手机浏览器，由用户使用浏览器常见的下载麻烦的情景来穿起整个引导页，像一副四格漫画一样让用户带着浏览漫画的心情，轻松地阅读完整个引导页，同时也强调了使用UC浏览器下载的轻松便捷。还有一些引导页则富有生活情趣，适合一些文艺、小清新的应用，因为这部分应用的用户不一定喜欢标新但一定立异，不喜欢随大流。一套好的引导页的构成，怎样做到引人入胜？好的引导页设计是从展示内容到设计风格再到语言文字都经过细致考究并与应用整体气质符合的。 1. 展示内容要简明扼要，只捡最重要的说，用户虽然傲娇但是我们也不能一味的去贬低用户的理解能力及手机使用经验，如果只是新功能的推荐我们完全可以只告诉用户入口，而不是事无巨细的详细列明每一步的操作，把一个好好的引导页活生生做成一个帮助教程页。如果是新的交互及操作方式，我们也可以只展示最核心、关键的操作，要留给用户探索和发现的余地。2. 展示内容应当连贯有一定的逻辑关系，所有的内容都按照一定的顺序有机的排列。如先是亮点模块的介绍再是应用整体呈现，或者按照一个主打功能的操作流程介绍。总之做到有主有次，再到最后静静等待用户点击“开始体验”那一刻。3. 每页只放一个内容。有时候想表现得东西太多，不妨拆分成几页，因为引导页使用情景决定了，它是用户在下载完应用后急切地想见到主界面使用应用前的绊脚石，极有可能的场景是用户很快速的划过引导页，一页上太多信息，只会让用户更快速的划过引导页。如果我们保证每一页的内容都非常简洁的话，用户就算走马观花的划过也能记下一些东西。每一个画面都有一个重点。可能是文字也可能是图。4. 设计风格，正如上面说到引导页的设计风格要与产品的气质保持一致，如果是一本正经的新闻资讯类应用。那它的引导页风格也是稳重、正统的。而娱乐类的应用可能有更情感化的表现形式，例如漫画形象的应用或者是大幅背景照片的运用。在设计细节上，现在也有越来越多的引导页运用到线描的插画，这样既可以更方便、准确的传达操作方式、使用场景等复杂信息又可以增加亲和力减少说教带来的用户反感。还有局部放大、手绘箭头等也功能介绍时常用的表现手段。5. 在文案上也是需要非常考究的，要使用用户听得懂的词，不要让用户脆弱的自尊受到伤害。比如“点击Title Bar，您可以…”(Title Bar是什么东东，欺负老娘不懂英文么 ！！！！)不如换成“点这儿试试呢，您还能…” 总之，好的引导页设计，不是一本冷冰冰的说明书，不是让用户脆弱的自尊饱受凌辱，而是让用户由里及表、由内而外的感受到自己受到非常良好的对待。这需要设计师真正从用户的角度去理解用户对于引导页的需求及用户阅读引导页的场景。