麦当劳App UI重新设计方案

随着智能手机越来越普及,网络速度越来越快,使用外卖App点餐的人也自然越来越多,今天我们来看下麦当劳外卖app优化设计。

只要用过麦当劳App点餐,想必已经发现,从选择点餐类别、定位餐厅、挑选餐饮、付款到真正下单,整个过程都不够流畅。RedSo的设计师今天就尝试对  麦当劳App UI设计进行大改造,让这个App更好看、更好用!

1. 主页广告及按钮排列

  • 没有品牌识别颜色
  • 凌乱的页面结构
  • 方形风格缺乏新鲜感
  • 可有可无的目录按钮
  • 引起误会的「我的最爱」按钮

 

没有品牌识别颜色

在界面颜色方面,原本采用的白色主题虽然简洁清晰,但较为无趣、无法一看就知道是哪个品牌的App。于是我们利用大众对麦当劳熟知的品牌颜色–红色和黄色,再配搭白色,让整个界面看上去更鲜明,同时大幅提升了界面的品牌识别度。此外,将重点推广资讯置于红色底色之上,更能让产品资讯更吸引眼球

凌乱的页面结构

页面凌乱的结构也是一个很显著的问题。由于界面文字太多且大小、颜色都没统一,加上页面下半部放置了一系列的优惠劵详情,导致整个画面没有一个可以让眼睛聚焦的地方,看上去是凌乱不堪的。主页的架构经过改造后脉络分明,首先是该App最核心的功能-「手机点餐」及「麦麦送」按钮,采用红、黄色背景和容易理解的配图,让它们在界面上显得醒目又直观。

 

其次,重新设计后只显示最重要的文字,并使用大小统一的文字,阅览时更为舒畅、易懂。

其三,「餐厅定位」功能有助轻易找到附近的分店,对于远距离点餐的用户来说也是需要的,所以把「餐厅定位」按钮放在主页最底部。其白色背景减少了在画面上的份量,避免分散使用者对于两个点餐按钮的注意力。

 

方形风格缺乏新鲜感

改造前的按钮边框风格是中规中矩的长方形,给人传统古板的感觉,而且从左至右的阅读按钮上,文字需要较长的阅览时间,尤其是「我的最爱」按钮上的文字,几乎挤满整个按钮。

改造后的按钮使用圆角正方形风格,界面变得更活泼外,在照片的辅助下,可让使用者更快分辨按钮的用途,且经过简化的按钮文字,在界面视觉上更具空间感,阅览时更舒适。

可有可无的目录按钮

原本目录展开后的按钮其实跟主页的按钮有很多重叠之处,如此只会增加界面的复杂性,所以我们将目录按钮删除,再把不重复而常用的功能放于底部的tab bar,使用者无须再多按一下展开目录,就可以马上选择想到达的页面,方便又简洁。

 

引起误会的「我的最爱」按钮

现在的麦当劳App 首页中「我的最爱」按钮与「手机点餐」及「麦麦送」按钮并列,可是实际上「我的最爱」功能只适用于手机点餐。

虽然「我的最爱」按钮上有文字注明,但相信依然难免会造成某些使用者的困惑。所以改造后我们将「我的最爱」功能放置手机点餐的页面内,这样就能确保只有选择手机点餐的用家才会使用到「我的最爱」功能。

 

2. 餐厅定位

改造前(左)、改造后(右)

 

不够人性化的定位方法

目前的App只使用手机系统预设的定位权限对话框,一旦使用者拒绝定位存取,日后要再启用GPS定位的话需要于手机设定内调整,过程略为繁复

改造后的界面会先有提示说明启用定位功能的好处,增加获得使用者权限的机会,使用者允许后才会开启系统的询问。假设使用者看完提示后依然点选「现在不允许」,提示将会暂时关闭,直到使用者下次登入再作询问,而整个过程都不会影响到系统层面上的设定,日后回心转意的话就不需要点进手机系统设定了。

 

3. 点餐页面编排

改造前(左)、改造后(右)

 

页面空间配置不当

