㈠ 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去判断是否跳转到首页;
以上的引导页开发只是提供一种思路,还有很多其他的方式,比如后端去控制是否展示引导页,引导页的动态变化。当然问题本身不难实现,关键在于实际应用时所存在的问题。
㈡ html5 做app引导页怎么做
要使用HTML5创建应用引导页,首先需要制作一个HTML5引导页面。这个页面应该包括一系列介绍应用功能和特点的步骤,以引导新用户熟悉应用界面和操作。
完成页面设计后,下一步是将该页面整合到Android项目中。具体来说,需将制作好的HTML5页面放入Android工程的assets文件夹下,确保其路径正确。
接下来,使用WebView组件来加载存放在assets文件夹内的HTML5文件。在Android开发中,WebView是显示网页内容的视图组件,能够加载和显示HTML文档。通过设置WebView的加载路径,可以轻松实现引导页的展示。
为了实现引导页的流畅过渡,需在引导页的最后一页设置一个按钮。当用户点击该按钮时,应触发相应的逻辑,如结束引导页并跳转至应用程序的主界面。这通常涉及到编写JavaScript代码来与Android的Java代码进行交互,通过监听按钮点击事件来实现引导页的退出。
在实现点击事件时,可以使用WebView的loadUrl方法加载JavaScript代码,从而在引导页的最后一页触发点击事件。这样,当用户完成所有引导步骤后,点击按钮将自动结束引导页,启动应用程序的主界面。
值得注意的是,确保所有的HTML5文件和JavaScript代码都能正确加载和执行,以保证引导页的流畅性和用户体验。同时,优化加载速度和减少页面切换时间,将有助于提高用户的满意度。
通过以上步骤,您可以成功创建一个HTML5引导页,并将其整合到Android应用程序中,为用户提供一个友好的入门体验。
㈢ 移动APP前置引导页设计
用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。
◇ 前置型的引导: 在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。
◇ 过程中的引导: 在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导,loading等等待状态中的引导,拆分包袱的逐步引导,巧设默认值的功能引导,tips引导,浮点引导,遮罩聚焦式引导,触发式引导,任务演练式引导等。
带领用户更快速达到使用目标,在用户使用产品过程中及时给予帮助,排除适用障碍。
最核心的设计技巧有4点: 精简与合理使用 & 细致编排 & 有效的注意力 & 构建特色。
◇ 精简与合理使用
只做必要的引导页内容。没必要的引导内容会增加信息的冗余性,冲淡真正需要用户关注的信息的注意力与精力。适合与否的依据主要是在真实的使用场景中,用户是希望能对这个产品有个大致的了解,还是希望快速启动产品立即使用,在使用的过程中再慢慢学习。
◇ 细致编排
讲建立与用户使用情景匹配的场景,让用户能建立一种熟悉的感受,能让用户对引导的功能点感同身受。
串联的故事一般而言都是多页的形式。一步抛出一个需告知的点,循序渐进的解说。故事可以只围绕一个功能点来叙述,也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。由于每次一个告知点,多会采用聚焦的设计手法,把视觉注意力吸引到每个告知点上。
痛点渲染,建立一个用户在实际生活中会遇到的类似的不便的场景,让用户能感受到共鸣,唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案,可以让用户感觉,戳痛点的手法比较适用于实用的工具性的功能引导。
◇ 有效的注意力
1、 注意力是记忆力的基础,记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力,良好的记忆力是建立在良好的注意力基础上的。
当界面中的信息聚焦在某一点上时,用户能快速准确定位到需要阅读的信息内容上,达到消化信息的目的。
聚焦的设计手法有很多种,如通过光影的方式,将亮光的部分打在最需要用户关注的信息上;虚化背景的方式,突出前面的信息内容;放大镜方式,将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法,还可以运用其他的方式来聚焦,只要可以达到效果即可。
2、图片传递信息,人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。在不同的图片中,人们对人脸,美女,笑容,具有动感的照片更容易引起用户的注意。
3、现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力> 对于静态内容的注意力。所以除了静态图片的方式,我们完全可以通过适当增加动态内容来吸引用户的注意力。
4、控制文案字数,人类对于内容的短时记忆的容量有限,一般为7 ± 2项目,一般为7 ± 2,即5 ~ 9个项目,这也就是平常我们所说的记忆广度。)超过9个字符,用户是很难记忆的且容易受到干扰而发生遗忘。
如果精简后依然超出极限字符数,那么可以对文案内容分层次。通过排版的方式,突出需要用户记忆的字符,弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。通过断句的方式,将长的文案变为短的子单元,这样可以扩大短时记忆的容量。断句可以通过打标点,留空格,断行的方式来实现。
◇ 构建特色
背景图片的摄影角度或风格/后期处理/色调;版式编排的设计风格/版式布局/配色方案;文案的行文风格;多屏切换方式也可以考虑
构建特色并不需要对所有内容的元素都进行,即使只在一个内容点上进行特色构建也是可以的,但是需要做到的是这个点上的特色要非常明显,用户容易感知到。
引导页适合阐述产品的概况内容(如具有产品的概念,产品的核心功能,具有竞争力的功能点或用户痛点,以及会影响到初次使用的操作方式的内容),建立起用户对产品的大致认知;而不太适用于阐述过于细节的产品内容,因为此时用户还无法进行相应的信息匹配,细节内容会不容易理解。
㈣ APP 引导页设计1-引导页的分类
因工作原因,笔者体验过很多APP,其UI是笔者比较关注的一部分,毕竟UI是第一印象嘛,大部分APP,引导页作为其的第一个入口,新装时启动都会先显示引导页,介绍其功能特性。APP体验多了,逐渐有点心得,这里笔者对市面上APP的引导页做下归类,细数归纳下对引导页的所见所想。
根据引导页的目的、出发点不同,可以将其分为功能介绍类、推广类、问题解决类、卖萌搞笑类,一般引导页不会超过5页,下面看看各类精彩纷呈的引导页。
1.功能介绍类
这样的引导页最直白的就是截图展示功能特点,或者用形象化的物体(如下图QQ改版升级,其引导页就用代表性的企鹅来表现APP的主要功能。)
用户需要一针见血,在这样一个网络化的时代,人们停留的时间越来越短,浏览你的APP界面时间不会超过3秒,在这样宝贵的3秒里,你需要用简要明白、通俗易懂的文案和界面呈现,突出重点即可,展示我们的功能展示页面。
2.推广类
推广类引导页除了有一些产品功能的介绍外,更多是想传达产品的态度,让用户更明白这个产品的情怀,并考虑与整个产品风格、公司形象相一致。这一类的引导页如果做的不够吸引人,用户只会不耐烦地想快速划过。而制作精良、有趣的引导页,用户会驻足观赏。
以淘宝旅行为例,淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用,在你出行前就帮你计划好所有的行程安排,只要一个行李箱,说走就走,与产品的理念相契合。而另外一款应用,选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。
3.搞笑卖萌类
不知道怎么概括,就是说一个故事?通常会配合一些动画效果来辅助展示。
4 、问题解决类
问题解决类通过描述在实际生活中会遇到的问题,直击痛点,通过最后的解决方案让用户产生情感上的联系,让用户对产品产生好感,增加产品粘度。例如QQ浏览器的引导页设计,通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题(搜不到小说、看小说花钱、小说更新需要等)。
以上已经针对引导页的目的差异以及表现方式进行了相关归类,在具体的设计中还得注意一些原则,它们会让你的设计更加吸引人,信息传达的效果更好。
#本文同步发布到 pm263.com ,pm263为你提供更多更全的产品经理干货,欢迎大家访问。