设计让用户愉悦的引导页的6大实操方法设计教程

研究表明90%的用户下载app后只用一次,然后就永久地删除了。人们经常弃用app是因为界面设计真的很难,或者整体就是很差的体验。app没有帮用户解决问题,在界面、菜单和按钮操作中他们感觉很困惑。

在用户界面设计基础的第五章,JanePortman说过:

对给你app第二次机会的用户,他们需要理解4件事:

1.为什么他们需要这个app

2.这个app能为他们做什么

3.它最重要的特性是什么

4.如果使用这些特性

最好的理解你app目的的方式就是通过一个过程体验的管理。

什么是引导页?

引导页的完成,在于展示了一系列主要信息,那些展示给用户如何通过和app交互来解决问题或者展示了app主要创意和关键性特征的信息。引导页能采用多种形式:

l介绍性的幻灯片或视频

l小提示

l界面引导

l内容示例

l复杂的解决方案

所有的这些方案在与用户交流中都是有效的。选择一种对你目标用户最管用的方式,让你app的功能更容易被理解。

接下来的视频会展示一些幻灯片,这些幻灯片被用于一个旅游app来达到引导用户的目的。

(此处是视频示例,请点击原文查看)

我喜欢这种实现方式,因为很有趣。在飞行的过程中,你将会在低温环境中睡眠。。。这是个抓住用户体验的好例子。我也喜欢设计简洁。只有3张幻灯片——创建账户——选择星球——离开——但是他们完美地传达了app的主旨。

BeatsMusic这个app使用了引导页旨在吸引用户,让他们的音乐试听体验变得个性化:

BeatsMusic的引导页(查看大图)

IFTTT,一个众所周知的服务,在联网服务中自动化小任务,它使用了小提示去解释其独特的产品。

IFTTT的引导提示(查看大图)

IFTTT展示了一个菜谱应该是什么样的,解释了界面中的每个元素,被用到的特殊模块——触发频道、操作频道——帮助人们更清晰的理解“如果。。。然后。。。”这个逻辑。

策略

既然我们知道有不同的引导形式,让我们想出如何设计尽可能让人愉悦的引导体验。

如果你为一款编辑图片的app设计引导页,你可能会做4-5也介绍性的幻灯片。一款有图表和预算功能的金融类app可能需要更多的细节描述或系统提示。对于一个音乐类的app,你可能会采用一个帮手来简要解释如何使用控件去创建一个跟踪轨迹。

有些设计师采用了繁杂的方法,把两种后更多种方式结合使用。例如,你可能把一个包含线索和帮助菜单的介绍性的视频进行了详细地说明。以谷歌inbox这款应用的视频为例。

让我们一起来探索6个吸引用户的策略。

1.引发积极情绪

“任何用户引导都是心理学:早期的成就感。成就会让用户回来。”

看MailChimp是如何通过表扬用户完成任务来引发他们的积极情绪:

MailChimp(查看大图)

MailChimp使用了它独特的方式和顾客沟通。“击掌”是很有趣的,令人兴奋的。MailChimp只是需要告诉用户他们的活动很快就会发出去,但是MailChimp给信息添加了情感。扩充情绪在设计中是很有力的技巧。

当满足以下标准时,引导页能触发情感:

l导航是有意义的,很容易被理解;

l设计从视觉上对目标用户是有吸引力的;

l幻灯片的播放方式很有趣,能让用户想继续往下翻;

l整个的体验是印象深刻的,有个性的,能表达品牌和客户的个性。

我们在Yalantis用这些标准来设计我们的引导过程。下面的概念说明了我们如何利用情感需求去吸引一个假定的时尚app的目标受众。当时的想法是帮助年轻女性选择时尚的服装。但我们并没有严格重点讲解假定产品的功能。我们创建了引导页,作为一个情感上有吸引力的设计示例。

(此处是视频示例,请点击原文查看)

