墻外干貨：令人驚艷的旅游類APP設計

下面是一組由來自全球的設計師設計的漂亮而極其現代的旅游類界面。有些是從現有的產品中獲取的，有些還在開發中，有些還是純粹的概念設計，試圖讓什么被認為是可能實現的。

給設計師的建議：下面的這些示例包含了開源的開發元素，你可以用在你自己的設計中。

Facebook Messenger, Bots, Payments

驚艷的原因：

這一概念充分地利用當前聊天機器人進行炒作，把它應用到一個引人注目的使用案例中。在Facebook Messenger app，有許多復雜的交互，允許群組搜索和預訂。

Swipe to Travel

驚艷的原因：

以“你想要飛往哪里”這個簡單的問題開始，這個概念讓你很容易做出決定，通過豐富的圖片定位你的目的地，能讓你向左右滑動，甚至都不需要知道確切的旅行日期。

這個app是很精小的。能幫助猶豫不決的人更容易做出決定。

Ramotion的 Travel Onboarding App 概念稿

驚艷的原因：

過渡和動畫把登機的過程帶到了生活中。有一種柔和的色調，有著微妙運動的極富風格化的動畫樣式，創造了獨特的用戶體驗。

Multi-dimensional Controller

驚艷的原因：

以上的旅游類界面設計都是相當引人注目的，新的交互形式能讓用戶在滾動屏幕的時候還能看視頻。這是開源控制器的一部分。能改變我們消化視頻內容的方式。

Cloudy Parallax on Framer.js

驚艷的原因：

這是一個不可思議的設計，用Framer.js是可能實現的。這是Framer.js多點觸控特性的一個例子。除了多點觸控交互，展示了一個稍有視差的視頻，以提供整個的故事板體驗。

Landscape Transitions Galore

驚艷的原因：

把設備轉化為橫屏明顯改變了用戶使用情景，這是一個交互和動畫修改的很好示例，特別是在用戶體驗上讓上下文變得容易理解。

通過運動的卡片來探索目的地

驚艷的原因：

這個簡單的例子描述了一個有趣的交互，顯然是讓設計師把一個很棒的概念轉化為一個娛樂化的解決方案。這后來變成了在CodePen上只有css實現的概念。

Timelapse Video Done Right

驚艷的原因：

關于城市的延時動畫把交互操作帶到下一個階段，設置了滑動手勢。簡單的文字排版和生動的圖片形成了對比。

快速和簡潔的4維控制器

驚艷的原因：

在滾動、滑動和其他手勢操作下，視頻能連續播放。不知不覺中，在界面的其他接口和視頻運動反向轉化。

流線型的航班預定過程

驚艷的原因：

這個概念稿展示了飛機預定過程可以非常快速簡單。這個過程很適合那些能提供高價而期待盡可能快的預定過程的用戶體驗。

用戶只需輸入基本旅行的細節(目的地，旅客人數，暫定旅程），這個app就會展示日歷顯示對應的價格。所以用戶可以基于靈活的旅行日期選擇最高性價比的航班。

然后，用戶選擇當時席位(被笑臉符號標記的座位，開玩笑~~）然后...這就是你的登機過程。總來來說，就是“預定，支付，起飛！”

ToFind平穩動畫過渡概念設計

驚艷的原因：

界面看起來簡潔大方，得益于它簡潔的配色和文字排版。這個app展示很多復雜的動畫和交互行為，在速度和細節上表現的很好，來幫助用戶感受到自己就是旅行中的一部分。開源控制器的擴展是一個讓人印象非常深刻的例子，使用上下文相關的信息進行定位。

恰當的滑動, 動畫，享受這個演示吧

驚艷的原因：

漸變被用在這個app中，通過把成塊的顏色轉化為加載畫面，使過渡顯得更加平滑和美觀。一旦交互進行后，這個能幫助打破更大塊的信息內容。滑動手勢把高質量的圖片聚集在一起使這個app看起來很奢華。

還有其他好的旅游界面提供嗎？給我留言，我們一起討論哦。

————END————

原文地址：https://www.toptal.com/designers/ui/amazing-travel-uis

譯者：狐貍

聲明：本文由設計夾翻譯小組成員狐貍翻譯并整理，如需轉載，請申請授權并保留譯者全部信息，轉載合作請添加微信：sezign01.更多精彩內容請關注設計夾。