设计让用户愉悦的引导页的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.常用快速原型设计工具大比拼原型设计工具哪个好用常用快速原型设计工具大比拼、原型设计工具哪个好用 原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。https://www.jb51.net/php/152695
2.原型设计工具用哪个比较好?4种原型设计工具优缺点对比分析对设计师来说,一款好用的原型设计工具可以让他们的工作效率大大提高,能省下很多时间。当然,不同的原型设计工具都有一定的差异!那么到底哪个原型设计工具比较好呢?下面给大家推荐几款好用的原型设计软件,有需要的朋友可以根据自己的需要进行参考。 1、Axure RP https://www.niaogebiji.com/article-105555-1.html
3.原型设计工具有哪些?7款好用的原型设计工具推荐产品原型设计工具是设计师制作产品原型必不可少的工具。产品原型工具能帮我们解决很多问题,但是产品原型工具的选择却成为一大难题。除了我们熟知的产品原型设计工具Axure外,其实市面上还有很多好用的产品原型设计工具,例如Pixso。本篇文章,将分享7款好用的产品原型设计工具,话不多说,干货奉上! https://pixso.cn/designskills/yuanxinggongjvtuijian/
4.2024年10款好用的原型设计工具推荐在产品开发过程中,原型设计是非常重要的一环,它不仅有助于团队间的协作与沟通,更是产品是否符合用户体验的关键,本文中我们来推荐几款好用的原型设计工具 Axure Axure是一款非常强大的原型设计软件,支持Windows和macOS,它将将线框和原型设计的功能集于一身,让设计师无需代码就能够创建逼真的网站和APP应用的交互原型https://www.v1tx.com/post/best-prototyping-tools/
5.前端设计工具哪款好用?这5个不容错过前端设计工具都有哪些?哪个好用?5 个高效实用的前端设计工具,包括:即时设计、AxureRP、AdobeXD、Figma、WordPress 都是不错的选择。这几个前端设计工具在设计师行业中口碑比较好,受好评度也比较高的 5 款前端设计工具,大家可以根据自身需要和真正的使用感受进行选择取用。好了,接下来就是有关前端页面设计工具的具体https://js.design/special/article/good-front-end-design-tool.html
6.好用的界面原型设计工具超炫超酷超好用比viso强百倍资源标题中的“好用的界面原型设计工具 超炫、超酷、超好用 比viso强百倍”指的是这是一款比Visio更强大的界面原型设计软件,它具有出色的用户体验,炫酷的设计元素,以及易用性。Viso通常被用于创建流程图和基本的界面原型,但此工具似乎在功能和设计效果上更胜一筹。 描述部分提到的“下载后先安装AdobeAIRInstaller.exe”https://download.csdn.net/download/libinlink/2270144
7.《界面设计》复习资料2.对于交互设计师来说,下列对Sketch描述不正确的是() A.上手简单B.功能强大C.同时能满足交互和视觉的设计需求D.没有Photoshop好用【注释】:第一章1.1 第2页 似乎交互设计师需要一款上手简单,但功能强大的全能型设计工具,最好能同时满足交互和视觉的设计需求,来帮助自己完成蜕变,这款神奇的工具就是Sketch https://www.wjx.cn/xz/260641939.aspx
8.UI/UX必看!5款强大又好用的AI原型设计神器优设网大家好,这里是和你们一起探索 AI 的花生~今天为大家推荐 5 款目前较热门的 AI 原型设计工具,与 Sketch、Figma 等 UI 设计工具相比,它们可以实现文本/图像生成 UI 设计、图像智能处理、文案智能重写、设计灵感推荐等操作。这些工具不仅能提升设计师的工作效率,而且对产品https://www.uisdc.com/ai-prototype-design
9.MasterGo它提供了产品界面设计、交互原型制作、网页/APP开发设计等功能,且支持团队协作。软件简单易上手,并能搭建“设计系统”,实现设计组件一键复用、一处修改全局同步等功能…… 推荐:Eagle 设计素材收集整理神器 「Sketch / PS / Xmind / ProcessOn」 好用的免费产品原型设计 / 矢量 UI 界面设计软件工具 MasterGo https://www.iplaysoft.com/mastergo.html
10.ProtoPieforMac(高保真交互原型设计工具)v2.3.1中文激活版哪里有好用的高保真交互原型设计工具?MacW小编为您推荐ProtoPie破解版下载,它无论是拼出高保真原型,还是建立传感交互,都非常的易用,并且能够让你快速分享你的杰作。同时这也是一款无代码原型工具,让无编程基础的你轻松组合即可制作交互动效,摆脱代码束缚体验感应式交互。本站提供ProtoPie破解版下载,需要的朋友快来下载https://www.macw.com/mac/849.html
11.十大原型设计工具,UI界面设计原型设计软件排行榜2024年原型设计工具十大品牌最新发布,原型设计工具排行榜前十名品牌有Sketch、Figma、Axure RP、Adobe XD、摹客、墨刀、莫高设计、Pixso、Proto.io、即时设计。原型设计工具10大品牌排行榜由品牌研究部门收集整理大数据分析、研究得出,帮助你了解原型设计工具哪个牌子好。https://www.maigoo.com/maigoo/9593yxsjgj_index.html
12.101种最热门的EdTech工具Buncee 被用作课堂演示工具,用于回顾和介绍符合课程标准的内容。此外,Buncee还能记录学生的学习模式和“踪迹”,包括选修的书籍报告、研究项目、数字故事、基于项目的学习、感兴趣的项目和创造的时刻。有了Buncee易于使用的创作画布,学习只需要一个拖拽动作,整个过程变得简单有趣。https://36kr.com/p/829435155242882
13.产品经理方法论——构建完整的产品知识体系第3章主要介绍了产品流程图的定义、作用和画法,并结合实际案例讲述了如何画好一般流程图和泳道流程图。 第4章不仅介绍了如何画好产品原型图,还讲述了常用的原型设计工具,并对产品原型设计经验进行了总结。 第5章介绍了业务架构图、功能架构图、信息架构图、混合架构图的画法。 https://labs.epubit.com/bookDetails?id=UB77f4ce6cd71d0
14.原型工具Axure和墨刀哪个更好?简介:原型工具Axure和墨刀哪个更好? 1.常用功能对比 1.1Axure 软件 首先我们对比一下Axure 软件的布局如下: 1.2墨刀软件 从软件布局上都是采用了三段式的结构设计:左侧展示页面和元件,中间都是画布区域,右侧是样式和交互设置区域。 2.元件库与组件库对比 https://developer.aliyun.com/article/1369969
15.设计工具好的设计工具不仅可以让设计师的工作更轻松、成果更出色,也能让沟通协作更顺畅,实现设计与协作双双高效率!? 本文将介绍设计工具:亿图图示、ProcessOn、墨刀、即时设计、xiaopiu 原型平台、蓝湖助手、智令互动视频创作平台、易企秀 H5、特赞创意商城。? 亿图图示? 亿图图示是一款专业易用的综合绘图软件,可以https://www.feishu.cn/hc/zh-CN/articles/360049067968
16.16种原型制作工具及使用介绍[译]每人都在问:“哪个原型工具是最好的?” 这是个错误的问题。 The correct question is: “Which prototyping tool is the best for my current objective?” 正确的问法是:“为达成我现有目标,哪个原型工具是最好的?” Spoiler alert: everyone should be skilled in multiple prototyping tools. One is not enhttps://www.jianshu.com/p/4ead159e23df
17.5款最好的安卓界面设计工具推荐Mokcplus的线框图设计还是已清晰的实线为主,它更希望在向开发人员表达设计师想法的同时,保持尽可能的简单和整洁。同时,在项目建立的第一步,用户就可以根据自己的需要来选择手机的模板,这个功能在安卓界面设计工具可以说是实惠又好用。 3.Adobe XD 原型和线框图设计的市场日渐壮大,作为设计工具行业中的企业大佬https://www.rologo.com/5-kuan-zui-hao-de-an-zhuo-jie-mian-she-ji-gong-ju-tui-jian.html