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

用户头像
西安/交互设计师/9年前/619浏览
APP设计之路(二)——引导页

上篇我们讨论了APP启动页,今天小编就带大家说说引导页的那些事。什么是引导页呢?当我们打开APP闪屏过后的那几张页面...

739a5979a4f0a8012193a33faaf9.jpg


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



一、分类


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


1.功能介绍类

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


1b875979a53ca8012193a3fcd82c.jpg

京东


2.品牌强化类

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


92055979a5a0a8012193a3bb9e56.jpg

网易云音乐


e1015979a5e1a8012193a361aa46.jpg航旅纵横



3.问题解决类

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


1b0b5979a62ca8012193a302e83a.jpg蚂蚁聚宝


263d5979a63ea8012193a3c8a391.jpg


4.版本迭代类

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


04415979a662a8012193a3482e0e.jpg


二、表现形式


1.文字+界面


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


5f585979a69aa8012193a39e851d.jpg十六番



2.文字+插画


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


f7275979a6cda8012193a3dcf412.jpg小豆苗



3.文字+明星


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


49715979a6f5a8012193a3879299.jpg新浪微博



4.文字+动态图


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


9c935979a72ea8012193a3732875.jpg



5.文字+短视频


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


c1fa5979a759a8012193a3a047d8.jpg



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

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


1.文案的处理

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


2.图片的搭配

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


3.布局的处理

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

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


10
举报
|
12
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI通用设计素材1
【新年UI图标】30个图标
【新年UI图标】汽车icon
UI界面 组件
【新年UI图标】旅行icon
新拟态风格 UI设计组件库
钱包ui模板
高级表盘系列UI源文件
新能源APP应用UIKit
Security Camera UI kit
科技医疗透明柜UI界面设计
拟物风质感写实UI卡片合集源文件
APP/小程序商业项目UI模板|99个高保真UI+79个原型
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】会员icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
户外旅行飞机情侣假日出行
手表表盘UI系列
【新年UI图标】礼物/活动icon
盲盒APP UI设计
高级感金属拟物 UI设计组件库
【新年UI图标】钱包icon
【新年UI图标】秒杀icon
你可能喜欢
大家都在看
登录注册