APP引导页设计方法介绍

版权申明：本文出自“阅文CDDC”原创，感谢“阅文CDDC”的原创文章分享！

引导页是我们每一个UI设计师都面临过的设计，无数次的设计之后，我们是否已经找到了一个完美的解决方案或是思路呢？

一个好的引导页设计会给用户留下良好的第一印象。也可以降低用户的学习成本，快速上手产品并了解新增功能，避免用户使用过程中的迷茫，减少误操作，是提升产品体验的必要手段。接下来我们以阅读app的新版本功能引导页为例，一起探讨关于引导页的设计思路。

1、需求分析，提炼关键词

需求内容：新用户引导页面，展示产品新功能，符合整体设计风格。

产品文案：

海量图书一网打尽

影视原著、猜你喜欢、全网热议

不读书也给你好看

书评互动、专栏文章、福利活动

仔细一看，此文案对仗工整，平仄押韵，读起来朗朗上口，几乎无可挑剔…

读了一遍又一遍，发现文案表现的重点比较多而且分散，没有明确具体功能点，难以形成整体的画面感。为避免信息传递偏差，减少不必要的改稿要求，我们有必要和产品经理沟通文案。主次文案只是表达的工具，明确要达成的功能目标才是重点。

此处省略沟通环节…

第一张图的主题：重点在于展示海量书籍，并且用影视书来拉近和用户的距离；其次是一个产品特点猜你喜欢推荐功能；评论互动的氛围也需要烘托一下。

提炼关键词：书多、影视

第二张图的主题：重点展示发现页的新功能专栏和评论互动，其次是优惠券相关的福利活动。

提炼关键词：互动、福利

接下来所有的视觉设计都围绕这两个主题，也就是产品经理想要表达的关键点。

2、让主视觉准确表达关键词

在这个过程中，经常会出现设计稿表达的意思和产品经理心中的画面相距甚远，不同的设计师针对一样的文案也会设计出完全不一样的方案，大部分原因是画面表达的关键词有偏差。前面的关键词提炼已经帮我们大概确定了画面的中心含义，接下来怎么办呢？

我们上小学一年级的时候都做过经典的看图作文，重温一下美好的童年~~~看图作文一般都会给一张图画，然后一个明确的标题。图画结合标题，作文的内容基本限定在一个范围内，只要不出现大的理解偏差，一般不会跑题。也就能写出来合格的作文。

看图作文的流程: 图片—关键词—写作文

顺序反过来，就是引导页设计流程：文案—关键词—图片

这样就可以确定下来两张引导页的框架：

3、确定视觉风格

常言道：知己知彼，百战不殆。站在巨人的肩膀上才能看得更远…相信你每次做设计的之前就已经了解过大部分的同类竞品。根据视觉表现风格分类概括，功能引导页基本可以分为四大类：

情景类——表现力丰富，把握难度较高，设计周期长。

抽象类——抽象展示功能点，不依赖页面，灵活但表意宽泛。

示意类——对页面的功能模块概括展示，简洁清晰，个别页面适合

截屏类——主视觉为实际截图，表达准确，简单稳定。

综合考虑后选择了抽象类的视觉风格。

视觉风格要和品牌风格一致，产品的每个部分传达给用户同样的品牌形象，就可以加强品牌在用户心理的认知。必要的时候也需要和产品经理讨论用哪种设计风格更贴合产品的气质。如果前期没有确认好视觉风格，在页面绘制完之后评审发现风格上的问题，会导致大量的修改甚至推倒重做，影响进度和效率。