如果您是一位市場部推廣人員，那麼您對於“產品手冊”一定不陌生。
近期，我們接到了某位企業客戶關於產品手冊H5的諮詢，並針對他的問題進行了一對一的詳細溝通。
考慮到很多企業的市場、運營、行政等部門員工都有製作產品手冊H5的需求，我們決定將一些要點整理成文，希望可以對大家有所幫助~
一、需求簡介
H公司市場部推廣人員 石先生：
“目前我們正跟同行在市場上進行品牌、產品品類、品種的激烈競爭，一線業務人員需藉助新產品不斷跟消費者互動，宣傳需求極爲頻繁。
最近發現同行手機移動端產品宣傳H5的製作及更新都非常專業、迅速。我們也做了調研，同樣是產品種類繁多、時間緊張、預算緊縮、任務緊急背景下，他們可以快速、高效地搭建自己的產品手冊H5，後期還在高效更新，他們是如何做到的呢？
我們看了同行的H5案例，感覺都很不錯，也是通過這些案例瞭解到意派平臺，是否可以推薦更多產品手冊類的H5，我們先學習瞭解下。”
意派優質手冊類H5典型案例盤點
-
服裝/洗護類
-
互聯網產品類
“我們通過學習瞭解到：這樣的一個產品手冊類H5，如果只是用於國內微信渠道宣傳展示，依靠企業內部的技術團隊也可完成，但技術團隊有自己繁重的開發任務，部門之間的協調和技術排期時間較久；依靠外部供應商團隊也會存在預算緊張、溝通繁瑣的問題；並且我們希望後期可複用原有H5作品，即複製——修改——發佈......最終考慮下來：部門想嘗試自己解決。”
“我們考慮了幾個關鍵問題：如果我是一個市場運營/推廣人員，無技術背景，想要製作一個在微信朋友圈、微信好友/羣進行傳播的手冊類H5，會存在這些問題：
1、我自己能做嗎？
2、要藉助什麼工具？
3、怎麼做？
4、完成這個H5時間要多久？
5、要花費多少費用？”
意派來回答您的問題：
1、能
2、意派Epub360，專業級H5交互設計工具
3、掌握意派Epub360編輯器的關鍵觸發行爲：跳轉頁面，具體看本文第二部分【二、典型案例+教程】
4、H5可以簡單分爲視覺設計及交互2個部分，視覺設計一般是指設計師在PS（photoshop）或AI（illustrator）等設計軟件中進行畫面設計排版，然後輸出設計源文件， 供交互制作人員進行交互制作。不包含設計的情況下。交互部分的製作時間取決於以下2個要素：
1.1.取決於個人對意派Epub360編輯器的上手能力，如用過PPT、PS、AI或其他在線類設計軟件，有軟件基礎爲佳，學起來更快；
1.2.取決於要製作的內容工作量，如果是5P以內的畫面，不包含設計及設計切圖部分，1天可以完成。如果10～20頁的畫面，建議至少預留2～3天的時間，更多的可以根據個人情況自行估算。
5、費用取決於以下3個要素：
1.1.H5製作數量。目前每個意派賬號默認可以製作5個H5作品，作品數量不夠的可以升級至年費用戶，費用1499～19999元不等。
1.2.H5訪問流量。H5發佈後的內容託管和訪問默認依託於意派的服務器，如果使用意派服務器，需購買訪問流量，默認每個H5免費訪問1000次，超出該次數限制後需單獨購買訪問流量。單獨購買流量覺得不划算的，可以升級至年費用戶，費用1499～19999元不等。
1.3.H5是否用到一些高級功能。如常見的付費組件：原清晰度播放效果的本地視頻組件、跳轉企業指定小程序、在H5中嵌入企業指定的網頁等付費功能，如需使用該類付費組件，可以升級至年費用戶，費用1499～19999元不等。
其他問題補充：
-
設計部分如果確實有要求，比如需要遵循品牌設計規範，仍需要企業內部的設計部門或外部供應商配合。
-
如果對設計要求不高的，或個人具備設計能力，也可在編輯器裏自己完成排版設計。
需求分析
-
產品宣傳類手冊H5基本包含以下4個部分：
1、封面頁
2、目錄頁
3、產品內容詳情頁
4、返回
-
學會一個核心的交互行爲：跳轉頁面。
二、典型案例+教程
案例：
以此案例爲例：《【DEMO】意派Epub360產品功能體驗手冊》，點擊標題可進入拷貝網址。
教程：
1、對產品進行內容框架組織，基本分爲：產品手冊封面、目錄、N個產品詳情頁。在編輯器左側頁面縮略圖中右鍵單擊，新建空白頁。
2、點擊左側首頁縮略圖，在頁面中藉助圖片、文字類組件，添加封面及點擊瞭解按鈕。
3、通過圖片或文字組件，製作產品目錄。以文字類目錄爲例，可以給段落組件設置基本的按鈕樣式。
4.1、每個產品都可以做一個詳情頁，詳情頁可以是普通的頁面，在手機上剛好顯示爲1屏；如果內容過多，也可以做成長頁面。
4.2、詳情頁做好了，我們還可考慮從每個詳情頁能夠返回目錄頁，可以加一個返回按鈕。
5、頁面內容組織完畢後，要實現點擊首頁的“點擊瞭解”按鈕跳轉到目錄頁、點擊目錄頁面的每個按鈕跳轉到對應的產品詳情頁。點擊選中要跳轉的元素，給其設置點擊時的觸發器——跳轉頁面，具體跳轉到哪一頁，可以選擇要跳轉頁面的頁碼。
當然，其他的跳轉到首頁、上一頁、下一頁也可根據需求選擇。
掌握了以上內容，就可以做一個產品手冊啦，快去試試吧！
新的問題：如果我不想從頭開始做，有沒有現成模板套用偷個懶？
1、拷貝案例。《【DEMO】意派Epub360產品功能體驗手冊》，點擊標題可進入拷貝網址。
點擊拷貝按鈕後，該作品就在你的意派賬號裏啦。
2、進入拷貝作品的編輯界面，直接替換下文字、圖片素材就可以啦！更多詳情可以學習《模板修改替換教程》。
另外，優質的產品手冊除了清晰的內容組織、優秀的視覺設計、便捷的交互跳轉邏輯，還取決於精細的動畫、動效設計。如下圖效果：
具體可以學習動畫、動效系列教程，☞指路鏈接
除了內容頁面組織搭建、跳轉邏輯串聯頁面內容、精細動畫豐富展示效果，我們還可能需要在同一產品頁面看到目錄icon、點擊返回等按鈕，如下圖的效果：
要實現以上效果，還需要再熟悉不同的頁面結構，如Masterpage、頁面（page）、background、Layer頁。☞指路鏈接
到這裏，文章開頭的關鍵問題我們已經解答完畢，並做了一些問題延伸。如果你也有這樣的H5需求，快點動手試試吧！
希望以上內容可以對您有所啓發
更多精彩的H5案例及模板