我们用了AdobeAfterEffects(你可能很容易实现这个想法,用任何的原型工具,结合插图)。我们挑选出自然色彩为原型,引导页是与一个人的日常生活中的经历联系的。

2.展示用户能做什么

当构想引导页的体验时,从客户的角度考虑。展示客户如何能从产品中获利是一种展示这个产品有多好的方式。

写下3个简短的句子,简要地见识这个app能提供的价值。谷歌的inbox就是一个很好的范例:

谷歌的Inbox(查看大图)

inbox使用动词和图标在每个屏幕上来描述价值。动词促使人们采取行动,好过言论的任何其他部分。

如果你的产品不得不和很多类似的解决方案竞争,明确强调其竞争优势。用3-4张幻灯片告诉人们是什么使得你的应用程序和别人的不同。简明扼要地解释为什么人们需要你的app。

“全面”“一周两次”“有限定的”“提醒”—以下4张幻灯片解释了雅虎NewsDigest这个app的价值,比说一堆话管用。

雅虎的NewsDigest(查看大图)

我喜欢NewsDigest引导页的颜色。不仅仅信息突出了雅虎app和市场同类app有多么大的不同,也是因为颜色和用户界面很配。

4.内容示例解析

如果用户能看到内容样本,他们将能更好地理解如何和app进行交互。

内容样本会在产品和文档编辑的app中主要使用。你总是能把内容样本和提示性的幻灯片结合起来。

这是Dropbox在它的Paperapp中使用了内容样本引导用户:

Dropbox的Paper(查看大图)

把文件夹里的想法组合起来可能听起来很复杂,但是Dropbox使用了引导页去展示这个功能是多么简单。界面简洁明快,能帮助用户快速的获得想法。

用内容样本做引导的情况也同样出现在Mac的Readdle应用上。

Readdle的documents(查看大图)

Readdle展示给用户哪些文件他们能够管理,这些文件从哪里来。内容样本强调了app价值构成的独特性:一个包含你所有文件夹的地方。

5.使第一印象产生持久的影响

首先,引导页的设计应该让用户第一次使用app的时候就采取行动。

初始的“白板”设计得当可以推动用户采取其第一个操作。呼唤采取行动,比如一个创建新文件的插图提示,就可以让用户马上创建文件。使用白板设想未来将会发生什么。

有效的白板会教育用户,让用户高兴,也会提示到用户。想想接下来的3个app,哪一个完全填充了空白屏幕:

Threeappsthatfilluptheemptyscreen(查看大图)

6.实施渐进式学习系统

这是最复杂的策略,适合大型技术先进的高门槛项目。渐进式学习是一个混合系统,包括在互动各个阶段不显眼的教程、技巧和动力。

用这种方法,用户在没有任何视频或知道的情况下,学习如何使用该产品。他们能轻松地找到专业工作所需的隐藏功能。渐进式学习通常包括分配制度。

元素

一旦你挑选出适合自己的策略,思考下怎么设计。引导页的设计有4个关键因素。

1.按钮和导航

如果你呈现了一张幻灯片,显示箭头等符号,预示着用户应该滑动到下一个界面。

我迄今看到的一个最好的引导页的设计是Dropbox的旋转木马app的设计,这款app如今已下线。当用户第一次进入这个app,他们被邀请“开始”。在点击“开始”,他们可能会向下滚动才能看到描述应用程序主要功能的幻灯片。指向标推动用户滑动到下一页。在引导页的最后,用户能注册去使用这个app。

Dropbox的旋转木马app(查看大图)

当旋转木马发布的时候,是相当成功的,大部分是因为它很明智的界面设计和有吸引力的引导体验。不幸地是,该项目被停掉了。这主要是由于在Dropbox的生态系统薄弱的产品定位,并且有来自Google图片,苹果的iCloud和Facebook的Moments的激烈竞争。Dropbox把旋转木马的核心功能移植到了它的主app上。

