关于引导页的整理与分析

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

相关推荐

  • 五步走,带你了解交互设计流程

    本文作者分享交互设计的流程,但切记具体问题具体分析哦~交互设计(Interaction Design):定义、设计人造系统的行为的设计领域。人造物,即人工制成物品,例如,软件、移动设备、人造环境、服务、可佩带装置以及系统的组织结构。交互设计在于定义人造物的行为方式(the interaction, 即人工制品在特定场景下的反应方式)相关的界面。
    ——维基百科

    2017-05-09
  • 网页设计中,如何突破栅格的限制又保持协调?

    想要打破栅格又保持网页的协调,是有技巧的,并非任何“破格”的设计都是好的。

    2017-05-09
  • 译文|「设计师学习商业」中「Why」与「How」的问题

    Airbnb、Pinterest、Kickstarter、小米等一系列的创业企业有什么共性?他们都有设计师作为创始人,在创始团队中就加如了设计的基因。商业决策者们在努力地把商业策略融入到产品设计的内涵里,而你——一名设计师,又是否了解商业呢?今天我们分享两篇文章,分别讨论了「设计师学习商业」中「Why」与「How」的问题,希望你能有所启发。

    2017-05-25
  • 100本UI设计/交互设计PDF电子书资源,UI设计师进阶必读书目,还在持续更新哦【024期】

    好素材,不加班今天小编为您精选了【100本UI设计/交互设计PDF电子书】大小:3.07G提供方式:百度网盘获取方式:请查看文章底部部分书籍展示领取素材的方式长按二维码回复:024长按二维码回复:024长按二维码回复:024无需分享直接获取素材热门素材推荐▶UI设计师作品集模板,PSD格式【001期】▶设计项目展示经典范例四套【002期】▶三套2.5D插画设计素材合集【003期】▶C4D设计素材包含建筑【004期】▶100多套欧美网页设...

    2018-05-07
  • 未来的汽车UI将惊艳世界

    今天多数汽车UI的设计,由于不直观、过时和缺乏美学表现力,一直饱受诟病。其他行业都将设计的品质奉为标准,汽车生产商在这方面则动作迟缓。所以,许多设计师抓住了这个机会,思考未来的汽车界面会如何改变我们的…

    2016-10-18
  • 如果动物们会说话

    你是否曾经想过动物会说话的情景?艺术家Jimmy Craig用一组漫画描述他所想象的动物说话的场景。在这组名为They Can Talk 的系列漫画中,Jimmy给出了他自己的解释。在这组漫画中,我们可以感受到动物世界里的秩序以…

    2016-06-02
  • 用通俗的方式告诉你什么是「交互设计」

    通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了解,所以采用了尽量平实简单的描述方式,以帮助大家快速理...

    2018-04-11
  • 如何设计一个素材列表

    最近在设计一个新的拍摄玩法,用户点击拍摄后,首先会进入一个素材列表页,选择对应的素材后进入拍摄页面开始拍摄。经过一个版本上线后收到的定性和定量的用户数据反馈都显示,在素材列表页的选择阶段,用户的流失率较高,用户对于素材选择行为的目的性明显不足。

    2017-04-29
  • 老外看中国的移动App设计精髓-1 ui设计的十大精髓

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 如何从零开始临摹大神的作品?

    在我们探讨设计原理的核心之前,我们需要明确构成视觉语言的5种元素。线段在动态设计中是点的集合。线段生成了运动,吸引我们的眼睛去跟随它的运动轨迹。线段可以是直线、曲线、虚线或粗细变化的线,它是构成形状的基本元素。

    2017-05-22