3秒即灭,APP引导页如何闪亮

3秒即灭,APP引导页如何闪亮

大家原谅我健忘的大脑,一直想写App经验总结,却不知道从何说起,真是对不起群众,对不起组织,对不起俺的一个好肾。这也不能完全怪俺,小学的时候语文就没考过100分,害怕写的浅了不疼不痒,浪费看官们 陪女朋友的时间;写的太深了吧,咱又不是大老粗搞学术研究。

看官不要着急,咸淡结束,这就进入正题。

今天主讲:如何做App安装引导页(心急的同学可以直接跳转到第二部分)

一个好的App引导页,能够最迅速地抓住使用者的眼球,让他们快速了解App的价值和功能,起到很好地润滑和引导作用。一句话说的好,好的ui可以造就App的点击率。点击率是啥——是钱呀!

在做引导页之前,首先要学会定位,知道这个app属于哪个圈子,在当下这个时代,站错队是要吃大亏的(谨记)。 (别着急,下面有怎么设计攻略)

简单的说,引导页无外乎三种:

1.功能介绍型

2.情感带入型

3.搞笑耍宝卖萌型

1.功能介绍型(基初期)

是最基础的,就是有啥说啥。误区是,说话罗嗦,表达不清。

用户需要的一针见血,在这样一个网络化、碎片化的时代,人们停留的时间越来越短,浏览你app界面的时间不会超过3秒,在这宝贵的3秒里,你要用简要明白、通俗易懂的文案和界面来呈现,突出重点就可以了。

记住这句话:用户需求就是你的文案。

功能型的例子比比皆是。

3秒即灭,APP引导页如何闪亮

原创实例:360家庭网管

2.情感带入型(上升期)

走肾还是走心是个问题,得要用户顺着你走。

通过文案和配图,引导用于去思考这个App的价值,把用户需求透过某种情感表现出来,更加形象化、生动化、立体化,加强产品的预热,让用户有种惊喜感,我在这套设计主题色为黑色,凸显产品的稳重和安全性,直接用图标来表达我想阐述的情景,用更为纤细的线来体现产品推出的内容的精致性。

说的有点理论化哈,下面看个例子,体会体会。

3秒即灭,APP引导页如何闪亮

原创实例:钱生钱

3.搞笑耍宝卖萌型

化腐朽为神奇,综合运用拟人化、交互化表达方式,要学会扮角色、讲故事,根据目标用户特点来选择。让用户身临其境,最后使用户心情愉悦,这种类型的阅读量最高,拼的是设计效果(或动画效果),属于高级阶段。

3秒即灭,APP引导页如何闪亮

原创实例:内涵段子

能耐着性子看到这里,不知道你有没有这样的疑问:

那个嘀咕一下,引导页有那么重要吗?

有些人说没人看没啥用,有些人觉得有比没有好,有产品觉得很重要,那是产品的面子。哈哈~其实做好了还是有点用的,我感觉有两个目的,预热和好玩开心。我们设计师就是要做到用户真正去看,不然要我们还有何用啊。

第二部分

怎么设计一个能让用户停留3秒的引导页?

我就以最近做的这套内涵段子引导为列吧,属于有趣点加暴走点的设计。这样看着可能轻松点。创作背景:这次任务是在内涵段子3.1版基础之上的升级,要求在3.12新版中呈现出三个新增功能。

最开始,我会努力体会目标用户的需求,把需求引导点列出来,根据产品定位想出不同的文案,到设计这边已经是定下来的文案了。

预计整个设计的周期为一天半,属于正常加急的需求。时间不多,拿到文案后,我们怎么去理解和定位呢?

设计过程中首先考虑风格,本身就是娱乐性的产品,所以我选择了讲故事。在之前3.1版本的引导中也是用的比较夸张的表现但缺乏娱乐性,这次希望把故事的场景做的更浓重些,更有趣,大叔萝莉都来吧!

具体设计过程:

1.找素材

这是最为重要的一步,时间紧急,想清楚了再做。

找对是关键,做一个设计的搬运工,融到自己的故事中。你也可以说这是抄,但我只想毫无保留的把我做图的过程告诉大家,怎么做一个灵活的设计师。

3秒即灭,APP引导页如何闪亮

从花瓣来的素材很全,画面已经清晰的浮现在我的眼前。画面中的场景,人物动态,表情已经都全了,现在可以开始制作了。

2.构图+排版

设计中我采用了描线的表现方法,这样感觉漫画感脚更强,人物表情能更夸张。

第一步构好图,保证这套引导的统一,文字的大小。重点文字的区分形式等。

初学者我建议建立三个psd,把需要突出的点讲出来。这样好一起打开进行对比,保证风格的统一性。

3秒即灭,APP引导页如何闪亮

