不用到處找H5模板，手把手教你製作H5的教程來了！

設計 08-09

說起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中完成，但為能演示更多的工具操作，這裡選用了兩個工具配合進行製作。

MAKA的網站主頁

製作前要建立Photoshop尺寸文件，畫布設置寬為 640px、高為1008px，如圖所示，這是為了後期方便將設計文件導入到H5工具，這是目前H5工具普遍採用的頁面尺寸。下面開始詳細講解。

設計的細則講解

（1）圖片設計

圖片是此次設計的關鍵，因文字內容整體較簡單，所以文字只起點綴作用，這就凸顯出圖的重要性。從品牌提供的圖片中選擇合適的圖片分別安插在了8個頁面當中，但很快就出現了一個難題。

因為在頁面中整版圖最為美觀，所以計劃用8張整圖配8段文字來設計畫面。但在產品展示部分，品牌方並沒有可以包含所有產品的整圖，只有單個產品的展示圖片。

如果直接將不同產品圖拼湊在一個頁面，就會很不美觀，但如果將產品圖分散到其他頁面，又會使得H5的頁數太多。

Photoshop尺寸建立頁面

為解決問題，我們使用了一個輪播圖的互動插件，通過該插件可以做到在一個頁面展示多張圖，還能保證圖版的整屏效果，而這個互動插件就是H5工具的一個功能組件。為了使頁面更為美觀，我們還找到了一張宣紙的背景作為背景圖，這樣會比白底要有更多的細節展現。設計過程如圖所示。

一個頁面展示多張產品圖的設計過程

（2）文字與標題設計

H5大標題採用方正大標宋體，頁面正文主要採用方正仿宋簡體，如圖所示。

H5設計選用的字體

在前面，我們已明確告訴大家盡量不要使用識別性較差的宋體字，但此項目例外，因為H5正文文字量少，文字排版可以非常稀鬆。在這種情況下，宋體字的使用不會影響閱讀時的識別。為了更好凸顯文化氣息，文字排版方式是以豎版為主的，這樣更像是古體字的書寫方式，能夠凸顯文化氣息，所以用宋體字就更合適了。標題與正文的字體的排版對比效果如圖所示。

標題與正文的字體

大家也應該注意，H5的第2頁正文描述部分還是採用了黑體字，這是因為文字量太大了，所以在具體設計時做了取捨。不管你用什麼字體，設計目的都是一致的，就是讓H5清晰地呈現內容。正文字體採用黑體和宋體的效果如圖所示。

黑字體正文

（識別度更好）

宋體字正文

（識別度不如黑體字）

（3）地圖設計

在設計地圖時，項目採用了手繪地圖的形式，但實際大可不必這樣，因為現在的H5生成器內置了定位地圖，在點擊這樣的地圖後可以直接調取手機中安裝的地圖 APP，呈現位置信息。但因為書中的H5模擬案例是要長期使用的案例，所以還是選用了手繪地圖來表現。地圖在配色上沿用金色作為主色，與畫面風格保持一致，如圖所示。