【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析

用户头像
北京/UI设计师/1年前/2038浏览
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析
【前言】
大麦的主体用户群为20+的年轻用户群体,大麦本次先锋beta的全面焕新非常有创新性和年轻化的视觉语言,给人眼前一亮的感觉。本文将从大麦本次改版的交互设计、视觉设计、动效设计、AI智慧助理等四个方面来分析大麦此次改版值得设计师们学习和借鉴的点。
【目录】
1.一级tab页面对比
2.交互设计改版亮点
3.视觉设计改版亮点
4.动效设计改版亮点
5.AI赋能智慧抢票助理
6.改版不足之处
7.大麦与蓝花火视觉改版对比
(主视觉、选中态、按钮、图标、动效)
一.一级界面
底部的固定tabbar改为了更加轻盈化悬浮tabbar ,这也是2025年tabbar的一个演进局势,其他的主流App例如美团也是采用了这种形式。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
“首页”&“发现”
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
“淘麦VIP”&“票夹”
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
“我的”
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
tabbar趋势
收藏
二.交互设计改版亮点
1.顶部banner 和标签缩略图的联动交互,在内容显示上不仅增加了更多的上新演出内容的曝光,而且对于剧场、电影、音乐、展览赛事每个分类下都有展示,逻辑层级上更加清晰。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
首页顶部banner
收藏
2.在信息层级上搭建了新的架构,将“演唱会、音乐节、livehouse”合并为“音乐”,将“沉浸式、舞蹈舞剧、戏曲、相声、周三半价等”作为“剧场”的金刚区入口。在“抢票播报站”的卡片上突出了抢票倒计时的关键信息,视觉色彩上也跟随征途焕新。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNjg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
“音乐”内容整合
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNzI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
“剧场”内容整合
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwNzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
二级界面
收藏
三.视觉设计改版亮点
1.品牌色
变更品牌色是一个非常大胆且工作链长的改版,大麦的品牌色由粉色+灰色变更为黑色+荧光绿色。
【改版前】粉色+灰色的视觉搭配略显陈旧,缺乏视觉冲击力;
【改版后】在黑色上辅助高饱和度、荧光效果的绿色,在视觉上是很有反差感的,传递积极向上年轻活力的品牌形象。
配色类似于潮牌“得物”、图片编辑App“醒图”、网红面包店购物袋“黄油与面包”等。黑色的按钮或者选中态,点缀绿色到黄色的渐变色,倒有些演唱会现场的应援牌的效果。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwOTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
图标风格焕新
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwODA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
网红品牌色参考
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwODQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
潮牌品牌色参考
收藏
2.高斯模糊顶部背景
【改版前】采用的是单一平铺的粉色
【改版后】以绿色为主占较大面积,辅助一对对比色紫色和黄色,利用不规则形状的高斯模糊效果叠加,比起平铺的颜色视觉上更加活泼灵动
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUwOTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
顶部背景
收藏
3.插画
dribble 和pinterest 上流行的高饱和度多巴胺色块搭配黑色线条,点线面结合。
多巴胺被称为“快乐因子”,是一种神经传导物质,用来帮助细胞传送脉冲,主要负责大脑的兴奋及开心等信息的传导。通过高饱和度、高纯度的色彩激发用户的积极情绪,吸引用户注意力。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
空界面插画焕新
收藏
四.动效设计改版亮点
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
tabbar动效-before
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
tabber动效-after
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
点赞动效
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMjg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
banner动效
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMzI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
滚动播放
收藏
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
五.AI赋能智慧抢票助理
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
抢票助理
收藏
六.改版不足之处
1.本次改版的整体焕新感知很强烈,缺点在于很多三级页面或深层级的页面视觉没有同步深入到,会造成割裂感。
2.包括视觉插画、动效上设计没有整体拉通,一些深层级界面的旋转加载动效还是用的粉色主体色。
3.一级tab淘麦VIP界面此次基本没有焕新,金刚区图标和会员卡片还是粉色主题的,但首页和个人主页的图标已经更新为黑色+荧光绿。
4.在大麦的整体页面风格变动较大的前提下,大麦App图标的配色和造型设计建议也同步更新,大麦App图标目前的七彩配色风格太过老旧。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
下单界面
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxMTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
金刚区图标
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUwMTUxNDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
App图标
收藏
七.大麦与蓝花火视觉改版对比
1.主视觉风格
大麦主视觉是绿黄色+黑色,蓝花火是蓝紫色+黑色;在页面背景的高斯模糊晕染上,蓝花火的页面效果更加自然,蓝紫色晕染的层次也更加丰富。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNTI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
主视觉
收藏
2.选中态
大麦的标签选中态更有记忆点,荧光绿的一个弧线在纯黑色的衬托下,视觉聚焦效果更好;蓝花火的则缺少了一些特色,但是在界面整体上看是协调的。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNTY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
选中态
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNjA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
3.按钮
蓝花火的按钮区别于常规的圆角矩形,而是采用了六边菱形,很符合这种年轻化快潮流的演出类APP。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNjQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
按钮
收藏
4.图标
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNjg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
图标
收藏
5.动效
蓝花火小程序的动效比大麦APP做得更加细腻和有律动感。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyMjg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyMzI=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
对于小图标的动效设计也非常贴切,运动的轨迹是贴合图标的寓意的。
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyMzY=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏
点赞收藏这种用户能明显感知的动效,蓝花火做的也非常好
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNDA=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
点赞动效
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNDQ=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
收藏动效
收藏
【APP品牌视觉焕新】大麦APP突破性视觉设计改版案例分析(图ZMTUxMjQyNDg=) - 教程 - 站酷设计师油焖小虾米原创素材 - 站酷ZCOOL
加载动效
收藏
25
举报
|
81
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
3D渐变流体抽象矢量UI背景图
钱包ui模板
3D卡通UI界面图标可爱插画免扣素
【新年UI图标】银行卡icon
高级表盘系列UI源文件
UI通用设计素材1
【新年UI图标】优惠券icon
【新年UI图标】30个图标
【新年UI图标】影音icon
UI应用平面图标
新拟态风格 UI设计组件库
【新年UI图标】钱包icon
抽象液态渐变UI背景模版
智能家居中心 简约 UI设计组件库
手表表盘UI系列
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
拟物风质感写实UI卡片合集源文件
UI界面 组件
UI 登录界面设计模板包
高级感金属拟物 UI设计组件库
我的钱包-UI界面设计-app
盲盒APP UI设计
【新年UI图标】珠宝icon
新能源APP应用UIKit
你可能喜欢
相关收藏夹
大家都在看
登录注册