隨著智能手機(jī)越來越普及，網(wǎng)絡(luò)速度越來越快，使用外賣App點(diǎn)餐的人也自然越來越多，今天我們來看下麥當(dāng)勞外賣app優(yōu)化設(shè)計(jì)。

只要用過麥當(dāng)勞App點(diǎn)餐，想必已經(jīng)發(fā)現(xiàn)，從選擇點(diǎn)餐類別、定位餐廳、挑選餐飲、付款到真正下單，整個(gè)過程都不夠流暢。RedSo的設(shè)計(jì)師今天就嘗試對??麥當(dāng)勞App UI設(shè)計(jì)進(jìn)行大改造，讓這個(gè)App更好看、更好用！

1. 主頁廣告及按鈕排列

• 沒有品牌識別顏色
• 凌亂的頁面結(jié)構(gòu)
• 方形風(fēng)格缺乏新鮮感
• 可有可無的目錄按鈕
• 引起誤會(huì)的「我的最愛」按鈕

沒有品牌識別顏色

在界面顏色方面，原本采用的白色主題雖然簡潔清晰，但較為無趣、無法一看就知道是哪個(gè)品牌的App。于是我們利用大眾對麥當(dāng)勞熟知的品牌顏色–紅色和黃色，再配搭白色，讓整個(gè)界面看上去更鮮明，同時(shí)大幅提升了界面的品牌識別度。此外，將重點(diǎn)推廣資訊置于紅色底色之上，更能讓產(chǎn)品資訊更吸引眼球！

凌亂的頁面結(jié)構(gòu)

頁面凌亂的結(jié)構(gòu)也是一個(gè)很顯著的問題。由于界面文字太多且大小、顏色都沒統(tǒng)一，加上頁面下半部放置了一系列的優(yōu)惠劵詳情，導(dǎo)致整個(gè)畫面沒有一個(gè)可以讓眼睛聚焦的地方，看上去是凌亂不堪的。主頁的架構(gòu)經(jīng)過改造后脈絡(luò)分明，首先是該App最核心的功能-「手機(jī)點(diǎn)餐」及「麥麥送」按鈕，采用紅、黃色背景和容易理解的配圖，讓它們在界面上顯得醒目又直觀。

其次，重新設(shè)計(jì)后只顯示最重要的文字，并使用大小統(tǒng)一的文字，閱覽時(shí)更為舒暢、易懂。

其三，「餐廳定位」功能有助輕易找到附近的分店，對于遠(yuǎn)距離點(diǎn)餐的用戶來說也是需要的，所以把「餐廳定位」按鈕放在主頁最底部。其白色背景減少了在畫面上的份量，避免分散使用者對于兩個(gè)點(diǎn)餐按鈕的注意力。

方形風(fēng)格缺乏新鮮感

改造前的按鈕邊框風(fēng)格是中規(guī)中矩的長方形，給人傳統(tǒng)古板的感覺，而且從左至右的閱讀按鈕上，文字需要較長的閱覽時(shí)間，尤其是「我的最愛」按鈕上的文字，幾乎擠滿整個(gè)按鈕。

改造后的按鈕使用圓角正方形風(fēng)格，界面變得更活潑外，在照片的輔助下，可讓使用者更快分辨按鈕的用途，且經(jīng)過簡化的按鈕文字，在界面視覺上更具空間感，閱覽時(shí)更舒適。

可有可無的目錄按鈕

原本目錄展開后的按鈕其實(shí)跟主頁的按鈕有很多重疊之處，如此只會(huì)增加界面的復(fù)雜性，所以我們將目錄按鈕刪除，再把不重復(fù)而常用的功能放于底部的tab bar，使用者無須再多按一下展開目錄，就可以馬上選擇想到達(dá)的頁面，方便又簡潔。

引起誤會(huì)的「我的最愛」按鈕

現(xiàn)在的麥當(dāng)勞App 首頁中「我的最愛」按鈕與「手機(jī)點(diǎn)餐」及「麥麥送」按鈕并列，可是實(shí)際上「我的最愛」功能只適用于手機(jī)點(diǎn)餐。

