02-移動營銷設計-設計流程與規範技巧

2.1 H5的設計流程

      目前H5設計方法上，統稱爲三大類型

• 互動廣告派    優勢：創意好，美術強                  缺點：技術弱，對產品理解深刻度有限。
• 互聯網設計派 優勢：技術支持好，產品理解深刻， 缺點：創意表現能力不足，設計執行能力低。
• 工具執行派    優勢：反應靈活迅速，製做成本低， 缺點：總體水平受工具限制，缺少推廣渠道。
  

     所以H5設計流程分爲5步

瞭解需求→肯定形式→設計表現→開發執行→數據統計

     以瞭解需求爲例 ： 選好方向，即推廣新產品，促銷活動，爲網站引流，傳播品牌形象，最終是以目的爲導向，定位真實的需求。

      以肯定形式爲例：選好表現形式，可能須要一個原型圖，來發揮內容特徵或團隊優點，最終以目的爲中心，定位最優質的展示效果。

      以設計表現爲例：具體設計表現階段，須要肯定美術風格，設計師須要判斷哪一種表現形式，調性，元素，配樂和動效的跟進，是一個總體協調把控的關鍵。

     以開放執行爲例：要麼有代碼實現，通常而言設計師的分層圖包含有psd文件，png切圖，矢量文件，mp3音頻，視頻文件等。由前端工程師放置在服務器上，經過代碼編輯合併成H5頁面，前端也是最終H5執行者。要麼無代碼實現，通常而言，經過第三方平臺實現效果。

       以數據統計爲例：經過PV(頁面的瀏覽量/點擊量,屢次訪問將累計）

                             經過UV(網絡的獨立訪客，也就是不一樣IP量，不累計)

                             經過跳出率(只訪問了入口頁面就離開的訪問量/全部)

                             經過IP(一天內使用不一樣IP地址的用戶訪問網站的數量)

      所以你的設計的創意和做品表現形式好很差，推廣到位不到位，時間點掌握的恰不恰當，數據的成績單表現的很明顯。

2.2 H5經常使用設計工具箱

      最全能設計工具：photoshop，使用PS作畫面，動效，剪輯視頻，修改音樂都已經可以一鼓作氣。

      輔助設計工具：lllustrator（AI），Sketch，做爲最專業的矢量回執軟件，便於線框圖的繪製和快速表現畫面，彌補了PS多圖層來回操做的繁瑣。AI則使得字體更顯優點，而Sketch主要應用於UI界面設計領域，適合設計手機頁面，對H5有很好輔助做用。

      特效工具：after effects ，CINEMA 4D，AE和C4D是欄目包裝設計行業的黃金搭檔，能夠利用這些特效軟件製做出炫酷的畫面，隨後利用序列幀/視頻導出畫面並植入H5.個別3dmax和maya是設計師自行選擇。

       聲畫編輯輔助工具：Final cut，garage band，大多數H5對音頻和視頻要求不高，PS可以知足大部分需求。但專業工具Final cut應用IOS多些，PC推薦Premiere軟件，上手快。garage band是MAC音樂製做軟件。

       H5動效展現工具：keynote，早期喬布斯我的工具，後期推向市場，mac系統自帶軟件。HYPE是主打html5設計，它結合了AE,Keynote，flash多種優點，當下HYPE3代碼還受移動端制約，將來可期。

       H5設計生成工具：定製化H5生成工具（FWA，W3C,酷5），網站類H5生成工具（模板類- 易企秀，兔展，MAKA，初頁；功能類：互動大師（iH5），意派360，木疙瘩）；開發類H5設計工具選擇根據自身喜愛。PS play，圖片壓縮工具，二維碼生成工具，聲音和視頻壓縮工具。

2.3 H5頁面尺寸設計注意事項

        熟悉native app開發都會被尺寸規範折磨，H5只須要一套頁面，就能夠響應大部分手機屏幕。

以手機爲例 1080*1920爲主流，其次爲720*1280.

文字和部分圖片來源於H5+移動營銷設計寶典-蘇杭著