字节跳动错袜日公益H5:分享你的不一样

数英评分
我的评分
收藏2 评论
举报 2021-12

字节跳动错袜日公益H5:分享你的不一样

扫描,分享朋友圈

原标题:你可爱,你的独特也可爱。打破偏见,分享你的“不一样”!

他有一个假想中的好朋友,他不喜欢被触碰,他兴奋时会大叫,总是无缘由暴走,他回避与他人的目光交流,只一心躲进自己无边际的“另个时空”中,他喜欢一个人碎碎念,出门时偶尔还会穿两只不一样的袜子,他就是“星星的孩子”。他与众不同,却又与你我无异,我们都拥有成为自己的绝对自由,存在的每份“不一样”都珍贵而可爱。世界充满嘈杂耳语,让我们一起打破偏见,给予心智障碍群体更多的关注、理解与接纳。

在2021年末的“错袜日”,亿众互动为字节跳动公益、艺途公益基金会和新周刊打造了一支【测测你的不一样】公益H5,通过让用户选择自己曾经历过的几件“不一样”的小事,输入名字生成个性化小事海报,并在其中向用户介绍“错袜日”与心智障碍群体,将用户曾经历过的小事与该群体的特征相联系,契合“打破偏见,接纳不同”的公益主题。

扫描二维码,一起来穿错袜~
(数英APP用户需点击放大二维码,长按识别)
字节跳动错袜日公益H5:分享你的不一样


一、策划逻辑

1、loading页:一只紫色的袜子悠然自得地信步前行,彩色进度条随之加载,明亮的色彩铺在纯白的背景色上,各种“不一样”描画出世界的斑斓色彩,每一份“与众不同”共同调和了枯燥乏味的单调性;画面配以主题文案,使用户清晰明了地get到H5的主题及其任务;加载完毕后自动进入【选择页】;

2、选择长图页:一只紫色袜子坐在小木凳上织一只新的棕色袜子,长长的毛线垂至页面底端,30件小事悬挂在毛线左右供用户点击选择,用户选择完毕后点击“完成”翻转进入【信息输入页】;

3、信息输入页:在昵称/Name栏中输入用户昵称,点击“点击生成”跳转至【海报页】;

4、海报页:标题“这是你不知道的XX”,将用户所选择的自己所经历过的“不一样小事”列举呈现,使用户的“独特”与心智障碍群体的“独特”相联系,他们不一样,也并非如此不一样;海报中通过文案与插画向用户介绍了心智障碍群体,增进用户对其的了解,真正达到“打破偏见,理解与接纳每一种‘不一样’”的主题效果;点击“错袜日的来源”可在弹窗中进行详细了解,点击“分享你的错袜”进入【分享页】,长按保存海报;

5、分享页:海报弹窗配合文案分享,引导用户分享至好友或朋友圈。

字节跳动错袜日公益H5:分享你的不一样字节跳动错袜日公益H5:分享你的不一样


二、视觉设计

1. 整支H5以白色为背景色,搭配紫色的袜子与彩色的进度条,色彩对比更加鲜明,色系的不同之对比更加强烈,蕴含了多种不同且明亮的色彩能够带给单调的黑白世界更多的趣味与活力,与“打破偏见,理解接纳‘不一样’”的主题相契合;

2. 【选择长图页】采用淡白色的背景色,将视觉中心转移至黑色字体显示的30件小事上,色彩设置突出重点,让用户静心选择内容,不喧兵夺主;

3. 选择选项后出现各种表现文字事件的袜子小动效,袜子色彩鲜艳,与背景色形成鲜明对比,与主题契合;

4. 【海报页】设置了色彩鲜明的穿错袜的插图,契合主题,鲜明的色彩配以淡雅的过渡色背景,使画面更有层次感与呼吸感,优化用户的视觉体验。

字节跳动错袜日公益H5:分享你的不一样


三.转场及动效

1. 动效设置用心且巧妙,用户点击所选事件后,会出现表现事件的袜子动效,如点击“对陌生人毫无戒备”后,会出现一只不断把自己的爱心捧出来递给他人的动效,契合场景且反馈及时;

2. 运用“翻转”转场,丝滑柔顺,具有视觉连贯性。

字节跳动错袜日公益H5:分享你的不一样


四.互动体验

交互简单,操作简洁,提示明确,以“点击”和“向下滑动”为交互方式,降低用户的认知成本及操作成本,将用户的主要注意力集中在内容上。

字节跳动错袜日公益H5:分享你的不一样

不一样的色彩赋予单调世界以趣味与浪漫,与众不同的独特性使每个人成为他自己,快来【测测你的不一样】,我们一起穿错袜!

字节跳动

亿众互动 北京

亿众互动 北京

 

字节跳动错袜日公益H5:分享你的不一样

扫描,分享朋友圈

参与评论

文明发言,无意义评论将很快被删除,异常行为可能被禁言
DIGITALING
登录后参与评论

参与评论

文明发言,无意义评论将很快被删除,异常行为可能被禁言
800

推荐评论

暂无评论哦,快来评论一下吧!

全部评论(0条)