雖然「我的最愛」按鈕上有文字注明，但相信依然難免會(huì)造成某些使用者的困惑。所以改造后我們將「我的最愛」功能放置手機(jī)點(diǎn)餐的頁面內(nèi)，這樣就能確保只有選擇手機(jī)點(diǎn)餐的用家才會(huì)使用到「我的最愛」功能。

2. 餐廳定位

不夠人性化的定位方法

目前的App只使用手機(jī)系統(tǒng)預(yù)設(shè)的定位權(quán)限對話框，一旦使用者拒絕定位存取，日后要再啟用GPS定位的話需要于手機(jī)設(shè)定內(nèi)調(diào)整，過程略為繁復(fù)。

改造后的界面會(huì)先有提示說明啟用定位功能的好處，增加獲得使用者權(quán)限的機(jī)會(huì)，使用者允許后才會(huì)開啟系統(tǒng)的詢問。假設(shè)使用者看完提示后依然點(diǎn)選「現(xiàn)在不允許」，提示將會(huì)暫時(shí)關(guān)閉，直到使用者下次登入再作詢問，而整個(gè)過程都不會(huì)影響到系統(tǒng)層面上的設(shè)定，日后回心轉(zhuǎn)意的話就不需要點(diǎn)進(jìn)手機(jī)系統(tǒng)設(shè)定了。

3. 點(diǎn)餐頁面編排

頁面空間配置不當(dāng)

目前的點(diǎn)餐界面一半位置也用以展示早餐(breakfast)或常餐(regular)的照片及各自的供應(yīng)時(shí)間，而餐飲菜單的顯示只占了下半的小部分。但點(diǎn)餐頁面的重點(diǎn)其實(shí)應(yīng)該放在顯示餐飲選擇上，所以我們在空間配置上大部分改為展示餐點(diǎn)，并將早餐、常餐及我的最愛的顯示方式簡化為文字顯示，其下方則有注明該餐單的供應(yīng)時(shí)間和是否供應(yīng)中。

另外也將本來放置于中間阻礙了閱覽流暢度的餐廳位置移至最上方，顯著提升了界面的可讀性。

無法馬上瀏覽各款餐點(diǎn)

改造前，瀏覽不同菜單 的餐點(diǎn)需要按一下所選的餐點(diǎn)，才會(huì)展開下方的詳細(xì)目錄。舉例說，消費(fèi)者想點(diǎn)「開心樂園餐」，必須按下「開心樂園餐」的按鈕，展開其menu 細(xì)項(xiàng)，才能瀏覽和選擇想要的套餐。

目前這種圖片和文字并列的按鈕其實(shí)大大減少了展示餐點(diǎn)的空間，所以將標(biāo)題文字移上，再把不同餐單的餐點(diǎn)圖片并列下方，如此一來，不但同樣清晰，更讓使用者馬上對不同menu 的餐點(diǎn)一目了然，節(jié)省了挑選的時(shí)間。

4. 套餐切換方式

切換套餐方式缺乏直覺性

選好餐點(diǎn)進(jìn)入套餐頁面后，可選擇套餐大小、配餐及飲料。在切換套餐大小方面，目前麥當(dāng)勞的App 采用了傳統(tǒng)的點(diǎn)選對應(yīng)按鈕。不過既然按鈕都是并排在一橫線上，相信不少使用者會(huì)滑動(dòng)左右去切換，所以改成可同時(shí)滑動(dòng)及點(diǎn)選式的切換方法更能符合消費(fèi)者的直覺，切換也更容易。

預(yù)設(shè)消費(fèi)者必需搭配的配餐

挑選套餐的配餐和飲料后，不需加點(diǎn)其他點(diǎn)心的消費(fèi)者自然會(huì)按下「加入購物車」按鈕?？墒躯湲?dāng)勞App UI 卻預(yù)設(shè)了使用者需要額外加點(diǎn)其他點(diǎn)心，使得不需加點(diǎn)的消費(fèi)者每次都要按進(jìn)加點(diǎn)目錄里的最下方，特地選擇「不需加點(diǎn)」，才可以繼續(xù)點(diǎn)餐流程，非常麻煩。

