细数那些精彩纷呈的引导页

随着苹果ios8的发布,可以看到货架上,众多主流App迫不及待地向人们展示产品视频预览,接下去会是被设计师、市场宣传相继关注的焦点,产品宣传的下一轮引爆点。

作为能在App store上先发触达地形成前期推广的视频预览,又会否影响到App安装完毕后的引导页呈现?我们不得而知。鉴于两者形式的展现,间隔于安装App前后,多少会规避重复性。不管怎样,趁着手机App和扁平风热潮,一起来细数归纳下对手机引导页的所见所想。 早期我们会见到比较多成熟的PC软件或者网页产品的产品安装包或新特性指引页。近几年在移动端平台上兴起了各种门类,形式精彩纷呈的引导页。

功能决定属性

引导页在视觉表现上呈现繁多,归纳起来可以从以下几个功能来分类:

1 新特性新功能

最常见的属这类,当一个产品持续稳定迭代,每推出一些新功能,便跟随版本包装发布。

2014102918070891-590x486

2 推广运营

包含类似市场专题推广、情感化内容运营两类。前者多为电商投资收益等产品,后者类似内容的片段剪辑,比如轻博客Lofter,引导页随机呈现博客用户的心路历程;或是”食色”,一壶茶、一段心情志,感受人生五味,预览的同时还能加以喜爱分享。

20141029180844943-590x514

3 品牌展现

整体铺开去展现产品的核心亮点和品牌思想,这一类应用产品基调偏功能长期稳定、内容维护居多,甚至内嵌视频打包品牌概念和软件界面功能展示。

20141029180845998-590x343

Yummly开屏传达给用户,这里可以浏览收集食谱和清单,温暖色调直击内心,尽情享受美食烹饪。

4 说明指引

多适用于操作较复杂的工具类应用,当用户首次打开App,会进入半透明黑屏蒙版模式,开启新手指引环节。这种方式一定程度上也存在弊端,用户会厌恶一上来就强制被教育。因此也有不少App换作白底,稍作轻量去展示教程。除了前面提到的传统说明教程,还存在另外两种改良方式:一种是在用户触发功能行为的时候跟随出现指引,匹配合适的场景模式,强化临场感。另一种,弱化初始化引导,固定收拢在界面的一角,让用户自主去触发。

2014102918084753-590x344

500px,典型的全屏蒙版引导,避免去采用细节的界面说明,可在实际应用中出现操作引导。

20141029180847997-590x519

也有类似Sketches Help, 将产品的核心功能以手势的方式简要呈现。

20141029180848920-590x517

Oggl 引导页由繁至简,如今的版本更多介绍放在次一层级。

20141029180849869-590x349

Cycloramic 是比较特殊的一类表现方式,通过前期的短小视频,让你对产品有直观的大致印象并产生好奇,再转换到界面说明页,使过程显得更为自然不突兀。

E 信息定位

目前多见的应用,在情感品牌化的层面设计引导页,也有不乏一些直击重点的App,把了解用户信息作为首要任务。

20141029180850828-590x522

Elevate Brain Training是一款借用游戏提高大脑的应用,引导页抛出提问定制你的训练目标,针对理解力、注意力、处事能力等不同层面能力进行提升。

载体随时代的演进

随着技术演进和大环境提升,确实看到了引导页以不同的载体,从静过渡到动甚至流媒体。 这里主要划分为大背景位图和矢量图形,后者表现多样化,国内外已有许多层出不穷的设计,不在此处赘述。 位图分为静、动、动静结合:

1 大背景

通常运用高质量的位图作为背景,前后页的切换会伴随淡入浅出的效果,这类应用对外营造一种高端的产品气质,图片传达出向上、美好、静谧的正能量气息。多见于互动社交类或生活记录应用,例如 Path在这方面表现得淋漓尽致,后续也有更多App类似的呈现,但它的画面感仍然让人怦然心动,没有乏味感,选图和前后图片过渡衔接很重要。

