這個APP的UX設(shè)計，把訂購漢堡玩出花來了

蕭伯納曾經(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è)計目標(biāo)是讓 Tasty Burger APP 的界面直觀又美味。擴展功能重要借助漢堡圖標(biāo)來承載，可以自定義添加各種食材配料和相干選項。

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

選擇漢堡網(wǎng)頁

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

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

自定義漢堡網(wǎng)頁

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

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

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

創(chuàng)建全新漢堡的網(wǎng)頁

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

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

下單和配送網(wǎng)頁

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

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

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

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

著陸頁

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

Tasty Burger 這個應(yīng)用程序?qū)τ?Tubik 團隊而言是特別很是有挑釁性的，它是一個特別很是酷的嘗試，拓寬了我們的視野，在功能的設(shè)計上同樣作出了全新的嘗試。