解码快手奥运设计:符号转译、界面重构与叙事焕新

用户头像
北京/设计爱好者/1年前/9140浏览
解码快手奥运设计:符号转译、界面重构与叙事焕新
序章
巴黎奥运会落幕近一年,这场塞纳河畔的盛典,不仅留下了潘展乐打破自由泳世界纪录的身影,也见证了郑钦文改写亚洲网球史的佳绩。
快手推出「上快手 追奥运」主题活动,用创新玩法连接全民奥运热情。
预热期(开幕式前10天):发起「传火炬 赢大奖」线上挑战,提前点燃全民热情;
赛事期(开幕式后17天):24小时点播+赛事竞猜,用户见证夺金时刻的同时参与赛事竞猜。
Current Time 0:00
/
Duration Time 0:00
Progress: NaN%
Playback Rate
1.00x
接下来,跟大家聊聊快手奥运活动设计背后的思考。
快手奥运设计思路
从普罗旺斯薰衣草田的浪漫意象,到塞纳河与石板路的抽象转译,再到打破传统刚性边界的女性价值主张... 巴黎奥运官方通过设计为大家传递了多重理念。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMjI1MzU2) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
Collect
本次我们在奥运官方设计框架的基础上进行再设计,围绕
视觉符号转译、UI界面重构,
以及
互动叙事焕新
三个方面,来构建快手奥运的设计体系。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMzk0NTE2) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
Collect
01 视觉符号转译
a. 色彩——奥运“官方感”与中国“本土味儿”的融合
在遵循巴黎奥运官方配色的基础上,我们融入了具有中国意蕴的红、黄两色,形成多场景的应用方案。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMzk0ODIw) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
Collect
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMzk0ODI0) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
奥运官方配色与中国色的融合应用
Collect
b. 图形——奥运城市地标的符号化提炼
埃菲尔铁塔作为巴黎最具代表性的城市地标,我们对塔身轮廓进行了几何提炼,并融合赛事竞技场的元素,打造具有巴黎奥运辨识度的视觉语言。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTkwNjAw) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
埃菲尔铁塔的符号解构与视觉重塑
Collect
同时,我们通过设计转译,将奥运“叙事”场景融入主视觉。比如,开幕式当天,用「游船驶向铁塔」来描绘开幕场景;赛事期,将运动员意象为万千彩带,来表现奋勇争先的竞技精神。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTkxMDE2) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
将奥运“叙事”场景融入视觉
Collect
c. ICON——活动叙事图标的打造
在ICON设计上,我们提取了竞技跑道的塑胶材质,设计了一套覆盖奥运活动全周期的图标库。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTkxMzAw) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
活动叙事图标
Collect
02 UI界面重构
a. 卡片样式——奥运元素的映射与重构
为强化奥运主题,UI界面引用了巴黎奥运官网「单边倒角」的卡片形式,并融入“奥运风”装饰动效,实现与巴黎官方设计的映射。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTkxNDk2) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
奥运官网“单边倒角”卡片的引用
Collect
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk4ODE2) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
“奥运风”弹窗抬边动效
Collect
另外,我们通过解构奥运金牌形态,提取绶带颜色与金牌纹理作为视觉基底,并在界面中进行了设计重构。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5NTMy) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
奥运金牌的解构与重构
Collect
b. 框架布局——灵活度与秩序感的体现
在UI结构上,我们通过积木式卡片布局,实现多个功能模块在一定规则下的灵活重组。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5MDc2) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
积木式卡片布局
Collect
在内容展示上,通过栅格标准和信息容器的规范搭建,保障不同赛事内容增减时的稳定性。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5MDg4) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
栅格标准与可拓展的信息容器
Collect
03 互动叙事焕新
a. 闯关新体验——圣火之路,惊喜藏不住
在开幕式前10天,我们以"人人都是火炬手"的核心理念打造了全民线上活动,用户可以通过「选角色+换装」来定制个人专属的奥运形象,参与数字火炬的线上传递。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5Mjgw) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
火炬手定制形象
Collect
相较于快手过往大型活动,本次传火炬闯关游戏首次采用了2D+3D的融合设计,以3D火炬手为主角,搭配2D城市背景增强画面层次感。通过火炬手动态穿越五大洲的场景切换,推动火炬手的传圣火闯关进程。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5NTY4) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
地图切换推动闯关进程
Collect
我们在火炬手传火炬的途中设置随机道具,让闯关过程充满着不确定性和惊喜感。譬如:上一秒灌下能量饮料如火箭般冲刺,下一秒可能就会踩到炸弹,瞬间被💣飞。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5NTcy) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
路遇道具
Collect
b. 加油新姿势——擂鼓助威,为中国队加油
赛事周期,为提升用户参与度,我们采用了“擂鼓助威,为中国加油”的互动形式,通过击鼓时产生的
烟花视效
鼓点音效
震动触觉
三重反馈,让民族情绪在手机的方寸之间也能得以释放。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMTk5NjMy) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
擂鼓助威激发民族情绪
Collect
c. 竞猜新朋友——「AI小快」,智趣陪伴
借助自研AI技术,升级赛事竞猜体验,推出能够帮用户预测赛况和与用户闲聊的「AI小快」。我们通过增加竞猜输入框的流光动效,来强化「AI小快」的智能感。
解码快手奥运设计:符号转译、界面重构与叙事焕新(图ZMzkwMjI2NTA4) - APP界面 - 站酷设计师快手招财猫原创素材 - 站酷ZCOOL
AI竞猜与闲聊
Collect
结语
以上就是本次快手奥运活动设计的一些思考。
快手奥运设计团队以2024巴黎奥运会官方设计语言为依据,通过转译视觉符号、重构UI界面,焕新互动叙事的设计策略,将奥运精神转化为可感知、可参与的线上体验,实现了奥林匹克精神与全民参与的深度融合。
最后,感谢项目组全员在100+个日夜里的热情投入,让奥运精神在数字世界生生不息。‌
342
Report
|
349
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
App界面设计/UI设计展板
订单页面图标
白细胞
2.5d插画
安心
app界面插画(欢迎界面)
app/web背景素材
APP界面/暂无网络页面/成功失败页面
我的钱包-UI界面设计-app
趵突泉
攀登者矢量素材
户外旅行露营野外体验玩乐
积分图标
炫彩渐变风格的 APP 图标素材
APP界面//暂无数据页面/暂无收藏页面
APP界面/空状态页面
人工智能家居app控制界面和笔记本电脑,电脑还有智能手机。智能家居自动化助理概念。
以笔为剑,纵情挥洒的东方气韵|御林铭心 颜体
褒奖
APP界面//暂无消息页面/暂无预约页面
简约风箭头方向指引矢量元素
地图图标
高级感深色极光流体渐变背景 科技感UI界面素材
消息图标
手机交互概念素材
You may like
相关收藏夹
运营
运营
运营
运营
大家都在看
Log in