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.  

        在底栏切换选项的时候,当你点击另一个ICON时,当前的ICON会有一个稍微下沉的动画,而目标ICON会进行一个短暂的放大,并且作出摇晃式的动画,配合黄色的内容物以ICON为容器的滚动,并且ICON的一些线稿部分也会作出相应的小变化,例如汉堡中间的那一条横线在摇晃的时候就会有均速被割裂、或者说断裂处在线上匀速滑动的感觉。 

3.2 ICON

 

         同时,麦当劳的ICON设计是非常有意思的。作为精简的线稿风格ICON,首页ICON的房顶保留了尖角,中间是金拱门的标志。而我最喜欢的ICON就是麦麦商城,两片汉堡的形状很生动,尤其让我心水的是把夹心层简化成一条线的设计,以及线的两端斜向削尖的小心机我也很中意。仔细一看,其实这套ICON里线段的设计都会被这么处理,例如订单的ICON里也是。值得一提的是,订单的ICON切换动画里也是这两条线的部分进行长度的轮换。最后就是用户界面的ICON,中规中矩。

4 麦麦商城

天哪 麦当劳什么时候给我打钱啊

        麦麦商城的页面还是有很多精心的小设计在里面的。首先左上角终于出现了一页一页轮换切换的广告,右边放置了两个同样是积分兑换属性的功能按钮,分别是主食餐厅兑换和甜品站兑换。保留两边对称的栅栏格式,中间大栏的左右两边分别又放置了两栏功能。

4.1 爆品推荐 

        值得一提的是爆品推荐这里的切换动画,首先是上一张图缩小并且淡出,然后下一张图在原来的位置扩大淡入。最特别的地方大概是它的更新是左右轮流来的,也就是说,左边的图标先进行扩缩更新,再轮到右边的图标,以此往复。

  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请我吃麦当劳?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/37545.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

麦当劳“制服黑丝”,火了!

最近,麦当劳的黑丝小姐姐火了!她们不仅颜值身材都超级好,还统一穿着粉色衬衫、黑色半裙,最重要的黑丝,看得网友们不禁大呼:肯德基这次输的太彻底 如果肯德基和麦当劳出现在你面前 你会选择去吃哪家&#xf…

酒店差异战打响,“设计标签”能实现突围吗?

文|螳螂观察 作者| 易不二 “长得好看能当饭吃吗?” 在当下社会,不仅人长得好看能当饭吃,商品长得好看也能当饭吃。 CBNData的《Z世代消费态度洞察报告》显示,相比老一辈关注的性价比,64%的年轻人更在意产品的“高…

Python 分析城市麦当劳数的多少

作者:木下瞳 来源:木下学Python 前言 前几天,小编跟着两个朋友,在深圳的商圈逛了逛,沿途看见了好几家麦当劳,他们两就随意的说了说,麦当劳数量有点多呢,到底是为什么呢?一…

数据分析:麦当劳食品营养数据探索并可视化

系列文章目录 作者:i阿极 作者简介:Python领域新星作者、多项比赛获奖者:博主个人首页 😊😊😊如果觉得文章不错或能帮助到你学习,可以点赞👍收藏📁评论📒关注…

店铺众筹,胜算几何?

以下纯属YY!! 本人既没有开过店,截至目前(2017年10月1日)也没有投资开店的经历。 开店有风险,投资需谨慎。 世界上充满了骗,店铺众筹骗钱的例子一个又一个,千万要小心。 开店&#x…

简易麦当劳班表生成器

9月马上就要结束了,忽然想起10月的班表还没发,上学时每天可以上班的时间都不一样,不写吧怕他不给我排,写吧又累又描述不清楚,诶,我可以写个程序呀,这样不就可以全部列出来了嘛? …

进入中国内地第31年的麦当劳 ,为什么还能不断吸引新消费人群?

简介: 麦当劳的数字化转型从2016年开始全面推行,力求无论何时何地何种方式,消费者都能随心享受麦当劳的产品与服务,数字化转型在过去几年取得显著效果!而阿里云数据中台的引入,将成为麦当劳数字化转型在拓展…

数据可视化应用案例:麦当劳和肯德基全国门店分布,谁才是分布最广的炸鸡店?

