关于引导页的整理与分析

随着ui设计的不断发展,引导页的形式也在随着变化,根据不同产品的特性,其作用与意义也不尽相同。本文将分别从“静态引导页”与“动态引导页”两种形式与大家分享我对于“引导页”的一些认识。


随着ui设计的不断发展,引导页的形式也在随着变化,根据不同产品的特性,其作用与意义也不尽相同。本文将分别从“静态引导页”与“动态引导页”两种形式与大家分享我对于“引导页”的一些认识。

关于引导页的整理与分析

狭义上,我们一般认为在初次打开应用时跳出的几张介绍应用功能的页面叫做引导页;从广义上来说,在用户使用某个功能前就达到帮助用户理解和使用,降低用户学习成本功能的页面或存在引导属性弹窗的页面都可以称为引导页。

一、静态引导页

关于引导页的整理与分析

好奇心日报是一款商业资讯类的app,在引导页上选择了以大图作为背景的形式,四张图片为用户营造了一种偏商务、商业风格的场景。

从配色上设计者选择了白色与app识别色-黄色,当用户在浏览完引导页之后进入主界面时不会有视觉上太大的落差,识别色也给用户留下了相对深的印象,容易让用户记住产品。设计者将文字内容分为两级,我们可以清晰的看到粗体被放大的标题型文字与细小的描述型文字。标题型文字将应用的内容重点提炼展示,描述型文字为其作补充,为用户展示“好奇心日报”这款应用的内容。

页面的切换方式为横向切换,这也是我们常规的切换方式,那么下面我们来看一款不一样的切换方式。

关于引导页的整理与分析

这是一款为用户提供旅行攻略的应用,首先设计者选择了一种扁平化的风格,用圆点连接每一张页面,以屏间交互的方式引导用户展示应用的内容。

同样作为内容展示的作用,下面为大家介绍360Camera的设计风格。

关于引导页的整理与分析

360Camera点设计者采用渐变背景搭配轻拟物的风格为用户展示了应用包含的“摄像”、“扫一扫”、“图片编辑”等功能内容。

文案上,用红色放大的字体将这三个内容强化,让用户能够一目了然。

淘宝

关于引导页的整理与分析

计步器

关于引导页的整理与分析

这两款应用采用了明暗突出的形式,相比之下,淘宝采用了比较风格化的形式,但他们同样起到了操作指引的作用。

关于引导页的整理与分析

qq采用了萌系的卡通风格,以用户熟知的吉祥物作为主角对本次更新的功能进行描述。

同样以功能更新说明作为目的还有36氪。

关于引导页的整理与分析

36氪采用了一种比较特殊的弹窗风格,当用户触发模块时才会弹出该模块本次的更新,这是一种用户体验的提升,对用户来说只有“我”关注的才是“有用的”,产品设计者以这一方式帮助用户屏蔽“无用的”信息。

关于引导页的整理与分析

这里我们看到这是微信引起行业内热烈讨论的几个版本之一,黑色底配上文字加手绘,整个页面看起来很简单,但细细品读却又引发思考。将即时聊天做到相对完美的程度之后,微信针对“朋友圈”又做了一次精彩的内容运营。

说到微信就不得不说支付宝,支付宝9.9更新也在业内激起浪潮,纷纷揣测支付宝是不是要做社交,这里不做展开,但是不得不说这一版的引导页让我眼前一亮。

关于引导页的整理与分析

支付宝作为一款与“钱”挂钩的应用,用户关注的重点也一定是“安全”,首先设计者采用了工业设计图的风格对图案进行设计,众所周知工业设计图必须保证精准性,这样的图案给用户一种“严谨”的心理暗示,让用户对支付宝产生信任感。

文案上,支付宝将自己与蒸汽机、电灯、自行车、飞机作类比,用“异想天开”、“天方夜谭”、“荒诞无稽”和“痴人说梦”来描述当时环境下这些发明在世人眼中的形象。将支付宝形象拔高,向用户展现情怀,达到品牌营销的目的。

如果要给支付宝9.9版的引导页找缺陷,那么我认为是用户场景考虑不够,页面缺少“跳过”按钮,工具类应用就是为用户解决问题,当用户处于一种急需支付的状态打开应用时,用户需要划过五张对当前状况毫无帮助的页面,反而对用户是一种负担。

二、动态引导页

随着技术发展,各种各样的展现形式被加入移动端设计中,下面我们来看一看精彩的动态引导页设计。

关于引导页的整理与分析

格志引导页效果预览

格志选择用线框动效搭配文字来对功能进行展现,同时也为用户的操作提供引导和帮助。除了初次进入应用时可以观看到动画,当用户不清楚操作时仍可以通过“设置”模块再次观看动画。

