如何设计引导页(引导页设计思路)

如何设计引导页,引导页设计思路

内容导航：

引导页的类型如何决定设计方法

如何正确设计App引导页

请教下西城引导页设计一般多少钱

网页设计中的引导页究竟怎样做

一、引导页的类型如何决定设计方法

1.功能介绍类引导页-
一般是新产品上线/新功能发布会使用这类引导页通常作为功能介绍用的，主要进行新增功能或者亮点功能进行展示，让用户对产品主功能有一个大致的了解。采用的形式大多以文字配合界面、插图的方式来展现。设计师通过对特色功能的总结提炼，进行视觉化的设计。通过用户易于理解的图形表达形式，传递给用户。2.推广类介绍引导页-
一般是新产品上架时使用这类引导页通常目的是更多的想传达产品的态度，让用户更明白这个产品所要传递给用户的感觉。更加关注产品自身的使命感，设计师们在设计时会将整个产品风格、公司目标相结合。因为这一类的引导页能够制作精良、有趣、会吸引用户驻足观赏。让用户在一开始就爱上你的产品。3.解决问题类引导页-
一般是产品新功能发布时使用问题解决类引导页通过描述在实际生活中目标用户群体会遇到的问题/麻烦，通过最后的解决方案让用户情感上产生共鸣，让用户对产品产生好感，增加产品一开始的粘度。这类引导页通过2~3页设计描述问题，在巧妙的通过1~2页介绍产品能带来的解决方案。以上就是环球青藤小编今天的分享，希望对大家有所帮助，想要了解更多设计相关内容，欢迎关注本平台。总想要学习设计的小伙伴们，这种设计知识你们了解了吗?

二、如何正确设计App引导页

• 目的区分根据引导页的目的、出发点不同，可以将其分为功能介绍类、使用说明类、推广类、问题解决类，一般引导页不会超过5页。
  功能介绍类功能介绍类引导页主要是对产品的主要功能进行展示，让用户对产品主功能有一个大致的了解。
  采用的形式大多以文字配合界面、插图的方式来展现。
  以易信为例，采用文字与水彩插图结合的方式，文字分为2个层次，大标题与小标题，大标题是对主功能的概括，小文字是对其功能模块的详细描述或进一步补充说明。

• 2使用说明类使用说明类引导页是对用户在使用产品过程中可能会遇到的困难、不清楚的操作、误解的操作行为进行提前告知。
  这类引导页大多采用箭头、圆圈进行标识，以手绘风格为主。
  以虾米音乐的引导页为例，对于较难发现的播放队列、歌词的操作方式进行的箭头引导来说明。

• 3推广类推广类引导页除了有一些产品功能的介绍外，更多是想传达产品的态度，让用户更明白这个产品的情怀，并考虑与整个产品风格、公司形象相一致。
  这一类的引导页如果做的不够吸引人，用户只会不耐烦地想快速划过。
  而制作精良、有趣的引导页，用户会驻足观赏。
  以淘宝旅行为例，淘宝旅行通过清新、生活化场景的插图营造产品是一款乐享生活、跟着感觉走的出行应用，在你出行前就帮你计划好所有的行程安排，只要一个行李箱，说走就走，与产品的理念相契合。
  而另外一款应用，选用恬静、安逸的照片配以简洁的文字来渲染产品的基调。

• 4问题解决类问题解决类通过描述在实际生活中会遇到的问题，直击痛点，通过最后的解决方案让用户产生情感上的联系，让用户对产品产生好感，增加产品粘度。
  例如QQ浏览器的引导页设计，通过形象的插图直接明了地说明了QQ浏览器解决了其他浏览器所遇到的问题（搜不到小说、看小说花钱、小说更新需要等）。

• 表现方式文字与界面组合这是最常见的引导页面，简短的文字+该功能的界面，主要是运用在功能介绍类与使用说明类引导页。
  这种方式能较为直接地传达产品的主要功能，缺点在与过于模式化，显得千篇一律。

• 文字与插图组合文字与插图的组合方式也是目前常见的形式之一。
  插图多具象，以使用场景、照片为主，来表现文字内容。

• 动态效果与音乐除了静态页面外，开始流行具有动态效果的页面。
  在单个页面采用动画的形式，考虑好各个组件的先后快慢，打破原有的沉寂，让页面动起来。
  同时结合动效可以考虑页面间切换的方式，将默认的左右滑动改为上下滑动或过几秒自动切换到下一页。
  在浏览引导页的时候，可以试着加入一些与动效节奏相符合的音乐，会是一种更加新颖的方式。

• 视频展示在打开后通过播放视频的方式来介绍产品或传递一种理念，这种方式多见于偏生活记录类的应用，如拍照、运动类应用，给人传达青春活力、积极乐观的生活态度。
  优点：直观，动感，生活化。
  缺点：应用较大，视频播放会出现卡顿的情况。

