谁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 切换动画
在底栏切换选项的时候,当你点击另一个ICON时,当前的ICON会有一个稍微下沉的动画,而目标ICON会进行一个短暂的放大,并且作出摇晃式的动画,配合黄色的内容物以ICON为容器的滚动,并且ICON的一些线稿部分也会作出相应的小变化,例如汉堡中间的那一条横线在摇晃的时候就会有均速被割裂、或者说断裂处在线上匀速滑动的感觉。
3.2 ICON
同时,麦当劳的ICON设计是非常有意思的。作为精简的线稿风格ICON,首页ICON的房顶保留了尖角,中间是金拱门的标志。而我最喜欢的ICON就是麦麦商城,两片汉堡的形状很生动,尤其让我心水的是把夹心层简化成一条线的设计,以及线的两端斜向削尖的小心机我也很中意。仔细一看,其实这套ICON里线段的设计都会被这么处理,例如订单的ICON里也是。值得一提的是,订单的ICON切换动画里也是这两条线的部分进行长度的轮换。最后就是用户界面的ICON,中规中矩。
4 麦麦商城
天哪 麦当劳什么时候给我打钱啊
麦麦商城的页面还是有很多精心的小设计在里面的。首先左上角终于出现了一页一页轮换切换的广告,右边放置了两个同样是积分兑换属性的功能按钮,分别是主食餐厅兑换和甜品站兑换。保留两边对称的栅栏格式,中间大栏的左右两边分别又放置了两栏功能。
4.1 爆品推荐
值得一提的是爆品推荐这里的切换动画,首先是上一张图缩小并且淡出,然后下一张图在原来的位置扩大淡入。最特别的地方大概是它的更新是左右轮流来的,也就是说,左边的图标先进行扩缩更新,再轮到右边的图标,以此往复。
4.2 右上角的小喇叭
右上角的小喇叭是一个上下切换的动画,感觉就像网游里面的世界系统一样,魔法电子猫开出了青龙偃月刀,六条岚岚开出了倚天屠龙剑…… 麦当当的这个功能意义大概在于推广一些APP里不被大部分人知道的一些餐券或者优惠卡,来提升他们的销量。看到这里,就觉得这个设计还是挺有意思的,而且在一定程度上确实能起到吸引顾客眼球的作用,一款引流大师。
什么甜蜜有福双人餐,让我康康!点进去就康到了
梅开二度:麦当劳什么时候给我打钱
5 订单
快看 是中薯条买一送一耶
顶端对订单进行了分类,方便顾客更加直观地查阅订单。在各个订单上,大于一件的商品们会省略商品详情,而是让各个商品的图标和名字进行横向排列,让订单更加直观。每一个订单栏的大小都是相同等大的, 视觉观感很舒适。
单独点进来的订单页面是我特别特别喜欢的一个界面设计。当进入页面并加载完毕时,上层的所有白色框是盖住取餐码的,然后进行了一个下滑的动画才露出取餐码。左上角很醒目地放着取餐码,所有白色的框是小票的形状样式。整个画面都是以白色为主题色,配以背景图片,让界面不会过于单调。右下角的按钮把再来一单填充成了黄色,让这个按钮一下子夺目明亮起来,增加了用户的点击欲望。这些小设计让我真的好喜欢啊好喜欢,特别可爱。
6 用户
余额为0,我很抱歉
6.1 麦当劳钱包
中规中矩的用户页面。在用户页面,只要功能键健全就是胜利。但也是有可圈可点的地方在的。积点卡和麦当劳钱包那一块很巧妙地被绘制成了钱包的样式,而积点卡就像是插在钱包里的一张卡一样,这种源自于现实生活的设计真的特别生动。毕竟我们UI设计最终都是为现实生活而服务的, 所以关切现实生活的真实物件是让自己的设计生动起来的重要准则。
6.2 推荐服务的ICON
这个页面一眼扫去,最吸睛的地方除了麦当劳钱包这一块,就是推荐服务下面的四个ICON。与底栏ICON的简介风不同,这里的ICON大方地填以显眼的色块,整个图标呈现出饱满的效果,与下方的线稿ICON截然相反。
这同时也提醒我们:
一、在不需要过多图片作为信息量、以功能性作为核心的页面中,一套出彩的ICON点缀是一大加分项。
二、一套UI里面可以有两套风格不同的ICON。最重要的是看这些ICON的级别,即离它们更近的是哪层功能。例如上面的例子,底栏的ICON级别必然是大于推荐服务的ICON级别。
7 总结与补充
真的是很喜欢麦当劳APP的这套UI。简约风与恰到好处的明亮色彩做搭配, 让整个界面精简却又不会单调。很多别有用心的小设计都给用户的体验大大加分。这个UI还有一点让我很舒适的地方就是它的页面切换都是很有过渡性的,轻缓温柔。
最后说一句:谁V我50请我吃麦当劳?