header_v0.7.32

【译】令人惊艳的旅游类APP设计

1年前发布

原创文章 / UI / 教程
狐狸爱设计 原创,如需商业用途或转载请与狐狸爱设计联系,谢谢配合。

十足干货,本文推荐了一些视觉和交互动画设计都非常优秀的国外旅游类app,相信对你的UI设计会有所帮助。

声明:如需转载,请申请本人授权并保留文章全部信息,严禁私自用于任何商业用途,请尊重作者权益。


c50757f4ae03a84a0d304fcc839a.jpg下面是一组由来自全球的设计师设计的漂亮而极其现代的旅游类界面。有些是从现有的产品中获取的,有些还在开发中,有些还是纯粹的概念设计,试图让什么被认为是可能实现的。

给设计师的建议:下面的这些示例包含了开源的开发元素,你可以用在你自己的设计中。


Facebook Messenger, Bots, Payments


e78557f4adf8a84a0d304f494d1b.jpg

惊艳的原因:

这一概念充分地利用当前聊天机器人进行炒作,把它应用到一个引人注目的使用案例中。在Facebook Messenger app,有许多复杂的交互,允许群组搜索和预订。


Swipe to Travel


29c557f4ae2fa84a0d304f9aed5b.jpg

惊艳的原因:

以“你想要飞往哪里”这个简单的问题开始,这个概念让你很容易做出决定,通过丰富的图片定位你的目的地,能让你向左右滑动,甚至都不需要知道确切的旅行日期。

这个app是很精小的。能帮助犹豫不决的人更容易做出决定。


Ramotion的 Travel Onboarding App 概念稿


bf3b57f4ae53a84a0e282b91ccc0.jpg惊艳的原因:

过渡和动画把登机的过程带到了生活中。有一种柔和的色调,有着微妙运动的极富风格化的动画样式,创造了独特的用户体验。


Multi-dimensional Controller


9e2157f4ae76a84a0d304f71449a.jpg惊艳的原因:

以上的旅游类界面设计都是相当引人注目的,新的交互形式能让用户在滚动屏幕的时候还能看视频。这是开源控制器的一部分。能改变我们消化视频内容的方式。


Cloudy Parallax on Framer.js


b22b57f4aea7a84a0e282bac4f96.jpg

惊艳的原因:

这是一个不可思议的设计,用Framer.js是可能实现的。这是Framer.js多点触控特性的一个例子。除了多点触控交互,展示了一个稍有视差的视频,以提供整个的故事板体验。


Landscape Transitions Galore


f02457f4aec5a84a0d304fd26d98.jpg惊艳的原因:

把设备转化为横屏明显改变了用户使用情景,这是一个交互和动画修改的很好示例,特别是在用户体验上让上下文变得容易理解。


通过运动的卡片来探索目的地



惊艳的原因:

这个简单的例子描述了一个有趣的交互,显然是让设计师把一个很棒的概念转化为一个娱乐化的解决方案。这后来变成了在CodePen上只有css实现的概念。


Timelapse Video Done Right


惊艳的原因:

关于城市的延时动画把交互操作带到下一个阶段,设置了滑动手势。简单的文字排版和生动的图片形成了对比。


快速和简洁的4维控制器


d51057f4af34a84a0d304f84a0b5.jpg惊艳的原因:

在滚动、滑动和其他手势操作下,视频能连续播放。不知不觉中,在界面的其他接口和视频运动反向转化。


流线型的航班预定过程


惊艳的原因:

这个概念稿展示了飞机预定过程可以非常快速简单。这个过程很适合那些能提供高价而期待尽可能快的预定过程的用户体验。

用户只需输入基本旅行的细节(目的地,旅客人数,暂定旅程),这个app就会展示日历显示对应的价格。所以用户可以基于灵活的旅行日期选择最高性价比的航班。然后,用户选择当时席位(被笑脸符号标记的座位,开玩笑~~)然后...这就是你的登机过程。总来来说,就是“预定,支付,起飞!”


ToFind平稳动画过渡概念设计


惊艳的原因:

界面看起来简洁大方,得益于它简洁的配色和文字排版。这个app展示很多复杂的动画和交互行为,在速度和细节上表现的很好,来帮助用户感受到自己就是旅行中的一部分。开源控制器的扩展是一个让人印象非常深刻的例子,使用上下文相关的信息进行定位。


恰当的滑动, 动画,享受这个演示吧


惊艳的原因:

渐变被用在这个app中,通过把成块的颜色转化为加载画面,使过渡显得更加平滑和美观。一旦交互进行后,这个能帮助打破更大块的信息内容。滑动手势把高质量的图片聚集在一起使这个app看起来很奢华。

还有其他好的旅游界面提供吗?给我留言,我们一起讨论哦。



欢迎留言评论,也可以关注我的二维码:

f53157e933050000018c1bf7837a.jpg


声明:如需转载,请申请本人授权并保留译者全部个人信息,严禁私自用于任何商业用途,请尊重译者权益。




25
    Hello PM 意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功