优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 17 分钟
编者按：今天的译文绝对值得设计师收藏！来自设计网站的龙头老大Smashingmagazine，专业全面，条理性强，一篇文章几乎包括了移动应用引导页的全部设计方式，还分析了知名APP的反面例子，可以说是搞定引导页的最实用指南，赶紧来学习下！
译文很用心，原文有误的地方都有提醒，欢迎同学们关注译者的微信公众号“开卷有译”。
如今，移动应用对首次使用的用户呈现欢迎页这种方式已经越来越流行了。这样做的目的就是向用户介绍并展示我们的应用。
引导页往往是与用户进行交互的第一组界面，于此同时，这些界面还将影响用户对应用的期望。因此，对于参与到产品研发的团队成员——产品经理、设计师以及开发人员来说，花些时间好好评估一下这些引导页是否必要就显得至关重要了，一旦需要，那就做到最好 。
本文将提供给您一些设计引导页的小贴士、一些常见的实现方式、不同的设计方法以及资源，以帮助您为用户提供最佳的体验。
是否需要引导页？
近年来，关于移动应用引导页实用性的讨论层出不穷。于此同时，也流行着另一种反对的声音：如果一个应用需要引导页，那么它本身就是一个缺陷，因为这说明了该应用缺乏简单和用户友好的基本要素。虽然听起来很有逻辑，但这个结论毕竟过于笼统。
数字化设计中有大量的规则和成功案例，这是很好的。这些规则让设计师和工程师不必每次在开发一个产品的时候都需要推倒重来。更重要的是，它们避免了用户在使用全新的应用时手足无措，相反，用户可以放心地知道编辑功能是由铅笔图标代表的，“大拇指”的图标则代表了“喜欢”。规则总是个好东西。
但事实是，每个应用都有其独到之处，它是做什么的、怎么做以及谁使用它。应用间的这些不同点使得引导页在特定的情况下成为一个可靠、务实、人性化的功能存在。让我们来看一些使用案例。
在学习干货之前，来这里看看什么知名APP的引导页是怎么设计的！，以下高能，集中精神了！
使用案例1： 非常规交互
如果应用所支持的交互行为并不是大部分用户能够轻易通过常规方式找到的——尤其是主打手势交互的应用——那么引导页是必不可少的。手势驱动的应用程序目前仍处于试验和探索阶段，因此，开发人员需要指引用户如何用这些手势进行交互，清晰呈现每一个手势以及它们相对应的功能。
例如，闹钟应用Timely，就给用户详细地指出了点击屏幕中的具体区域会使闹钟的时间增加或减少5分钟。
Timely针对每个手势都对用户进行指导并且展示出期望的结果。
使用案例2：空页面
那些默认为空页面，并且需要用户通过一个或多个步骤才能填充内容的应用，也是非常适合使用引导页的。即便引导页只有一个步骤，也能让用户打消疑虑，知道自己的操作是正确的。
Feedly展示了用户该如何在应用中获得第一批内容
使用实例3：系列产品
如果你的应用是一个产品系列中的一部分——比如，产品同时还有桌面端和网页版——引导页可以大大提高用户体验，尤其是当移动应用不具备其他版本的全部功能时。这在复杂的企业应用中更显得尤为重要，因为不同的版本都有其针对的用户角色、特定的访问权限和以及安全限制。
大部分情况下，网络版和桌面端会支持所有功能（如创建、查看、编辑和删除内容），而移动应用就相对局限（比如只支持浏览）。在这种情况下，简要介绍移动应用的功能也将帮助现有用户了解移动端在整个产品系列中扮演的角色。
使用案例4：个人信息
如果您的应用程序依赖于用户的个人信息（如年龄、体重、性别、婚姻状况），那么可以通过引导页来收集它们。通过一步步的引导，
用户可以清楚地知道为什么应用需要这些信息。记得确保允许用户可以随时更改这些信息 （通常是通过应用中的设置）
Fitbit 告诉用户为什么需要进行个人信息的采集并且引导用户提供它们
即使你的应用不适用以上任何案例，用户仍可以通过引导页受益。谨记任何与产品进行交互的用户至少都需要知道他们能通过这个产品得到些什么。而这些也是你可以在引导页中呈现的信息，我将在之后的功能导向引导页(译者注：原作者应该是写错了，结合上下文，这里应该说的是“利益导向引导页”)中详述。
当然，我们的首要责任是设计直观，易于使用的产品。但是，我们不应该因此而放弃引导页，它能给用户带来价值并且提供更加令人愉悦的体验。
该用何种方法？
通常来说，引导页的设计有以下三种方法：
－ 利益导向
－ 功能导向
我们来逐一看看并且探讨一下它们的设计规范
方法1：利益导向
这样的好处不言自明。通过这种方法，你能让用户知道应用能带来的好处，让用户了解如下的问题：
我们的应用能做些什么？
用户如何在生活中使用它？
这样使用能给用户带来什么价值？
NYT now通过清晰简要的描述给用户展示了它能提供的益处
应用这个方法，需要考虑到如下原则：
最大化展示应用的三个好处
这个数字并不是一个硬性规定，出于给用户快速预览的目的，三是个安全的数字（不包括标题页）。这样，用户即能了解该应用也不会因为过多的信息而感到厌烦或是被拖慢使用的节奏。
一页只说一件事
回想一下你听过的演说中什么样的信息能让你印象最深刻。一个幻灯页面中仅有一个清晰且有重点的信息也许是最易形成冲击而且最难忘的。这同样适用于引导页。
“一页只说一件事”的规则有助于用户关注内容并且分开消化吸收。一次性将所有的内容都展现出来不仅在视觉上有许多干扰，更会分散了用户的注意力。
优先级，优先级，还是优先级
控制住自己想要展示应用中酷炫部分的冲动。回到用户数据，提醒自己用户面临的问题以及他们的需求。然后，想办法通过引导页来告诉用户我们的应用是如何切实地回应他们的需求。
使用一致的词汇
Evernote Food，在文案中使用动词来快速吸引注意力，并传达其主要益处。这种方法相当高效并且足够简洁。如果你憋不出几个高大上的动词或形容词，那么简单的短语或两个词也行。只要你能确保它们的一致性。工整连贯的文案，无论是在视觉效果还是语言上，都有助于给产品的用户体验提供积极作用。
Evernote Food突出说明了用户通过应用能得到的实际好处
引导页先于注册／登录
引导页提供的是应用的概况，应当在用户注册或登录前展示。一旦用户决定进行登录，用户并不希望被你提供的“益处”所打断。
或许你还在纠结引导页是否有必要。难道它不就只是在重复应用商店（App Store）中的描述吗？完全不是。 App Store中的描述有包含各种信息，甚至有应用的大小，而引导页需要简洁，正因如此，请专注于重中之重。此外，很多人会跳过应用商店的说明然后去尝试探索应用。所以，一个简单的说明能够帮助用户很快了解我们的应用。
别学！这是反面教材
Readability是个超赞的工具类应用，不幸的是，平台间的一致性并没有做好。它的设计失误在安卓版的引导页中尤为明显：
用户一共有7页的内容需要阅读消化。
有些页面中的说明文字太长。例如，关于共享的那一页完全可以简化，显示分享的内容以及社交网络的图标。
其中有一个页面在鼓励用户安装Firefox（火狐浏览器）的插件，这似乎放错地方了，而且之前的一页还提到了“Readability是个网页和移动应用。”移动应用的引导页不应该成为系列产品的营销手段，应该关注在移动平台相关的内容上。
避免出现过多页面，并且保持内容与平台的相关性
方法2：功能导向
另一种选择是放弃对益处的展示，把重点放在应用的关键功能上。这有时也被称为“指引标记“。使用这种方法，你需要给用户展示：
什么是关键的功能（例如，如何开始或什么是最常见的操作）
何时使用（例如，查看搜索结果）
如何使用（例如，点击或左划）
Carousel 一上来就给用户介绍了关键功能
使用功能导向来设计引导页，需要谨记：
显而易见的无需说明
从互联网兴起之初，无论时桌面程序还是网页亦或是移动应用中，“X”始终代表关闭，退出或取消。所以，除非该图标在你的应用中有不同用途，在引导页中给予说明没有任何意义。
Adobe Kuler给用户展示显而易见的东西
分成三页，每页介绍一个功能
如果你想用幻灯片的方式来介绍应用的功能，可以用上文我在“利益导向”章节中提到的原则：最多三张图（不包括标题页），每张图介绍一个功能。
帮助用户入门
如果你的应用打开时默认是个空页面的，你可以围绕这点来设计引导页。不要让你的用户第一次打开应用就面对一个空白页，你可以给用户一个快速上手的指南，这样他们就不会疑惑——哪怕只是一秒钟——这个空白页到底是个问题还是功能需要。
Spendee 通过告诉用户如何开始使用以打消他们的疑虑
引导页先于注册／登录
理由同上文“利益导向”章节的说明
别学！这是反面教材
摄影应用500px有着令人惊艳的内容和丰富的功能，一直被用户称道。 然而，iPhone版的引导页却有许多不得体的地方：
详细展示了应用的导航栏以及具体功能，告诉用户他们可以通过导航栏来使用，但是这是件显而易见的事情。
一些页面展示了如喜欢，收藏和分享按钮。所有这三个功能都是由那些常用的图标来表示，所以通过引导页来解释是不必要的。即使我们假设，有一部分使用500px的用户并不了解这些图标。那么，基于使用情景的渐进式引导可以更好的为用户服务（例如，当用户正在浏览照片时，他们可能用得到“喜欢”）。
其中一页展示了“流”的概念，即时间轴，用于展示用户关注的人的动向。因为用户只有在关注了一些好友以后，时间轴才能让用户获益，那么在用户至少关注一人时以渐进式的引导来介绍会更好。
500px其实可以尽量避免在单页中介绍过多功能，可以留到用户遇到时再介绍。
方法3：渐进式
通常，用户都是通过实践来学习的。这或许也解释了渐进式引导盛行的原因，渐进式的引导就是一场真实的演练，在用户使用的过程中给他们展示需要的信息。例如，当用户在仪表盘的界面中只会看到仪表盘有关的信息；而当他们查看搜索结果时，也只会看到搜索结果相关的功能。
Feedly随着用户的使用展示相应的提示。
使用渐进式引导你需要了解以下几点：
简化复杂流程
如果你的应用有一个相当复杂的工作流程或是用于处理复杂任务（如财务方面的功能），那么渐进式引导是一个不错的选择。你只需要在流程中合适的时机提供用户相应的信息即可，这样用户也有时间来慢慢消化。
用于隐藏功能
在开发移动应用的过程中，我们一直都很关注于如何更有效地利用小屏幕，这有时需要隐藏一些菜单和功能，只有通过例如一个双击或长按才能看到。在这种情况下，可以使用引导来让用户知道这些隐藏功能所在。
以Pocket为例，如下图所示，阅读列表中的每一项都可以进行一些功能的操作，但是用户需要用左滑的手势才能看到。由于用户需要手动添加内容到阅读列表，一个很好的处理方法就是等到用户至少添加了一个项目时，马上指出，通过左滑手势可以调出这些隐藏的功能。
Pocket可以通过渐进式引导用户使用隐藏的功能
手势类应用的理想选择
如果你的应用完全是手势驱动的，那么这种实战式的引导式是最好的。让用户随着使用的过程进行操作的引导，通过这种方式给用户介绍功能，会更容易让用户记住。
Solar展示了每个手势的功用，让用户边做边学。
确保引导一直都在
对于那些手势驱动的应用，提供了一个手势和它们对应的操作的列表是十分必要的，或者可以放在设置中。
记住，你提供的手势越多，用户必须记住得就越多。并且用户在设备上的安装的手势驱动类应用越多，他们就可能遇到更多的困惑，因为他们可能需要去记住不同应用中双击手势的区别。确保这些引导信息可以随时被调出，可以做为一定程度上的弥补。
Beats Music提供永久存在并且能够快速访问到的手势列表。
什么不能做
由于渐进式引导是用户探索应用的辅助，最大的风险在于持续不断的提示可能会毁掉一个原本美好的体验。因此，小心使用这种方法，确保只显示给用户最有用的信息。
此外，避免在每一个界面中都突出一些功能。给用户一些喘息的空间，让他们从探索中获得愉悦感。这不应该是应用里糟糕体验的替代品，而是提升用户体验的方法。
以上介绍的方法都是时下最流行的。但是，你也可以有其他不同的选择！
替代方案1：混合使用
混合使用有时也是可行的，如同Flink展示的：
Flink结合使用了引导页设计的方法。
替代方案2：视频
有一些应用使用了视频进行引导，这种方法是值得研究思考的。视频可以有不同的侧重，有些视频更为实用，类似于新手教程，而有些则基本就是广告。如同网站上的视频，自动播放会对用户造成干扰。而且用户使用移动设备很可能处在公共空间，声音播放就显得不那么合适了。
Fifty-Three用视听效果来展示应用。
替代方案3：试用数据
提供了一些试用数据供用户尝试也是值得一试的方法。尤其对于那些处理敏感数据，例如财务或是人力资源数据的应用，显得特别有用。如果应用预先设置了试用数据时，用户会卸下担忧去尝试、犯错以及学习如何使用这个应用，为他们录入真实数据做更好的准备。
Xero为用户提供了试用数据，帮助他们了解应用。
希望本文中的指南和案例对你的引导页设计提供帮助，然而，永恒不变的话题——用户才是一切的关键。因此，当你评估要使用哪种方法时，请重新审视一下你的人物角色、用户场景以及任何用户数据，无论是通过分析得到的还是市场研究得到的。
如果你还是不确定该用哪种方法，那么借助用户测试，测试一个或多个方法，然后分析一下用户的反馈，看看什么可行，什么不可行。没有任何解决方案是通用的，所以，请一如既往地善用数据来做出最明智的决定吧。
超实用的指南好文合集！
色彩知识大科普！再也不做“色盲”啦！
帮你全面搞定抠图的那些事儿！
阅读量过10万的超人气自学指南！
原文地址：
译文地址：
译者：开卷有译
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量77万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
免费可商用！15款高质量的英文字体打包下载！
神说，要有好字体。于是就有了这组高质量的收集。神继续说，要免费，于是这组字体可商用。最后，神还没来得及说，小编已经打包好了，九月字...
雨涵_Zoe：最近为了设计提高效率和质量，我开始研究如何做规范。看了一圈别人做的设计规范，又回想了一下自己以前做的，总结了以下几个经验。 说到设计规范，这里...编者按：同学们除了每天紧跟优设的#每日作业#熟悉软件，想在能力上有质的提升，还得多花时间学习高手们的创作过程。今天腾讯的设计师把一个QQ空间视频广告的创作思...编者按：说设计是带着镣铐跳舞一点错都没有，看似自由，实际上其中包含了太多的潜在规则。这些规则有些是从基本的设计原则中延伸出来的，还有一些则是约定俗成的。它们...@姬小光 ：在互联网产品的研发流程中，页面的视觉还原是很重要的一个步骤，也往往是问题最多的一个环节。如果一些细节问题在这个环节没有被有效地发现并解决，那么后...无论你是做网页还是App设计，文字内容总是能占到整个版面将近80%的区域。因此理解字体与排版对UI设计师来说非常关键。你需要始终把内容的可读性放在首位去考虑...对于APP而言，通知推送无疑是重要的组成部分。很多时候，用户会因为讨厌通知推送而卸载APP，而有的时候，用户会因为一两条走心的推送，而对某个APP青眼有加。...对于Tubik Studio 团队而言，过去的2017年迎接了不少挑战也开拓了视野。作为战斗在UI设计第一线的设计团队，Tubik Studio 对于UI设...在设计哪些服务于日常生活的产品之时，市场调研是绕不过去的，设计师需要仔细思考目标受众，并且仔细推敲产品应该以什么样的形态呈现。回过头来看看日常的工具类应用，...@围脖上的嘟嘟王子 ：这篇依旧是读书笔记，只不过记录的不是整本书，而是《About face 3交互设计精髓》中的一个知识点，这个知识点非常重要，重要到需要...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里移动端引导设计技巧1：前置的引导页-阿里云资讯网
移动端引导设计技巧1：前置的引导页
发布时间：
更新时间：
来源：网络
上传者：用户
引导是带领用户更快速更愉悦地达到目标的过程，能在用户使用产品遇到障碍之前给予及时的帮助。在移动互联网的产品的设计中，新手引导的设计则是在用户初次使用该移动产品时，给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式。为了完成不同的引导内容和引导的目标，移动端的引导设计会根据需求进行不同的多样化处理。根据引导出现的时机，可以分为前置型的引导与过程中的引导。
前置型的引导：在用户还没有正式开始使用这个产品时给出的一系列帮助内容。主要的设计方式为引导页的设计。过程中的引导：在用户使用产品的过程中给出的一系列帮助内容。主要的设计方式有空白页的内容引导，loading等等待状态中的引导，拆分包袱的逐步引导，巧设默认值的功能引导，tips引导，浮点引导，遮罩聚焦式引导，触发式引导，任务演练式引导等。
由于篇幅所限，本篇博文主要针对前置型引导的引导页的设计详细论述，而对于过程中的引导会在后续博文中奉上。
&引导页的设计探究
引导页作为前置型引导，必然前置型引导的特征。用户是在使用前看到引导页的内容，此时用户对这个产品的了解并不多，对于如产品的功能/页面布局/具体使用等还没有建立起完整的认知。所以引导页更适合阐述产品的概况内容（如具有产品的概念，产品的核心功能，具有竞争力的功能点或用户痛点，以及会影响到初次使用的操作方式的内容），建立起用户对产品的大致认知；而不太适用于阐述过于细节的产品内容，因为此时用户还无法进行相应的信息匹配，细节内容会不容易理解。
虽然引导页有上述的限制，但是由于它具备的很多，让它作为一种非常常见的方式来使用。
具体的优点：1）篇幅设置可自由设定，在一定范围内可多可少；2）全屏或几乎全屏的信息呈现的方式，使得信息的可承载量多；3）内容的编排自由，设计师可以自由发挥。
所以引导页是一种在设计上较灵活自由的方式。但是在实际的使用中，我们还是常常会发现设计的效果并不容易达不到预期。用户常常不会仔细浏览这些引导的信息，对于引导的内容信息的接收程度会打折扣，很难全部吸收；还有不少情况下用户会跳过引导，忽略引导想提供的帮助信息。那么，如何做能让我们设计的引导才能引起用户的兴趣，让他们花费一点精力去吸收引导的内容信息，这需要一些技巧。
最核心的技巧有4点：精简与合理使用& & &细致编排 && &有效的注意力 && &构建特色。
&精简与合理使用
在引导页设计的泛滥时代，绝大多数的APP在首次使用中都会设计几页引导内容。
设计师需要把控引导的内容。只做必要的引导页内容。没必要的引导内容会增加信息的冗余性，冲淡真正需要用户关注的信息的注意力与精力。
在设计之前，我们要对用户初次使用该APP时的心理与使用行为进行分析，并不是所有情况都适合使用引导页的，要对不适合的情况say no。
适合与否的依据主要是在真实的使用场景中，用户是希望能对这个产品有个大致的了解，还是希望快速启动产品立即使用，在使用的过程中再慢慢学习。如果用户是希望快速启动产品使用中出现过于的引导会引起用户的方案。
具体较适用的情况：
1.对于一个新概念的新产品，用户需要对这些新的概念或内容有所理解才能更好的使用产品。（下图为Vida的引导截图）
2.竞争力的或有吸引力的内容点的介绍。（下图为支付宝和糯米团购的引导截图）
当确定了引导的内容后，我们需要对引导的内容进行细致的编排。具体的编排可以分为平铺直叙述和讲故事的方式。平铺直叙是将一个一个内容点罗列，之间没有建立什么联系。而讲故事是将内容串联起来变成一个的故事。1.讲故事的方式，使引导具有情景性
讲建立与用户使用情景匹配的场景，让用户能建立一种熟悉的感受，能让用户对引导的功能点感同身受。
串联的故事一般而言都是多页的形式。一步抛出一个需告知的点，循序渐进的解说。故事可以只围绕一个功能点来叙述，也可以将多个功能点串联起来变成一个故事。形成一个完整的故事。
由于每次一个告知点，多会采用聚焦的设计手法，把视觉注意力吸引到每个告知点上。
讲故事的主要目的是希望构建用户与产品之间的联系。让用户感觉到产品与自己是有关系的，现在所说的内容是与我相关的，我需要花费精力来关注一下。如果完全建立不起关联，很容易让用户忽略。
微信4.0的引导就是一个编故事建立关系的好例子。在微信在推出4.0版本的时候，新增加了类似Path和Instagram一样的相册功能，并且可以把相册分享到朋友圈。这个功能的加入拓展了之间仅是沟通聊天工具的产品定义。在4.0版本的新功能引导中，它非常成功的讲诉了一个关于相册功能的故事，并且在设计内容时非常注意建立联系。在故事阐述中它一直强调用户可以怎么样，让用户能明确感觉到与自己的关系。
2.讲故事的主要手法——故事可以是以情动人，痛点渲染，角色榜样类比等方式A. 动之以情
营造出具有浓烈感情色彩的场景，唤起用户心底的情绪，让用户产生对产品的共鸣。当产品附加了感情的元素，产品就会让用户形成一种情感上的联系，用户对产品的好感也会增加。
打感情牌的手法比较适用于具有社交性的产品引导。
在设计中不论是背景图片还是文案都致力于感情气氛的营造。（下图为人人网的引导截图）
B. 痛点渲染
建立一个用户在实际生活中会遇到的类似的不便的场景，让用户能感受到共鸣，唤起用户对所述功能的需要感。然后给出该产品能给出的解决方案，可以让用户感觉。
戳痛点的手法比较适用于实用的工具性的功能引导。在设计中文案：可采用痛点式文案，或者是非常具有颤动性的文案。
C. 角色榜样类比
通过建立用户熟悉的人物角色，来描述其他人会用这个产品来做什么，这种方式可以拓宽对产品功能使用的场景与多种其他可能性。启发用户对这个产品的想象。建立的熟悉的人物形象会让描述变得具体而形象，会从而引发当前使用的用户形成一种类比的心理。
这种方式适用于对产品整体功能的介绍，对于新老产品的功能介绍都适用: &1）老产品用此方法可以启发用户拓宽对既有功能使用的其他的可能性，拓宽使用场景。2）新产品用此方法可以让用户对这个产品的整体功能有更多的。
设计要点：1）用户角色渲染得让人觉得可信，能让人很容易联想到自己也会遇到类似情况。2）文案：可采用比较具有亲和力，质朴的文案。
（下图为印象笔记的引导截图）
D. 范例吸引
将引导的内容融入真实的界面中，通过合理选择呈现的内容来让用户可以通过界面上的信息来感知产品所具有的功能。这种引导形式可以很好的在第一时间向用户展示产品形态，建立用户的兴趣；范例能让用户预知在使用产品时界面会是什么样子，能让用户对实际界面有充分的了解，并且能让用户看到产品完整的功能与形态。但是这种方式是一种界面呈现，用视觉效果去吸引用户的方式，所以对产品本身有一定的要求。
适用条件：1）界面本身的设计需具有一定的创新性/美观性/吸引力，这样融入到真实界面中的引导才能具有吸引力。2）产品本身若需要通过用户的经营才能慢慢达到一个完整的形态，那么这种真实界面的范例的方式能勾引用户增加对产品的使用的兴趣，并且能让用户对产品功能理解得比较充分与完善。
设计要点：1）引导中要呈现的内容需仔细挑选，能把产品的典型功能与特征充分展示。2）文案是比较亲切的。
（下图为Path的引导截图）
E.平铺直叙的方式
如果内容点无法串联，只能一一罗列，那么在设计中我们可以——
1.对每个内容建立场景。
2.放置具有吸引人的或具有竞争力的内容。
3.根据记忆的效果的原则合理排序。将最需要用户关注的内容放在最前面。（记忆的效果：最前面的内容记忆效果&最后面的内容记忆效果&中间部分的内容的记忆效果）
4.精简引导的内容。不要放置太多的引导页。
5.对于每页的设计可以参考下面的有效的注意力里的设计技巧。
&有效的注意力
注意力是记忆力的基础，记忆力是注意力的结果。没有良好的注意力就没有良好的记忆力，良好的记忆力是建立在良好的注意力基础上的。
我们所设计的引导页也需要能吸引用户的注意力，让用户能够花费精力来阅读我们想告知他们的信息，以达到一种有效的注意力。具体可以怎么做呢？
我们可以从不同的内容与设计方式上提高效果，以下一一阐述。1.聚焦
界面中不要有过多的视觉焦点，容易分散用户的注意力，导致用户不知道该看那里。
当界面中的信息聚焦在某一点上时，用户能快速准确定位到需要阅读的信息内容上，达到消化信息的目的。
聚焦的设计手法有很多种，如通过光影的方式，将亮光的部分打在最需要用户关注的信息上；虚化背景的方式，突出前面的信息内容；放大镜方式，将需要用户关注的部分作为放大突出。当然除了所举案例中的常见手法，还可以运用其他的方式来聚焦，只要可以达到效果即可。
信息的聚焦需要设计师对信息的内容进行取舍，尽量剔除不需要的内容。
若精简后依然内容较多，那么可以通过拉开信息的层次来使得信息可以聚焦。在设计中尽量将内容整体化，形成几个大块的信息，不要过于琐碎。琐碎的内容不利于信息的获取。由于用户对信息的认知是有整体到细节，用户在阅读内容的时候，更习惯先将内容先抽象成一个整体，然后再仔细阅读整体中的细节内容。所以我们的设计的过程中需要让用户能够很快地抽象出整体的信息。
图例为反例。案例中的设计让页面中形成了过于多的发散点，用户的阅读时难以梳理成整块的信息，增加了信息获取的难度。
2.优化图片所传达的信息
人类对于图片信息的阅读能力是远大于对于文字信息的理解的。图片可以更加直观地让用户感知到所要传递的信息。
在不同的图片中，人们对人脸，美女，笑容，具有动感的照片更容易引起用户的注意。
同样为美肤的功能引导，左侧的设计不需要文字就可以让用户理解可以美肤，而右侧的设计若只看图是无法理解的。左侧的引导设计比右侧的引导设计更加直观好记忆。
3.除了静态的视觉画面，我们还可以增加用户对于引导内容的注意力。
现在的引导页的设计多为静态的视觉页面。人类对于动态内容的注意力& 对于静态内容的注意力。所以除了静态图片的方式，我们完全可以通过适当增加动态内容来吸引用户的注意力。
图例为QQ水印相机和Flava的引导页。
QQ水印相机的引导页就是使用动态注意力，的每页用一个图钉钉着一副照片，而照片会已图钉为圆心轻微地左右摆动。Flava同样，中间的图片的部分都是动态的演示。这2个设计都非常容易让用户对动态部分的内容引起注意，从而阅读相关的内容。
当然在动态内容中，我们也要注意视觉焦点的问题，不能让界面中的动态焦点太多。一般1个动态焦点会比较好。
当然除了已有的这些案例，我们也可以思考，除了动态的内容，我们是否可以激发其他的感官来吸引用户的注意力。比如可以通过增加一些音效。目前还没有找到这样的案例，但是个人感觉也是可以尝试的。4.改变屏与屏之间切换的交互方式
现在的引导页的切屏交互方式基本都为左右滑动，我们也可以通过改变既有的交互方式增加用户的注意力。毕竟用户对新的东西的好奇心还是有的。但是不要盲目的为了改变而改变。交互的方式应该要与设计的内容相匹配。改变的交互方式要简单易学，在界面的设计中要有使用的隐喻线索，让这种新的交互方式变得自然而容易，否则会引起用户的反感。
图例为feedly的引导页。改变了常用的左右滑动的方式，使用了向上滑动的方式。每张引导页想一张卡片，阅读过的引导页向上滑动即被滑出屏幕。界面视觉对于新的交互方式有明确的引导，不会增加操作的难度，会让用户感觉到是一家具有创新性的公司。
5.能有效传达的文案A. 字数的控制
从心理学的角度，人类对于文案在短时间内能记忆住的字符不超过9个。（这个是人类记忆的特性，人类对于内容的短时记忆的容量有限，一般为7 & 2项目，一般为7 & 2，即5 ~ 9个项目，这也就是平常我们所说的记忆广度。）超过9个字符，用户是很难记忆的且容易受到干扰而发生遗忘。文案的设计上应该是挑的说，无意义的不必要的冗余文字应果断剔除。
如果精简后依然超出极限字符数，那么可以对文案内容分层次。
通过排版的方式，突出需要用户记忆的字符，弱化其他字符。一般而言突出的字符为2-7个是比较容易记忆的。
通过断句的方式，将长的文案变为短的子单元，这样可以扩大短时记忆的容量。断句可以通过打标点，留空格，断行的方式来实现。
（这个也是运用人类记忆的特性，如果超过短时记忆的容量或插入其他活动，短时记忆容易受到干扰而发生遗忘。为扩大短时记忆的容量，可采用组块的方法，即将小的记忆单位组合的单位来记忆，这时较大的记忆单位就叫做块。）
B. 文案的内容与行文风格
文案的内容可以融入时下热点或话题，行文风格上也可以具有时代的特征。让用户能感受到产品能紧跟时代，贴近当前的社会生活，比一般的文案容易引起用户的注意度。
很多的引导页在设计上同质化问题严重，极度相似的设计手法、设计风格、排版风格、相似的文案内容、让用户很难记忆或引起关注。构建产品引导页的特色是区别于其他产品的好方式，特色可以让引导页脱颖而出。
那么如何构建特色呢？1.从设计方式上进行特色构建
我们可以从引导页面内容的不同组成元素来特色的构建点。
背景图片的摄影角度或风格/后期处理/色调；版式编排的设计风格/版式布局/配色方案；文案的行文风格；多屏切换方式也可以考虑
构建特色并不需要对所有内容的元素都进行，即使只在一个内容点上进行特色构建也是可以的，但是需要做到的是这个点上的特色要非常明显，用户容易感知到。2.系列化引导设计的特色构建
对于一些不断更新迭代的产品，往往在重要版本升级的时候都会给出必要的新的引导的内容。所以我们除了从单次引导内容思考进行特色构建以外，我们还可以把眼光拉远一些，从一个系列化引导设计的角度去构建特色。系列化的引导需要从一开始进行单次引导时就加以思考，为系列化构思一个主题。下图中的新浪微博的引导页的设计就是一种系列化引导设计的特色构建。它选用季节为主题，根据所处的季节的特征进行内容的运营。这种方式可以让用户对多次引导的内容感觉到一种新的整体化的特色，贴近当前生活的方式也让产品感觉具有时新性，易于接受。
当然，引导并不是解决设计问题的方法，引导只能作为一种点到为止的辅助方式。
文章中所总结的5个要点是我在实际的工作中的一些设计感悟与整理，其中必有一些较为主观和不足的地方，欢迎大家拍砖与交流。本次主要整理了一下前置引导的一些设计技巧，后续我还会继续整理出过程中的引导的设计技巧的内容。感谢大家的关注。
感谢你的阅读，本文由&腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。注明出处格式：腾讯ISUX (http://isux.tencent.com/user-guide-design-01.html)
本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：zixun-group@service.aliyun.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
摘要： 一切从整理开始 前阵子读了佐藤可士和的《超级整理术》和《创意思考术》两本书，有了点启示，想和大家分享下。记载的方式有点类似思维跳跃的随笔，希望大家在耐心阅读之后会有 & 一切从“整理”开始 前阵子读了佐藤可士和的《超级整理术》和《创意思考术》两本书，有了点启示，想和大家分享下。记载的方式有点类似思维跳跃的随笔，希望大家在耐心阅读之后会有所启示… 整理一词对大家并不陌生，佐藤...
摘要： 这篇文章将展示很多很酷的范例，甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话，你打算怎么做?给点提示，色彩是扁平化趋势中最重要的一部分。 扁 这篇文章将展示很多很酷的范例，甚至还提供了一个免费的用户界面工具包供你下载和使用。但如果是你自己的话，你打算怎么做?给点提示，色彩是扁平化趋势中最重要的一部分。 扁平化设计进修 & & & ...
摘要： 每逢节日到来，当你打开QQ浏览器，发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀，呈现在你眼前的是朴实而又温情的画面节日闪屏。她是浏览器和用户情感交流的窗口，也 & 每逢节日到来，当你打开QQ浏览器，发现有什么不同吗?QQ浏览器已经悄悄的送出了节日的关怀，呈现在你眼前的是朴实而又温情的画面——节日闪屏。她是浏览器和用户情感交流的窗口，也是传递节日祝福的桥梁。在不同的...
摘要： 文是非常详细的一份移动建站方面的资料，上一次谷歌发布了移动网站建站的十大原则，这次百度也发布了移动建站指南，图文并茂的描述了如何提高移动站在百度质量度的等级，在百 文是非常详细的一份移动建站方面的资料，上一次谷歌发布了移动网站建站的十大原则，这次百度也发布了移动建站指南，图文并茂的描述了如何提高移动站在百度质量度的等级，在百度推广后台已经有“移动站点质量度”的星级评价体系了，页面大小...
站内SEO优化
& & 对于大多数网站而言，并没有刻意注重图片优化，在图片优化上并没有下过多的工夫，然而以图片为主题展现信息的网站却是成千上万，不在少数。并且能够通过图片信息获取大量流量，这使我们不得不引起关注以及重视。对于图片优化过程中需要注意哪些细节呢?优化图片有哪些技巧呢?这让我们进入了深入思考中。闲暇之余，对于图片优化技巧也进行了深入分析以及总结。 & & &...
& & 技术的革新带动了设计行业的的迅猛发展，这使得设计师和开发者有了更广阔的的探索天地。 & & & & 1.响应式网页设计(Responsive Web Design) & & & 现在越来越多用户都拥有多种终端：台式机，笔记本，平板电脑，手机，能够适应不同尺寸显示屏的网页是现在的潮流，甚至是未来很...
若您要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在5个工作日内回复。
售前咨询热线
服务与支持
资源和社区
关注阿里云
International}