目前的点餐界面一半位置也用以展示早餐(breakfast)或常餐(regular)的照片及各自的供应时间,而餐饮菜单的显示只占了下半的小部分。但点餐页面的重点其实应该放在显示餐饮选择上,所以我们在空间配置上大部分改为展示餐点,并将早餐、常餐及我的最爱的显示方式简化为文字显示,其下方则有注明该餐单的供应时间和是否供应中。

另外也将本来放置于中间阻碍了阅览流畅度的餐厅位置移至最上方,显著提升了界面的可读性。

 

无法马上浏览各款餐点

改造前,浏览不同菜单 的餐点需要按一下所选的餐点,才会展开下方的详细目录。举例说,消费者想点「开心乐园餐」,必须按下「开心乐园餐」的按钮,展开其menu 细项,才能浏览和选择想要的套餐。

 

目前这种图片和文字并列的按钮其实大大减少了展示餐点的空间,所以将标题文字移上,再把不同餐单的餐点图片并列下方,如此一来,不但同样清晰,更让使用者马上对不同menu 的餐点一目了然,节省了挑选的时间。

 

4. 套餐切换方式

改造前(左)、改造后(右)

 

切换套餐方式缺乏直觉性

选好餐点进入套餐页面后,可选择套餐大小、配餐及饮料。在切换套餐大小方面,目前麦当劳的App 采用了传统的点选对应按钮。不过既然按钮都是并排在一横线上,相信不少使用者会滑动左右去切换,所以改成可同时滑动及点选式的切换方法更能符合消费者的直觉,切换也更容易。

 

预设消费者必需搭配的配餐

挑选套餐的配餐和饮料后,不需加点其他点心的消费者自然会按下「加入购物车」按钮。可是麦当劳App UI 却预设了使用者需要额外加点其他点心,使得不需加点的消费者每次都要按进加点目录里的最下方,特地选择「不需加点」,才可以继续点餐流程,非常麻烦。

假如忽略加点点心的选项时,会显示错误提示。

 

因为加点点心并不是强制性的,而需要的消费者势必会自行加购,所以改造后移除这个多此一举的做法,改成加点点心的部分可留空不填,当配餐和饮料有漏填才有提示,相信对于众多不需加配点心的消费者而言,点餐流程会更加流畅!

 

价钱显示更清楚

改造前的总价钱仅显示在页面底部,假使消费者点了好几个套餐,则需滑动至界面最底部才能知道总价格。所以改造后直接将价钱标示在最下方的「加入购物车」按钮文字旁边,只要停留在点餐页面上,价钱都可以一目了然。

 

意义不明的图示(icon)

不知道各位是否知道餐点右方这“ 厨师帽 ” icon的含义?相信很多使用者都要点进去才会恍然大悟,原来这是定制化点餐的标志,让消费者可以自行决定汉堡要不要放生菜、薯条要不要加盐…等。

因为定制化一词比较抽象,当做成图示时反而令使用者混淆或是忽略,所以重新设计后改用文字按钮,让每一位使用者都能清晰知道按钮的意思。

改造前(上)、改造后(下)

 

5. 购物车提示

改造前(左)、改造后(右)

 

不起眼的购物车提示

将餐点加入购物车后返回主页后,右下方会有一个非常小的购物车标志,提示消费者购物车还有待结帐的餐点。可是图示实在太小,而且其灰色的颜色也并不鲜艳,可能导致使用者花很多时间去找出、甚至找不到这个按钮。

 

于是新设计采用鲜红色长形大按钮,并以文字显示「我的购物车」,让使用者可以快速看见并到达购物车页面。即便使用者退回了App的主页面,亦有绿色长形的提示条作提示,绿色和红黄主题的颜色对比亦能确保提示够显眼。

6. 购物车预览

改造前(左)、改造后(右)

预览模式不够美观

进入购物车后虽然可以清楚预览挑选的每一项餐点,可是显示方式较为枯燥无味。重新设计后使用较大的字体显示套餐或餐点名字,再以圆角边框包围了套餐的包含餐点和餐点详情,看上去更美观,而且当点多于一个套餐时会更清晰。

