飞猪设计打造「氛围感」的旅行App

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只是一个连接和服务设备，真正的旅行一定发生在手机屏幕之外。
我们希望通过旅行氛围感的设计，鼓励你我保持对旅行的热情和期待，并耐心等待出发的机会，尽情在真实世界中探索更远，留下更多宝贵的旅行回忆。
谢谢大家。


飞猪设计，是阿里巴巴集团旗下专注于探索旅行体验研究和设计的团队。欢迎进入多彩且好玩的飞猪旅行世界，我们对变革旅游新体验充满热忱，和我们一道去带给千千万万的人带来全新的旅行体验吧，让旅行美而简单。

更多精彩视频欢迎扫码查看👇👇👇👇👇

原文链接：https://mp.weixin.qq.com/s/jX5zYe-Ab9yUXiYRpIF5sQ