您的位置：
引导页就该这样设计！细数那些精彩纷呈的引导页面
作者：shirley
　　随着苹果ios8的发布，可以看到App store货架上，众多主流App迫不及待地向人们展示产品视频预览，接下去会是被设计师、市场宣传相继关注的焦点，产品宣传的下一轮引爆点。作为能在App store上先发触达地形成前期推广的视频预览，又会否影响到App安装完毕后的引导页呈现?我们不得而知。鉴于两者形式的展现，间隔于安装App前后，多少会规避重复性。不管怎样，趁着手机App和扁平风热潮，一起来细数归纳下对手机引导页的所见所想。 早期我们会见到比较多成熟的PC软件或者网页产品的产品安装包或新特性指引页。近几年在移动端平台上兴起了各种门类，形式精彩纷呈的引导页。
　　功能决定属性
　　引导页在视觉表现上呈现繁多，归纳起来可以从以下几个功能来分类：
　　1 新特性新功能
　　最常见的属这类，当一个产品持续稳定迭代，每推出一些新功能，便跟随版本包装发布。
　　2 推广运营
　　包含类似市场专题推广、情感化内容运营两类。前者多为电商投资收益等产品，后者类似内容的片段剪辑，比如轻博客Lofter，引导页随机呈现博客用户的心路历程;或是&食色&，一壶茶、一段心情志，感受人生五味，预览的同时还能加以喜爱分享。
　　3 品牌展现
　　整体铺开去展现产品的核心亮点和品牌思想，这一类应用产品基调偏功能长期稳定、内容维护居多，甚至内嵌视频打包品牌概念和软件界面功能展示。
　　Yummly开屏传达给用户，这里可以浏览收集食谱和清单，温暖色调直击内心，尽情享受美食烹饪。
　　4 说明指引
　　多适用于操作较复杂的工具类应用，当用户首次打开App，会进入半透明黑屏蒙版模式，开启新手指引环节。这种方式一定程度上也存在弊端，用户会厌恶一上来就强制被教育。因此也有不少App换作白底，稍作轻量去展示教程。除了前面提到的传统说明教程，还存在另外两种改良方式：一种是在用户触发功能行为的时候跟随出现指引，匹配合适的场景模式，强化临场感。另一种，弱化初始化引导，固定收拢在界面的一角，让用户自主去触发。
　　500px，典型的全屏蒙版引导，避免去采用细节的界面说明，可在实际应用中出现操作引导。
　　也有类似Sketches Help, 将产品的核心功能以手势的方式简要呈现。
　　Oggl 引导页由繁至简，如今的版本更多介绍放在次一层级。
　　Cycloramic 是比较特殊的一类表现方式，通过前期的短小视频，让你对产品有直观的大致印象并产生好奇，再转换到界面说明页，使过程显得更为自然不突兀。
　　E 信息定位
　　目前多见的应用，在情感品牌化的层面设计引导页，也有不乏一些直击重点的App，把了解用户信息作为首要任务。
　　Elevate Brain Training是一款借用游戏提高大脑的应用，引导页抛出提问定制你的训练目标，针对理解力、注意力、处事能力等不同层面能力进行提升。
　　载体随时代的演进
　　随着技术演进和大环境提升，确实看到了引导页以不同的载体，从静过渡到动甚至流媒体。 这里主要划分为大背景位图和矢量图形，后者表现多样化，国内外已有许多层出不穷的设计，不在此处赘述。 位图分为静、动、动静结合：
　　1 大背景
　　通常运用高质量的位图作为背景，前后页的切换会伴随淡入浅出的效果，这类应用对外营造一种高端的产品气质，图片传达出向上、美好、静谧的正能量气息。多见于互动社交类或生活记录应用，例如 Path在这方面表现得淋漓尽致，后续也有更多App类似的呈现，但它的画面感仍然让人怦然心动，没有乏味感，选图和前后图片过渡衔接很重要。
　　2 视频动态影像
　　随着跨界趋同，移动端与PC网页端的用户体验和视觉呈现未来将会更多地齐平。视频流媒体也被越来越多地用于网站MiniSite，是一种效果直接信息量丰富的品牌推广方式。当然考虑到安装包数据限制的问题，移动端引导页视频相对少。除了前面提到的品牌宣传、也有诸如Camu这类以拍照视频为主要的应用，会首选视频流媒体。用于拍延时摄影的Hyperlase在引导页呈现独特视角的延时作品，富有冲击力。
　　3 动静皆宜
　　这里指静态位图拟动态流畅地位移，模拟自然界的节奏，回归仰望白云海滩拾贝的宜人轻松情绪。微动的影像就像一段催眠序曲，让用户快速切入沉浸式状态。例如Flipboard，从早期创新式的局部微动简化至现在的镜头位移。LinkedIn、Pinterest也是较有代表性的应用。这样细想来，镜头感的位移在渲染氛围的同时，也是萌发了读者想要挖掘发现更多，却又嘎然而止到下一个画面，多少有点半饱的意味。是否觉得恰与这些信息采集类的应用气质相符呢。
　　其次，我们会发现位图的使用多展现于国外或主流App，相对于位图传达的高端大气沉稳，矢量图形的发挥自由度更大，在多语意传达和目标对齐上，处于一个关键的角色。
　　在海报平面招贴多样化的今天，我们可以在刊物、宣传单、海报招贴、灯箱、网页等一切可以传递信息的介质上看到推广宣传。在过去，传统灯箱或许只是几张幻灯片画面切换。现在，可以看到地铁站的三联式灯箱，加入了视频，模拟互动式的联动滚屏。这种借助多屏的滚动方式和手机端的引导页路径原理有点相似，然而在手掌大小的空间里，可以展示的内容是有限的，屏与屏之间的串联交互方式，众多App在找寻创意可能。
　　屏间交互方式
　　由于手机端天然的触屏行为属性，通过滑动触发用户注意力，吸引用户关注下一秒迸发的画面内容，让整个观赏过程成为用户的参与互动体验。
　　1屏幕原生路径
　　早些时候网页元素随着页面滚屏出现各种交互动画，这种方式刚盛行不久，移动端也进行了跨平台迁移，食记是最早一班引导页体验趋同网页动画的应用，动画难点在于把握好元素的动律节奏，进出舞台的关键点。
　　DIY的walkthrough，随着后景过山车似的连绵山脉，野外篝火，探险宇航员，手机记录，酷似玩了一把视觉体验享受。
　　2 前后衔接
　　视频动画中镜头切换的蒙太奇手法，用美学原则联结前后镜头，通过缩放拉伸、形变、位移、颜色变换等补间动画巧妙地成为下一个镜头的关键元素。形式上激发让人出乎意外，情理之中的视觉感受;内容上精简干练有力，作为关键变换元素是每一屏讲述的重点。相信看过绝望主妇的大家对它的片头都印象深刻，更多精彩挑战想象极限的镜头变换，不妨去欣赏下 余志雄工作室yU+Co的作品。
　　Same作为一款话题社区社交应用，由早先的单色线性延展到新版的丰富形态和有趣变换。
　　Dropbox配合一贯以来的强标识蜡笔画风，让观赏者心情愉悦。
　　3趣味互动性
　　围绕产品特性，设计趣味性的互动环节，会让App增色不少。通过麦克风吹气、声音、摄像等手机原生方式，营造一个类虚拟现实联结的体验过程。
　　Posegram结合产品特性，与镜头互动的方式，让用户直观地摆pose拗造型。
　　4 独特视角
　　页面间的转场方式，除了City Guides的独特城市转场，Rovler的引导页刻意对画面的局部做了动感模糊，模拟镜头摇晃，让观看者置身墙面其中。
　　5单屏内交互方式
　　Dropbox温润亲和的，喜欢淡彩加线条风的朋友，它的品牌风格让人爱不释手。是否有几分纸面上马克笔工程设计图的感觉。细腻的画风、动感的模糊处理方式，让单屏内的交互方式显得没有那么单一。
　　6文案的串联
　　与图形的交互串联产生的效果不同，QQ阅读的文案抓住用户核心痛点，对仗的阵势一气呵成。
　　张弛有力的扁平风
　　Luvocracy的开启walkthrough，让人眼前一亮，用色，闹中取静;版式，简洁大气;元素，构建有序，爱心贯穿始终。作为一款购物社区应用，会以让用户愉快的购物体验从进门这一刻开始。
　　UC浏览器采用更多ios7的轻量大胆用色，让整个产品基调趋于轻松、欢快、多彩。
　　Yahoo的这款应用的引导页接受度是否高，或许有所保留，有一种美叫猎奇美，这么形容也许不恰当，看完这个案例的用色，顿时会觉得UC的用色很平稳。会让人脑海中想到 &态度、冲撞、学术、微妙、复古 &这些关键词。所以作为设计师和产品用户，可以涉猎更多在过去常人不太接受的颠覆性事物，经典的东西总是经得住时间打磨，留下的都是值得去经历思考、重组、再生，无约束的事物本身蕴藏可能性。
　　与产品气质相符 ，尽量避免过度设计，呈现的内容要与产品气质能对应上。就像iCloud、Pages、keynote的引导页，仅用不同的颜色和嵌套内容，达到了苹果体系下的高标准统一化品牌定位。
　　用户轻量体验，不要让界面上的内容信息成为用户的认知负担，即使是放在开篇位置的引导页也不例外。少有顾客愿意在对他无意愿了解的业务介绍上给予过多停留，为产品本身能为用户带来的价值而服务设计。
　　兼顾技术实现，通常情况下技术仍然会对软件包容量进行限制，视频在信息可视化上占据丰富有利，另辟蹊径借助移动端触屏交互优势，寻找巧妙方式也不失为一个好办法。
　　勿忘文案魅力，人类对于复杂信息的处理，最直接触达到大脑被解读的还是语言，一句好文案配上应景的图片，能达到的效果是不可估量的。
(转载请保留)
互联网的一些事，已超50万小伙伴关注！火车在她背后擦身而过，情况十分惊险。
派出所进行调查取证，依法对谢某某予以拘留。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
　　中的引导页究竟怎样做?我们通常理解匆匆而过的，不仅有朱自清的笔尖，还有手机上的引导页。是开门迎客还是朴素低调。不少人单纯的认为引导页并无可用之处，有时没有效果反而更好。那引导页该何去何从，怎样解释设计师做的引导页并非炫技的行为。本文详细介绍引导页存在的现实意义。
　　一.被误解的引导页
　　1认为如果一个产品需要引导，拿本身就是一个缺陷，说明该应用缺乏简单和用户友好的基本要素
　　2.认为引导页是登陆时拦截用户高效前进的障碍
　　貌似很道理，有时甚至是断章取义，也要具体问题具体分析，
　　1.而且如果没有引导页，设想下使用场景，由于程序是多种代码命令和数据组合而成的。启动应用程序实际上是运行代码和数据读取的过程，这个过程需要一定的加载时间，与其让用户看代码运行过程，不如看些展示图片。
　　2.而且任何一款应用都不是完美的，我们现在看到的微信等成熟的应用也都是通过多次迭代完善的，偶尔也会有应用出现过长等待时间，而用户对于加载的忍耐极限通常只有5秒，如果运用有意思的启动页面，可以争取到更多的时间。
　　3.全天下的主人都明白开门迎客的道理，如果客人登门拜访时主人却没有开门迎接，而需要客人自己动手开门进来，对于客人来说是极不礼貌的。
　　4.引导页中也并非无用，因为一个应用的访客群体基本上是固定的，用户有着既定目标去访问应用，应用里有着他们必须要了解的信息，引导页中提供有效的信息，能让用户和APP建立良好的互动，让用户快速上手使用。
　　二，引导页到底有哪些作用
　　心理学上有“七秒钟理论”，说的是人与人交往时，产生好恶决定于见面的头七秒钟。一个漂亮的引导页也是提升用户良好体验的开始。引导页的存在一定程度上增加了应用的美观度和新奇感。但是这里讲心理学上的奇妙理论，只是初次使用的头7秒，不是每次使用的头7秒。
　　网页设计中的引导页究竟怎样做?从产品角度出发，首先，产品需要通过引导页通过引导来促进登录/注册行为的发生，增加用户注册量，也是培养忠实用户的开始。其次，突出产品的新功能和特性，说明功能结果变化，避免产品陌生感。并鼓励用户去探索，建立产品与用户之间的互动，拉近用户与产品的距离。
　　从用户角度出发，用户最需要了解产品功能和如何操作，迅速上手这个产品，降低学习成本。此外，也能在注册之前告诉用户这是一款什么样的应用。何时使用。
　　三，怎样设计引导页
　　1.了解引导页类型，清洗引导类型
　　前置型引导页：启动应用程序后，进入主功能前的一系列图片或者动画效果，停留数秒后消失。在用户初次实用移动产品时，给予一些必要性的帮助，以便用户快速了解产品类型，功能，具体操作
　　过程中引导：在用户使用产品过程中给出一系列帮助内容，主要方式有空白页的内容引导，loading等等状态引导，拆分包袱的逐步引导，巧设默认值的功能引导，tips引导，浮点引导，遮罩聚焦式引导，触发式引导，任务演练式引导等。
　　网页设计中的引导页究竟怎样做?由于主要讲前置型引导，这里插播两个例子：
　　1例如Facebook开启定位的引导，但用户需要发送当前位 置的时候，应用会弹出图中的引导形式，告诉用户开启定位的作用，用户在这种使用场景下会很乐意开启定位，从而提高了开启定位的转换率，又不会觉得这个引导影响了自己的体验。
　　2，比如Google搜索中，在用户进行拖动操作的时候，顶部的状态栏变成了一句温馨的提示，非但不打扰用户，反而有 一定帮助，用户会觉得很贴心。
　　2.认识引导页存在问题，避免走错方向
　　随着访客的审美疲劳，频繁出现的引导页已经失去了对引导页的新鲜感和喜爱感。要么就是过多展示没有实际功效的内容作为噱头，而且这个噱头并没有吸引足够的目光。在很多情况下却起到了相反的效果。
　　毕竟首页作为引流的窗口重要性显而易见，引导页前置需要访客花时间等待主页面的启动，如果是一个体积过大时间过长的引导页，或是引导页上面的“skip”按钮不够明显，很可能导致部分访客流失，之前也讲到，技术原因造成的访问延时，引导页能够起到缓解用户情绪的作用，如果是引导页的不正确使用造成的访客流失，那就是引导页干的坏事。
　　3.把控引导内容
　　心理学上发现的7&2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7&2个。因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。如果表达起来困难，可以辅助一小段文字进行解释或补充。因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
　　精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。
　　建议将引导页采用纯色简单直接，尽量和主界面构架形式一直，让用户有快的感觉，有些工具型应用的引导页单屏滚动多在0.5秒内，眼睛一睁一闭，引导页就过去了。
　　如果应用功能主要是在横屏的情况下完成，建议引导页以横屏方式呈现，以引导用户提前切换手持设备姿势，快速进入到你的应用界面中。
　　4.用户引导规范，制定符合自己产品特性
　　每个移动应用都有一套自己的用户引导规范，在制定用户引导规范的时候。
　　用户引导规范的指定可以按照不同的形式进行指定，一种是从用户引导的样式角度出发，把产品涉及到的各种用户引导样式一一罗列出来，并说明每种引导样式的适用范围、触发机制以及消除机制等。这种形式的优点是各种引导样式结构清晰，一目了然。另一种形式是从产品功能的角度出发，由于产品每个功能的重要程度和优先级不同，对应的需要突出强调的程度也不一样，所以将用户引导样式分为强中弱三 大类，对于产品主要功能，优先级很高的采用强引导样式，对于次要功能，优先级稍差的采用适中的引导样式，对于辅助功能，优先级最低的采用弱的引导样式。同 时强中弱三大类里面又分别包括几种引导样式。这种形式的优点是从产品角度出发，根据功能的重要程度的优先级选择对应的引导样式，方便快捷。
　　5.场景模拟，保证用户引导的有效性，减少干扰，提升用户体验
　　用户在使用产品的时候都是有一定的使用场景的，根据用户的使用场景触发响应的用户引导，用户引导在使用过程中弹出时是用户意想不到的，很有可能打扰了用户使用的流畅性，因为这是用户没有预期出现的东西，在一定程度上有惊慌失错感，保证在用户需要的时候弹出最符合用户体验，也是用户最愿意接受的时候。这样的出现既不会特别突兀，不至于弄的用户不知所措，又能在响应的场景下帮助到用户。
　　6.避免引导页铺天盖地的在任何类型的APP上引用
　　(信息类应用是一个内容为王的地方，尤其是被信息内容充满的应用和注重效率的工具应用，比如说搜索应用，不断追求信息以一种更快速更详尽多方式呈现给用户，所以才会有rss,基于AJAX技术的页面布局。任何一些阻碍用户高效获取信息的细节都将导致用户流失，而引导页就是头号杀手。
　　7.视觉聚焦
　　在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律，从上到下，从左到右，从大到小。因此可以根据这个视线流的规律来进行引导页的设计。
　　9.著建特色，从竞品中凸显差异化
　　之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
武汉AAA数字艺术教育，是AAA教育集团旗下的专业数字艺术...
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：