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

項目簡述

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

預處理環節

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

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

選擇漢堡頁面

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

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

自定義漢堡頁面

對于那些關心具體配料的用戶而言，他們會有自定義漢堡中具體配料的需求。只需要點擊「成份」這個標簽，他們就能看到漢堡中所包含的具體的配料，具體有哪些蔬菜，哪些肉類，哪些醬料等等。為了使成份列表看起來比較吸引人，界面中將會包含所有的配料的圖片。在任何交互的階段，用戶都可以將這些配料加入收藏夾，而加入的方式只需要點擊右上角的心形圖標即可。購物車圖標同樣是經過 UX 優化的，當上面有顯示黃色的小點的時候，就表示其中不是空的。

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

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

創建全新漢堡的頁面

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

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

下單和配送頁面

確定訂單細節之后，用戶可以通過兩種方式來獲?。簩⑹澄锼偷教囟ǖ牡攸c，或者用戶去餐館自提。APP 還可以支持不同的付款方式。

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

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

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

著陸頁

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

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

原文作者 :?Tubik Studio

譯者 :?陳子木

譯文地址：https://www.uisdc.com/case-study-tasty-burger

本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

題圖由作者提供