关于引导页的整理与分析

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

相关推荐

  • 在网页设计中兼顾所有用户和场景的3个技巧

    用户可能是新手、专家或介于两者之间,要根据用户情况设计界面。△ 使用适当的新人引导(四种主要的新人引导策略)

    2017-05-23
  • Axure模板库(13)-直播

    最近直播app越来越火,我整理了一些直播app,做了几个模板,跟大家分享。原型文件在文章最后。1、首先临摹一个国外的。(1)首页第一个展示的是快速发布直播的入口,鼓励用户创作内容。第二个展示的是一系列标签。如果平台上内容类型比较多的话,可以像这样强调标签、分类。如果平台上都是美女主播,那分类的权重就可以小一点了。第三个展示的是直播列表。直播最重要的信息就是直播的画面,列表上可以放一张大图,或者更直接,展示一小段视频。(2)直播页面,展示...

    2018-03-04
  • CDS Sketch Practise ! 今天教你画卡车!

    很多学员在一开始接触汽车设计的时候掌握不准比例的确,汽车的比例非常特殊抓不准比例草图非常容易走形我们之前的推送搬运过H-Point的车型比例讲解链接在文章底部掌握比例需要大量的练习如果你急于做项目可以先从比例易于掌握的卡车入手卡车侧视图设计手绘教程卡车的座舱可以视为一个大的体量相比较于其他车型更容易表达而且设计一个单体量车型的过程可以锻炼自己塑形和表达形体的能力是很好的汽车设计入门练习视频解析确定座舱的外轮廓用较浅的线条勾勒出来初步想法...

    2018-04-08
  • 声明:关于微信号"交互设计学堂 ID: jhsjxt"中的收费课程与本网站没有关系

    现在赚钱真容易,随便抄点内容可以开班授课了。

    2016-11-03
  • 设计规范如何写?这20个精选案例让你大开眼界

    如下为规范汇总页,里面囊括了许多大家熟知品牌的规范。1.Brand Style Guide Examples

    2017-06-02
  • UX 设计中的「环境」元素思考

    随着 AR/VR/MR 大潮来临,传感器等技术的不断发展,「环境」已经逐渐成为 UX 设计师在「人」与「设备」之外重点关注的第三极。

    2017-04-27
  • 一只设计师的工作小结:在想好之前,先克制你的表达欲

    我一直觉得做设计,其实是在克制,潜移默化是最好的。在你没有想好如何表达,最稳妥的做法是克制你的表达欲。

    2017-05-05
  • B2B、SaaS等企业软件中的交互设计总结

    我刚开始在VWO工作的时候,一直想弄清楚一个问题:企业软件(B2B)真的和B2C应用不一样吗?对于设计师或者设计流程来说,两者又有什么不同?这篇文章是我在过去几年里的一些经验梳理,希望能够帮助那些想去或者已经在企业软件团队工作的设计师们。一、什么是企业软件?下面是维基百科中的定义:企业应用是一种计算机程序,主要用来满足企业的需求,而非独立的用户。一些大家可能用过或者见过的企业软件在现代企业中,大多数企业应用是复杂、可拓展、分布式、模块化...

    2018-04-17
  • 用户体验设计中的用户故事和场景

    翻译校对:晓黑 原文:http://usabilitygeek.com/tag/user-experience/ 有一段时间,最好的网站设计是一个装了一些很酷的新功能,一个怪异的导航和其他任何设计师认为不错。我们信任设计师的品味和意见往往甚至比我…

    2015-12-29
  • 【交互面试】阿里巴巴交互设计实习生笔试题汇总

    阿里巴巴交互设计实习生笔试题 1 在线测试,测试时间 180 分钟 【自我介绍-20 分】简要的自我介绍(学校、学历、专业、个性、独特亮点等),并上传你的简历和作品。(将附件上传到无密码的网盘中,建议使用酷盘,并…

    2015-07-30