• 总结以上已经针对引导页的目的差异以及表现方式进行了相关归类，在具体的设计中还得注意一些原则，它们会让你的设计更加吸引人，信息传达的效果更好。
  文案言简意赅，突出核心根据爱尔兰哲学家汉密尔顿观察发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。
  因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。
  如果表达起来困难，可以辅助一小段文字进行解释或补充。
  因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。
  如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
  精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。
  尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。

• 视觉聚焦在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。
  视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比；二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。
  这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。
  同时结合视线流动的规律，从上到下，从左到右，从大到小。
  因此可以根据这个视线流的规律来进行引导页的设计。
  如下图为天猫客户端的引导页，分析其视觉流发现，浏览的顺序从插图到主文案，再到辅助文案，缺点在首次看到的是插图而不是文案，插图相对文字理解相对困难，因此未能快速地获取该页的主要信息，可以考虑将文案与插图的位置进行互换，这样会好一些。

• 富于情感化文案具象化通过具体的元素、场景来表现文案，采用写实、半写实的方式进行表现，有些应用还会配以水彩风格。
  以天猫为例，天猫是一款购物应用，在设计上通过商场、店铺的实际场景的具体描绘，渲染轻松、欢快的购物过程。

• 页面动效、页面间交互方式的差异化之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。
  而页面间的切换方式除了传统的卡片左右滑动的方式外，可以结合线条、箭头等进行引导，通常会配合动效。
  例如网易新闻客户端、印象笔记·食记，它们在引导页的设计上采用了线条作为主线贯穿整个引导页面，小圆点显示当前的浏览进度，滑动的过程中有滚动视差的效果。

• 与产品、公司基调相一致引导页在视觉风格与氛围的营造上要与该产品、公司形象相一致，这样在用户还未使用具体产品前就给产品定下一个对应的基调。
  产品的特性决定了引导页的风格，产品是消费类、娱乐类、工具类还是其他，根据不同的产品特性决定了引导页是走轻松娱乐、小清新，还是规整、趣味性的风格，在最终的表现形式上也就会有完全不同的展现，是插图、界面、动画还是其他。
  如淘宝的娱乐、豆瓣的清新文艺、百度的工具、蝉游记的休闲等等，通过对比就能发现他们在引导页设计上的差异。
  这样一方面有利于产品一脉相承，与产品使用体验相一致；另一方面也会进一步强化公司形象。
  以来往为例，来往是一款针对个人用户的及时通讯应用，主打扎堆、阅后即焚、敲门等与微信不一样有趣的功能，也是想给用户创造不一样的IM沟通方式。
  因此在引导页的设计上通过趣味性、甚至有点搞怪的动作与表情来表现来往是这样一款有趣、欢乐多的产品。
  又如网易彩票，引导页的主色选用了与网易自身的红色相一致的红色，在公司产品系统性上保持高度的一致性。

• 总结想做好引导页的设计，在理解用户对引导页需求的基础上，怀揣热爱产品的情怀，依靠精致的布局，巧妙的构思，贴切的氛围渲染，再加一点点特色。
  当然光讲是枯燥的，还是需要设计师在具体的设计中不断实践，总结出新的观点与方法，探索出别具一格的引导页设计。

三、请教下西城引导页设计一般多少钱

答：输入物：设计终稿输出物：设计修改稿(设计稿切片)验证产品出来后，UI设计师需对产品的效果进行验证，与当初设计产品时的想法是否一致，是否可用，用户是否接受，以及与需求是否一致。都需要UI设计师验证，UI设计师是将产品需求用图片展现给用户zui直接的经手人，对于产品的理解会更加深刻。

四、网页设计中的引导页究竟怎样做

