• 如何设计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,节假日休息

    幸运快三下载平台