关于引导页的整理与分析

随着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

相关推荐

  • 新手福利!超全面的UI设计切图规范指南

    移动UI设计切图是UI设计师最重要的设计输出物,切图资源输出是否规范直接影响到工程师对设计效果的还原度。设计师的切图输出物是是体现一个设计师专业水准的重要标准,同时也是设计师表达自己对设计态度的最有力的语言。合适、精准的切图可以最大限度的还原设计图,起到事半功倍的效果。如何输出具有全局把控和细节专注的高段位切图,应该是所有设计师一直需要追求的能力。

    2017-05-11
  • 什么是IxD交互设计?分分钟搞懂其中的关键要素!

    先讲个故事,小互是个销售员,下午出去拜访客户,完事后发现已经六点多了,非常饿,小互想回家自己做饭吃,但是实在是太饿了,回家又要做好久的地铁,还不如就在附近找家小饭馆吃了呢,于是环顾四周,发现马路对面…

    交互设计 2015-01-26
  • 译文 | 记忆设计:怎样设计可被牢记的友好体验

    本篇文章中,我将向大家分享:怎样设计能够为用户留下一个记忆中的正面印象?在以前,锁匠开锁需要花费很多时间开锁,甚至需要将整个门破坏掉,那个时候,顾客通常会很满意的付给锁匠报酬,甚至是优厚的小费;但现在,开锁的设备更加先进了,锁匠开锁花费的时间越来越少,锁匠能够做到在三、四分钟内将锁打开,然而顾客却变得越来越吝啬,锁匠再也收不到优厚的小费了,并且常常被抱怨要价偏高,他们认为锁匠并没有花费太多的功夫就将锁打开了。

    2017-05-19
  • 让手势设计带你的产品体验“飞”…

    小Q在《细节体验|你离用户只差一个好的交互》一文中较为详尽的归纳了反馈给用户体验带来的好处,那么,今天我就继续讲讲“动作”(即为手势)是如何让你的产品体验可以“飞“起来的。本文所指的直接操作内容的自然人机交互方式,不仅符合用户的感知习惯,也能很好地节约屏幕空间,创造沉浸式的阅读体验。一是滑动过程中页面要跟随手指,这样能让用户形成对产品的控制感和更明确的层级感,二是滑动过程中,用户的视觉可以看到的空间更整洁,体验更纯粹。

    2017-05-17
  • 搞定长滚动网页设计的四个技巧

    长滚动页面和无限滚动式的网页已经彻底流行开来了,甚至可以说它已经脱离趋势,成为了一种常规的设计,它们的流行并不是巧合。当用户向下滚动的时候页面的时候,所需要的内容与信息会自然的呈现出来,在此过程中通常不会涉及到额外的、多余的交互。

    2017-05-09
  • 交互设计:谈谈那些极具争议的设计方法

    作者:中大yzh全文共 2556 字,阅读需要 6 分钟———— / BEGIN / ————交互设计是一门有关设计学、用户心理学、图形学和计算机理论的综合型新兴领域,由于其及其复杂的学科交叉性,以及在不同的情景下,对同一类组件的要求经常会有所不同,导致目前在该领域内有时会出现一些看似正确其实极富争议的设计方法。在这里,我们就讨论一下这些具有争议的设计方法。争议方法1:在线填表时应该标注“可选填”的填表项在线填表时,需要在表格上面注明“...

    2018-02-01
  • 写在 [ 交互设计小厨房 ] 一周岁

    时光荏苒,感谢无情岁月!感谢大家容忍这个公众号『隔三差五』抽疯式的更新;感谢太太长期战斗在『丧偶式育儿』的第一线;感谢各位『互联网老炮』容忍洒家在微信群里污力十足的飚车;最后还要感谢这个优雅的排比句。当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放金平糖の精の踊り~カチューシャ浜口史郎 - 『ガールズ&パンツァー』オーケストラ・コンサート~Herbst Musikfest 2015~产品厨子的运营总结2017年3月24日,『交...

    2018-03-24
  • 一个精美的手机的原型怎么产生的-第二集

    阿西录了下视屏尝试下最直接的方式 ,你看着阿西怎么做原型设计的。最简单方式往往最有效。 这段是:安卓手机,Axure手机框组件的视屏教程-2 在线播放! 第二集: 第一集下载地址:点我点我 第二集下载地址:点我点…

    交互设计 2014-09-06
  • UX分析:朋友圈的外链知多少?

    用户体验设计的核心是用户,而用户是通过社交媒体相联系的,在设计app应用时,我们会更在意app内的使用,而会忽略app外的使用。当我在朋友圈里看到这些外链的时候就想到了要写这样一篇文章,略显粗浅笨拙,如有不当之处请不吝指教。“来跳坑吧,下载我吧,打开我吧”!

    2017-05-08
  • 移动APP中各种类型的导航设计

    即使是移动应用界面的原型设计,导航的形式也可以多种多样。尽管尺寸小,又必须紧凑排列大量数据,它们似乎受到了紧密的约束,但依然有着形形色色的选择。 人们曾经一度只会考虑一种形式——流行且广泛使用的垂直导航…

    2014-11-06