如何设计引导页： 1.了解引导页类型，清洗引导类型
前置型引导页：启动应用程序后，进入主功能前的一系列图片或者动画效果，停留数秒后消失。在用户初次实用移动产品时，给予一些必要性的帮助，以便用户快速了解产品类型，功能，具体操作
过程中引导：在用户使用产品过程中给出一系列帮助内容，主要方式有空白页的内容引导，loading等等状态引导，拆分包袱的逐步引导，巧设默认值的功能引导，tips引导，浮点引导，遮罩聚焦式引导，触发式引导，任务演练式引导等。
网页设计中的引导页究竟怎样做?由于主要讲前置型引导，这里插播两个例子： A.例如Facebook开启定位的引导，但用户需要发送当前位
置的时候，应用会弹出图中的引导形式，告诉用户开启定位的作用，用户在这种使用场景下会很乐意开启定位，从而提高了开启定位的转换率，又不会觉得这个引导影响了自己的体验。
B.比如Google搜索中，在用户进行拖动操作的时候，顶部的状态栏变成了一句温馨的提示，非但不打扰用户，反而有 一定帮助，用户会觉得很贴心。
2.认识引导页存在问题，避免走错方向
随着访客的审美疲劳，频繁出现的引导页已经失去了对引导页的新鲜感和喜爱感。要么就是过多展示没有实际功效的内容作为噱头，而且这个噱头并没有吸引足够的目光。在很多情况下却起到了相反的效果。
毕竟首页作为引流的窗口重要性显而易见，引导页前置需要访客花时间等待主页面的启动，如果是一个体积过大时间过长的引导页，或是引导页上面的“skip”按钮不够明显，很可能导致部分访客流失，之前也讲到，技术原因造成的访问延时，引导页能够起到缓解用户情绪的作用，如果是引导页的不正确使用造成的访客流失，那就是引导页干的坏事。
3.把控引导内容
心理学上发现的7±2效应，一个人的短时记忆至少能回忆出5个字，最多回忆9个，即7±2个。因此展示的文案要控制在9个字以内，超过后用户容易遗忘、出现记忆偏差。如果表达起来困难，可以辅助一小段文字进行解释或补充。因此在最终文案的确定上，要突出重点，多余的文字尽可能地进行删减。如果文案删减后字数还是过多，因考虑对文字进行分层，通过空格或逗号或换行的方式进行视觉优化。
精准贴切的文案也十分重要，将专业的术语转换成用户听得懂的语言。尤其对于通过照片来表现主题的引导页设计，文案与照片的吻合度，直接影响到情感传达的效果。
建议将引导页采用纯色简单直接，尽量和主界面构架形式一直，让用户有快的感觉，有些工具型应用的引导页单屏滚动多在0.5秒内，眼睛一睁一闭，引导页就过去了。
如果应用功能主要是在横屏的情况下完成，建议引导页以横屏方式呈现，以引导用户提前切换手持设备姿势，快速进入到你的应用界面中。
4.用户引导规范，制定符合自己产品特性 每个移动应用都有一套自己的用户引导规范，在制定用户引导规范的时候。
用户引导规范的指定可以按照不同的形式进行指定，一种是从用户引导的样式角度出发，把产品涉及到的各种用户引导样式一一罗列出来，并说明每种引导样式的适用范围、触发机制以及消除机制等。这种形式的优点是各种引导样式结构清晰，一目了然。另一种形式是从产品功能的角度出发，由于产品每个功能的重要程度和优先级不同，对应的需要突出强调的程度也不一样，所以将用户引导样式分为强中弱三
大类，对于产品主要功能，优先级很高的采用强引导样式，对于次要功能，优先级稍差的采用适中的引导样式，对于辅助功能，优先级最低的采用弱的引导样式。同
时强中弱三大类里面又分别包括几种引导样式。这种形式的优点是从产品角度出发，根据功能的重要程度的优先级选择对应的引导样式，方便快捷。
5.场景模拟，保证用户引导的有效性，减少干扰，提升用户体验
用户在使用产品的时候都是有一定的使用场景的，根据用户的使用场景触发响应的用户引导，用户引导在使用过程中弹出时是用户意想不到的，很有可能打扰了用户使用的流畅性，因为这是用户没有预期出现的东西，在一定程度上有惊慌失错感，保证在用户需要的时候弹出最符合用户体验，也是用户最愿意接受的时候。这样的出现既不会特别突兀，不至于弄的用户不知所措，又能在响应的场景下帮助到用户。
6.避免引导页铺天盖地的在任何类型的APP上引用
(信息类应用是一个内容为王的地方，尤其是被信息内容充满的应用和注重效率的工具应用，比如说搜索应用，不断追求信息以一种更快速更详尽多方式呈现给用户，所以才会有rss,基于AJAX技术的页面布局。任何一些阻碍用户高效获取信息的细节都将导致用户流失，而引导页就是头号杀手。
7.视觉聚焦
在单个引导页中，信息不宜过多，只阐述一个目的，所有元素都围绕这个目的进行展开。视觉聚焦包括两部分，一是文案的处理，要注意层次，主标题与副标题要形成对比;二是引导页中的界面、场景、文案具象化元素，要有一个视觉聚焦点，多个视觉元素的排布采用中心扩散的方式，聚焦点的视觉面积最大，同时与扩散的元素拉开对比。这样用户能清晰地看到核心文案信息与文案对应的视觉表现元素。同时结合视线流动的规律，从上到下，从左到右，从大到小。因此可以根据这个视线流的规律来进行引导页的设计。
9.著建特色，从竞品中凸显差异化
之前对于表现方式的归类已经讲到了动画及页面切换方式，如果增加了页面动效，利用动效，包括放大、缩小、平移、滚动、弹跳，表现形式更加多样化，会让引导页更有趣，注意力更为集中。