20141029180851746-590x519

2 视频动态影像

随着跨界趋同,移动端与PC网页端的用户体验视觉呈现未来将会更多地齐平。视频流媒体也被越来越多地用于网站MiniSite,是一种效果直接信息量丰富的品牌推广方式。当然考虑到安装包数据限制的问题,移动端引导页视频相对少。除了前面提到的品牌宣传、也有诸如Camu这类以拍照视频为主要的应用,会首选视频流媒体。用于拍延时摄影的Hyperlase在引导页呈现独特视角的延时作品,富有冲击力。 20141029180852607-590x517

3 动静皆宜

这里指静态位图拟动态流畅地位移,模拟自然界的节奏,回归仰望白云海滩拾贝的宜人轻松情绪。微动的影像就像一段催眠序曲,让用户快速切入沉浸式状态。例如Flipboard,从早期创新式的局部微动简化至现在的镜头位移。LinkedIn、Pinterest也是较有代表性的应用。这样细想来,镜头感的位移在渲染氛围的同时,也是萌发了读者想要挖掘发现更多,却又嘎然而止到下一个画面,多少有点半饱的意味。是否觉得恰与这些信息采集类的应用气质相符呢。

20141029180853612-590x519

其次,我们会发现位图的使用多展现于国外或主流App,相对于位图传达的高端大气沉稳,矢量图形的发挥自由度更大,在多语意传达和目标对齐上,处于一个关键的角色。

在海报平面招贴多样化的今天,我们可以在刊物、宣传单、海报招贴、灯箱、网页等一切可以传递信息的介质上看到推广宣传。在过去,传统灯箱或许只是几张幻灯片画面切换。现在,可以看到地铁站的三联式灯箱,加入了视频,模拟互动式的联动滚屏。这种借助多屏的滚动方式和手机端的引导页路径原理有点相似,然而在手掌大小的空间里,可以展示的内容是有限的,屏与屏之间的串联交互方式,众多App在找寻创意可能。 2014102918085581-590x358

屏间交互方式

由于手机端天然的触屏行为属性,通过滑动触发用户注意力,吸引用户关注下一秒迸发的画面内容,让整个观赏过程成为用户的参与互动体验。

1屏幕原生路径

早些时候网页元素随着页面滚屏出现各种交互动画,这种方式刚盛行不久,移动端也进行了跨平台迁移,食记是最早一班引导页体验趋同网页动画的应用,动画难点在于把握好元素的动律节奏,进出舞台的关键点。 20141029180856238-590x343

DIY的walkthrough,随着后景过山车似的连绵山脉,野外篝火,探险宇航员,手机记录,酷似玩了一把视觉体验享受。

20141029180857627-590x343

前后衔接 

视频动画中镜头切换的蒙太奇手法,用美学原则联结前后镜头,通过缩放拉伸、形变、位移、颜色变换等补间动画巧妙地成为下一个镜头的关键元素。形式上激发让人出乎意外,情理之中的视觉感受;内容上精简干练有力,作为关键变换元素是每一屏讲述的重点。相信看过绝望主妇的大家对它的片头都印象深刻,更多精彩挑战想象极限的镜头变换,不妨去欣赏下 余志雄工作室yU+Co的作品。 20141029180858678-590x343

Same作为一款话题社区社交应用,由早先的单色线性延展到新版的丰富形态和有趣变换。

20141029180859675-590x512

Dropbox配合一贯以来的强标识蜡笔画风,让观赏者心情愉悦。

3趣味互动性

围绕产品特性,设计趣味性的互动环节,会让App增色不少。通过麦克风吹气、声音、摄像等手机原生方式,营造一个类虚拟现实联结的体验过程。

20141029180900593-590x518

Posegram结合产品特性,与镜头互动的方式,让用户直观地摆pose拗造型。

独特视角