缺乏趣味的按钮

目前外带(take away)和内用(dine in)的选择按钮仅以颜色做区分,而且采用的颜色偏深,缺乏生气。所以改造后加入了图案元素,给人感觉更有趣。

 

7. 优惠劵使用

改造前(左)、改造后(右)

不方便的优惠劵使用方式

目前如要需要使用优惠劵的话,则需手动选择要使用的优惠劵。可是优惠劵页面和订餐页面是分开的,让使用者很容易会遗忘优惠劵,点选优惠时亦不顺手。另外,优惠劵大部分都有使用的时间限制(例如只可以早上4 时至11 时使用),如果使用者误选了错误时段的优惠劵,却依然可以加进购物车,直到点结算才会显示错误提示。

重新设计后优惠劵会显示在购物车的下方,当使用者点餐后,系统会自动显示可使用的优惠劵,也可以自行更换其他优惠劵。能够快速获得折扣优惠,使用者买单的意愿就更高了。

选餐后无法快速切换优惠劵

另一个使用上的困难是无法随意切换优惠劵。比如选好优惠劵后要更换成其他优惠,必须手动删除现有优惠劵,再退回首页重新选择。重新设计后的界面则省却了这些繁复之处。

如在选好优惠劵后要更换其他优惠,必须手动删除现有优惠卷,再退回首页重新选择。

 

8. 付款方式

改造前(左)、改造后(右)

付款方式较少

使用者要结帐的时候或许会发现只能选择信用卡或是现金付款,重新设计后加添了Apple Pay 付费,亦添加了「新增付款方式」按钮,让使用者可以加入最适合自己的付款方法。

可增加图标辅助

改造后的页面在付款方式旁边新增了对应的图标,使用者在选择时更清晰,亦增加了界面的美观性。

 

9. 新增功能 — 取餐时间

使用者可指定取餐时间

重新设计后的界面也新增了数个贴心的功能,其中一个便是使用者可自订取餐时间。目前的版本就算使用者已经通过线上支付付费,但还是需要抵达餐厅才会开始准备配餐。

改良后,通过信用卡或其他线上付费方法的消费者可在付费后,根据自己的需要选择不同的取餐时间,例如餐厅在家楼下的使用者可以选择「快速取餐」,距离比较远或想提早点餐的使用者则可选择10、20 或30 分钟后取餐。

 

当使用者到达餐厅时,餐点便会刚好准备好,确保取餐时的餐点都是最新鲜的状态,还节省在店面的等候时间,最适合赶时间的使用者!至于选择到店付款的用户,一旦付费后会马上开始准备餐点。

 

10. 新增功能– 底部导航列(Tab bar)

目前的App界面并没有底部导航列,仅有一个需要点击展开的目录按钮。而如文初所说,改造后将常用的功能放置新增的底部导航按钮列,当中包括「主页」、「我的订单」、「优惠券」及「我的帐号」功能按钮。

我的订单

在「我的订单」内,使用者可清楚浏览已经下单并结帐的餐点图示、取餐地址、轮候号码,更显示了餐点的制作进度,方便使用者安排最适当的时间前往取餐。下方更展示了过往全部的订单详细资料如餐点内容、日期和价钱等,顾客只需点击「再点一次」按钮,即可快速下单。

我的优惠券

目前优惠券并没有一个独立页面,而是主页下方,需要滑动向下才可见全部优惠券。由于如此的页面排版会令单页资讯量过多,降低可读性,而且使用者不一定知道需要滑向下方才可以查看优惠券,所以重新设计后我们为优惠券设立了一个独立页面。优惠券形状采用拟物化设计,增添介面趣味,加上充满质感和动态的餐点照片作背景更美观、更能引起食欲。

由此可见,App 的UI 设计不仅要美观、更要人性化和注重用户体验,只有细致入微的介面设计才能让App 使用得更流畅和有效率!

每天更新,
全站高品质素材免费下载!