因?yàn)榧狱c(diǎn)點(diǎn)心并不是強(qiáng)制性的，而需要的消費(fèi)者勢必會(huì)自行加購，所以改造后移除這個(gè)多此一舉的做法，改成加點(diǎn)點(diǎn)心的部分可留空不填，當(dāng)配餐和飲料有漏填才有提示，相信對于眾多不需加配點(diǎn)心的消費(fèi)者而言，點(diǎn)餐流程會(huì)更加流暢！

價(jià)錢顯示更清楚

改造前的總價(jià)錢僅顯示在頁面底部，假使消費(fèi)者點(diǎn)了好幾個(gè)套餐，則需滑動(dòng)至界面最底部才能知道總價(jià)格。所以改造后直接將價(jià)錢標(biāo)示在最下方的「加入購物車」按鈕文字旁邊，只要停留在點(diǎn)餐頁面上，價(jià)錢都可以一目了然。

意義不明的圖示（icon）

不知道各位是否知道餐點(diǎn)右方這“?廚師帽?” icon的含義？相信很多使用者都要點(diǎn)進(jìn)去才會(huì)恍然大悟，原來這是定制化點(diǎn)餐的標(biāo)志，讓消費(fèi)者可以自行決定漢堡要不要放生菜、薯?xiàng)l要不要加鹽…等。

因?yàn)槎ㄖ苹辉~比較抽象，當(dāng)做成圖示時(shí)反而令使用者混淆或是忽略，所以重新設(shè)計(jì)后改用文字按鈕，讓每一位使用者都能清晰知道按鈕的意思。

5. 購物車提示

不起眼的購物車提示

將餐點(diǎn)加入購物車后返回主頁后，右下方會(huì)有一個(gè)非常小的購物車標(biāo)志，提示消費(fèi)者購物車還有待結(jié)帳的餐點(diǎn)?？墒菆D示實(shí)在太小，而且其灰色的顏色也并不鮮艷，可能導(dǎo)致使用者花很多時(shí)間去找出、甚至找不到這個(gè)按鈕。

于是新設(shè)計(jì)采用鮮紅色長形大按鈕，并以文字顯示「我的購物車」，讓使用者可以快速看見并到達(dá)購物車頁面。即便使用者退回了App的主頁面，亦有綠色長形的提示條作提示，綠色和紅黃主題的顏色對比亦能確保提示夠顯眼。

6. 購物車預(yù)覽

預(yù)覽模式不夠美觀

進(jìn)入購物車后雖然可以清楚預(yù)覽挑選的每一項(xiàng)餐點(diǎn)，可是顯示方式較為枯燥無味。重新設(shè)計(jì)后使用較大的字體顯示套餐或餐點(diǎn)名字，再以圓角邊框包圍了套餐的包含餐點(diǎn)和餐點(diǎn)詳情，看上去更美觀，而且當(dāng)點(diǎn)多于一個(gè)套餐時(shí)會(huì)更清晰。

缺乏趣味的按鈕

目前外帶（take away）和內(nèi)用（dine in）的選擇按鈕僅以顏色做區(qū)分，而且采用的顏色偏深，缺乏生氣。所以改造后加入了圖案元素，給人感覺更有趣。

7. 優(yōu)惠劵使用

不方便的優(yōu)惠劵使用方式

目前如要需要使用優(yōu)惠劵的話，則需手動(dòng)選擇要使用的優(yōu)惠劵?？墒莾?yōu)惠劵頁面和訂餐頁面是分開的，讓使用者很容易會(huì)遺忘優(yōu)惠劵，點(diǎn)選優(yōu)惠時(shí)亦不順手。另外，優(yōu)惠劵大部分都有使用的時(shí)間限制（例如只可以早上4 時(shí)至11 時(shí)使用），如果使用者誤選了錯(cuò)誤時(shí)段的優(yōu)惠劵，卻依然可以加進(jìn)購物車，直到點(diǎn)結(jié)算才會(huì)顯示錯(cuò)誤提示。

重新設(shè)計(jì)后優(yōu)惠劵會(huì)顯示在購物車的下方，當(dāng)使用者點(diǎn)餐后，系統(tǒng)會(huì)自動(dòng)顯示可使用的優(yōu)惠劵，也可以自行更換其他優(yōu)惠劵。能夠快速獲得折扣優(yōu)惠，使用者買單的意愿就更高了。

