三步搞定引导页设计!

昨天米醋跟大家分享了闪屏页的设计,那么今天再来说说引导页该如何设计呢?
有一句是这么说的:“优秀的UI可以造就App的点击率”。一个好的App引导页能够迅速抓住使用者的眼球,让他们快速了解App的价值和功能,起到很好的润滑和引导作用。
在做引导页之前,首先要学会定位,知道这个App属于哪个圈子。 简单来说,引导页分为功能介绍型、情感带入型和搞笑耍宝卖萌型3种类型。

功能介绍型(基础型)

1
功能介绍型的引导页是最基础的一种引导页。这种引导页所展示的信息要保证一针见血,切忌罗嗦,表达不清。在这样一个网络化、碎片化的时代,用户停留在引导页上的时间越来越短,浏览时间不会超过3秒,在这宝贵的3秒钟内,设计师需要用简洁明了、通俗易懂的文案和界面呈现给用户。
请记住这句话:“用户需求就是你的文案,功能型的例子比比皆是。”

三步搞定引导页设计!

功能介绍型引导页
功能介绍型的引导页在功能划分上分为带按钮的引导页和不带按钮的引导页面两种类型,一般社交类的产品会强制引导用户去登录,所以会在引导页面中加入登录的入口。

三步搞定引导页设计!

引导页登录入口

情感带入型(中级型)

2
情感带入型的引导页是通过文案和配图,引导用户去思考这个App的价值,把用户需求通过某种情感表现出来。这种类型的引导页要求设计形象化、生动化、立体化,用于加强产品的预热,同时给用户带来某种惊喜。

三步搞定引导页设计!

情感带入型引导页

搞笑耍宝卖萌型(高级型)

3
搞笑耍宝卖萌型的引导页的阅读量一般都比较高,拼的是设计效果或动画效果。
这种类型的引导页对设计师的要求比较高,需要设计师化腐朽为神奇,综合运用拟人化和交互化的表达方式,同时还要学会扮角色和讲故事,根据目标用户的特点来进行设计,最终让用户身临其境,获得愉悦的心情。

三步搞定引导页设计!

搞笑耍宝卖萌型引导页

案例分析引导页很重要吗?答案是肯定的。有些人说没人看没啥用,有些人觉得有总比没有好。其实优秀的引导页,不仅可以起到很好的预热效果,还可以让用户开心的阅读下去。作为设计师而言,就是要做到让用户真正去看产品,不然一切设计都是无用的。
那么如何才能设计出一个能让用户停留3秒的引导页?下面就以我最近做的内涵段子的引导页为例给大家介绍一下大概的设计思路和设计过程。
内涵段子属于有趣点和暴走点的设计。创作背景是在内涵段子3.1版的基础之上进行升级,要求在3.12新版中呈现出3个新增功能。
最开始,我努力思考目标用户的需求,把需求引导点罗列出来,然后根据产品定位想出不同的文案。整个设计的周期为一天半,属于正常加急的范畴。在设计过程中首先考虑风格,这个产品本身就是属于娱乐性的产品,所以我选择了用讲故事的形式进行设计。在之前的3.1版本的引导中也用到了比较夸张的表现形式,但是缺乏娱乐性,所以要把故事场景做得更浓重、更有趣一些。
下面我们一起来看一下具体的设计过程:第1步:至少花两个小时找素材!这是很重要的一步,因为时间紧迫,所以需要想清楚了再找。根据目标用户的需求,将自己融入到故事中,我找到了这些素材。

三步搞定引导页设计!

寻找素材
第2步:构图+排版。这是最为重要的一步,同样因为时间关系,所以要想清楚了再做。在设计中我采用了描线的表现方法增强画面的漫画感和人物的夸张感。
①构图设计,即确定页面的统一性和重点文字的区分形式。对于初学者,我建议建立多个PSD文件,先将需要突出的点摆出来,然后进行对比和细节设计,以保证风格的统一性。

三步搞定引导页设计!

构图设计②将需要画的场景用线图的方式勾出来,我是直接用鼠标绘制的路径,这样处理出来的线条比较顺畅。手绘能力强的设计师可以直接用数位板画。

三步搞定引导页设计!

勾画线图
第3步:后期处理。首先是处理色彩关系,整体色调选择了比较鲜明的颜色,但要保证每张图的颜色饱和度一致,同时还要让各图在切换的时候拥有强烈的对比。

三步搞定引导页设计!

后期处理
其次是要加强画面的氛围感,第一张图我用了闪电来突出瞬间变段子哥的感觉,并用纵深的黑线条来加强画面的空间感。以此类推,这些元素也可以用到另外两张图中,体现设计的一致性。

三步搞定引导页设计!

最终效果
好啦!今天就分享到这里!
大家有木有学会哦~~我们明天见!

UI/UX电商视觉/平面

如何有效避免设计作品“空”?

2019-12-21 0:44:41

UI/UX

与几百人实践了数十次,我发现设计师应该这样做用户测试

2019-12-23 8:20:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索