隨著智慧型手機越來越普及，網絡速度越來越快，使用外送 App 點餐的人也自然越來越多，其中一個最受歡迎的外送應用程式就是麥當勞 App。
不過只要你用過麥當勞 App 點餐，想必你已經發現，從選擇點餐類別、定位餐廳、挑選餐飲、付款到真正下單，整個過程都不夠流暢。RedSo 的設計師今天就嘗試對 麥當勞 App UI 設計進行大改造，讓這個 App 更好看、更好用！
1. 主頁廣告及按鈕排列
- 沒有品牌識別顏色
- 凌亂的頁面結構
- 方形風格缺乏新鮮感
- 可有可無的目錄按鈕
- 引起誤會的「我的最愛」按鈕
沒有品牌識別顏色
在介面顏色方面，原本採用的白色主題雖然簡潔清晰，但較為無趣、亦無法一看就知道是哪個品牌的 App。於是我們利用大眾對麥當勞熟知的品牌顏色 – 紅色和黃色，再配搭白色，讓整個介面看上去更鮮明，同時大幅提升了介面的品牌識別度。此外，將重點推廣資訊置於紅色底色之上，更能讓產品資訊更吸睛！
凌亂的頁面結構
頁面凌亂的結構也是一個很顯著的問題。由於介面文字太多且大小、顏色都沒統一，加上頁面下半部放置了一系列的優惠劵詳情，導致整個畫面沒有一個可以讓眼睛聚焦的地方，看上去是凌亂不堪的。主頁的架構經過改造後脈絡分明，首先是該 App 最核心的功能 -「手機點餐」及「麥麥送」按鈕，採用紅、黃色背景和容易理解的配圖，讓它們在介面上顯得醒目又直觀。
其次，重新設計後只顯示最重要的文字，並使用大小統一的文字，閱覽時更為舒暢、易懂。
其三，「餐廳定位」功能有助輕易找到附近的分店，對於遙距點餐的用戶來說也是需要的，所以把「餐廳定位」按鈕放在主頁最底部。其白色背景減少了在畫面上的份量，避免分散使用者對於兩個點餐按鈕的注意力。
方形風格缺乏新鮮感
改造前的按鈕邊框風格是中規中矩的長方形，給人傳統古板的感覺，而且從左至右的閱讀按鈕上，文字需要較長的閱覽時間，尤其是「我的最愛」按鈕上的文字，幾乎擠滿整個按鈕。
改造後的按鈕使用圓角正方形風格，介面變得更活潑外，在照片的輔助下，可讓使用者更快分辨按鈕的用途，且經過簡化的按鈕文字，在介面視覺上更具空間感，閱覽時更舒適。
可有可無的目錄按鈕
原本目錄展開後的按鈕其實跟主頁的按鈕有很多重疊之處，如此只會徒增介面的複雜性，所以我們將目錄按鈕刪除，再把不重複而常用的功能放於底部的 tab bar，使用者無須再多按一下展開目錄，就可以馬上選擇想到達的頁面，方便又簡潔。
引起誤會的「我的最愛」按鈕
現在的麥當勞 App 首頁中「我的最愛」按鈕與「手機點餐」及「麥麥送」按鈕並列，可是實際上「我的最愛」功能只適用於手機點餐。
雖然「我的最愛」按鈕上有文字註明，但相信依然難免會造成某些使用者的困惑。所以改造後我們將「我的最愛」功能放置手機點餐的頁面內，這樣就能確保只有選擇手機點餐的用家才會使用到「我的最愛」功能。
2. 餐廳定位
不夠人性化的定位方法
目前的 App 只使用手機系統預設的定位權限對話框，一旦使用者拒絕定位存取，日後要再啟用GPS定位的話需要於手機設定內調整，過程略為繁複。
改造後的介面會先有提示說明啟用定位功能的好處，增加獲得使用者權限的機會，使用者允許後才會開啟系統的詢問。假設使用者看完提示後依然點選「現在不允許」，提示將會暫時關閉，直到使用者下次登入再作詢問，而整個過程都不會影響到系統層面上的設定，日後回心轉意的話就不需要點進手機系統設定了。
3. 點餐頁面編排
頁面空間配置不當
目前的點餐介面一半位置也用以展示早餐 (breakfast) 或常餐 (regular) 的照片及各自的供應時間，而餐飲 MENU 的顯示只佔了下半的小部分。但點餐頁面的重點其實應該放在顯示餐飲選擇上，所以我們在空間配置上大部分改為展示餐點，並將早餐、常餐及我的最愛的顯示方式簡化為文字顯示，其下方則有註明該餐單的供應時間和是否供應中。
另外也將本來放置於中間阻礙了閱覽流暢度的餐廳位置移至最上方，顯著提升了介面的可讀性。
無法馬上瀏覽各款餐點
改造前，瀏覽不同 menu 的餐點需要按一下所選的餐點，才會展開下方的詳細目錄。舉例說，消費者想點「開心樂園餐」，必須按下「開心樂園餐」的按鈕，展開其 menu 細項，才能瀏覽和選擇想要的套餐。
目前這種圖片和文字並列的按鈕其實大大減少了展示餐點的空間，所以將標題文字移上，再把不同餐單的餐點圖片並列下方，如此一來，不但同樣清晰，更讓使用者馬上對不同 menu 的餐點一目了然，節省了挑選的時間。
4. 套餐切換方式
切換套餐方式缺乏直覺性
選好餐點進入套餐頁面後，可選擇套餐大小、配餐及飲料。在切換套餐大小方面，目前麥當勞的 App 採用了傳統的點選對應按鈕。不過既然按鈕都是並排在一橫線上，相信不少使用者會滑動左右去切換，所以改成可同時滑動及點選式的切換方法更能符合消費者的直覺，切換也更容易。
預設消費者必需搭配的配餐
挑選套餐的配餐和飲料後，不需加點其他點心的消費者自然會按下「加入購物車」按鈕。可是 麥當勞 App UI 卻預設了使用者需要額外加點其他點心，使得不需加點的消費者每次都要按進加點目錄裡的最下方，特地選擇「不需加點」，才可以繼續點餐流程，非常麻煩。
因為加點點心並不是強制性的，而需要的消費者勢必會自行加購，所以改造後移除這個多此一舉的做法，改成加點點心的部分可留空不填，當配餐和飲料有漏填才有提示，相信對於眾多不需加配點心的消費者而言，點餐流程會更加流暢！
價錢顯示更清楚
改造前的總價錢僅顯示在頁面底部，假使消費者點了好幾個套餐，則需滑動至介面最底部才能知道總價格。所以改造後直接將價錢標示在最下方的「加入購物車」按鈕文字旁邊，只要停留在點餐頁面上，價錢都可以一目了然。
意義不明的圖示（icon）
不知道各位是否知道餐點右方這 “廚師帽” icon 的含義？相信很多使用者都要點進去才會恍然大悟，原來這是客製化點餐的標誌，讓消費者可以自行決定漢堡要不要放生菜、薯條要不要加鹽 … 等。
因為客製化一詞比較抽象，當做成圖示時反而令使用者混淆或是忽略，所以重新設計後改用文字按鈕，讓每一位使用者都能清晰知道按鈕的意思。
5. 購物車提示
不起眼的購物車提示
將餐點加入購物車後返回主頁後，右下方會有一個非常小的購物車標誌，提示消費者購物車還有待結帳的餐點。可是圖示實在太小，而且其灰色的顏色也並不鮮豔，可能導致使用者花很多時間去找出、甚至找不到這個按鈕。
於是新設計採用鮮紅色長形大按鈕，並以文字顯示「我的購物車」，讓使用者可以快速看見並到達購物車頁面。即便使用者退回了 App 的主頁面，亦有綠色長形的提示條作提示，綠色和紅黃主題的顏色對比亦能確保提示夠顯眼。
麥當勞 App UI 大改造上篇就到這邊先告一段落，無論你是 UI/UX 設計師、或是對介面設計有興趣，都希望以上的內容能夠幫助大家更好了解 UI/UX 設計的重點。下篇將會繼續帶各位深入研究麥當勞 App 其他能夠改良的地方，如果你想要進一步了解我們的 UI/UX 設計、對文章有任何建議或者希望成為合作夥伴，隨時都可以透過 Facebook，官方網站或 E-mail connect@redso.com.hk 聯繫我們～
感謝你的閱讀和支持～
本文經作者 Monisa Kwan 同意，轉載於 UI/UX整容大改造！徹底砍掉重練AppStore評分1.5星的麥當勞App（上） / (以上改造前之原圖擷取自麥當勞應用程式 ©2018 McDonald’s 版本 4.8.5；文章及改造後之圖片均屬 RedSo 所有，未經授權不得轉載。）
公司名稱：Red Soldier LimitedFacaebook: https://www.facebook.com/redso.com.hk/
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
