1. 首頁 > 生活百科 > >

翻頁類H5-線下門店案例 怎么做h5？

小知識怎么做h5

說起H5， 想必大家都不陌生， 其形式新穎， 傳播效果強， 在做廣告策劃、視頻營銷時被使用的幾率更高 。
《睡姿大比拼》
在各式各樣的活動中， H5不一定是首選， 但也絕對是常被選擇的一員， 每到節假日等活動高峰期， 朋友圈被刷屏時有發生， 高流量和高傳播度使得H5在國內的地位逐漸上升 。
經常會有一些線下店鋪需要用H5來推廣形象 。 面對這樣的需求， 我們應該如何制作？跟隨數藝君一起來看看 。
案例：翻頁類H5-線下門店案例
今天， 數藝君將會以一個線下文創店鋪為例， 為大家講解H5的制作過程， 先來看看最后的項目案例 。
項目素材（模擬案例）
“一拙”是一家坐落于北京胡同的文創茶社 。 小店自從開業以來， 就在當地獲得了非常好的口碑和影響力 。 但一直以來， 門店在線上的曝光都不足， 小店想借助H5更多地在網絡上展現自己的品牌 。 關于門店的資料有很多， 我拿到的內容就多達十幾頁， 如圖所示， 對于一支H5來說， 不可能展現這么多內容 。 所以， 在前期策劃階段要做的主要是“減法”， 將門店的主要品牌優勢和特色進行歸納和精簡， 把大段的描述概括成用簡單的圖文就能講清楚的內容 。
門店的部分文件與圖片素材
項目主題與內容框架
在梳理內容時， 我們發現了3個要重點展示的信息， 它們分別是品牌、功能和區位 。
在品牌方面， 要對店鋪有具體介紹， 讓用戶知道你是誰；在功能方面， 要對店鋪服務做說明， 讓用戶知道你能干什么；在區位方面， 要對店鋪的位置和經營做一定說明， 讓用戶知道你在哪里， 什么時間可以找到你 。
“你是誰”“你能干嗎”“你在那里”， 可以說是普通消費者要關注的3個信息點， 如圖所示， 用這個思路對H5進行設計， 方向就比較清晰了 。
3個重點信息
在品牌方面， “一拙”的品牌文化主要圍繞茶展開， 品牌的座右銘是“用好物， 喝好茶， 現代品質生活”， 這給人的理念感比較像是“現代城市中， 一個帶有文化情懷的獨立休閑空間”， 是一個可以讓人放松、靜心、會友的地方 。 而功能方面， 圍繞品牌特征， 我們發現小店有以下3個主要經營特色：
（1）提供茶相關的飲品和食品；
（2）提供設計師原創設計器物（以茶類產品為主）；
（3）提供主題創意活動和沙龍的場地 。
通過對品牌與功能的分析， 這支H5的內容原型基本被梳理出來了 。
（品牌）品牌展示：
第1屏：封面圖-主副標題
第2屏：品牌門店介紹
（功能）產品展示：
第3屏：品茶（茶飲產品）
第4屏：好物（器物產品）
第5屏：展覽（活動產品）
第6屏：媒體（活動產品）
（區位）門店區位：
第7屏：地址（門店位置展覽）
第8屏：邀請（邀請大家來門店體驗）
8屏這個數量， 不會顯得內容過多， 不會讓用戶看得太疲憊， 也正好交待了品牌、功能和區位這3個信息點 。
而從主題來說， 我們可以發散出很多方向 。 比如， 喝茶可以讓人靜心和放松；比如， 來這里喝茶可以會友和聊天；再比如， 在這里你可以看到很多創意展覽 。 經過發散后， 我們得到了如下主題：
①不要錯過一個能讓你放松身心的空間；
②“一拙”是一個會友的好去處；
③這是一個在城市中能讓你放松下來的空間 。
對比下來， 項目選擇了（3）作為主題， 因為獨立空間不僅可以隱含喝茶、靜心和會友這些特征， 還有“放松”的含義， 這與品牌調性是比較一致的 。 為了讓文案更加生動和有吸引力， 最后使用的標題是“請問你來“一拙”做過客嗎？”
用疑問句會有著更加輕松的感覺， 也容易讓人愿意繼續看下面的內容， 避免了說教和太過于直白 。 確定了主題和內容后， 下一步就可以出草圖了 。
H5原型和設計構思
有文化氣息的文創品牌比較適合清雅、簡約的風格， 色彩不需要太多， 對比也不應太強 。 H5的色調以Logo的金色作為主色調， 整支H5的頁面風格應追求簡潔、大氣的感覺， 就像是中國畫， 會注意留白和視覺氛圍 。 此次項目的原型圖采用Illustrator（AI）繪制，
H5的原型圖
H5制作過程
在制作方面， 采用了Photoshop和MAKA（如圖所示） 。 Photoshop主要用來進行內容布局設計， 動態效果則是在H5工具MAKA中完成的 。 其實項目完全可以在MAKA中完成， 但為能演示更多的工具操作， 這里選用了兩個工具配合進行制作 。

推薦閱讀