這個APP把訂購漢堡玩出花來了

蕭伯納曾經說過，沒有什麼愛比對美食的愛還要真誠。這也是為什麼美食和烹飪成為了用戶體驗設計師的重要靈感來源之一。今天分享一個產品案例：一款用來訂購美食的移動端APP Tasty Burger 的交互和創意設計流程。

項目簡述

漢堡訂購 APP 的UI 和交互設計。

預處理環節

要設計一個訂購漢堡的 APP，最重要的是考慮清楚每個步驟，給出足夠清晰的導航，這確保了用戶在不同情況下都能快速製作並且下單。Tubik UI 設計師 Anton Morozov 在藝術總監 Ernest Asanov 和 Vladyslav Taran 的指導下進行這個項目的設計，他們的設計目標是讓 Tasty Burger APP 的界面直觀又美味。擴展功能主要藉助漢堡圖標來承載，可以自定義添加各種食材配料和相關選項。

接下來你會看到用戶歷程的界面設計，其中包含了具體的漢堡菜單中的選項和定製流程，以及提交訂單的具體界面。

選擇漢堡頁面

在這個菜單當中，用戶會看到當前餐廳或者服務提供者所在的位置以及特別優惠活動。具體食物的圖片旁邊還有食物的成份和重量等相關的基本數據。通過色彩凸顯價格和 CTA 用語，讓用戶快速獲取到關鍵信息。更重要的是，頂部的過濾能夠幫助用戶自定義篩選，並且快速找到想要的東西。

在選擇了特定的位置並且跳轉到特定的產品頁之後，用戶會看到產品的高清大圖，相關的定價、重量、營養信息等關鍵數據，並且會看到添加購物車的 CTA 按鈕。這種視覺化的呈現方式更具有情感表現力和吸引力，屏幕上整體布局也顯得乾淨利落。這樣的設計對於經常來這個頁面下單購買的用戶而言不會顯得信息過載，他們會迅速地作出決策。

自定義漢堡頁面

考慮到用戶會仔細閱讀配料細節，觀察並進行更為深度的自定義交互，信息最好是顯示在淺色的背景上，確保文本和背景的對比度，提升可讀性。當然，在設計的時候，也同樣支持高對比度的深色背景 ，因為這樣同樣有足夠的對比度，風格上則會顯得更加時尚優雅。此外，設計師非常重視構建均衡而易於掃視的視覺層次結構，以便快速的傳遞信息和交互。飢餓的用戶們其實並不會投入大量的時間和精力來研究這個 APP 的具體功能的，在飢餓的促使之下，他們只會儘快下單。

自定義訂單的交互流程如下圖所示：

GIF

創建全新漢堡的頁面

餐廳和咖啡館所提供的漢堡通常有著典型的特色。而為了將美食的精神貫徹到底，用戶應該還可以基於不同的配料完全定製屬於自己的，全新的漢堡品類。當然，這些配料應該是庫存配料所能支持的。添加新的配料之後，用戶會看到價格的變化。

下面是在 APP 當中創建新漢堡的交互流程。

GIF

下單和配送頁面

確定訂單細節之後，用戶可以通過兩種方式來獲取：將食物送到特定的地點，或者用戶去餐館自提。APP 還可以支持不同的付款方式。

如果用戶選擇去餐館自提，那麼 APP 還應該提供地圖服務，並且顯示最佳的路線。高色彩對比度和精心挑選的自提能夠確保內容的可讀性。

以下是訂單交付的解決方案和交互流程。

GIF

微妙的動效使得整個訂購流程顯得生動而美味。

著陸頁

著陸頁一定是要有足夠吸引人的動畫：新鮮美味的漢堡要能夠呈現出令人垂涎欲滴的效果，並且要貼合主題，並且富有吸引力。

GIF

Tasty Burger 這個應用程序對於 Tubik 團隊而言是非常有挑戰性的，它是一個非常酷的嘗試，拓寬了我們的視野，在功能的設計上同樣作出了全新的嘗試。

來源：優設 作者：Tubik Studio

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！