我们都听说过麦当劳和肯德基开的很近,但好像没人计算过他们究竟有多近。下面我来尝试回答一下。原始数据链接 首先,从高德地图上获取中国的肯德基和麦当劳的数据。接着,进行了数据清洗。清洗中,尽量去掉两家公司的甜品店。因为甜品店要么店面过小,要么离主店不远,不太具有…

麦当劳 APP sign 参数学习

抓包详情 “communityQrcode”: “https://menu-img.mcd.cn/store/prod/store/communityQrcode/1950345_1.png”, “deliveryFeeCode”: “7030”, “duration”: null, “deliveryTime”: null, “estimatedDeliveryTime”: null, “hotTagCodes”: [“breakfast”, “wifi…

麦当劳SIGN获取规则

麦当劳SIGN获取规则 SID 用户ID sign 用户签名 tel:18639197022

国产绘画AI杀疯了!画的小姐姐比真人还好看

👇👇关注后回复 “进群” ,拉你进程序员交流群👇👇 来源:IT之家 在 ChatGPT 的狂潮中杀出一条血路,谁都没想到 AI 绘画竟然卷土重来了。 而 AI 绘画之所以能重振旗鼓,在IT之家先前的…

三星弃Google用Bing?谷歌赶工新AI搜索Magi

“三星考虑将手机端的默认搜索引擎由Google换成Bing”,《纽约时报》上的这则消息披露次日,微软股价上涨2%,谷歌母公司Alphabet股价下跌3%。 过去20年里,谷歌一直是在线搜索领域无人能敌的霸主,微软旗下的Bing只在3%-5…

专利代理机构代理专利流程

代理申请专利流程是怎么样的? (一)咨询 1、 确定发明创造的内容是否属于可以申请专利的内容。 (二)技术交底 1、申请人向专利代理人提供有关发明创造的背景资料或委托检索有关内容; 2、申请人详细介绍发明创造的内容,帮助专利代理人充分理解发明创造…

PCT专利申请途径介绍 草稿版

# PCT专利申请途径介绍 这份总结来自《国外及我国港澳台专利申请策略》,主编,马天旗    专利合作条约(PATENT COOPERATION TREATY),简称PCT。按照PCT提出的申请称为PCT国际申请。 传统的专利体系与PCT体系的比较  …

德国申请专利,发明,实用,外观专利申请详细步骤

一、德国专利申请途径 申请人可以向德国专利商标局直接递交申请。要求优先权的情况下根据《保护工业产权巴黎公约》需要在递交中国在先申请的12个月之内向德国专利商标局递交申请。 另外,通过PCT(“Patent Cooperation Treaty”,即《专利合作…

手把手教你写专利申请书/如何申请专利

手把手教你写专利申请书如何申请专利 摘要 小前言 (一)申请前的准备工作 1、申请前查询 2、其他方面的考虑 3、申请文件准备 (二)填写专利申请系列文档 1、实际操作步骤 2、具体操作 3、经验分享、注意事…

通过laf引入Claude后才发现一切都这么简单

前言 当前风口浪尖的AI话题热度一直高居不下,不同的人工智能也层出不穷。而API调用的也就ChatGPT支持较好。但是当在slack里发现了claude这一神奇AI后,也曾想过看看支不支持API调用引入网站,可惜也是没有开放。直到我遇见了laf,e…

【C++】Rust vs C++ 深入比较

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员,2024届电子信息研究生 目录 什么是Rust? Rust的显著特征 什么是C? C的显著特征 技术比较 内存安全性 指针 编译时间 易用性 框架和类库 游戏开发 用户界面 总结和结论 Ru…

最近火热的ChatGPT到底是个啥

只能说“凭借ChatGPT,一切皆有可能!” 不会还有小伙伴不知道ChatGPT是个啥? 如果你也不知道,下面几个问题给你讲明白! ChatGPT在短时间内在互联网上迅速走红,引起了各个行业的广泛关注。不管是做设计、做…

chatgpt是什么意思?还有人不知道chatGPT是个啥

ChatGPT是由OpenAI开发的一种语言生成模型,它建立在GPT(生成式预训练)模型的基础上,专注于对话任务。GPT全称为"Generative Pre-trained Transformer",是一种基于Transformer架构的神经网络模型,…