查看原文
其他

飞猪这次改版,氛围感提升不少

The following article is from 飞猪设计 Author 飞猪设计



01.

无法看见的风景


如果你近期有打开飞猪,可能会发现飞猪App大变样了。

不同于原版一眼看到的干净简洁,现在能看到春天的湖水和樱花,夏天的田野和微风,生动活泼的会员形象…

飞猪的风格变了,从高冷的艺术画廊变成了看得到窗外风景的旅途列车,变得更有旅行的氛围感。

 飞猪App新老首页对比

在设计愈发简洁的趋势下,我们反而将「氛围」作为第一设计要素,那就必须弄清楚一个问题,那就是:做「氛围感」这件事情到底有没有意义?


于是,我们做了一个简单的尝试:仅用几个圆角矩形去概括常见的界面,结果大家看到这些简单的框架,都能联想到对应类型的产品界面。


▲ 用户对App框架的认知已经成熟

这是常见而重要的特点。


我们往往抓住这个特点,基于有广泛认知的样式做设计,让用户感到似曾相识,并能快速认知和上手。


但这也困住了设计师的想象力:只能基于固有框架去调整颜色、尺寸、间距、字号、线条粗细…最后变成大同小异的“设计规范”。


这就像工业革命初期,工人使用机器能够快速地、大量地生产出同质化严重的、粗糙的、缺乏美感的产品,这让当时的艺术家不满,开展一系列运动,探索美的造型,最终产生“设计”的概念。


而美的造型不仅能促进产品的销量,更能让一款产品成为经典,甚至可能超越其商业价值产生文化价值。


比如甲壳虫汽车的设计。


但互联网电商App的设计,并不靠好的界面外观去卖App,而是通过视觉和交互的设计,让用户使用的时候觉得有用、好用、喜欢。


通过种种感受的建立,我们可以影响用户习惯,培养喜好,推出符合时代的新设计。


而这个时代,旅行者有自己的难处。


他们打开旅行App,一定积压了大量旅行的诉求,但事实上因为种种风险和意外,无法实现自己的诉求。


拿我自己来说,上一次真正意义上的“旅行”,都发生在2年前了,而且是因为机票取消,被迫放弃而失败的。


慢慢习惯面对各种不能出门的情况,想着“就这样吧,算了吧”。


正因如此,我们才希望通过精心设计的旅行「氛围」,多唤起旅行者记忆里旅行的美,不要放弃。


这种情绪的感染正是「旅行氛围」最有价值的地方。


于是我们开始思考,怎样的设计能让飞猪更有旅行氛围。



02.

映射风景的界面框架


要提升飞猪的氛围感知,首页是必经之路。


我们希望通过数字化设计手段,以身临其境的形式向用户展示真实的旅行场景。


不同于高效但稍显寡味的扁平化设计,我们要将现实世界的迷人之处搬上屏幕。


但和复古写实重质感的拟物设计也不一样,我们要在保证信息清晰可识别的情况下打造氛围质感。


于是,我们选择折射(Refraction)作为关键词,重塑了首页的新调性。


就像一束光线穿过材质刚好的玻璃,映射出物理世界的万象风景,既可以“映射”,又不过于“写实”。


为了探究更细腻的折射效果,我们通过模拟玻璃材质发现:

- 折射率(IOR)为1.5左右时有放大作用

- 叠加一定粗糙度(Roughness)后有模糊的作用

- 叠加侧光源可以提升明亮度和层次


▲ 探索玻璃质感

基于这些特征,我们设计了一块可折射的玻璃面板,将其置于金刚区之后,一则强化视觉引导,二则也在纷繁的旅行App中做出差异化表达。


▲ 打磨面板细节

▲ 叠加金刚区域效果

我们也对面板上的金刚icon进行了细致的打磨。


与传统拟物化的、重质感的写实3D风格不同,我们探索出了一种兼顾「轻3D质感」与「平面符号感」的全新大金刚风格。


