字節(jié)跳動(dòng)錯(cuò)襪日公益H5：分享你的不一樣

數(shù)英評分

收藏17 評論

舉報(bào) 2021-12

掃描,分享朋友圈

原標(biāo)題：你可愛，你的獨(dú)特也可愛。打破偏見，分享你的“不一樣”！

他有一個(gè)假想中的好朋友，他不喜歡被觸碰，他興奮時(shí)會(huì)大叫，總是無緣由暴走，他回避與他人的目光交流，只一心躲進(jìn)自己無邊際的“另個(gè)時(shí)空”中，他喜歡一個(gè)人碎碎念，出門時(shí)偶爾還會(huì)穿兩只不一樣的襪子，他就是“星星的孩子”。他與眾不同，卻又與你我無異，我們都擁有成為自己的絕對自由，存在的每份“不一樣”都珍貴而可愛。世界充滿嘈雜耳語，讓我們一起打破偏見，給予心智障礙群體更多的關(guān)注、理解與接納。

在2021年末的“錯(cuò)襪日”，億眾互動(dòng)為字節(jié)跳動(dòng)公益、藝途公益基金會(huì)和新周刊打造了一支【測測你的不一樣】公益H5，通過讓用戶選擇自己曾經(jīng)歷過的幾件“不一樣”的小事，輸入名字生成個(gè)性化小事海報(bào)，并在其中向用戶介紹“錯(cuò)襪日”與心智障礙群體，將用戶曾經(jīng)歷過的小事與該群體的特征相聯(lián)系，契合“打破偏見，接納不同”的公益主題。

掃描二維碼，一起來穿錯(cuò)襪～
（數(shù)英APP用戶需點(diǎn)擊放大二維碼，長按識別）
字節(jié)跳動(dòng)錯(cuò)襪日公益H5：分享你的不一樣

一、策劃邏輯

1、loading頁：一只紫色的襪子悠然自得地信步前行，彩色進(jìn)度條隨之加載，明亮的色彩鋪在純白的背景色上，各種“不一樣”描畫出世界的斑斕色彩，每一份“與眾不同”共同調(diào)和了枯燥乏味的單調(diào)性；畫面配以主題文案，使用戶清晰明了地get到H5的主題及其任務(wù)；加載完畢后自動(dòng)進(jìn)入【選擇頁】；

2、選擇長圖頁：一只紫色襪子坐在小木凳上織一只新的棕色襪子，長長的毛線垂至頁面底端，30件小事懸掛在毛線左右供用戶點(diǎn)擊選擇，用戶選擇完畢后點(diǎn)擊“完成”翻轉(zhuǎn)進(jìn)入【信息輸入頁】；

3、信息輸入頁：在昵稱/Name欄中輸入用戶昵稱，點(diǎn)擊“點(diǎn)擊生成”跳轉(zhuǎn)至【海報(bào)頁】；

4、海報(bào)頁：標(biāo)題“這是你不知道的XX”，將用戶所選擇的自己所經(jīng)歷過的“不一樣小事”列舉呈現(xiàn)，使用戶的“獨(dú)特”與心智障礙群體的“獨(dú)特”相聯(lián)系，他們不一樣，也并非如此不一樣；海報(bào)中通過文案與插畫向用戶介紹了心智障礙群體，增進(jìn)用戶對其的了解，真正達(dá)到“打破偏見，理解與接納每一種‘不一樣’”的主題效果；點(diǎn)擊“錯(cuò)襪日的來源”可在彈窗中進(jìn)行詳細(xì)了解，點(diǎn)擊“分享你的錯(cuò)襪”進(jìn)入【分享頁】，長按保存海報(bào)；

5、分享頁：海報(bào)彈窗配合文案分享，引導(dǎo)用戶分享至好友或朋友圈。

字節(jié)跳動(dòng)錯(cuò)襪日公益H5：分享你的不一樣

二、視覺設(shè)計(jì)

1. 整支H5以白色為背景色，搭配紫色的襪子與彩色的進(jìn)度條，色彩對比更加鮮明，色系的不同之對比更加強(qiáng)烈，蘊(yùn)含了多種不同且明亮的色彩能夠帶給單調(diào)的黑白世界更多的趣味與活力，與“打破偏見，理解接納‘不一樣’”的主題相契合；

2. 【選擇長圖頁】采用淡白色的背景色，將視覺中心轉(zhuǎn)移至黑色字體顯示的30件小事上，色彩設(shè)置突出重點(diǎn)，讓用戶靜心選擇內(nèi)容，不喧兵奪主；

3. 選擇選項(xiàng)后出現(xiàn)各種表現(xiàn)文字事件的襪子小動(dòng)效，襪子色彩鮮艷，與背景色形成鮮明對比，與主題契合；

4. 【海報(bào)頁】設(shè)置了色彩鮮明的穿錯(cuò)襪的插圖，契合主題，鮮明的色彩配以淡雅的過渡色背景，使畫面更有層次感與呼吸感，優(yōu)化用戶的視覺體驗(yàn)。

字節(jié)跳動(dòng)錯(cuò)襪日公益H5：分享你的不一樣

三．轉(zhuǎn)場及動(dòng)效

1. 動(dòng)效設(shè)置用心且巧妙，用戶點(diǎn)擊所選事件后，會(huì)出現(xiàn)表現(xiàn)事件的襪子動(dòng)效，如點(diǎn)擊“對陌生人毫無戒備”后，會(huì)出現(xiàn)一只不斷把自己的愛心捧出來遞給他人的動(dòng)效，契合場景且反饋及時(shí)；

2. 運(yùn)用“翻轉(zhuǎn)”轉(zhuǎn)場，絲滑柔順，具有視覺連貫性。

字節(jié)跳動(dòng)錯(cuò)襪日公益H5：分享你的不一樣