行业关键字
UI设计UI理论和资料 → 正文
今天把肯德基Crazy Thursday App设计爆改一通
作者: 酸梅干超人 来源: 公众号:超人的电话亭 时间: 2023年12月6日

又到了肯德基疯狂星期四,不知道各位筒子们,都叫炸鸡了没有,叫炸鸡的时候,有没有打开肯德基 APP 或者小程序,享受过它们美妙的视觉效果和体验了嘛……

没看过没关系,下面是肯德基官方 APP 的截图,也就是我们今天的改版案例:

改版声明:改版的主要目标是围绕视觉做优化,探索视觉输出的方向和可能性,以及包含部分主观分析推导出来的体验、交互问题,不涉及产品背后的宏观战略。

任何没有根据的用户就喜欢 XXX、领导就要 XXX、产品都是 XXX 类问题,或者认为现在设计就做的很好,那么统一回复 ——不如原版!

一、问题分析

在原版设计中,存在的样式问题是很明显的,相信看完的第一个感觉就是“乱”,因为什么东西都想强调,什么元素都想强加给用户,信息和视觉全在打架,那效果是不可能好的,下面根据模块逐一做出分析。

整个页面包含上下两个部分,上部分包含的要素有五个,背景、操作栏、新人礼包卡片、登录卡片、快速入口。

这个背景的设计显得很多余,不仅没有具体的信息,而且手绘线条也和下方格格不入。背后还有操作栏内的操作选项,黑色的圆角矩形背景并不能很好突出里面的元素,反而让视觉更混乱。

再到下面的新人礼和登录卡片,结合得毫无逻辑,左右宽度不一致很奇怪,新人礼广告图的优惠券图形和实际内容也不搭。用户如果没登录,那么登录卡片里的数据也很多余。

而快速入口先不评价图标设计,背后硬加一层背景让标题反白再显示下半部分卡片轮廓,就是俗称的为了一点醋包了顿饺子的行为。

下半部分,则是包含福利类型入口,公告,活动列表三个主要部分,活动列表中还包含主轮播广告、限时秒杀、囤囤券、V 社福利、会员推荐、一般活动等多个子模块。

APP 专享福利礼,包含的选项其实不算多,还要点更多进去查看是没必要做法。紧接着显示公告信息位置也很奇怪,夹在毫无逻辑的关联的两个模块之间,而且在第一屏中几乎看不到,不符合公告本身的作用。

然后就是活动的列表,这部分的设计其实就是照搬电商运营模块瓷片区结合瀑布流的模式,效果显然很差,模块的区分感受不到,而且因为视觉太冲了,看起来毫无任何吸引力。

至于其它的一些视觉问题就不多展开,摆在我们面前的主要难题,就是如何有效组织这么多模块和信息,让它们能有效的展现出来又不会没有重点。

二、改版解析

我们做改版的基本流程,是先做框架再做视觉。下面是针对新版本的框架定义,对一些大方向的问题做调整。

首先是头部合并登录和新人礼 Banner,因为登录后样式是不同的,那未登录就用独立的样式不用考虑登录后。

同时快速入口、公告使用白背景做突出,下半部分移除背景,形成上下的层次,且公告模块上移,放在更容易被注意到的位置,让顺序逻辑也更合理一点。

有了初步的模块定义,下一步就是完善原型框架,将内容填充进去并做进一步的优化。主要的想法调整在福利部分的秒杀和囤囤券上,合并在一起怎么做都不合理,所以拆分成两个模块。

最后,就可以填充颜色并完成所有的内容了,下面轮流展示。

首先是顶部模块,背景直接用主色的简便来替代,按钮不做无用的透明度背景,优化领取礼物的 Banner 做法,更接近主流的运营设计风格(时间关系做的比较随意)。

然后就是快速入口和公告,之前我们做过一篇轻拟物设计的分享,在这里我们直接使用是前做过的图标,和下方的图标做区分,并提供更好的视觉效果。

然后就是 APP 专享福利,这里没做太大的变动,只是去掉多余的文字介绍,平心而论专享福利这个标题也想去掉,因为叫什么名字对理解这些图标没有实际帮助,底部的对比版本会去掉这个标题。

最后就是底部的福利瀑布流了,这里的主要视觉思路,是简化图片内容,突出信息的主体,区分不同内容的模块,完成的结果如下。

其中,广告用图很多产品是直接无脑用线下或网站的海报,不仅画面很嘈杂,而且小字信息非常多,这在移动端是完全不适用的。所以我们完成这类设计首先就要选择主体突出视觉相对简单的海报,并且一定要把不相关的文字内容给处理掉(PS 里),比如下面的案例。

或者可以参照一些平面案例,自己快速找素材搭建个符合设计需要的广告图,几分钟就能做好,而不是不管什么不合适的物料素材都无脑贴上去。

下面,就可以查看改版前后的对比,是否有优化前面罗列的问题:

(责任编辑: Admin

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版