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

蕭伯納曾經(jīng)說過，沒有什么愛比對(duì)美食的愛還要真誠(chéng)。這也是為什么美食和烹飪成為了用戶體驗(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)來承載，可以自定義添加各種食材配料和相關(guān)選項(xiàng)。

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

選擇漢堡頁面

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

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

自定義漢堡頁面

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

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

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

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

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

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

下單和配送頁面

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

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

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

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

著陸頁

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

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

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

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

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

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

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