设计让用户愉悦的引导页的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.学菜谱app排行榜前十名偏玩手游盒子分享十大学菜谱app排行榜前十名手机应用,编辑为您推荐手机学菜谱app排行榜第一名到前5名到前十名的应用。找学菜谱app有哪些、学菜谱app哪个好用,上偏玩手游盒子https://m.pianwan.com/s/zj-561529
2.家常菜点餐基于小程序的家庭大厨家常菜点餐系统设计与实现(源码+数据二、系统设计 系统功能结构如图 三、系统功能设计 管理员可以管理用户信息,可以对用户信息添加修改删除。具体界面的展示如图5.1所示。 图5.1 用户信息界面 管理员可以对店铺进行查询修改,删除操作。具体界面如图5.2所示。 图5.3 店铺管理界面 系统管理员可以对菜品信息进行删查操作。界面如下图所示: https://blog.csdn.net/m0_66468899/article/details/144337136
3.美食菜谱类APP界面设计今天跟大家分享的是一款美食菜谱类APP的界面设计。现在美食菜谱类的APP有很多,如何才能在众多的竞争对手中脱颖而出。APP界面设计是一个重要的因素。一起来看看这款“妈妈快厨”APP的界面设计,对您设计相关的APP有所帮助。 1、颜色选择 2、图标设计 3、登录注册界面 https://www.adinnet.cn/bloginfo/2018_05/blog_3721.html
4.界面设计小小厨美食菜谱APP韩小莹原创作品UIAPP界面产品界面设计美食 韩小莹 UI界面设计 2 Z04949859 小金鱼HY 01:23:02 等3人发布 08:02:13 林远宏 yuan 1 更努力更努力点 IP 形象国庆LOGO 设计海报设计插画设计壁纸图片作品集VI 设计UI 设计规范AI 绘画表情包PPT模板app界面/app界面。#app界面#app界面‘app 界面app界面~APP界面‘’app界https://www.zcool.com.cn/work/ZMzUwMTg2OTY=.html
5.美食菜谱app手机界面图片免费下载美食菜谱app手机界面素材千图网为您找到163张美食菜谱app手机界面相关素材,千图网还提供美食菜谱app手机界面图片,美食菜谱app手机界面素材, 美食菜谱app手机界面模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/meishicaipuappshoujijiemian.html
6.菜谱APP体验创新选题围绕人们日常生活中做饭的问题,也针对像菜谱大全,豆果美食,下厨房等菜谱app,展开的用户体验分析和交互设计创新。该选题也可以用,“我是掌厨”、“厨师菜单”等名字。该选题的目标用户为以本人为核心的一群人。 一、选题介绍和基本分析 从菜谱大全,豆果美食,下厨房美食模块来看,这些app是教人们如何做自己想吃的美https://www.jianshu.com/p/69b03a6f41db
7.多功能美食菜谱APP方案设计毕业设计论文.pdf摘要 本设计主要针对Android移动平台多功能美食彩票系统进行分 析和设计。设计一款基于Android的一款多功能菜谱软件,客户通过 手机能够获取美食菜谱、食材信息、健康资讯、在线社区以及线上、 线下互动服务。本次APP设计以内容为主,简要介绍了系统的功能, 根据需求对整个系统进行总体设计,然后做出手机界面,最后进行系 统开https://max.book118.com/html/2021/0107/8062106036003035.shtm
8.味知香,美食文化探索与全新下载体验广告制作味知香的界面设计简洁大方,用户体验良好,APP内的搜索功能强大,用户可以快速找到所需的信息,味知香还具有强大的社交功能,让用户可以与志同道合的美食爱好者交流。 味知香作为一款集美食推荐、菜谱学习、食材购买、社交分享等功能于一身的APP,为广大美食爱好者带来了全新的下载体验,通过味知香,用户可以轻松找到心仪的http://www.hnyaoyaoyao.cn/post/952.html
9.设计素材国外优秀的app设计网站是什么?传单上的地图是怎么3、HudsandGuis:科幻UI界面共享博客HudsandGuis:科幻UI界面共享博客是致力于共享电影的科幻类UI界面设计的网站,我们看过钢铁侠系列的电影,其中具有浓厚未来科技理念的UI界面设计具有强烈的视觉冲突科学技术UI界面是从海外科学技术电影中诞生的新设计理念,这样的UI设计具有先进的想象力和极其简单的设计要素,是提醒未来科学https://jz.fkw.com/wzjs/51370.html
10.苹果iOS人机交互界面开发指南我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。 我们曾经介绍过《iPhone应用界面设计指南》,我们将介绍iPhone应用界面设计指南的一个章节——《苹果iOS应用人机交互界面开发指南》。 https://mobile.51cto.com/hot-246659.htm
11.软件界面设计界面素材图片UI/UX图片素材花瓣网,设计师灵感库,素材图库分发。发现你喜欢的软件界面设计图片,软件界面设计灵感图,将你喜欢的界面软件界面设计素材采集到UI/UXhttps://huaban.com/explore/ruanjianjiemiansheji/
12.以闪亮之名vvanna百科答案攻略大全以闪亮之名7、问题:独家设计未上传完成时,不可以进行哪些操作 答案:保存到这套时装 8、问题:独家设计时装一共有几个可绘制的图层 答案:2个 9、问题:代言女王大赛中,如何代言更多商铺 答案:选以上全部 10、问题:家园里卡住不动了怎么办 答案:点击脱离卡死 11、问题:家园里的浴缸可以选择不同的入浴剂泡澡,但不包括什么 https://a.9game.cn/yslzm/7815658.html
13.高端网站建设网络公司网站设计连云港app开发网站建设,网站连云港群诺品牌创意建立于2012年,是一家致力于高端网站建设以及小程序APP开发,软件定制等服务的一体化互联网公司.专业为您提供高端网站建设公司,ui设计公司,网站设计公司,高端网站建设,网站建设公司,用户体验设计,连云港vi设计,界面设计公司,网站界面设计,微信小程序开发,连http://www.qunnuo.vip/
14.连云港网络公司连云港群诺品牌创意建立于2012年,是一家致力于高端网站建设以及小程序APP开发,软件定制等服务的一体化互联网公司.专业为您提供高端网站建设公司,ui设计公司,网站设计公司,高端网站建设,网站建设公司,用户体验设计,连云港vi设计,界面设计公司,网站界面设计,微信小程序开发,http://www.weblyg.com/
15.设计最美的50个APP图标好看的应用图标推荐最好看的APP图标盘点该应用的图标设计十分独到,以中国毛笔书写体为核心元素进行创作,以类似于“反写的逗号”作为展现形式。作为一款国外的应用,The Pattern的图 【展开全部】 纪念碑谷 19481 0 苹果设计奖得主,最美APP图标之一。纪念碑谷不仅有着令人叹服的游戏设置,还有着唯美的界面设计;其图标采用立体样式,结合了游戏界面呈现的https://m.maigoo.com/top/421565.html
16.导航定位功能UI界面APP设计定位导航导航设计地图导航设计类图片素材6我图找相似功能已为您找到60张与导航定位功能UI界面APP设计定位导航导航设计地图导航设计类似的图片,包含各种高清原创导航定位功能UI界面APP设计定位导航导航设计地图导航设计素材图片,找导航定位功能UI界面APP设计定位导航导航设计地图导航设计相似图片就上我图网.https://so.ooopic.com/findsimilarity-24090546.html
17.辣椒App,美食探索必备工具,轻松下载开启美食之旅1、界面设计:辣椒App的界面设计简洁大方,色彩搭配合理,给人一种清新的感觉。 2、搜索功能:辣椒App的搜索功能非常便捷,您可以轻松找到想要的菜谱或餐厅信息。 3、菜谱质量:辣椒App提供的菜谱内容丰富,步骤详实,适合各年龄段的美食爱好者。 4、社交互动:辣椒App的社交平台让用户之间可以互相交流美食心得,分享自己的烹饪http://www.jealy.net/post/4783.html
18.UI设计像素主题图标设计 作者:李倩 清新国风主题图标设计 作者:赵淑君 马里奥主题图标设计 作者:王语嫣 怪兽联盟主题图标设计 作者:聂丽嘉 爱丽丝主题图标设计 作者:王淼 “青愿”自愿者APP服务 作者:王瑞雪、赵淑君、周慧妤、钟 紫薇垣APP界面设计 18级视觉传达设计 饭趣美食菜谱APP界面设 18级视觉https://art.tfswufe.edu.cn/xsfc/kyzs1/sjcd1/UIsj.htm
19.AI设计规范AI设计规范语音界面设计和图形界面设计不同,两者之间有着许多微妙但相距甚远的差异点。 这套AI设计规范可以帮助你理解语音优先的交互体验应该如何设计,学习基础又关键的用户体验原则,如何使用华为提供的指南和说明创造出令用户满意的语音交互体验。 当前V1.0版本主要包含以手机为主的智慧语音对话和视觉的规范,已落地于手机、电视、https://developer.huawei.com/consumer/cn/doc/31435