详细解析移动APP引导页的设计技巧

雅杰life

雅杰life

2016-02-16 19:18

想要天天向上,就要懂得享受学习。图老师为大家推荐详细解析移动APP引导页的设计技巧,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

很多人说:好的产品不需要引导页。在我看来,这是一个伪命题。首先,这反应了一个产品的态度,引导页充当的并不仅仅是功能说明;其次,除非你的APP名字叫微信,更何况微信这样的产品偶尔也会有引导页。

引导页之于APP的重要性,可以用毕业证书之于应届毕业生的关系来形容。

一流院校的毕业证书能够助你更好地敲开企业的大门。虽然学校的好坏不能说明一切,但是综合来讲,好学校的教育资源更雄厚、更丰富,培养出来的学生质量也就更高。因此,仅凭一张纸你就能快速地获得面试官的亲睐,赢取面试官的信任。

同理,好的启动图从侧面说明APP的特性,能够在第一时间博得用户的芳心。然而,现在的问题是每个应用都有启动图,用户的审美已经疲劳,对启动图已经视而不见,能跳过就跳过,不能跳过也快速翻过。可悲可叹之余,也不免要反思一下其中的缘由。

一、引导页的意义

对于开发者来说,引导页可以帮助用户快速建立对产品的认知,例如产品的属性、理念、功能等。不同的产品,引导页的侧重点也各不相同。

1.功能说明

对于大多数APP来说,引导页展示的多是产品的主要功能,相当于APP的新手引导。至于原因嘛,可以通过以下场景形象生动地来描述。

试想:你走进一家餐馆,服务员热情地向你推荐本店的特色菜,抑或是新推出的菜品。目的也很简单:一方面这几个菜品是我们精心烹制的,尽管尝试,一准没错;另一方面,老板指望着通过这几个菜品赢得用户的认可,从而在同行中打响名声,赢得回头客。例如下图所示的搜狗地图的引导页:

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(搜狗地图)

2.特性介绍

对于初上线或是有重大版本更新的产品来说,引导页介绍产品特性的意义要胜过介绍产品功能。因为这些特性通常是其独一无二的,能够直击痛点,帮助其产品在同质化问题泛滥的当下脱颖而出。例如下图所示的站酷的引导页,原创内容和设计交流都是它的产品特性,其中原创发布对于读者来说可以看到更多精彩优质内容,发布作品获得更多关注对于发布者来说可以获得更大的成就。

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(站酷)

3.理念传达

这类产品通常较感性,通过相同的理念、相同的情感和用户建立一种情感互联,从而增加用户的使用粘性。例如下图所示的虾米音乐的引导页,每一张图片都是动态的大图,真实而富有感染力的场景、黑白照片的色调、白色的手写文字,这些无一不传达出一种追求自我、追求自由、追求爱情、追求音乐的真挚感情。

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(虾米音乐)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

这一类引导页可以用走心两个字来形容,用户一般会仔细品读其背后所传达的情感。除了感性的产品之外,工具型的产品偶尔也可以打一打情感牌,例如在公司十周年或者某些特殊节日的时候。

二、引导页的表现形式

通过前面的内容介绍,大家应该已经认识到引导页的表现形式可谓是不拘一格,下面就一一道来。

1.文字+截图

相信大家一看到标题就能在脑海中想象这类引导页长啥样了,没错,就是你想的那样。运用截图直接说明产品的功能,可谓是简单粗暴,一点悬念都没有了,有木有。缺点嘛,当然是太过形式化,没啥创意。因此,这类形式的引导页现如今已经很难再见到了。例如下图所示的微医良药的引导页,直接在APP截图的基础上做了些变化。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/pmsj/)

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(微医良药)

2.文字+插图

这种形式的引导页已然到了泛滥的地步,但凡是个用心做的APP,大都会采用这种形式的引导页。插图通常会采用描绘一幅场景来表现引导图所要传达的信息,形象而生动,便于用户理解。例如下图所示的招商银行的引导页,整体采用素雅的配色,简洁的文字配上形象的插图,整个页面给人感觉十分清爽、易读。

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(招商银行)

第一张图中使用卡尺来表示专业,这是因为卡尺度量的精度更高,通常是技术人员才会使用;第二张图中用瑞士军刀来表示简单(一个账户管理多张银行卡),相信这个就不用解释了吧;第三张图中用保险柜的密码锁来表示安全,这个也可以pass了;第四张图用电报机来表示心有灵犀(智能互动),这个理解起来稍微有些绕弯子,电报机可谓是现代社会远程信息传递的鼻祖,人、手机、网点之间也是一种信息传递的关系。

3.动态图片

目前采用动态图片的APP不多,与静态图片相比,动态图片更加形象生动、通俗易懂。先不说理论,看一个案例先,例如下图所示的手机百度的引导页(一时半会找不到其他的,姑且看这个吧)。

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(手机百度)