页面间的转场方式,除了City Guides的独特城市转场,Rovler的引导页刻意对画面的局部做了动感模糊,模拟镜头摇晃,让观看者置身墙面其中。

20141029180901495-590x516

5单屏内交互方式

Dropbox温润亲和的,喜欢淡彩加线条风的朋友,它的品牌风格让人爱不释手。是否有几分纸面上马克笔工程设计图的感觉。细腻的画风、动感的模糊处理方式,让单屏内的交互方式显得没有那么单一。

20141029180902402-590x515

6文案的串联

与图形的交互串联产生的效果不同,QQ浏览器的文案抓住用户核心痛点,对仗的阵势一气呵成。

20141029180903210-590x344

张弛有力的扁平风

Luvocracy的开启walkthrough,让人眼前一亮,用色,闹中取静;版式,简洁大气;元素,构建有序,爱心贯穿始终。作为一款购物社区应用,会以让用户愉快的购物体验从进门这一刻开始。

20141029180904179-590x341

UC浏览器采用更多ios7的轻量大胆用色,让整个产品基调趋于轻松、欢快、多彩。

2014102918090536-590x522

Yahoo的这款应用的引导页接受度是否高,或许有所保留,有一种美叫猎奇美,这么形容也许不恰当,看完这个案例的用色,顿时会觉得UC的用色很平稳。会让人脑海中想到 “态度、冲撞、学术、微妙、复古 “这些关键词。所以作为设计师和产品用户,可以涉猎更多在过去常人不太接受的颠覆性事物,经典的东西总是经得住时间打磨,留下的都是值得去经历思考、重组、再生,无约束的事物本身蕴藏可能性。

20141029180905928-590x348

总结

与产品气质相符 ,尽量避免过度设计,呈现的内容要与产品气质能对应上。就像iCloud、Pages、keynote的引导页,仅用不同的颜色和嵌套内容,达到了苹果体系下的高标准统一化品牌定位。

用户轻量体验,不要让界面上的内容信息成为用户的认知负担,即使是放在开篇位置的引导页也不例外。少有顾客愿意在对他无意愿了解的业务介绍上给予过多停留,为产品本身能为用户带来的价值而服务设计

兼顾技术实现,通常情况下技术仍然会对软件包容量进行限制,视频在信息可视化上占据丰富有利,另辟蹊径借助移动端触屏交互优势,寻找巧妙方式也不失为一个好办法。

勿忘文案魅力,人类对于复杂信息的处理,最直接触达到大脑被解读的还是语言,一句好文案配上应景的图片,能达到的效果是不可估量的。