关于引导页的整理与分析

这是“什么值得买”早期的一版引导页,采用了定格动画的形式,作为用户,我在观看的时候出了感觉形式新颖之外并没有为我提供任何帮助或者让我加深对这款应用的认识,当然这只是我的个人感受,如有不同意见欢迎讨论。

关于引导页的整理与分析

从截图可以看出,猫弄的设计是比较风格化的,打哈欠的猫咪嘴巴不断张大从里面游出鲸鱼,鲸鱼带起的浪花中又冒出奇怪的八抓鱼……你永远不知道下一个会出现的是什么,最后页面进入一张“定制你感兴趣的主题”页面。

有的人不禁问这算什么引导?其实,猫弄是一款号称“致力于抗击无聊的高质量文化社区”,打开应用后不断变化的动画就足够吸睛,符合产品本来的调性,而猫弄本身涵盖的主题是非常广泛的。前面说到,对用户来说,他们关心的才是有用的信息,那么这一行为正是帮助用户从海量的内容中去准确定位到对自己“有用的”信息。

关于引导页的整理与分析

好赞选择了用视频的形式作为引导页,这也是对新增的“短视频”功能做一个展示,短视频为用户构建了四种不同的使用场景,搭配好赞标志性的“标签”特点,让用户觉得新颖有趣又牢牢的记住应用的特色。

上文介绍了静态引导页和动态引导页的不同形式,下面给大家总结一下产品设计者所想要达到的目的或者说传递给用户的信息:

关于引导页的整理与分析

在产品设计中,我们如何去判断自己产品需要达到怎么样的效果,这里也是上文介绍中的一条“暗线”:

当一个产品刚刚问世的时候,我们往往想要通过引导页让用户了解产品本身的内容和功能,在使用前为用户提供帮助,那么我们会选择以“内容介绍”与“操作引导”作为引导页的内容;

随着时间推移,产品经过优化之后,针对重大更新我们需要告知用户并提供帮助,以免用户产生陌生感,提高用户学习成本,那么我们会选择以“更新说明”作为引导页的内容;

像微信这样当他将即时聊天做到极致的状态之后就会围绕产品的另一功能进行推广以“内容运营”作为引导页的内容;

产品经过千锤百炼,达到一种相对完备的产品,像支付宝这样用引导页帮助品牌为用户构建一个安全、专业的使用场景,和用户聊一聊情怀。

当然,上面一条规律只是相对常规的考虑方式,根据不同产品还需要各位产品经理仔细思考,例如猫弄、豆瓣这样的产品更适合以“用户信息定位”作为引导页的内容;

又如购物类app,用户在接触许多同类型应用后已经对“购物”的流程相对熟悉,再过多对功能进行渲染反而成为使用上的负担,很多购物类产品会选择以“品牌推广”作为引导页内容,推广品牌“优质”、“新鲜”、“低价”的特点,以让用户对品牌产生依赖感。

以上是个人对引导页的一些分析与分享,欢迎讨论,若有不对之处也欢迎批评指正。

 

作者:密斯徐,一个在产品路上爬行的产品狗,笔芯~

本文由 @密斯徐 原创发布于人人都是产品经理。未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-17 13:48
下一篇 2017-05-17 16:27