动态图片能够将引导页的信息按照时间先后顺序进行展示,用户按照设计师规定的流程进行浏览。一方面,这种展现形式更加生动有趣;另一方面,这种展现形式也便于用户了解设计师所要传达的信息。缺点嘛,自然是开发成本有点高。

4.动态视频

如果说前面的引导页你都已经看腻歪了,那么动态视频这种形式的引导页你绝对会百看不厌。这里所说的视频,可能是真实拍摄的,也可能是电脑制作的。当然喽,并不是所有的APP都适用于动态视频的引导页,因为视频制作的成本更高,而APP迭代的速度又很快,通常是一个月一版。且视频在制作时需要有确定的思路和脚本,否则传达的效果可能不佳。

那究竟适合什么样的产品呢?还是那句话,先看看几个例子先,相信大家看完之后就会明白:

(Enjoy)

Enjoy是一款提供高品质美食团购的APP,形容词是高品质,那怎么通过视频诠释高品质呢?视频中可以发现,Enjoy精心挑选了几种颜色鲜艳、造型别致且容易勾起食欲的食材进行展示,包括准备过程和烹制过程;此外,还有白色整洁的桌布、擦拭高亮摆放整齐的刀叉。

动态视频适合表现某个主题或是概念,多用于生活方式类的APP,例如美食(Enjoy)、健身(Keep)、音乐(虾米)、阅读(MONO)、传统文化(榫卯)等等。大家有兴趣的可以下载一睹真容,看看是否能够打动你的内心。

三、引导页的设计总结

通过对引导页的目的以及表现方式进行分析,相信大家对APP引导页有了一个较为完整的认识。然而,在具体设计的过程中,也要遵循原则。

1.文案言简意赅,突出重点

纵观以上案例,可以发现几乎所有的引导页都有文案。文案能够引导用户对引导页进行快速地、正确地理解,这是因为图片虽然能够突破语言的障碍,但是在理解的时候仍然会有一些困难和偏差。

因此,在设计文案的时候应该言简意赅,突出重点。用户下载APP是想快速地使用,文案过长不仅仅影响阅读的效率,也影响用户的心情。

根据爱尔兰哲学家汉密尔顿观察发现的7±2效应:人的短时记忆的容量为7+/-2 ,即一般为7 ,并在5-9之间波动。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。如果9个字也无法表达你内心想说的话,可以辅助一小段文字进行解释和补充。辅助的文字在视觉上应该进行弱化,包括颜色、文字的大小。还是以招商银行的引导页为例吧,图片上方的文字是重点,图片下方的小字是对其补充说明。

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

(招商银行)

此外,文案应该采用X型文案,即通俗易懂的语言,哪怕是大白话。虽然Y型文案逼格较高,但是不够接地气。

2.与产品风格保持一致

产品风格不仅表现在视觉层面,即色调、颜色;还表现在产品的特性,即给人的整体印象。如果是娱乐类产品,则风格应该是热情活泼;如果是文艺类产品,则风格应该是文艺小清新;如果是金融类产品,则风格应该是规整严谨...

例如下图所示的每日故宫的引导页,底部背景是一把古代的扇子,圆形插画里描绘的是古代的一些绘画手法,文字采用竖排版。这些都透露出中国风、古典等气息。

详细解析移动APP引导页的设计技巧,PS教程,图老师教程网

除以上两点外,应该在每一页都预留跳过或是直接进入APP的入口,用户可随时掌控。又或者,一些APP则直接显示的是登陆/注册按钮。

展开更多 50%)
分享

猜你喜欢

详细解析移动APP引导页的设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析移动APP引导页的设计技巧

详细解析如何设计移动应用引导页

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析如何设计移动应用引导页

什么是极简主义 如何打造极简风格家居

家居设计 装修设计
什么是极简主义 如何打造极简风格家居

优秀的移动端APP应用引导页设计欣赏

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
优秀的移动端APP应用引导页设计欣赏

详细解析引人入胜的引导页设计技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析引人入胜的引导页设计技巧

2017榻榻米书房设计装修效果图 榻榻米书房设计图片

榻榻米 书房 装修设计 书房设计 平面设计
2017榻榻米书房设计装修效果图 榻榻米书房设计图片

详细解析2024年的移动APP设计趋势

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析2024年的移动APP设计趋势

详细解析移动APP导航设计的改版实战

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析移动APP导航设计的改版实战

2017春夏女装风衣外套流行趋势

服装设计 平面设计 设计 服装搭配
2017春夏女装风衣外套流行趋势

精选时尚风格的低多边形人像欣赏

精选时尚风格的低多边形人像欣赏

浅谈新人的平台型产品设计分析缺了什么

浅谈新人的平台型产品设计分析缺了什么
下拉加载更多内容 ↓