APP设计之路(二)——APP引导页

上篇我们讨论了APP启动页,今天小编就带大家说说引导页的那些事。什么是引导页呢?当我们打开APP闪屏过后的那几张页面就是我们今天要说的引导页了(大家应该都知道吧,大神跳过),它的出现通常是一组页面,一般是3~4张,最少不少于3张。引导页这块风水宝地已经被各大商业大佬看作是抢夺市场先机的咽喉要塞,它可以用来阐述APP的功能或者是引导用户如何操作APP,又或者是版本迭代后全新功能、视觉界面体验的载体,所以每个公司都在极力想法设法的把这块做好,怎么做才会引人入胜,过目不忘呢?这是值得大家思考的问题。好了,废话不多说,下面就让我们谈谈这个让人欲罢不能的引导页思密达。


一、分类

根据所要表达的目的和出发点的不同,我们可以把引导页分为5大类:

1.功能介绍类

这个类型也是最为普遍的一种,被各大公司所使用着,这种类型的设计旨在用户进入首页之前向用户展示APP的核心功能。一般采用图文结合的表现形式。以下是这类APP的截图:

京东


2.品牌强化类

这类引导页除了向用户展示APP的功能外,还会带有品牌的传递,设计者更多的是要表达产品的态度和做产品的情怀。所以这类引导页对设计者有一点难度,你必须精准定位你的配色、布局、页面元素的空间比例和大小比例,必须确保你的页面风格和主题风格一致。要不然心猿意马的设计只会是南辕北辙的下场。以下是这类APP的截图:

网易云音乐
航旅纵横


3.问题解决类

这类引导页一般会以上“�文字+界面”的形式呈现出来,告诉用户这东西怎么用。这类设计一定要简洁、干净,突出主要表达的思想就行,让人看了一目了然,切不可胡乱设计,画蛇添足。有些APP会在第一次进入时也会出现指引页(我习惯叫它内部指引页),这种指引页会以蒙版加透明度作为背景,“文字+图案”或者,“文字+小插画”的形式呈现,内容颜色一般为白色,具体设计还是以产品为导向进行。以下是这类APP的截图:

蚂蚁聚宝



4.版本迭代类

这类引导页也是最为常见的一种,它页面承载的内容也很简单直观,就是像用户说明新版本中有什么新功能加入或者是界面的改版等等。以下是这类APP的截图:


二、表现形式

1.文字+界面

这类页面以文字(大标题+小标题)+功能界面的形式呈现出来,通常用于功能介绍类和版本迭代类。虽然设计形式上简单粗暴,但是它也是有弊端的,由于使用了页面的界面来呈现,是的整体看起来太过于板块化,太呆板。以下是这类APP的截图:

十六番


2.文字+插画

这类表现手法会使得页面看起来生动活泼,好的设计可以让用户驻足观赏。以下是这类APP的截图:

小豆苗


3.文字+明星

这类一般很少见,因为请明星代言代价也是不小的,只有一些大公司才会采取此方法,用明星效应来打品牌知名度。这种做法一般会出现在一些重大活动或者是在平台联合策划一些专题,又或者是主打一项主功能。例如微博某次更新后的引导页:

新浪微博


4.文字+动态图

人类始终是视觉动物,随着社会文明的进步,科技在进步,人类的审美也在潜移默化的发生着改变。静态的页面已经不能满足人类的要求了,在这样的局势下,很多设计师开始尝试着做一些动态图来满足人们的需求。这种引导页虽然增加了页面的趣味性,但是由于是动态的,体积占比就比静态的图能大一点,这样对于页面加载的时间就会延长,用户等待时间也会随着增加。如果网不好的话,用户可能直接会退出APP,所以不推荐使用。以下是这类APP的截图:

5.文字+短视频

这种类型的引导页和动态图得出差不多,这里就不过多赘述了。以下是这类APP的截图:

以上就是小编对于引导页的一些真知灼见,还望广大射鸡狮多多包涵,小编不胜感激。

最后对于引导页最一些总结:

1.文案的处理

根据乔治米勒的研究,人类短期记忆一般一次只能记住5-9个事物。7+2原则,即由于人类大脑处理信息的能力有限,它会将复杂信息划分成块和小的单元。所以标题文字尽量控制在9个字以内,如果标题不足以说明想要表达的主题思想,就加一段辅助文字作为补充说明,文案的提炼一定要言简意赅,能减尽量减,能让用户一眼就看出来你要表达的东西,做到干净不臃肿才是最好的。

2.图片的搭配

不管是插画还是动态图或者是短视频,色调一定要和整体APP保持一致,不能随心所欲。

3.布局的处理

文字和图片一定要形成鲜明的对比。依据从上到下,从左到右的原则,在空间上给出一定的设计层次,让用户的视觉聚焦到你所要传达的地方上去。一般采用中心扩散的方法去实现,中心区域视觉感最强,然后向四周扩散,边缘最弱。

 感谢大家花费时间来看小编写的东西!2017,祝大家:行好运!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,127评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,103评论 4 62
  • 1 UI设计基础 1.1 为iOS而设计 1.1.1 iOS包含以下3条设计原则: 遵从,UI应该有助于人们理解内...
    Willry阅读 3,574评论 1 48
  • 2017年9月30日。母亲很少一早打我电话,急促的铃声,不祥的预感。“赶紧回来吧!二伯早上摔了一跤,走了!”母亲哽...
    周漠阅读 898评论 6 0
  • 2017年2月8日 星期三 人生路上,只有奋斗才能给你安全感。不要轻易把梦想寄托在某个人身上,也不要太在乎身旁的耳...
    zkishi阅读 270评论 0 0