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

數(shù)英評(píng)分

收藏18 評(píng)論

舉報(bào) 2021-12

掃描,分享朋友圈

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

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

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

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

一、策劃邏輯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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