隨著H5交互形式的增加，H5活動設計時可以選擇的方向越來越多，也讓許多H5活動出現(xiàn)了參與門檻高、活動規(guī)則復雜等問題，大大影響了用戶的參與積極性。特別是在無獎勵的活動中，缺少了利益驅動后，這些復雜活動更是讓人沒有參與的欲望。相反，一些交互簡單、信息傳達直接的“簡約風”H5卻更受人們歡迎。下面，藍橙互動就通過實戰(zhàn)案例和大家聊聊，如何如何做一個“簡約風”H5。

一、項目背景

本次項目是給黑龍江衛(wèi)視“一起讀書吧”全媒體閱讀節(jié)目做的線上宣傳H5活動，項目名稱為森林書屋，結合世界讀書日節(jié)日背景，針對看書的年輕人（年齡階段主要為大學生到青年職場人），做一次好書分享推薦。

二、創(chuàng)意策劃

本次活動的核心目的是分享出品方精選推薦的幾本好書，H5通過獨特的視覺效果、腦洞大開的切入點將用戶引入到這場讀書之旅中。

故事敘述則是采用了橫版長圖的形式，開頭以名人名言引入，中間以排布式現(xiàn)代詩描述各個畫面，并在畫面中巧妙融入好書推薦的視頻，用戶可點擊查看視頻中的年度推薦書單，最后進行總結，呼吁大家多讀書、讀好書。

三、視覺設計

1、人物風格設定

確定故事流程后，進入視覺設計階段。在人物的刻畫上，視覺是有很多表現(xiàn)形式的，需要根據(jù)整體方案的氣質去選擇合適的視覺呈現(xiàn)。由于這次的活動是針對愛看書的年輕人，年齡階段主要為18-30歲，為了使整體效果更自然，讓用戶更有代入感。盡管這是一個童話風的故事，我們海報摒棄了低齡卡通的設計方向，在人物設計上選擇了更加成熟的青年向設計風格，更符合對用戶年齡階段的刻畫。

2、故事場景設計

結合名稱“森林書屋”，故事場景毫無疑問地設計成了一片森林，主人公背著書包行走在森林中，進入一本書的魔法之門，開啟了他的讀書之旅。

在書的世界里好似進入了小人國，主人公放下書包拿出書，在鹿身邊安靜的看書，歲月靜好。

河邊篝火旁彈吉他，有松鼠作伴，森林里大大小小的鏡子里折射的是主人公臉的國王、貓、摩登女郎，表示在書中體會不同人生美好。

在巨大的書上彈著鋼琴，遠處看到故鄉(xiāng)暖暖的燈光，一家人圍坐吃飯的場景，體驗家的感覺。

書變成帳篷一樣，在書里面邂逅無形的舞。

最后看完書的主人公背起書包，拿著書，從森林回到城市。讀完書獲得了力量的人，高昂著頭，笑容滿面。

3、視頻設計

視頻內容方面相對簡單，主要是將書籍樣式、書籍名稱、作者、初版單位等基礎信息展示出來，并通過轉場動畫進行切換展示。

四、程序開發(fā)

相比于視覺設計來說，這類展示型H5的制作相當簡單，核心在于前端頁面的展示，控制好H5一屏的顯示尺寸尤為重要。由于H5為橫版長圖，且是假橫屏形式，所以頁面寬1280px*高870px，主要內容控制在寬1280px*高630px，以確保頁面顯示完整。

五、結語

“簡約風”H5不是說H5的頁面設計風格為簡約風，而是指整體體驗流程的簡約，讓用戶通過簡單的活動規(guī)則、簡單的操作方式來參與活動，重拾H5只占用用戶零碎時間，輕量小巧的特點。歡迎大家掃碼體驗一下這個休閑簡單的H5活動。