UI竟在我身边#2：麦当劳APP

 谁V我50请我吃麦当劳？

目录

1 首页

2 顶端刷新动画

3 底栏

3.1 切换动画

3.2 ICON

4 麦麦商城

4.1 爆品推荐 

4.2 右上角的小喇叭

5 订单 

6 用户

6.1 麦当劳钱包 

6.2 推荐服务的ICON

7 总结与补充

---

 

1 首页

        首先打开麦当劳APP，直接进入的是首页界面。整个页面的模块是以淡化进入的形式加载出来的。可以看到图中最直观的两个按钮就是麦乐送和到店取餐，把APP最核心的点餐功能摆在最显眼的位置。并且两个按钮虽然是分隔开的，但是按钮上的图案很巧妙地融合成了一幅画，特别有意思。

        整个APP的方框都是带着圆角的，不会给人尖锐感，通过圆角来创造一种温柔的界面氛围。并且界面上半部分的图层采用的是上下叠加的方式，最底下的广告没有外边距的设置，像海报一样静态平铺在底层，然后是早餐卡的会员框叠加在上面，样式就像是一张真正的黑卡（大户人家啊）最后才是点餐按钮。这种上下叠加的设计能够在利用更少的空间的情况下又让用户在视觉上感受到生动和美观，特别是把广告铺在最下的这个设计非常让我欣赏，这样能既不会造成广告单独占位给顾客带来的心理疲劳和厌倦感，又能很好地起到宣传作用。广告在这里是其他功能键的背景，也是商品宣传的有力海报。

        上半部分作为点餐区，下半部分就作为广告和导航。把离自己最近的门店距离这一栏目作为透明背景单独以文字和ICON的形式放在最顶端，有精致小巧的感觉。下方的广告栏让当前页面的最下框露出一部分，给用户向下滑动的动作提示。

2 顶端刷新动画

        当拉住当前页面在竖直方向进行一个刷新操作时，P1是拉伸时的动画，P2是松开后刷新完成的动画。以汉堡一层一层的样式来作为刷新动画，真的好萌好萌啊，很可爱，很有M记的风范。

3 底栏

3.1 切换动画

1.