设计让用户愉悦的引导页的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哪款好用?8款做菜app推荐学做饭菜app教做饭做菜的app上门做菜的厨师app上门做菜app做菜视频教学app专门教做菜的软件菜谱家常菜做法app教人做菜的app学做菜app教做菜的app长沙送菜上门app家常菜谱app大连买菜送菜app南京买菜送菜app广州买菜app菜单设计模板app农村买菜送菜apphttps://m.pianwan.com/s/zj-159453
2.中国八大菜系菜谱大全app八大菜系经典菜谱app下载八大菜系app可以让你在这里学习粤菜、川菜、鲁菜、淮扬菜、浙菜、闽菜、湘菜、徽菜,海量的菜谱让你从新人小白开始学起,你可以选择喜欢的菜系学习,还可以学习多个菜系,让你感受每个菜系不同的风味。在这些软件中一般都会分类特别详细,你可以根据需求来筛选或者搜索,还为你提供详细的图文菜谱也有的提供视频菜谱,让你分http://www.downcc.com/k/badacaixiapp/
3.家常菜app哪个比较好?家常菜app下载家常菜菜谱大全app香哈菜谱app是一款集合国内各大菜系的菜谱网,让大家都可以体会到做菜的乐趣,这里有许多菜谱供你选择,非常好用,而且各个菜谱的菜都非常实惠好做,让大家人人都吃上美食吧!有 美食杰免费食谱(家常菜谱大全) 44.07M / 2024-09-29 / v8.1.1 安卓最新版 http://www.downyi.com/key/jiachangcaiapp/
4.做菜app软件大全学做饭app下载做菜教学视频app下载,其中汇集了多款好用的学做饭app,里面拥有各种美食的教程,教学视频和图文都为大家提供了,非常适合厨房小白使用,欢迎大家前来本站下载! 共26款 更新:2024-12-11 07:22:49 0 豆果美食app 8.8/108.27M /2024-12-07 让每一个吃的更好更健康! 下载 下厨房App官方版 9.1/63.96M /2024-11-27 中文菜谱更https://m.32r.com/zt/zfrj/
5.菜谱APP源码和设计报告食谱类app用户界面设计论文菜谱APP源码和设计报告 《移动互联开发》 课程作业 学院: 班级: 学号: 姓名: 日期: 设计要求(提交文档时需删除): 1.本课程设计作为《Android 程序设计》的期末考查内容。 2.任务安排: (1)确定内容:11月3日前将确定内容,雷同内容进行微调(功能,实习,界面)。https://blog.csdn.net/m0_66999594/article/details/135196504
6.[菜单设计小]图片免费下载菜单设计小素材菜单设计小模板红色简约风格点菜单菜谱设计 美味披萨海报价目表价格表美食小吃菜单设计 小龙虾点菜单图片 简约小清新奶茶店菜单设计 小龙虾中餐菜单展板 餐厅菜单设计模板报纸风格 小郡肝串串菜单设计 餐厅菜单设计唯排版简约小清新下午茶画册 小清新奶茶店菜单设计 线下店铺电视屏餐饮极简小清新奶茶菜单 网吧内部餐厅比萨店小酒馆食堂等距https://m.58pic.com/tupian/caidanshejixiao.html
7.自己制作菜单的APP推荐自己制作菜单的下载优先用豌豆荚APP下载 No.4 家常美食菜谱 生活休闲|22.02MB 家常美食菜谱提供家常菜、菜、下饭菜、素菜、创意菜几大分类菜谱,收集很多甜品、烘焙、减肥、塑形等食谱,以及来自全国各地的数十万道中华美食,汇集各种中国美食、健康食谱、家常菜、健身食谱、美食制作等食谱美食轻松制作。也有对您的健康状态,体质,慢性疾病和https://www.wandoujia.com/bangdan/555652/
8.王府菜一套菜单稿菜单 菜谱 菜单 型录设计 菜单 评论4打开App参与互动 hyidea 希望下次对菜品的摄影技术关加强,美食也是一门艺术,舌尖上的中国更是把美食提升到人文更深层的东西,所说的摆盘是菜品背后的元素吧,的确好的菜单摄影占很大一部分,设计排版讲究得继续研究。 10年前 zhouzefu 摄影太差了,你可以调图调一下。菜图是菜谱https://m.zcool.com.cn/work/ZMzQ5MzczNg==.html
9.移动UI设计菜单篇这种导航模式在现在的app设计中使用的比较少,而且一般会用做分类过多时,用户浏览容易产生疲劳2、排版灵活性不是很高 3、只能通过排列顺序、颜色来区分各入口重要 五、陈列馆式导航陈列馆式的设计通过在平面上显示各个内容项来实现导航,主要用来显示一些文章、菜谱、照片 https://www.pianshen.com/article/5147872605/
10.餐厅菜单设计免费餐厅菜单设计模板在线餐厅菜单制作设计软件菜单是餐厅提供的商品目录和介绍书,是餐厅的消费指南,更是餐厅最重要的名片之一。不论是实体菜单还是电子菜单,都应该有一个精致的排版设计,将产品和文字进行优化布局,这样能够令顾客对餐厅的印象分提升许多,能够更加吸引顾客。 核心内容 优秀的菜单首先应该有明确的分类,当顾客一目了然。善于通过文字的大小对比对菜品https://www.maka.im/zhinan/cantingcaidna
11.开餐厅如何设计菜单十个技巧教你做有颜值的菜单字体作为菜单设计的一部分,有助于提高销量。大胆地加粗吧,并保持良好的可读性。粗体字可以作为你艺术创作的主要元素。把标志设计融合到菜单设计中,或者选择比较好的字体运用到菜单设计中。请记住,因为用餐者会通过阅读文字来选择菜品,所以排版时要将字体选择考虑在内。 http://www.bjcpdy.com/nd.jsp?id=72
12.深圳画册设计公司专业画册设计公司服务:餐饮画册设计,菜谱拍摄指导,菜单设计印刷工艺指导,餐厅品牌文化建设 说明:港湾茶餐厅之前的画册,图片少,质量差,排版设计无创意,很难让人感觉出这是一家档次和品位都 行业:集团/企业/上市公司画册设计 品牌:安顺集团 服务:安顺集团画册设计,建筑装饰集团画册设计,集团形象摄影,集团画册印刷 http://www.psbd.cn/Case/list/7.html
13.印前网站印前论坛印前设计印前软件印前设备印刷最先是在计算机上作编辑、排版处理后,由扫描激光束对感光材料曝光以获得图文版面,冲片机用药水显影,定影,烘干,把片冲洗出来。欢迎在此交流讨论PS版杂件印品设计制作 月历、台历、请贴、菜谱、信封信纸、工艺礼品、DM单、名片、各种表册、会务手册及商业票据设计制作经验交流、学习分享。 https://www.prepresssite.com/
14.behance安卓版下载behance设计官方app下载v7.0.8最新版4.Behance 的管理团队每天都会从各种领域中的顶级组合探索出新作品。 5.这些领域包括设计、时尚、插图、工业设计、建筑、摄影、美术、广告、排版、动画、声效以及更多。 6.领先的创意公司可以通过 Behance 发现人才 7.数百万的访客也可以使用 Behance 跟踪最新和最杰出的创意人才。猜https://www.qqtn.com/azsoft/394886.html
15.良心推荐:6款超好用的功能便签提前规划好本周的料理,可以一次性采购,更加方便。此处推荐懒饭这个app,它的教程都是视频的特别好学,而且最近发现了“每日饮食计划”这个栏目,它会给每天吃什么提供一些饮食方案,可以按照自己日常的饮食习惯来筛选调整计划,非常让人省心! 2.菜谱+购物清单结合: http://www.360doc.com/content/20/1215/09/47115229_951596431.shtml
16.卷王都在用!100款宝藏级AIGC工具分享,强烈建议收藏!!其文本数据和相关信息来源于权威媒体和政府公开网站,题材覆盖讲话、总结、计划、新闻等多种写作场景,并与金山文档打通,可实现文本云端同步上传,用户在线写作后可以转到金山文档进行更加专业的排版等文档编辑。网页链接:https://aiwrite.wps.cn/#/11、GrammarlyGo:在线语法“捉虫师”英文拼写检查工具Grammarly也推出了AIhttps://www.changbiyuan.cn/news/2023/news_0711/69335.html
17.十大平面设计软件平面设计常用软件好用的平面设计软件有哪些→多年来,PS几乎在所有的广告、出版、软件公司,都成为了设计师们的首选平面工具。<详细> 02 Adobe Illustrator 5632 0 AI是全球最著名的矢量图形软件/平面设计软件,主要用于印刷出版、海报书籍排版、专业插画、多媒体图像处理和互联网页面的制作等,也可以为线稿提供较高的精度和控制,适合生产任何小型设计到大型https://m.maigoo.com/top/419702.html
18.Tesla特斯拉字体设计下载欧莱凯APP或小程序 相关标签搜索 Lexi Griffith 字体 字母 当前位置:网站首页 - 图库素材 - UI设计 - 字母图片信息简介:Tesla特斯拉字体设计·图片编号为933932,上传时间为2014-06-01 03:22:11,格式为JPG,颜色模式为RGB,分辨率为72 Dpi。特别提醒:本站所有作品收集于网络,版权均属各自所有者,本站素材仅https://www.2008php.com/tuku/933932.html
19.原创服装设计手绘代画效果图临摹线稿印花图案款式图打版图结构图1.京东价:京东价为商品的销售价,是您最终决定是否购买商品的依据。 2.划线价:商品展示的划横线价格为参考价,该价格可能是品牌专柜标价、商品吊牌价或由品牌供应商提供的正品零售价(如厂商指导价、建议零售价等)或该商品在京东平台上曾经展示过的销售价;由于地区、时间的差异性和市场行情波动,品牌专柜标价、商品吊牌http://item.m.jd.com/product/10122628173458.html
20.乐发app旧版下载官方版下载比如,要注意文字的内容和排版是否符合幻灯片的整体主题,避免出现不协调的情况。要注意观众的视角和阅读习惯,保证文字的呈现方式符合观众的习惯。 通过本文的详细阐述,我们可以看到PPT幻灯片让文字从右往左的方法在设计布局、动画设置、文字处理、视觉效果、操作技巧和注意事项等方面都有着一定的要求和技巧。只有充分掌握http://www.1717139131.ltd/617/detail/54438225/
21.再突破!我校师生在第十二届未来设计师·全国高校数字艺术设计大赛据林资芝介绍,通过膳食机与APP搭配,可以生成适合老年人的专属营养菜单,同时检测身体所需营养与各种菜谱搭配并有效解决老年人手脚不便导致的做饭问题。 《膳食宝》 | 林资芝 | 国家级一等奖 公共艺术学院孙蕾老师指导学生王晶创作的《〈流浪者〉书籍装帧设计与制作》荣获全国视觉传达设计类一等奖,“流浪者”蕴含了丰富http://jwc.wids.edu.cn/view/24341.html