在虚拟的旅游app的引导页示例中,我们使用了可操作的导航。每一次点击带领用户到另一个阶段。我们也通过提示运用了垂直滚屏来达到一种直观的用户体验。我们使用了苹果的Motion去做这个原型。

2.提示

提示是在一定顺序下出现的一系列的沟通元素。提示是连接各种组件的桥梁,简要描述了用户如何与这些组件进行交互。

使用提示能快速的引导用户浏览界面,帮助他们在app里进行第一步的操作。一旦app更新了,你也能使用提示展示新功能。

提示能以多种形式呈现:

-强调积极的元素

-作为文本提示

-弹窗里的提示

-填充页面的空白区域

考虑你要把提示展示给什么类型的用户看。有经验的用户将会被这些提示激怒,所以让他们跳过。

还有,有些用户不想被引导,无论这个提示有多么吸引人。你需要尊重他们的意愿,让他们可以跳过。

3.文字

引导页上的问题需要遵循特定原则:

简洁和清晰

让每个幻灯片页面都是一个单独的句子,用简洁清晰的语言描述app的关键价值。

可读性

文字应该能抓住视线,在背景上能很容易识别。

整体性

文字字体和呈现应该符合整体设计语言,能反映出产品的情绪。

听听你的用户,尝试辨别出他们喜欢什么,想要听到什么。考虑什么对他们可能很难理解,因此,需要更全面的解释。

4.图形化

不要在界面上过度使用文字。使用插画、图片会让用户留下视觉印象。只有文字,很难达到预期目标。视觉上两个最重要的评判标准就是简单性和通用性。你的图片、图标和符号在不同的国家和地区都应该能被平等地接受。

在图形设计中你可能用到的最主要的形式是插画、照片、适配、gif和截图。

既然我们已经知道了我们能用在引导页上的方法和元素,接下来唯一要做的就是做实际的设计。

设计引导页的原型工具

我们在Yalantis上用以下工具:

Principle

Pixate

Flinto

InVision

Atomic

framer.js

Form(RelativeWave做的)

我最喜欢的是Principle。我能用它在几分钟内做一个常用的动画的交互原型。它很容易被操作。不像许多其他的移动UI原型工具,Principle被设计得很方便。它的简洁性能提高你的呈现效果,让你的设计过程更加灵活通用。

RelativeWave公司的framer.js和Form是为那些认为设计师应该知道如何编码的人设计的。这些工具能让开发人员更简单地实现你做的原型效果。

最容易创造原型的工具就是InVision,但是它对动画同样有限制。

我们也使用以下视频编辑工具:

AdobeAfterEffects

AppleMotion

这些也能让你创建自定义动画,探索界面元素之间如何转换。

如何让引导页起作用

引导页的设计不是用来解释界面中的单个细节,让用户不流失。一个典型的移动app是有许多不同的功能、组件和交互的。你不需要在引导过程中都提到它们。

指出app主要的目的和好处就够了。以下是对引导流程设计整个过程的一个简单总结:

1、列出产品的几个核心特性

2、识别出产品的价值构成

3、写下你的竞争优势,以及产品的市场定位

4、用案例描述具体的使用场景

5、选择能包含app价值的最合适的引导方案

6、设计图形元素和导航流

7、在你的引导设计中创建一个交互原型

8、测试原型

9、迭代提升体验

常见的误区

在设计引导体验时,设计师有时会犯错。这里就是一些普遍的错误做法:

-不要解释页面具体的细节。会让用户觉得自己很笨。

-不要让引导太长或不清晰。那样只会出发消极情绪和误解。

-不要抄袭同类app。引导的设计应该是独一无二的,对你的产品和你特定的用户而言。

-不要为了引导而引导。引导是整个和用户交流系统里的一个组件,不要因为别人都这么做,而仅仅把它当做一个特性来设计。引导页应该补充和加强产品的使用体验。

记住即使是最好的引导体验也不能修复整个产品的用户体验问题。

