旅行「氛围感设计」，被唤起的意象之美
The following article is from 飞猪设计 Author 飞猪设计
飞猪设计是阿里巴巴集团旗下专注于探索旅行体验研究和设计的团队。欢迎进入多彩且好玩的飞猪旅行世界，我们对变革旅游新体验充满热忱，和我们一道去带给千千万万的人带来全新的旅行体验吧，让旅行美而简单。
01.
无法看见的风景
—
在设计愈发简洁的趋势下，我们反而将「氛围」作为第一设计要素，那就必须弄清楚一个问题，那就是：做「氛围感」这件事情到底有没有意义？
于是，我们做了一个简单的尝试：仅用几个圆角矩形去概括常见的界面，结果大家看到这些简单的框架，都能联想到对应类型的产品界面。
▲ 用户对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只是一个连接和服务设备，真正的旅行一定发生在手机屏幕之外。
我们希望通过旅行氛围感的设计，鼓励你我保持对旅行的热情和期待，并耐心等待出发的机会，尽情在真实世界中探索更远，留下更多宝贵的旅行回忆。
谢谢大家。
飞猪设计，是阿里巴巴集团旗下专注于探索旅行体验研究和设计的团队。欢迎进入多彩且好玩的飞猪旅行世界，我们对变革旅游新体验充满热忱，和我们一道去带给千千万万的人带来全新的旅行体验吧，让旅行美而简单。