第二步将需要画的场景已线图的方式勾出来,在这我直接用鼠标绘制路径,个人习惯这样制作,这样处理出来的线条会比较顺畅。手绘能力强的可以直接用数位板画。

3秒即灭,APP引导页如何闪亮

3.后期处理

首先是处理色彩关系,整体颜色选择了比较鲜明的颜色,每张的颜色饱和度一直,切换的时候对比强烈。

3秒即灭,APP引导页如何闪亮

其次,加强画面氛围感,第一张我用了闪电来突出瞬间变段子哥的感觉,并用纵深的黑线条加强了画面的空间感。以此类推我也把这写元素翻到了另外两张图中,加强了一致性。

3秒即灭,APP引导页如何闪亮

大功告成,展示一下。

3秒即灭,APP引导页如何闪亮

作者Micu设计小结:

设计方法很重要,灵活很重要。不同的需求不同的玩法,时间紧急一样有办法做出好的东西,水来土掩兵来将挡,UI没有想象那么难。

更多资讯请关注:木卫艾欧:www.https://www.iamue.com/www.ued.xyz  官方微信:Aioued     官方微博:木卫艾欧网
视频教程请关注:交互学堂站:www.JhxT.org            官方微信:IxDSchool   QQ群:156360020

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/1736/

(0)
iouedioued
上一篇 2014-12-05 10:37
下一篇 2014-12-08

相关推荐

  • 掌握这5个方面,让你具备真正的交互设计思维!

    Z Yuhan(英国约克大学人机交互硕士):交互思维是什么?网上的搜索结果大多是一些交互设计 的方法。但是我这里要讲的,是真正做交互设计 所具备的思维方式。交互设计在国内发展的并不成熟,还有很长一段路要走。很多人,甚至包括交互设计师自身,对这一工作的性质和价值都未必有足够的了解。

    2017-08-21
  • 【18应届报考北师大map用户体验方向】经验分享贴

    BNU学习小组互助互帮,轻松考取北师大,我们团队致力于为报考北师大MAP心理学专业的学弟学妹提供最精准的专业课辅导,官方微信:yanni513351。QQ:2194691060。专业课方面:普心、社会心理学我主要是看书背知识点,这两门课不难理解,看书熟悉内容以后将知识点背熟就可以,另外要通过做题检验自己的程度。测量心理学、实验心理学和统计心理学这三门课注重理解,尤其是统计心理学,要将每个知识点弄懂是什么意思,再做题巩固。而实验心理学重点...

    2018-04-15
  • 分屏式设计正在逐渐流行,常见的玩法有哪些?

    不论如何,内容为王,而形式服从于内容,谨慎选择。

    2017-05-06
  • 在处理 CRO 与用户体验设计时常会犯的四项错误

    转换率优化(Conversion Rate Optimation, CRO)逐渐受到越来越多的关注。资本雄厚的公司通过增长黑客团队与持续优化作后盾,也影响越来越多人搭上 CRO 的风潮。整体来说,重视对网站效果的测试是一件好事。转换率(Conversion Rate)= 欲望(Desire)─ 障碍(Friction)

    2017-05-17
  • 干货推荐|数据可视化的五个步骤

    数据被称作是最新的商业原材料「21世纪的石油」。商业领域、研究领域、技术发展领域使用的数据总量非常巨大,并持续增长。就Elsevier而言,每年从ScienceDirect下载的文章有7亿篇,Scopus上的机构档案有8万个、研究人员档案有 1 千 3 百万,Mendeley上的研究人员档案有 3 百万。对于用户来说,从这个数据海洋中抓到关键信息越来越难。

    2017-05-29
  • 实践分析产品第一天

    【分析思路】 首先要明确,产品是面向用户的,当分析一个产品的时候,我们要先以用户的角色按照设计师的引导整体走一遍,也就是遍历每一个操作,每个设计师都会有一条设计主线,把杂乱无章的功能点根据用户的期望及…

    交互设计 2015-08-25
  • Axure 8.0手机页面拖动弹回效果

    Axure RP8.0教程 手机页面的拖动和弹回效果 。用户向上拖动页面,页面向上滑动。用户向下拖动页面,页面向下滑动。当用户拖动页面到最底部时,页面弹回显示第一屏。当用户拖动页面到最顶部时页面弹回显示最后一屏。步骤一.在部件库中拖入一个图片部件,双击打开浏览手机外壳图片,加入到工作区中,跳转这张手机外壳图的大小和位置。步骤二在手机内部框中制作一个列表页面,页面,使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合,设计一下...

    2018-03-10
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 四维世界的交互演进:交互的演进历史

    你有没有想过,这个世界其实并不是你看的那样?你有没有想过,其实唯心主义和唯物主义的区分,从本质上看其实还是唯心主义?今天咱们简单谈谈交互的演进历史。

    2017-05-28
  • 译文 | 在UX设计中利用色彩影响情绪

    颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

    2017-05-25