关于引导页的整理与分析

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

相关推荐

  • PC端产品的三种姿态

    这篇依旧是读书笔记,只不过记录的不是整本书,而是《About face 3交互设计精髓》中的一个知识点,这个知识点非常重要,重要到需要单独提出来记录一篇。 在《About face 3交互设计精髓》一书中,将PC端应用分为了3…

    2016-06-01
  • 小白菜们:别再用“好的文案”YY了,该醒醒了!

    不知何时起,文案写的好,竟然成了众多互联网小白追捧的热点,各种文案大师,文案叫兽,传道受业解惑,登台演讲,大讲文案的力量,貌似文案写的好,就练成了盖世神功,天下无敌了。

    2017-05-26
  • 如何有效的做产品迭代分析

    “ 做过这么多产品迭代分析,却依然找不到合适的方式表达。” 产品迭代分析对于交互设计师可以说是家常便饭了,隔壁的某某有了新功能,某某家的谁又更新了个大版本,都需要时时保持关注。但是,每当小珏吭哧吭哧的收…

    交互设计 2014-11-11
  • 教你4步挖掘设计灵感,30分钟打造出一款圣诞节Banner!~

    憋不出灵感就如难产一般,蓝瘦,香菇/(ㄒoㄒ)/~~

    2017-05-14
  • 2017赶集招聘节项目总结:建一座招聘之城

    为了在“金三银四”抢占先机,向本站导流,最重要的,是为了向广大蓝领招聘群体营造有趣、可信的平台,输出赶集优秀的设计价值和体验,我们3个设计师进行了各个维度的配合。注:视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的有景深的视觉体验。作为近年网页设计的热点趋势,越来越多的网站应用了这项技术。

    2017-04-30
  • APPLE WATCH 中文手册:通知--自定义通知界面

    自定义通知界面含有两个独立的界面:一个静态界面,一个动态界面。动态界面显示了完整的自定义通知内容样式,并且它可以包含由 WatchKit 扩展提供的定制内容和图形。静态界面是一个简单的界面,它仅仅只含有通知的…

    2015-06-15
  • 以一个实际项目为例|从0到1的产品中,交互设计师如何避免踩坑

    除了自身执行力上对设计师专业能力的要求,对产品体验的敏感度,也要适当关注一下产品思维的提升,减少在设计过程中踩着“坑”艰难前行。

    2017-05-16
  • 超好看APP交互设计~

    设计APP,不是简单的把界面绘制好,漂亮的色彩搭配、可爱、卡通或者扁平化的图标设计等等。如今的移动APP界面设计,更要追求有趣与实用的完美结合。今天,小编分享来自印度的设计师Joney vino的超好看APP交互设计作品。第一款是APP交互设计是关于免费试驾APP的选车界面与整个选车的流程。整个过程就是把选车类型、日期、人数等功能元素在流畅的界面转换场景当中完成。追求一气呵成。很不错的免费试驾体验。第二个APP交互设计当中的有趣、创意与...

    2018-03-03
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 阿里设计专家深度解读:全链路设计师和设计增值再现

    分享嘉宾:汪方进(1688UED设计总监) 点评嘉宾:高峰(阿里巴巴国际UED B2B总监)、周敏青(阿里巴巴国际UED AliExpress总监)   前些日子的美国大选,特朗普胜出了,这个结果让很多小伙伴惊呆了!他竞选口号是:M…

    交互专题 2017-09-11