这种表达方式,弱化了其物理透视的真实性,先从完全平面的角度去设计icon的造型美感,再用3D的方式去呈现其光影质感。并且其中也融入了玻璃折射元素,与整体做呼应。


▲ 新icon的造型质感

▲ 动态演绎

除了视觉质感上的打磨,我们也希望通过富有动感的交互形式,吸引用户的注意力,带来更沉浸的氛围感。于是我们构建了基于滑动状态的交互式Banner。随着页面上滑,可以展开更多的利益点或是趣味性动画。


▲ 交互式Banner

除了以上显性的氛围元素,我们也在首页埋下了一些隐性的氛围彩蛋。例如下拉刷新的时候,就有几率触发猪鼻动效,增加趣味性的同时,也切实提升了搜索区域的点击率。


▲ 搜索猪鼻动效



03.

呈现远方的风景


完成了框架的质感重塑,我们还要把更有旅行氛围的内容呈现在框架里。


通常,首页会有一个背景区域,业务方会在大促期间,在这里配上红红的图片,试图把气氛搞热。


但今天我们所说的氛围可不是大促,而是将现实世界中的旅行画面呈现在首页。


我们在不同季节,不同节日,在不同天气,去不同地方旅行的时候,看到的画面往往是不一样的。所以做旅行氛围最简单的思路,就是把这些美好的画面拍下来,然后安排合适的时间,在页面头部的背景上进行“旅行风光的展示”。



但仅仅把照片放上去,显然不是我们想要的效果。


▲ 直接将现实世界的摄影搬上首页,效果并不理想

首先,照片本身就是精心构图过的、高信息密度的载体,如果直接放在界面中,很容易和搜索框、热搜词等元素冲突,产生不和谐的感觉。

其次,旅行中的风景照片过于客观,拍摄者带着“记录打卡”的心态拍下著名的景观,大多留下差异不大的照片,不是很能激发人的情绪。

更重要的是,照片往往需要解释和说明,才能讲述一段旅行故事,而用户的时间寸金寸光阴,仅靠一张照片而不花时间解读,很难打动用户。



但有没有人能够创造具有独特、直观的故事性,又具有情绪,还能和界面元素和谐相处的照片呢?


我们发现,日本摄影师-川内伦子的照片很符合我们的期望。


▲ 川内伦子的部分摄影作品

她总能用镜头捕捉到生活中具有情绪感的细微瞬间,这启发了我们,与其从客观描述一个场景,不如引导用户用自己的眼睛观察,去发现旅行中的细节。


基于这种风格,我们选取了一些照片,这些照片更偏抽象,具备质感、纹理、动势,并能与界面中的其他元素和谐相处,更加美观。


▲ 纹理式照片展示

而和谐美观只是基础,我们无法复制顶级摄影师的优秀的照片,而且将优秀的照片放在狭隘的界面中,也会让照片本身的质感大打折扣。


为了进一步还原真实体感,我们需要让静态的照片动起来。从春天的柳絮和樱花,清明的雨,夏天田野的风和摇晃的树叶,甚至海底清澈的水波,我们设计了一个又一个生动的旅行画面。


▲动起来的首页氛围

但最令人印象深刻的,应该还是儿童节和端午节的氛围。


不同于单纯的旅行画面,我们探索了意象在氛围中的应用,以更加直观生动的方式唤起用户对节日的核心记忆。



▲ 可在「飞猪设计」视频号查看完整视频

设计儿童节氛围时,我们想到小孩子都很爱看动画片,所以绘制了动画片一样的场景,在夏天的儿童节看到“宫崎骏动画片中的夏天”,就很容易建立自然直观的联想。


设计端午节氛围的时候,我们根据端午节的起源地,以及放纸鸢、赛龙舟、吃粽子的传统,以“龙舟竞渡,接粽而来”的主题完成了氛围的设计。