相关推荐

  • 你如何设计交互?

    进行界面设计时,很显然我们一上来就会想着画出整个流程。但这真的是最好的方法吗? 我曾偶然进行了编写一个具有想象的人机对话,之后我再继续使用画流程的方式。 编写人机对话的方法改变了我的思维方式,我再也没…

    2015-08-12
  • iOS 9人机界面指南(四)UI元素

    文章索引状态栏展示了关于设备及其周围环境的重要信息。默认(深色)内容
     

    2017-05-26
  • 对话式交互设计

    关注一下,更多精彩等着你1. 轮流表达在对话中我们基于互相来回传递的微妙信号进行轮流表达。如果会话中缺少这种有效的轮流互换,我们就有可能难以保持信息的同步或无法跟上对方的节奏。2. 对话串联在自然语言中,对话的所有元素通常会被连贯地串联起来,包括上下文以及随时间演进的对话方式。这种串联帮助我们跟进会话过程。能够理解欣赏笑话幽默的人都知道,在交流中的每个回合都要注意上下文的关联性,并加强整体的交流。3. 潜在效率人们经常会用简略的口语交流...

    2018-03-21
  • 界面设计中的动画原理:可理解的变速过渡效果-深入研究加速和减速

    注:“可读性”是说动画绘制者如何定义动画的精准度,用来清晰而容易地理解正在发生的事情。例如:不可读=不清楚发生的事情很易读=它非常清楚,立刻能懂弹跳背后的物理理论:球刚开始被放开的时候,它有一个相对缓慢的速度。在重力的作用下,球的速度持续增长,直到接触地面的那一刻速度达到最大。地面给球反作用力,使它以几乎相同的速度反弹回去。当球移动时,两种力量作用正在球上 - 反弹的力、想把它拉下来的重力。反弹的力量正在慢慢释放,这使得球随着升高逐渐减低速度,直到它耗费掉所有的反作用力,最终到达反弹的最高点。它在顶部停留一微秒,直到重力把它拉下来,使它像之前一样加速下降。我用言语来描述这句话是有原因的。我们试着将一种自然行为分解为具体的步骤,这样我们就可以重新创造它。注:不要羞于“照搬”大自然。你的观众会更快地与动画关联起来,从而更容易读懂动画。注意:这一术语有可能与其它术语混淆。如果你正在阅读传统的卡通书,例如迪斯尼的《生命的幻象》或《动画师的生存工具》,那么这些书会告诉你,当一个物体开始减速然后加速时,这一过程被称为渐慢(ease-out),因为它的姿态在“缓慢输出”。但是,在软件产业(CSS动画,Adobe Edge等),这一过程被称为渐快(ease in)!我不确定这一不同之处是怎么来的,但是不幸的是,这就是它的形成过程。所以,当你在阅读一篇文章时,而这篇文章把它们把“渐快”称为“渐慢”,那么不要觉得困惑。看一眼你所在的网站你就懂了:D。时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :  34
    0.2  :  68
    0.3  : 102
    0.4  : 136
    0.5  : 170时间    Y轴的位置(秒) : (像素)—————-0.0  :   00.1  :   2
    0.2  :  10
    0.3  :  36
    0.4  :  87
    0.5  : 170注意:你会在软件中看到更多用于设置缓冲的选项,例如二次的、三次的、四次的等等。它们只是缓和程度更高的选择,但是概念是相同的。只需记住——缓和的程度越高,你就会得到更多的缓和度。并不是规则,只是工具(There are no rules. Only tools)- Glenn Vilppu

    2017-06-05
  • 在网页设计中,图片常用的五点技巧

    图片在网页中所扮演的角色越来越重要。作为最常见也是最早使用的网页多媒体,图片对于网页设计师而言至关重要。如何用好图片已经成为了一项成熟、完善而又讲究的技巧,而在高清屏幕无处不在的今天,稍有瑕疵的图片都在高密度的像素下无所遁形,而不合理的图片设计也不会逃过访客的双眼。很简单,色彩会让观看者分心。

    2017-05-07
  • 设计师进阶:从UED向UXD转型

    UXD(User experience designer)概念为何在当下越来越热?这个新Title对设计师意味着什么?UXD对设计师提出了怎样的新要求,设计师们又如何去转型UXD呢?在设计师转型UXD的背景下,还需要讲求专业精深吗?纯视觉设计师VD(Visual designer)又有怎样的发展路径?

    三位阿里巴巴UED掌门人分别从自身视角对设计师转型UXD进行了解析。

    2017-05-12
  • Axure 原型 | 用Axure画流程图

    当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放吻得太逼真张敬轩 - Urban Emotions作者:陈张良来源:简书用Axure绘制流程图好处是可以随时预览,比较灵活。不过就是没有Visio那么多模板和强大的功能。Axure默认的流程图控件:其实我们最常用的是:矩形、菱形、箭头。因为这些基本图形其实并没有形象的表明它们是什么,更多的还是需要使用者根据自身的流程实际情况多加注释,所以大部分流程图只需使用这两个控件即可。Axu...

    2018-03-04
  • 不是首发!互联网女皇报告中文完整版发布

    腾讯科技讯 6月1日,有“互联网女皇”之称的玛丽·米克尔今天在美国Code大会上发布了2017年的互联网趋势报告,腾讯科技第一时间推出完整中文版。关注腾讯科技微信号(ID:qqtech),回复“女皇2017”,可获得中英文PDF版…

    2017-06-01
  • 做好这4个细节设计,让你的移动APP 用户体验脱颖而出

    启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态,都是容易被忽视,而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。

    2017-05-18
  • 交互设计师的60日计划之第十天

    今天一直处于多线程高并发的状态,所以大脑目前已经死机了。一上午的用户访谈,今天的用户很专业,所以得到很多有用的信息;下午和产品经理过wiki优化的事情,确定大致的方向,然后开了一下午周会;回来和视觉一起…

    交互专题 2015-08-20