如何设计APP引导页?

一、确定风格

常见的引导通常有以下三种风格:

1、抽象示意风格引导页

抽象示意就是将复杂的界面简单化,很多电商app喜欢用界面截图作为引导页,直接使用app里的界面会显得千篇一律,没有特色,而且用户需要仔细地观察界面,才能找到重点,增加了学习成本。

而抽象的引导页,可以简化不必要的内容,用户一眼就能看到重点。如下图,第一页“美团直播”,图上手机整个屏幕来展示播放器,下方又有一个投影仪。很好的突出了“直播”。

整个画面,用流线形讲屏幕分成上下两个部分,上部分是图,下部分是文,这种图文分离的设计更便于用户阅读。

如何设计APP引导页?

2、扁平风插画引导页

扁平风插画引导页一般上方是文案,中间是能展示的插画,最后一页下方往往是放app的logo,或者立即进入按钮。这种风格的引导页颜色很饱满,氛围感很强,有很好的表现力,但是要求插画的内容和文案贴合极高。

要达到这种效果,一般需要设计师长时间的积累。需要更好的手绘基础,舒服的颜色搭配能力,插画需要有好的表现力,且要与文案要有联系,不可独立。

如何设计APP引导页?

3、2.5D风格引导页

2.5D风格的图片是怎样的?什么是2.5D?

2.5D插画设计,一般用于场景设计、引导页插画等,说到2.5d插画,你可能第一时间会想2D应该是平面的,3D是立体的,介于2D和3D之间,那么它就是在平面上面看立体的2.5D透视原理图像,就是物体的正面光面和暗面三面组成,也算是伪3D。

首先,设计师需要设计出明暗、背面、正面三个面的图像之后,拼合后只需要做图像、光影关系的调整,以及整体配色和感觉。并且2.5D插画在题材上也是极为丰富的,天猫双11也已经有了2.5D创意图像。

如何设计APP引导页?

2.5D风格的引导页比3D更为容易绘制,比2D扁平风的运用范围更广,所以近来2.5D风格的引导页也越来越受欢迎。C4D、PS、AI都可以制作2.5D风格引导页。

如何设计APP引导页?

前面两种大家多少都会设计,那么2.5D风格引导页是怎么设计出来的呢?

下面我们用一个案例来介绍2.5D引导页设计方法。

二、文案分析及草图绘制

文案如下,并要求一个字都不能去,画面要丰富。

文案一:1元提现,快速到账。 (玩游戏   做任务  都能赚钱) 

文案二:邀请好友,月入万元。 (好友注册  提成奖励   游戏试玩  边玩边赚 )

文案三:想玩就玩,轻松赚钱。(休闲试玩 娱乐游戏  悬赏任务)     

我们先来画草图

草图可以先在纸上画,画出你大概想要表现的内容,这个时候可以不添加文案。另外画好的草图也可以事先给运营部看一下,这样既可以及时调整,还可以避免成品大幅度改稿的几率。

针对于这种文字较多文案,我们最好采用主标+副标,副标用漂浮气泡框的形式。

如何设计APP引导页?

三、图案绘制并上色

方法一:(适合熟练的人)

首先我们需要绘制一个用60°等边三角形组成的网格。然后开始在AI或者ps里按照参考线一点一点绘制图形,注意给各个图形适当地增加厚度,各个面之间要有颜色变换。

这个方法步骤较少,比较快捷,可以绘制图案,然后上色,适用于对点线面关系很熟悉的人。新手较困难上手。

如何设计APP引导页?

方法二:(适合新手)

可能很多人没法一下子就绘制出图案,或者控制不好面与面之间的关系,下面介绍一种适合小白的绘制方法。以沙发靠背为例。

第一步:绘制一个圆角矩形,控制好圆角度数。

第二步:在AI中,效果–3D–凸出与斜角面板中调整参数。

如下图绘制沙发靠背,选择等角-左方,度数分别设置为-45°、35°、-30°,厚度设置为50pt。

如何设计APP引导页?

第三步:扩展外观。对象–扩展外观–两次取消编组。

选中图案,在对象–扩展外观–右键两次取消编组,然后把图案拉散,这时得到了各个面的矢量图形。

如何设计APP引导页?

第四步:ps里调整颜色。

在ps里将各个面组合起来,重新调整颜色,添加渐变色,让配色更加舒服。

按照前面的三步绘制其它各个组件,(注意:例如沙发扶手,3D则需添加等角-上边,另外需设置适当的厚度。)栅格化后去ps里进行拼凑,拼凑时可以借助三角形网格图。

如何设计APP引导页?

四、添加质感,优化细节

亮部暗部处理,颜色过渡自然。

添加气泡框,调整气泡框的颜色和大小,使其与整体画面不突兀。

添加小装饰,使画面更丰富。

添加菱形底座,不仅可以使三个页面具有一致性和关联性,还能增加画面立体感。

我的配色主色是蓝色,所以每一页都有至少一个物体上蓝色,为了与画面更搭,主文案也选择蓝色系。

如何设计APP引导页?

增加气泡动效,一个2.5D风格的引导页就完成啦!

如何设计APP引导页?
分享到: 新浪微博 微信 QQ好友 QQ空间 豆瓣

相关新闻

联系我们

155-0755-1234

在线咨询:点击这里给我发消息

邮件:b@xshd.net

工作时间:周一至周五,9:30-18:30,节假日休息