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

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

項(xiàng)目簡(jiǎn)述

漢堡訂購(gòu) APP 的UI 和交互設(shè)計(jì)。

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

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

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

選擇漢堡網(wǎng)頁

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

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

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

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

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

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

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

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

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

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

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

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

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

玄妙的動(dòng)效使得整個(gè)訂購(gòu)流程顯得生動(dòng)而美味。

著陸頁

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

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