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

項目簡述

漢堡訂購 APP 的UI 和交互設(shè)計。

預(yù)處理環(huán)節(jié)

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

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

選擇漢堡頁面

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

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

自定義漢堡頁面

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

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

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

創(chuàng)建全新漢堡的頁面

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

下面是在 APP 當中創(chuàng)建新漢堡的交互流程。

下單和配送頁面

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

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

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

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

著陸頁

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

Tasty?Burger 這個應(yīng)用程序?qū)τ?Tubik 團隊而言是非常有挑戰(zhàn)性的，它是一個非?？岬膰L試，拓寬了我們的視野，在功能的設(shè)計上同樣作出了全新的嘗試。

「2018年設(shè)計趨勢，一個都不要錯過」

• 《2018年，這10個LOGO設(shè)計趨勢值得你關(guān)注》
• 《超全面總結(jié)！2017年UI設(shè)計領(lǐng)域流行過這21個設(shè)計趨勢》
• 《掌握這12個移動端UX設(shè)計趨勢，你就掌控了2018年》
• 《這款獨特的紫色，是為你指引2018年設(shè)計方向的年度潘通色》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com