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

 

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

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

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

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

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

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

  1.功能介绍型

  2.情感带入型

  3.搞笑耍宝卖萌型

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

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

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

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

  功能型的例子比比皆是。


  原创实例:360家庭网管

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

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

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

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


  原创实例:钱生钱

  3.搞笑耍宝卖萌型

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


  原创实例:内涵段子

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

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

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

  第二部分

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

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

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

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

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

  具体设计过程:

  1.找素材

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

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


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

  2.构图+排版

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

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

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


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


  3.后期处理

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


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


  大功告成,展示一下。


  小结:

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

时间: 2016-10-31

3秒即灭,APP引导页如何闪亮的相关文章

手机-app引导页自适应无法解决

问题描述 app引导页自适应无法解决 我现在做一个app引导页自适应轮播图,效果虽然出来了,但无法做到自适应,求大神指点或推荐个学习的地方?? 解决方案 你是做安卓的还是IOS

Android app引导页(背景图片切换加各个页面动画效果)

先看效果图: 转自:http://blog.csdn.net/lowprofile_coding/article/details/48037095 1.显示三个页面的Activity  用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了view pager,实现了背景图片的移动效果. /** * 主Activity * @author ansen * @create time 2015-08-07

app引导页(背景图片切换加各个页面动画效果)

前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求,程序员各种苦逼有木有,在这个过程中也学到了蛮多东西的,所以写一篇博客跟大家分享一下.   先看效果图:     1.显示三个页面的Activity  用view pager去加载三个fragment实现,控制点点点的切换,监听view pager的切换,控制fragment动画的开始跟结束,重写了

app-Android 引导页!!!

问题描述 Android 引导页!!! 最近发现很多APP引导页是一段视频,这是怎么做的? flash ? 不可能是手写代码实现动画效果吧 解决方案 http://blog.csdn.net/hknock/article/details/12161159http://blog.csdn.net/nmsoftklb/article/details/12943483 解决方案二: 1.GIF 2.自定义动画 3.帧动画 解决方案三: 直接播放一段视频就行了. 也有可能是GIF 解决方案四: 应该是U

如何做好App的引导页?

如 何做好App的引导页? 时间:2014-09-25 02:45 来源:网易uedc 作者:battle_pan 当你第一次打开 一款应用的时候常常会看到精美的引导页设计,它们在你未使用产品之前提前告知你产品的主要功能与特点,第一次印象的 好坏会极大地影响到后续的产品使用体验.因此各个公司都在努力将这几个页面设计好,从一开始就引人入胜.那接下来我跟大家一起来探讨关于引导页的设计. 一.目的区分 根据引导页的目的.出发点不同,可以将其分为功能介绍类.使用说明类.推广类.问题解决类,一般引导页不会

APP设计欣赏课堂:引导页设计赏析

  摄氏度:在APP的启动页做品牌展示后,越来越多的开发者开始打起了前置引导页的主意,广告营销.操作教程.品牌引导--显然引导页可以做的东西比启动页要多,同样更多的启动页正在被开发者们玩坏. 奥卡姆剃刀原理:如无必要,勿增实体.绝大部分情况下,引导页都无存在的必要,让用户第一时间接触APP才是最重要的事情. APP操作教程类:Taasky & Wthr & Launch Center Pro APP功能说明类:Yummly & Sosh & Yahoo News Diges

22个知名APP启动引导页设计欣赏

  启动引导页面设计对APP来说非常重要,简洁的3-5个页面传递给用户APP更新的重要功能.引导用户体验.重大活动推出等等.设计师该如何设计呢?本文精选了22个APP启动引导页,供大家参考. 陌陌 百度地图 QQ 2014 QQ 手机QQ浏览器 糯米 高德地图 易信2014 高德地图 2013圣诞节 马蜂窝 来往 3.8淘宝生活节 2013天猫双十一活动 微博 微视 聚美优品 One 豆瓣 当当 百度文库 QQ电影片  

App应用引导页设计教程

引导页是用户在首次安装并打开App应用后,呈现给用户的说明书.目的是希望用户能在最短的时间内,了解这个应用的主要功能.操作方式并迅速上手,开始体验之旅.既然是说明书那难免不受待见,因为我们的用户总是傲娇,他们不喜欢被教育.被说明,他们喜欢一口气划过引导页,直接上手,但是在碰到问题.遇到挫折的时候又会各种别扭.所以这就需要设计师非常用心的去处理引导页的设计. 丰富多彩.风格迥异的引导页设计 有些引导页则沉稳大气,适合资讯类的应用,给人以可信赖感.例如搜狐新闻客户端的引导页设计,摒除了所有多余的设计

iOS App初次启动时的用户引导页制作实例分享_IOS

      应用程序APP一般都有引导页,引导页可以作为操作指南指导用户熟悉使用:也可以展现给用户,让用户了解APP的功能作用.引导页制作简单,一般只需要一组图片,再把图片组展现出来就可以了.展示图片组常用UIScrollView来分页显示,并且由UIPageControl页面控制器控制显示当前页.UIScrollView和UIPageControl搭配会更加完美地展现引导页的功能作用.下面我们来看具体的实例: 我们用NSUserDefaults类来判断程序是不是第一次启动或是否更新,在 App