選餐后無法快速切換優(yōu)惠劵

另一個(gè)使用上的困難是無法隨意切換優(yōu)惠劵。比如選好優(yōu)惠劵后要更換成其他優(yōu)惠，必須手動(dòng)刪除現(xiàn)有優(yōu)惠劵，再退回首頁重新選擇。重新設(shè)計(jì)后的界面則省卻了這些繁復(fù)之處。

8. 付款方式

付款方式較少

使用者要結(jié)帳的時(shí)候或許會(huì)發(fā)現(xiàn)只能選擇信用卡或是現(xiàn)金付款，重新設(shè)計(jì)后加添了Apple Pay 付費(fèi)，亦添加了「新增付款方式」按鈕，讓使用者可以加入最適合自己的付款方法。

可增加圖標(biāo)輔助

改造后的頁面在付款方式旁邊新增了對應(yīng)的圖標(biāo)，使用者在選擇時(shí)更清晰，亦增加了界面的美觀性。

9. 新增功能 — 取餐時(shí)間

使用者可指定取餐時(shí)間

重新設(shè)計(jì)后的界面也新增了數(shù)個(gè)貼心的功能，其中一個(gè)便是使用者可自訂取餐時(shí)間。目前的版本就算使用者已經(jīng)通過線上支付付費(fèi)，但還是需要抵達(dá)餐廳才會(huì)開始準(zhǔn)備配餐。

改良后，通過信用卡或其他線上付費(fèi)方法的消費(fèi)者可在付費(fèi)后，根據(jù)自己的需要選擇不同的取餐時(shí)間，例如餐廳在家樓下的使用者可以選擇「快速取餐」，距離比較遠(yuǎn)或想提早點(diǎn)餐的使用者則可選擇10、20 或30 分鐘后取餐。

當(dāng)使用者到達(dá)餐廳時(shí)，餐點(diǎn)便會(huì)剛好準(zhǔn)備好，確保取餐時(shí)的餐點(diǎn)都是最新鮮的狀態(tài)，還節(jié)省在店面的等候時(shí)間，最適合趕時(shí)間的使用者！至于選擇到店付款的用戶，一旦付費(fèi)后會(huì)馬上開始準(zhǔn)備餐點(diǎn)。

10. 新增功能– 底部導(dǎo)航列(Tab bar)

目前的App界面并沒有底部導(dǎo)航列，僅有一個(gè)需要點(diǎn)擊展開的目錄按鈕。而如文初所說，改造后將常用的功能放置新增的底部導(dǎo)航按鈕列，當(dāng)中包括「主頁」、「我的訂單」、「優(yōu)惠券」及「我的帳號」功能按鈕。

我的訂單

在「我的訂單」內(nèi)，使用者可清楚瀏覽已經(jīng)下單并結(jié)帳的餐點(diǎn)圖示、取餐地址、輪候號碼，更顯示了餐點(diǎn)的制作進(jìn)度，方便使用者安排最適當(dāng)?shù)臅r(shí)間前往取餐。下方更展示了過往全部的訂單詳細(xì)資料如餐點(diǎn)內(nèi)容、日期和價(jià)錢等，顧客只需點(diǎn)擊「再點(diǎn)一次」按鈕，即可快速下單。

我的優(yōu)惠券

目前優(yōu)惠券并沒有一個(gè)獨(dú)立頁面，而是主頁下方，需要滑動(dòng)向下才可見全部優(yōu)惠券。由于如此的頁面排版會(huì)令單頁資訊量過多，降低可讀性，而且使用者不一定知道需要滑向下方才可以查看優(yōu)惠券，所以重新設(shè)計(jì)后我們?yōu)閮?yōu)惠券設(shè)立了一個(gè)獨(dú)立頁面。優(yōu)惠券形狀采用擬物化設(shè)計(jì)，增添介面趣味，加上充滿質(zhì)感和動(dòng)態(tài)的餐點(diǎn)照片作背景更美觀、更能引起食欲。

由此可見，App 的UI 設(shè)計(jì)不僅要美觀、更要人性化和注重用戶體驗(yàn)，只有細(xì)致入微的介面設(shè)計(jì)才能讓App 使用得更流暢和有效率！