飞猪这次改版，氛围感提升不少
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只是一个连接和服务设备，真正的旅行一定发生在手机屏幕之外。
我们希望通过旅行氛围感的设计，鼓励你我保持对旅行的热情和期待，并耐心等待出发的机会，尽情在真实世界中探索更远，留下更多宝贵的旅行回忆。
推荐阅读
你「在看」是最好的肯定与鼓励