最近一直在看網(wǎng)易出的《H5匠人手冊》，能夠全面的了解整個H5的產(chǎn)出流程迫靖，視覺實現(xiàn)和動效技巧懊蒸，里面有很多網(wǎng)易出品的H5實例，干貨很足滨巴，想要全面了解H5的建議可以買書配合書中的例子仔細體會思灌；整理了其中一部分內(nèi)容，后續(xù)會持續(xù)更新恭取。
H5交互流程矩陣圖
H5是為了傳播而生的泰偿，是為了推廣宣傳內(nèi)容、活動或品牌而制作的蜈垮。目的是盡可能最大化地引導(dǎo)用戶分享和回流
1耗跛、項目溝通
1.1 邀請參與者開會：組織參與者碰頭會：參與者包括項目負責人、產(chǎn)品經(jīng)理攒发、設(shè)計人員调塌、開發(fā)人員、利益相關(guān)部門人員等
項目相關(guān)者全部到場惠猿，確認基本工作量羔砾、技術(shù)設(shè)計邊界、項目工期安排、避免不不必要的返工
1.2 明確項目背景：前期會議要明確項目背景姜凄、卻敵那個項目的整體規(guī)劃政溃，整體包括：
1）項目背景：項目主題、目標受眾檀葛、決策方玩祟、是否有第三方參與、是否有商業(yè)合作等
2）商業(yè)目的：需要突出的商業(yè)元素屿聋、預(yù)期達到什么樣的傳播效果
3）重要程度：判斷策劃的難易空扎、交互邏輯、設(shè)計風格润讥、開發(fā)資源
4）上線時間：確定開發(fā)周期
1.3 常見問題：
1）項目方想展示的文本內(nèi)容過多
2）發(fā)起方對核心交互方式把握不夠精準
3）技術(shù)開發(fā)難度
4）需求文檔不清晰
2转锈、策劃評估
2.1、動機——是否能在短時間內(nèi)吸引用戶注意力并完成閱讀楚殿、
影響用戶瀏覽的重要因素：目標&情感
目標指用戶的目的性,目的性的強弱在很大程度上決定了用戶瀏覽的耐心撮慨，用戶完成某個操作的目的性月強，他就越可以忍受過程中帶來的不愉快的體驗脆粥，應(yīng)用的目的性往往是由產(chǎn)品的屬性決定的砌溺。
用戶情感：決定了用戶可以接受影響的程度，一般主觀性越強用戶越容易受到情緒的影響進而改變行為变隔。
1）利用心流理論控制節(jié)奏
心流的概念规伐，最初源自Csikszentmihalyi 于1960年代觀察藝術(shù)家、棋手匣缘、攀巖者及作曲家等猖闪，他觀察到當這些人在從事他們的工作的時候幾乎是全神貫注的投入工作，經(jīng)常忘記時間以及對周圍環(huán)境的感知肌厨，這些人參與他們的個別活動都是出于共同的樂趣培慌，這些樂趣是來自于活動的過程，而且外在的報酬是極小或不存在的柑爸，這種由全神貫注所產(chǎn)生的心流體驗Csikszentmihalyi 認為是一種最佳的體驗吵护。（百度百科）
進入心流狀態(tài)的用戶通常有兩個重要的表現(xiàn)：一是完全投入一項活動并從中感受到愉悅，二是關(guān)注體驗過程從而忽視時間表鳍。在H5中我們要做的就是通過心流把控影響用戶的主觀因素馅而。
與心流關(guān)系密切的兩個要素：“挑戰(zhàn)”和“技能”
從高挑戰(zhàn)對應(yīng)中技能的“激發(fā)”狀態(tài)，讓用戶不斷提高技能后進入高挑戰(zhàn)對應(yīng)的高技能的“心流”狀態(tài)进胯，隨著技能的不斷提高，原來的高挑變?yōu)榱酥刑魬?zhàn)原押，于是用戶就又進入了“激發(fā)”狀態(tài)胁镐；如此往復(fù)，才能讓用戶達到一個正向循環(huán)，促進心流的過程盯漂。所以在H5的設(shè)計過程中颇玷，如果我們能讓用戶達到這樣的過程，就能牢牢抓住用戶就缆，讓他們有耐心帖渠，有興趣瀏覽完我們的H5。
2）利用HOOK理論引導(dǎo)用戶
引導(dǎo)用戶的行為需要4個步驟：觸發(fā)（誘因）—行為—多變的酬賞—投入
觸發(fā)（誘因）和行為聯(lián)系比較緊密竭宰，就是通過某種誘因讓用戶進入到產(chǎn)品中并產(chǎn)生行為空郊；在多變的酬賞環(huán)節(jié)激發(fā)用戶對產(chǎn)品中某個事物的強烈渴望，最后在投入環(huán)節(jié)讓用戶付出一些東西切揭，例如時間狞甚、精力、金錢等廓旬，這些會讓用戶產(chǎn)生新的動機哼审，讓用戶再次進入行為環(huán)節(jié)從而進入下一個癮循環(huán)。
①觸發(fā)與行為：促進一個人的行為的有三個關(guān)鍵因素：觸發(fā)孕豹，動機涩盾、能力（福格行為模型）
通過觸發(fā)引導(dǎo)用戶進入到一個HOOK循環(huán)后，用戶在完成任務(wù)時励背，影響任務(wù)的難易程度有6個要素：
1春霍、時間：完成這項任務(wù)所需要的時間
2、金錢：從事任務(wù)所需要的經(jīng)濟投入
3椅野、體力：完成任務(wù)所需要的體力
4终畅、精力：從事任務(wù)需要消耗的腦力
5、社會偏差：他人對該項活動的接受度
6竟闪、非常規(guī)性：該項活動與常規(guī)活動之間的匹配程度或矛盾程度
在H5的設(shè)計范圍中离福，最常用到的是如何控制用戶花費的時間、精力炼蛤。盡量讓用戶加快瀏覽速度妖爷，可以為用戶節(jié)省時間，不要設(shè)置過于復(fù)雜的操作理朋，為用戶節(jié)省精力絮识。
②多變的酬賞：在用戶行動后，一定要給用戶提供豐富的不可預(yù)知的獎勵嗽上。多變的酬賞并不是漫無目的的次舌；我們設(shè)置酬賞的時候要給出一個明確的目標范圍，而不是用戶無法預(yù)期的結(jié)果兽愤。
酬賞的三種表現(xiàn)形式：
社交酬賞：即社會認同感彼念，人們通過社交產(chǎn)生獎勵挪圾，例如朋友圈中的點贊和評論。
獵物酬賞：即人們在使用中獲得直接物質(zhì)獎勵逐沙，例如搶代金紅包哲思。
自我酬賞：即人們在活動過程中獲得的操控感、成就感吩案，例如堅持健身打卡獲得的勛章棚赔。
③投入：在投入環(huán)節(jié)我們要讓用戶付出一些東西，例如時間徘郭、精力靠益、金錢等，這些會讓用戶產(chǎn)生新的動機崎岂，讓用戶再次進入行為環(huán)節(jié)繼而進入下一個上癮循環(huán)捆毫。我們在策劃過程中，可以盡量讓用戶通過主動生產(chǎn)內(nèi)容的方式參與到H5中冲甘，增加用戶在H5中的投入绩卤，用戶投入越多，越不會輕易離開江醇。
2.2濒憋、框架—展現(xiàn)形式是否符號策劃主題
按照交互的復(fù)雜程度，將展現(xiàn)形式分為三類：
1）展示型：涉及的交互非常少陶夜、多以展示內(nèi)容為主
2）引導(dǎo)型：通過一些交互引導(dǎo)用戶完成操作
3）操作型：涉及大量的交互凛驮，吸引用戶完成操作
通過策劃創(chuàng)意、交互程度条辟、閱讀體驗黔夭、視覺表現(xiàn)、技術(shù)能力5個維度對各展示類型評價
①展示型：展示型按交互從弱到強分為：視頻類羽嫡、幻燈片類本姥、空間展示類。展示型H5杭棵，是指打開頁面僅通過幾個簡單常規(guī)操作甚至不操作婚惫，就能直觀看到展示內(nèi)容。這類H5的優(yōu)勢是易于流暢地呈現(xiàn)一個完整的故事或品牌形象魂爪，交互層級少先舷，技術(shù)難度低。缺點也比較明顯滓侍，對內(nèi)容要求非常高蒋川，得足夠吸引用戶看完整個內(nèi)容，如果交互形式簡單乏味撩笆，也容易造成用戶流失捺球。
視頻類：
視頻要足夠吸引人
視頻不要過長街图。如果過長，建議分段播放
視頻分段后懒构，可用交互手勢連接
幻燈片類：
著重優(yōu)化動效和視覺，頁數(shù)盡量控制在6-8頁
盡量在結(jié)構(gòu)和頁面連接上創(chuàng)新耘擂，增加有趣的交互
空間展示類：
結(jié)構(gòu)層級越少越好
交互盡量簡單清晰
②引導(dǎo)型：互動視頻類和小場景類胆剧。引導(dǎo)型表現(xiàn)形式豐富，讓用戶在閱讀中始終保持沉浸感醉冤。不斷變化的交互方式或反饋獎勵能激勵用戶不斷的閱讀秩霍。但劣勢和展示類一樣，還需要強大的策劃能力蚁阳，創(chuàng)意和情感因素才能支撐整個H5铃绒。
互動視頻類：
可以讓用戶引導(dǎo)故事走向，增加不確定性
可以利用交互點的精確把控螺捐，準確地配合故事結(jié)構(gòu)颠悬，讓故事更生動。
小場景類：
場景之間有一定的關(guān)聯(lián)和過渡定血，讓場景更加連貫赔癌。
場景間的過渡盡量不要重復(fù)，盡量符合場景所在的劇情澜沟。
需要給用戶明確的提示和引導(dǎo)灾票。
③操作型：小游戲、做測試和技術(shù)類茫虽。操作型是指用戶更主動和深入地與H5交互刊苍，通過操作控制H5的走向和結(jié)果。
小游戲：
能夠快速的吸引用戶注意力濒析，快速帶領(lǐng)用戶進入心流
游戲中可以穿插策劃需要突出的重點
小游戲可以給予用戶獨特的成就正什，以便增加分享幾率
要給予用戶操作上的引導(dǎo)
不要講H5的體量做的過大，導(dǎo)致加載問題悼枢。
做測試:
這類策劃最好和用戶的社交屬性相關(guān)聯(lián)
最終結(jié)果最好難以預(yù)料埠忘、調(diào)動用戶的好奇心
可以通過回答不同難度的問題，得到不同的結(jié)果
技術(shù)類：
以技術(shù)為向?qū)鳌娬{(diào)產(chǎn)品的特性
突出主題中的某些特點
2.4莹妒、交互—交互方式與策劃是否匹配
交互沒有好與壞的分別，只有是否符合當下的使用環(huán)境
內(nèi)容需要展示越多绰上，交互方式越應(yīng)該簡單清晰旨怠。不要出現(xiàn)用戶信息過載的情況。
2.5蜈块、原則—是否符合移動端的交互原則
1）簡化層級鉴腻，結(jié)構(gòu)扁平化
移動端由于設(shè)備本身的限制迷扇，沒有足夠的空間來展示路徑，如果沒有清晰的層級關(guān)系爽哎，或者需要進入層級更深的頁面才能找到用戶想要的蜓席，這意味著用戶會迷失方向，這時更應(yīng)該減少層級的深度课锌。
2）降低閱讀門檻厨内，減少認知成本? 實現(xiàn)方法：
單頁面操作單一化
多頁面操作一致化
通過擬物化設(shè)計減少用戶認知成本
利用手機傳感器，讓交互更自然
3）H5要注意分享屬性
促進分享的方法：
在結(jié)果中帶有一定的社交屬性
分享后直接獲得獎勵
產(chǎn)生心理共鳴渺贤、擊中用戶
用戶獲得成就感雏胃，要曬給大家看
如何增加回流：
充分發(fā)揮社交屬性、打造個性化分享鏈接
善于利用熱點和流量點
3志鞍、產(chǎn)出
3.1瞭亮、界面落實 交互設(shè)計師產(chǎn)出交互稿，跟進項目
完整的流程圖：表面加載點固棚、提示點统翩、動效點、操作點此洲、跳轉(zhuǎn)邏輯等
交互文檔：交互頁面唆缴、頁面所需的交互手勢、點擊位置黍翎、跳轉(zhuǎn)邏輯面徽、動效、加載位置等
3.2匣掸、完善細節(jié)
3.3趟紊、溝通跟進
1）加載與控件文件的大小
一般H5的大小建議控制在5M以內(nèi)，用戶在流暢的網(wǎng)絡(luò)環(huán)境中可以1S之內(nèi)加載完成碰酝。
減少H5大小的方法：
1）圖片壓縮：PNG格式的圖片霎匈，導(dǎo)出時建議使用PNG-8格式，顏色位數(shù)建議選擇256
2）文字處理：一般500個漢字所占內(nèi)存約1KB送爸，而一張文字轉(zhuǎn)圖片至少10KB铛嘱，因此，除非應(yīng)用特殊字體袭厂，不建議將文案以圖片的形式輸出墨吓。
加載處理方案：
1）全局加載：在H5封面出來之前一次性加載全部內(nèi)容。在查看H5過程中不會出現(xiàn)卡頓的現(xiàn)象纹磺，用戶體驗流暢帖烘，不過加載時間過程，當文件過大時橄杨，在加載時應(yīng)提醒用戶注意流量秘症。
2）優(yōu)先加載：按照內(nèi)容的重要程度照卦，先將主要部分加載出來，再加載次要的部分乡摹。一般用于圖文混排役耕，優(yōu)先加載文字，再加載圖片聪廉。
3）分段加載：將H5分成若干段落蹄葱，當用戶看到某一段落后再對下一段落進行加載。適合分章節(jié)策劃的H5锄列。
3.4、測試上線與數(shù)據(jù)監(jiān)測
常規(guī)的測試要點包括：
1）跳轉(zhuǎn)邏輯是否正常
2）頁面展示邏輯是否流暢
3）平臺之間是否有交互沖突
4）H5的加載速度如何惯悠，能否再壓縮H5的大小邻邮。
PS：常用的交互手段——H5常用的交互手段分為：手勢類、硬件類克婶、技術(shù)類
手勢：點擊筒严、長按、滑動情萤、拖動鸭蛙、
硬件：H5允許調(diào)用手機攝像頭和相冊、語音話筒筋岛、手機陀螺儀娶视、速度加速器
技術(shù)類：VR\AR\3D渲染，雙設(shè)備互動