-从他人的错误中学习,我们很幸运有那么多资源。

-研究好的引导页设计的案例。在UXArchive,UserFlowPatterns和Pttrns上获得灵感。

如HelpScout公司的SamuelHulick所言,引导页不是一个特性,它的设计是一个漫长的过程,不会随着注册按钮而结束。

结论

但是让我们看看数据告诉了我们什么:

-根据Gomez对线上购物行为的一条研究,88%的线上用户在经历了一个差的体验后很少会回访。

THE END
1.原型图都可以用什么软件做?11款好用软件分享!原型图软件Axure结合了线框和原型设计功能,它允许设计师在不了解代码的情况下开发网站和应用程序的交互原型。除了视觉效果、交互性和架构所需的一切之外,原型图软件Axure还提供了一个全面的文档工具,它允许你跟踪任务和其他重要的数据,以供有需要人士使用。 https://pixso.cn/designskills/yuanxingturuanjian/
2.有哪些做原型图的软件APP推荐有哪些做原型图的软件下载豌豆荚有哪些做原型图的软件榜单为您提供最新有哪些做原型图的软件大全,这里不仅有有哪些做原型图的软件安卓版本APP、历史版本应用下载资源,还有类似有哪些做原型图的软件的应用推荐,欢迎大家前来豌豆荚下载。https://www.wandoujia.com/bangdan/401839/
3.原型设计工具axureapp原型设计工具有哪些原型设计工具大全为大家收集整理许多软件原型设计工具,如axure,Justinmind,mockplus等,均为中文汉化破解版,可以帮助玩家快速便捷的制作软件等模型界面,适合于PC端上的软件以及移动端的app应用界面设计.https://www.qqtn.com/qqkey/yxsjgj/
4.交互设计的原型工具有哪些?在校园内踢足球,砰的一声,不知道是谁踢的球把教室窗户的玻璃打破了,老师跑来一看,问是谁打破的。甲说“是乙打破的”。乙说“是丙打破的”。丙说“是乙打破的”如果这三个孩子中只有一个说了实话,那么打破玻璃的人是()https://www.shuashuati.com/ti/b3e40478f55b430aade9020d1ae4bacf.html?fm=bd1db2f18637d16fa82153bfc3a1f3a3eb
5.app设计需要用到哪些工具?在定制开发app的过程中,设计是很重要的一个环节,跟开发一样,设计也会使用到相应的工具,那么app设计需要用到哪些工具呢? app设计包含原型设计和ui设计,原型设计一般是产品经理负责,根据个人习惯等或使用axsurerp,或使用墨刀等在线原型设计工具,其中axsure rp更为常用和专业一些。axsurerp是一个专业的快速原型设计工具,https://m.11467.com/product/d20901160.htm
6.常用的快速Web原型图设计工具有哪些?无论是桌面软件、Web网站还是移动APP界面,原型设计都是产品设计流程中非常重要的一环,原型设计在一定程度上是为了说明用户将如何与产品进行交互,用来展现更初的产品设想,起到直观展示和有效沟通的作用。那么有哪些常用的WEB原型设计工具呢? Web原型图设计工具一览 https://www.adinnet.cn/bloginfo/2018_03/blog_3497.html
7.常用的软件设计开发工具有哪些?软件设计工具是指专门用于支持软件设计过程的应用程序或工具,它可以帮助软件开发人员在构造可行软件设计方案时减轻工作负担,并帮助他们提高软件质量。主要的设计工具类型包括建模工具,原型设计工具,图形设计工具,框架设计工具,模式设计工具,组件设计工具,文档设计工具和图形用户界面(GUI)设计工具等。 http://www.apppark.cn/t-42514.html
8.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
9.4款APP原型设计工具助你搞定移动应用设计!腾讯云开发者社区不少设计新手和产品小白在选择原型工具前,早已经被网上五花八门的原型设计案例看得眼花缭乱,无从下手。实际上,大多数案例都是这些工具作为教程或炫技使用的。通常,有经验的设计师或产品经理在挑选App原型设计工具时都会从以下这些方面进行考虑: l是否支持多终端演示(随时随地都能演示。) https://www.cloud.tencent.com/developer/article/1146410
10.原型设计工具有哪些?原型设计工具排名免费原型工具推荐原型设计工具哪个最好用?像axure、mockplus、sketch、墨刀等都是常用的原型设计软件,可以用于画原型图、web网页原型设计等,是交互设计师和产品经理必备工具。绿色资源网还提供了手机版原型设计工具哦!http://www.downcc.com/k/yxsjgj/
11.设计必备12款Prototype工具推荐,让你轻松上手原型设计Proto.io 是一款云端原型制作工具,可以帮助用户设计互动式的行动 app 原型。 他以作为最灵活的高度还原原型创作软件之一而广受喜爱。就算是对进程没有任何基础的用户,也可以操作这款软件。 除此之外,轻松的拖放界面与 100 多种模板选择也让 Proto.io 成为了热门软件。 http://cn.eagle.cool/blog/post/prototyping-tool
12.4个好用的手机APP原型设计工具推荐给你!今天我们给大家分享的是4 个好用的手机 APP原型设计工具,他们分别是:即时设计、Figma、Justinmind、Proto.io,相信大家在做相关原型设计时可能都会遇到原型设计工具的功能不够强大,或者是不支持导出想要的格式,亦或者是工具操作复杂还要收费等多种问题,这一个个的简直就是我们做设计时的拦路虎,阻挡我们做出好的手机 APPhttps://js.design/special/article/mobile-app-prototyping-software.html
13.?原型设计8种原型设计工具介绍?移动应用开发如火如荼的至今,一个好的APP原型设计理念很容易被糟糕的界面和体验毁于一旦,如今市面有很多的原型工具可以帮助我们解决问题,但如何选择原型工具却成为设计师们最头疼的事情,一方面是由于不懂哪些工具适合自己,另一方面又没有多余的时间去挨个使用。那么今天,我就来为大家介绍以下8种原型设计工具,供大家参考https://blog.csdn.net/zzddada/article/details/120870535
14.?原型图用什么软件做?原型设计工具有哪些原型图设计是众多行业比较常见的设计方式,尤其是对于产品开发行业来说,为物品设计原型图,可和产品经理快速沟通,并把握产品的外观等等。对于那些行业内的人来讲,原型图用什么软件做比较好?常见的原型设计工具有哪些?下面就让小的给大家推荐几款。 原型设计是什么? https://www.xianjichina.com/special/detail_547152.html
15.常用的原型设计工具有哪些?常用的原型设计工具有哪些? 工欲善其事必先利其器,作为一名产品经理或者设计师,原型工具是必备的工具,分享8款常用的原型设计工具:Axure、百度脑图、创客贴、墨刀、摹客、Invision、ProcessOn、sketch。 1、Axure Axure是一款专业设计师不容错过的免费原型设计工具,设计师可以用它快速创建应用软件或Web线框图、流程图https://www.chuangkit.com/blog/pingmiansheji342.html
16.平台数据结构与算法课程设计图算法答案头歌实践教学平台app原型设计工具:墨刀 原因:自学两天axure之后感觉操作略为繁琐,听同学去尝试了一下墨刀,发现墨刀上手更快,可视化方便,交互效果更为简单 2.2 遇到的困难与解决办法(3分) 困难1:原型设计刚开始没有思路,无从下手。 解决方案:与队友讨论,分析功能需求,列出各模块 https://blog.51cto.com/u_16099297/9018247
17.所有的动效设计几乎都是这14个软件做出来的(附C4D教程)Protopie(菠萝头派)是一款交互原型设计工具,支持Mac和windows双平台(我们都知道99%的动效设计软件都只支持Mac,windows平台目前只有2款,pixate和protopie无疑是win用户设计师的福利,但pixate被谷歌收购后2-3年再也没更新了),与principle、orgami、AE等相比,它更加轻量级,集成的功能更吸引人,可以调用iphone系统的陀螺仪https://www.ui.cn/detail/272279.html
18.即时原型即时原型(原xiaopiu)是产品原型设计工具和团队实时协作平台,作为产品经理和交互设计师工作学习的必备软件工具,堪称快速原型交互设计神器。可制作手机app、web网站网页、桌面应用软件的原型,拥有海量原型交互模板资源素材,可替代axure在线使用无需下载https://www.xiaopiu.com/
19.app开发产品原型图用什么工具设计?技术博客在app开发过程中,为了完成一个完整的产品设计,这个产品的原型图是非常重要的。原型图是用户体验设计过程中的重要工具,是模拟和呈现产品形态、功能等,为后续的产品开发提供指导。设计一个好的原型图可以大大提高产品的开发效率和用户体验。 下面介绍一些主流的产品原型图设计工具: https://www.yimenapp.net/knowledge/blog-11712.html
20.MacAppStore上的“Lunacy—UI平面设计和原型制作软件”提供App 内购买项目 简介 认识Lunacy,你寻找终极设计工具的最终目的地! 主要功能包括: — 实时全球协作 — 大量内置图形 — 强大的人工智能工具 — Figma & Sketch support — both online and offline modes — low system requirements …and even more! https://apps.apple.com/cn/app/id1582493835
21.墨刀app下载墨刀(原型设计与协同工具)v5.3.6安卓手机版下载墨刀手机版是一款非常好用的手机app设计软件,软件功能十分强大,内置丰富的行业模板库和图标库,及9种手势动作,17种页面转换效果,还有神奇移动和自定义微动画,各种素材应有尽有,且支持PNG、HTML、APK、IPA等多种格式与Sketch插件,可提供强大的云端管理服务,方便你进行交互制作、标注查看、切图下载、协同讨论、项目审阅https://www.jb51.net/softs/749560.html
22.产品二DAY3(三)AXURE原型设计工具中通常菱形在流程图设计中表示什么意思 执行 判断 程序的开始或结束 数据的传递 (三)同理心又称换位思考,指能够站在他人立场上设身处地的思考。以下不属于同理心应用的是: 把自己当一名普通用户去体验产品 批判地看待用户提出的问题 多与用户沟通 多去把玩各种各样不同的APP 2018年8https://www.wjx.cn/jq/107891765.aspx
23.掌握这20条用户体验设计原则,助力设计成长!这些交付成果服务于关键功能,设计师需要在整个项目中都依赖它们,不断转换为用户可以与之交互的真实有形的设计。 十六、专业的原型设计工具 用户体验设计的过程不是线性的,而是一个循环。无论创建什么样的产品,都需要专业的原型工具,将基本框架放在一起,然后添加可能需要的所有细节。 https://maimai.cn/article/detail?fid=1634038199&efid=Q8OQitPTUtErr9eSTYczCA
24.银弹谷原型设计项目管理银弹谷(隶属同望科技)是全栈式、零代码开发平台服务商。公司主要产品有V-Proto原型设计工具、V-DevSuite零代码软件开发套件、V-Team软件开发协同工具等,为IT企业提供一站式软件开发平台服务、IT项目管理服务、数字化转型服务等。http://www.yindangu.com/
25.原型设计工具用哪个比较好?4种原型设计工具优缺点对比分析对设计师来说,一款好用的原型设计工具可以让他们的工作效率大大提高,能省下很多时间。当然,不同的原型设计工具都有一定的差异!那么到底哪个原型设计工具比较好呢?下面给大家推荐几款好用的原型设计软件,有需要的朋友可以根据自己的需要进行参考。 1、Axure RP https://www.niaogebiji.com/article-105555-1.html