感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作。
注明出处格式:腾讯ISUX (http://isux.tencent.com/thinking-about-walkthrough.html)

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

(0)
iouedioued
上一篇 2014-12-18 11:20
下一篇 2014-12-22

相关推荐

  • 「抖音」用户体验分析

    和大部分人想的不一样,我是抖音和快手的忠实用户,每天都会在上面花不少时间。在玩抖音几个月后,我开始思考和分析这两款APP的设计和技术,发现其实其中充满了很多“精巧”的设置。抛开APP的针对群体和社会影响不谈,只想说作为一个普通用户的感受。抖音的交互设计是沉浸式的。在推荐页面,你每次只能看到一个视频,系统默认自动播放。因为没有给你反应时间,我们会不由自主的盯着屏幕看,而人的注意力很容易就被当前的视频(视觉和听觉)吸引。这样的交互好处是人的...

    2018-04-02
  • 为何设计师要学会做版本控制?

    XX项目视觉稿.PSD

    XX项目视觉稿新版.PSD

    XX项目视觉稿最新版.PSD

    未标题-1.PSD

    XX项目视觉稿最终版.PSD

    我已经不想做了.PSD

    XX项目视觉稿这个一定是最终版.PSD

    XX项目视觉稿最终的最终版.PSD

    这稿坚决不改了就这么着吧.PSD

    这个标题是凑字数的.PSD

    2017-05-24
  • 谁说GIF就不是艺术?2014年海外最佳艺术GIF动画作品

    GIF动画与艺术是一对完美的搭配,它们将过去和现在混合起来并配以幽默,通过Photoshop的处理为我们带来了惊艳生动的图画。日前,Tumblr网站评选出了2014年一些最好的数码动画艺术作品。我们从中筛选了一部分,从艺…

    2015-01-08
  • Axure RP 8 入门手册 – 第6章(四)

    第9节检视功能-元件交互冰炫:小楼老师,我能跟你请教个问题吗?小楼:哇!看头像是很高冷的美女呀。冰炫:老师!你嘴好甜哦!你这样我会不好意思的!小楼:嘿嘿!你有什么问题呀?冰炫:哦……差点被你给夸得忘记问了!今天我在网上买饮料时候,看到网站上的选择饮料分类,选择的时候只能选中一种,被选中的分类标签会改变颜色,其它的恢复默认颜色。感觉有些像你刚才给Alice.讲的单选按钮组的效果。(图6-58)(图6-58)小楼:嗯,这个也是组的效果,但不...

    2018-04-23
  • 为什么用户会无视网站首页的轮播图?

    数据显示:在三百万个网站中只有大约1%的网站首页上的轮播图会被点击。一个在首页上如此之醒目的元素竟然只有这么低的点击率……到底怎么回事?个中原因相比会让你大吃一惊。

    2017-05-19
  • Facebook的用户体验评判规则

    Facebook的产品设计五维情感精准定位——设计对受众定位清晰,符合该设计目标用户群的使用体验。亲和力——所有交互元素的设计上,用户对信息沟通顺畅,感觉似有人一般的亲和感。分享——承载对Facebook连接、自由、生活的文化认同。留恋度——给人超出想象的空间,让人留恋往返,对产品期待更多,得到二次访问。易用反馈及时——在交互过程中,用户的操作能够在屏幕上及时得到反馈效果,帮助用户提高效率。方位清晰——清晰的知道自己在那里,退路在那里,...

    2018-03-25
  • 用户体验在人工智能下的改变

    用户体验在人工智能下的改变安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以安全性是产品以及用户体验的基础。效率1.实时性随着计算能力和算法的提升,计算机可以做到实时反馈结果。在以往的重要直播上,视频会显示实时字幕,这是通过给原有直播信号增加5-10分钟的延时,速记员在这短暂的时间内快速整理并输出字幕,但这需要消耗多名速记员的大量体力和脑力。在人工...

    2018-03-24
  • 5步快速制作移动动效

    Sketch+Keynote双剑合璧:5步快速制作移动动效 2014年,Facebook推出了新闻阅读应用Paper,诸多交互细节与炫酷动效启动了界面设计的新时代,Google的Material Design更是将移动动效提升到了app基础体验环节的高度。…

    2015-04-11
  • 移动视觉与交互设计10项法则自查表

    转自:设计夹(ID:sezign)英文:medium译者:孙怡娜Photo by Medium近年来,移动手机风靡全球。用户们也已经习惯依照一定的法则在移动端获取信息。在这个微渺的事物就可以定胜负的世里,开发者们需要去了解并迎合…

    2017-08-01
  • 用户体验设计中的功能动画

    一位优秀的用户体验设计师能够轻松地解释设计概念中每个决策背后的逻辑。包括信息架构、页面内容结构、流程及假说。动画迟早会被融入线框图中,但在做设计决策或解释它们的时候,就会略显尴尬,因为理由基本上就是“这很酷啊!”或者“这很流行”“多有意思”,这些理由使得设计一开始就毫无说服力。在考虑设计时,我们应该更加深入地研究动画,就像解释其他设计元素那样,有依据地定义动画并解释其目的。→什么是功能动画?功能动画是一种微妙的动画,我们将它嵌入到用户界...

    2018-03-22