火星网校
UI设计指南01 | APP引导页应该如何设计?
发布时间：2024-03-10 09:00:17 浏览量：283次
“guide page”即引导页，是我们日常迭代中不可或缺的重要UI设计场景之一。引导页设计这个看似简单的问题实则有着太多的思考价值。
目前市场上同类的APP产品数量繁多，竞争十分激烈，如何从诸多APP产品中脱颖而出，用户第一印象成为了极为重要的一环。首次打开一款APP产品，最先看到的就是引导页，所以说，引导页的好坏，极大地影响到后续的产品使用体验。
本文结合真实案例和工作经验，为大家分析介绍几种常见的引导页构成和设计方式：
一、什么是引导页
引导页，顾名思义，在使用一款新的产品时，给用户展示简单的功能介绍，欢迎文案等，又或者引导用户创建账号、设置偏好、兴趣范围甚至给用户以使用指引等，从零开始带用户了解产品。
二、引导页的意义
要了解引导页的意义，首先我们需要了解一下引导页的几种常见类型：
1.欢迎文案
这种引导页，一般在用户初次使用APP的时候出现，通常会以插画或图片形式向用户传递一种感情，就像新开张的店铺，门口通常放置欢迎光临的标志/标语，给客户带来一种贴心，温暖的感觉。
2.功能介绍
通常用文字和插画相结合的幻灯片方式概述介绍App的功能点，方便用户在打开APP的第一时间了解App的功能定位，寻求用户的情感共鸣，吸引和鼓励用户更有效地学习产品的功能使用。
3.个性化定制
例如资讯类、理财类、招聘类、健康类等功能性APP，比较注重用户的职业、使用习惯、兴趣范围等信息，在引导页收集这些数据，可以更有效的为用户展示首页的内容以及定制产品的功能，使用户获得更优质的使用体验，增强用户粘性。
4.操作指引
这类引导通常出现在首页，引导用户去操作相关功能。在用户初次使用时能快速上手APP提供的基本功能，这种引导页也可以用于产品更新迭代后，界面产生了样式移位，功能变化，通过操作引导让用户的使用方式进行过渡。
综上所述
了解了引导页的多种表达样式后，我们知道引导页的意义其实是传达一种情绪，让用户更容易接受这款产品，给用户以情感共鸣，或站在用户的角度去感受使用体验。
三、引导页的设计方法
1.配图插画
插画是引导页运用最多的一种表现形式，常见的插画分为扁平式插画、2.5D插画、MBE风格插画等。画面通过形状和颜色给用户以视觉冲击，并快速向用户传达所要表达的信息。也为设计师提供了更多的设计选择，不局限于一种样式，无论是从简单的线条画还是到复杂的C4D作品，都是很好的表达艺术的选择。
这里要注意的是要保持多个页面的插画风格以及配色统一性，当展示的页面以插画为主，文字就要简单扼要，不能繁多杂乱，起到点缀作用即可。
2.页面功能展示
将产品的主要页面或功能，按照统一样式布局排版，组成一套风格统一的引导页，也是一种很好的选择。可以提前向用户展示产品界面，突出强调主要功能，给用户以心灵锚点，使其更加容易接受一款新的产品，同时也省略了功能引导步骤，一举两得。
3.文案展示
好的运营文案带有独特的力量，具有很深的感染力和共情性，能够快速吸引目标用户。这种引导页多用于情感类、阅读类等容易影响用户情绪的产品。同样，文案不能赘述，相比于插画类引导页的点缀性文案，纯文案性的引导页，需要突出文案的内容排版，此时配图应作为点缀，或者可以直接省略配图。
4.个性化定制
可以在引导界面放置多个分类标签，以列表或表单形式展示多个选项，搭配icon或插画，引导用户去创建个性化服务。
5.操作指导
当需要引导用户操作时遮盖次要内容的蒙版是必不可少的，在半透明黑色蒙版的基础上（也可根据具体情况调整蒙版透明度），可以用纯文字+简单线条指引、插画+弹出框指引或突出强调产品某一部分等方式给与用户操作引导。这种引导方式具有轻量性的特性，可以大大减少用户阅读时间和学习成本。为了保证用户体验，需在明显位置放置“跳过引导”的按钮，方便用户随时结束引导环节。
小结
引导页作为进入APP的第一个入口，其展示形式也是多种多样的，在引导页还可以使用动画或者视频的形式传递信息，这里就不过多进行赘述了，设计师可根据具体实际情况自由选择如何去设计引导页。
引导页不仅仅是打开APP的一张图或一段话，而是一个与用户建立并保持信任的窗口，是用户对APP留下第一印象的过程，势必需要UI设计师在创作时注意展示形式的平衡和取舍，不断优化用户体验~
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
