年初加入UED團隊算是剛剛接觸H5。在一個摸索的階段下進行。漸漸發現，想要做好H5，就應該先準備好一套清晰的設計流程。
視覺非單一的畫面，精髓在於感官體驗。
H5的畫面表現不單是視覺層面，還要考慮到螢幕之間的切換，如何把握整套頁面之間的節奏，什麼時候丟擲按鈕，什麼時候正確引導。還包括動效，音樂等，這些都是需要設計師花時間去琢磨研究的。我發現在H5的視覺表現上，即使是簡單單一的畫面，調整好了節奏，感官綜合的好，反而勝過大多數僅靠畫面撐場的作品，所以想設計好H5，首先要調整自己的思維狀態。
一、梳理結構
有時候策劃人也不知道如何更好地表達案例的時候，你通常會收到類似於這樣的手稿。
你得先搞清楚做這個H5的目的，你是想賣產品搞促銷？還是想引流增加使用者？或者只是單純的去推廣一個品牌形象？先確立你要幹什麼，是要做一個文藝走心的小故事，還是做一個互動答題的小遊戲。先梳理好一個故事指令碼，類似於每個頁面之間的結構形式。
二、風格定位
前期的風格定位就像選擇一件外套，走清新可愛風格，還是成熟幹練的路線，關鍵在於穿衣的人適合哪個風格。所以，用手繪風格表達，還是用調性元素去詮釋，主要取決於你想傳達什麼。
三、設計表現
很多H5選用手繪的形式，引起了很多好奇的注目。選擇好方向後，作出一個指令碼，類似於電影的分鏡頭指令碼，也可以理解為設計前期的一個計劃。
舉例：尋找繁體字 h5
專案背景：在兩會期間，文化頻道希望能通過一些互動答題的小遊戲去吸引網友參與，主題是識別在簡體字中找出繁體字。
關鍵詞聯想：放大鏡，遊戲按鈕，生命力血槽，技能點，考場，古代。
創意過程：產品設定成闖關遊戲的形式，用手繪形象去增添遊戲的趣味性。每個題型答對後有相應的成長獎勵機制（秀才—舉人—探花—榜眼—狀元）
去吸引使用者不斷晉級，增加參與度。
好玩逗趣運用手繪風格都能做出很好的表達。也是現今H5傳達情感的慣用手法之一，而沒有一種風格是萬能的，嘗試更多的表現形式和多元的風格才能滿足使用者們的胃口。
四、效果實現
效果的實現包括視覺，聲音和互動，這是H5比較花心思的部分，因為感官綜合的好，勝過大多數單一畫面好看的作品。實現的方式有很多種，比如AE生成動畫，或者PS序列幀也可以，關鍵在於和前端製作配合去實現最終效果。
五、小結
不是畫出來單一畫面就好了，h5是視覺聽覺和互動的融合，巧妙的動畫可以為頁面加分，適當的音效讓故整個驗能更加生動和立體。