同时,这两个氛围的动画也较为精巧,吹飞的帽子被搜索框的右上角勾住了一下,生动俏皮的龙舟和从天而降的粽子雨,也创造了一定的情景感。


经过多期的探索,我们发现好氛围的表现方式可以多种多样,但离不开三点:

- 呈现能激起用户共鸣的旅行画面
- 使用节日节气相关的经典联想性的意象
- 打磨细腻有趣,可感知和值得玩味的动效


距离2022结束还有很久,我们还有很多探索首页氛围的机会,希望接下来的设计也可以打动你。



04.

成为解锁风景的旅人


旅行有两个核心元素:旅行者,目的地。


通过界面质感和首页氛围表达,我们试图传递到达目的地之后的所见所感。但如果要进一步增加“氛围感”,我们还需要找到合适的方式,来表达“旅行者”的身份。


通常,我们使用钻石+金银铜的方式来匹配飞猪f1-f4的会员等级。


这和一开始提出的问题一样,这种分类方式和市面上其他App区别不大,仅能帮助用户识别,但无法留下深刻印象,难以进一步提升飞猪会员感知度。


在元宇宙的蓄力期,巨头开启了新概念,用户对“拟人化”设计的兴趣进一步提升,也让我们有了重新思考会员表达的新机会。


在这种契机下,我们提出了「飞猪会员人格化」的想法。


和我们描绘旅行画面让首页更有氛围不同,塑造飞猪会员旅行氛围的关键在于用户自己 - 怎么能让我认同自己的新身份?


因此,我们需要找到合适的人格特征,和飞猪会员的核心的特点相匹配。


飞猪会员包括4个等级,从F1到F4,代表会员等级从低到高。用户通过预订获得里程,来提升自己的等级,因此,等级越高的用户积累的里程越多,也代表他的旅行越来越远。


那么,是什么驱使用户走得更远呢?


是「好奇心」,好奇是旅行者的初心。


在好奇心的驱动下,我们靠行动去探路,还需要挑战困难去冒险,最后保持旅行的习惯去尽览全球,成为顶级寰旅家。


这种从想法到实践,再到挑战,再坚持的成长关系,也呼应了我们会员的成长过程,成为了我们会员的新称谓。


▲ 好奇者/探路者/冒险家/寰旅家的升级递进

基于新的称谓,我们也按照从远观到出发,从周边到远方的关系,设计了会员人物的造型、动作和所处的场景。


▲ 动作造型和场景的递进

同时,在用户升级、保级的核心节点,我们通过沉浸式弹窗的设计,进一步加强了用户对自己会员身份的感知。


▲升级、保级关键节点的强化

用户可以通过左右滑动查看当前等级和未解锁的等级,因此我们将“未解锁”设计成了旅途中的迷雾,当解锁后迷雾就会散开,这种交互方式也强化了用户对于升级的认知。


▲ 不同等级的强对比

通过会员等级人格化的设计,我们实现了飞猪会员等级和旅行身份的映射,在带来新体验的同时也提升了飞猪会员感知度,完成了旅行会员氛围感的重塑。


不过我们离真正的目标 - 让飞猪会员成为用户旅行身份的映射 - 还差不少距离。所以还在继续升级,就暂不剧透了。



05.

展望


我们以「沉浸」为方向,不断在App中打磨更真实的旅行氛围,但我们也清楚地知道,App只是一个连接和服务设备,真正的旅行一定发生在手机屏幕之外。


我们希望通过旅行氛围感的设计,鼓励你我保持对旅行的热情和期待,并耐心等待出发的机会,尽情在真实世界中探索更远,留下更多宝贵的旅行回忆。



推荐阅读

Tab图标这么设计?一下击中我的呃..心巴。

做B端签了保密协议,作品集怎么办?

金山云B端设计被喷老气,要不我改改?



在看是最好的肯定与鼓励

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存