請問做H5頁面需要學什麼？

12-28

不是用MAKA、初頁那些模板直接替換，而是能用一些類似於互動大師的工具，做齣動畫效果比較獨特的H5頁面。我本身不是這個專業的，但是由於在工作中經常跟做H5的人撕。。有的效果明明我在其他H5裡面見到過，他們還是說做不了，忽悠我，說我不是專業的不懂，最後給我一個像屎一樣的H5，我還得捏著鼻子給他們錢，所以我決定去學，然後糊他們一臉。

從個人最近的研究觀察和私人接單的情況看來，H5頁面設計已經不僅限於微信廣告，其實H5現在替代的是整個移動端用戶前端交互的「界面」和載體，除了廣告，可能還有各種minisite，活動落地頁，內容輕博客，遊戲等等，某種程度上替代了原生App的部分功能和應用，所以我一直當H5是一個產品來做

進入重點，做H5需要學什麼？

1、交互設計用戶體驗
跟交互設計，用戶體驗有關的概念非常多，比如UID、UED、UCD、HCI、GUI等等，這裡主要介紹三個主流的概念UID、UED、IxD。

UED（User Experience Design），即用戶體驗設計，側重用戶在每個環節中對產品的體驗。用戶與產品的每一次交互，在產品上停留的每一秒中，都是用戶「體驗「，你需要深入產品和用戶的場景中，設計每一個體驗節點。因此用戶體驗設計師其實有點產品經理，通常需要參與到產品的前期規劃、設計、開發、測試和迭代的過程中，能力構成上主要掌握各種用戶研究方法和設計思維，通常不需要很高超的圖形設計技能，但要有較強的審美和設計分辨能力。

UID（User Interface Design），即用戶界面設計，側重具體場景下用戶的感官感受，包括觸覺、聽覺、視覺等，一般以視覺為主。理想狀況下，UI設計師要同時也要懂一些UE的知識，不過在業內普遍的定位，UI設計師更注重與圖形界面設計，他的工作是將具體的」需求「轉化為圖形界面，關注的是界面每一個像素的感官體驗。

IxD（Interaction Design），即交互設計，關注用戶與產品的互動本身以及整個用戶體驗的路徑。交互設計師通過視覺、聽覺、觸覺的動態設計來提升用戶體驗，同時，需要考慮用戶的使用場景和判斷用戶路徑，以此設計和引導用戶和產品/界面的互動過程。

看起來很專業是吧？其實並沒有，說白了就是感覺感覺感覺+邏輯邏輯邏輯，很多人學了十幾年都不能成為大師，就是因為兩者其一都修鍊不到極致，或者兩者都平平庸庸。當然如果兩者都平庸，但理論水平高，跟人專業BB還是很OK的，而且做出來的東西也還過得去，客觀來說，我覺得樓主可以先朝這個方向努力，萬一要不小心發現自己很有天賦，可以再多加努力

怎麼達到專業BB的水平。千萬不要去什麼培訓公司，沒有卵用。

基本你要訓練三種能力：

審美。不懂設計不要緊，但你要知道什麼是好的設計。最好的辦法就是找一個設計很牛的朋友，跟他看一樣的書、逛一樣的網站、關注一樣的公眾號，堅持一個月保證有效果。具體到H5的話可以重點關注UI、UE相關的設計類內容。主要是在腦子裡積累一個關於什麼是美的資料庫。

同理心。產品經理最重要的就是同理心，H5其實也是一個小產品，要考慮用戶場景，路徑，轉化等等。當然很多人都有同理心，但表達出來是否專業就決定了你是否有專業BB的水平，最常用的伎倆就是推己及彼，把自己的感受當成用戶的感受，無恥一點可以找幾個朋友導向性驗證一下，嗯嗯，更有說服力。但切記，要用專業的語言表達出來。核心的思想是你要時刻站在「他」用戶的角度看待你眼前一切稱之為產品的事物。

理論表達。以下推薦一些書，有兩個重點：一、模仿作者BB的方式；二、還是要實踐一下，包括：平時聊天下意識表達，多下載一些App，按書籍的理論分析它的功能設計、用戶路徑、交互體驗等等，有可能的話用一些工具實現一些想法，比如你提到的互動大師這種工具。

書籍清單，排名分先後：

入門級書籍

寫給大家看的設計書(第3版)
設計心理學
破繭成蝶：用戶體驗設計師的成長之路
設計之下
一目了然
情感化設計
交互設計之路
瞬間之美：web界面設計如何讓用戶心動

中階書籍

用戶體驗的要素
超越平凡的平面設計
認知與設計
細節決定交互設計的成敗
簡單法則
網站交互設計模式
UCD火花集
贏在用戶
移動設備交互設計
錦繡藍圖：怎樣規劃令人流連忘返的網站
自然用戶界面設計
設計人機界面
web表單設計：點石成金的藝術
Tapworthy: Designing Great iPhone App
移動應用的設計與開發
Mobile Design For iPhone And iPad
Mobile Design and Development
Designing Interactions
用戶體驗草圖設計
簡約至上
觸動人心
文案訓練手冊
設計師要懂心理學
微交互
Responsive Web Design
至關重要的設計
Killer UX Design
The UX Book
Design is A Job
移動互聯：用戶體驗設計指南
貼心設計：打造高可用性的移動產品

高階書籍

HTML與CSS入門經典(第9版)
About Face 交互設計精髓
交互設計—-超越人機交互
軟體觀念革命
A Practical Guide to Information Architecture
Designing for Emotion
項目百態
當用戶體驗設計遇上敏捷
Web導航設計
Web信息架構—-設計大型網站）
Web界面設計
精通Web Analytics2.0
交互設計沉思錄
用戶故事與敏捷方法
用戶體驗度量
社會心理學
Storytelling for User Experience
The Elements of Content Strategy
Lean UX
Handbook of Usability Testing
Quantifying the User Experience
Designing the Conversation
Lean Analytics
Search Analytics for Your Site
Understanding Your Users
Sketching Drawing Techniques for Product Designers
Card Sorting Designing Usable Categories
Service Design

官方設計指南

Google TV Design Patterns
Google Glass Guidelines
Android Wear Guidelines
Safari Web Content Guide
Android User Interface Guidelines
Touch Gesture Reference Guide
Apple Human Interface Guidelines
Windows 用戶體驗交互設計規範

看完這些。。。基本不可能，你可以只看每一類的前三本，吃透了基本也有一定水平，專業BB應該問題不大。

具體到做出來H5，那就是工具學習：目前個人的標配是 PS/Ai+AE+iH5

PS/Ai 做平面，用哪個隨便
AE做Gif
iH5做H5的實現

iH5網站有課程，自學就行。Ps、AE看興趣和天賦，半路出家且沒有天賦的設計，怎麼做怎麼low，沒有自信就還是找找平面設計幫你作圖，你搞實現和交互邏輯設計就行。

說了這麼多，我發現還有營銷、文案、策劃沒講，好累。。。這些你自己網上找吧，其實這些跟產品中的同理心是一個道理，簡單來說就是給他們願意二次傳播的內容

首先謝邀。

每次看到H5，其實我都不知道問主所說的H5是指什麼？因為在大天朝的眼裡，把這些情況都會稱為H5:

頁面效果特別炫酷的
Native頁面
APP頁面也
Hybrid頁面

那麼問題就來了，這些所謂的H5頁面，他們的製作方式、技術方案、交互方式之類的都可以說是不一樣的。

那麼回來說H5吧。個人覺得H5應該是指Web頁面，它採用到的技術是HTML5(或者說HTML)、CSS（說得高大尚一些CSS3）和JavaScript之類。不管你頁面效果有多炫，對於一個Web頁面而言基本上都離不開這幾種技術。

HTML5(HTML)是你這個頁面的骨架，簡單點說就是結構層，當然現在的HTML5比以前的版本先進多了，他提供了各種的 API,而這些API還是JavaScript API。只不過這些原生的API被瀏覽器支持
CSS(CSS3)是用來美化你的Web頁面。在CSS3中可以使用一些新的特性，幫助你實現當初依賴於設計軟體或JavaScript實現的效果，比如說Web Animation效果。
JavaScript更不用說了，他能幫你做很多事情，在所謂的 H5中，搞不好你看到的效果就是一個JavaScript的Canvas效果。那麼還有其他一些特性

對於Native/APP/Hybrid中的頁面實現技術手段都各不一樣，此時你說要將一個Web頁面實現一個原生的Native頁面效果，有時候還真不是說能實現的。反過來，有時候你的Native頁面要實現一個Web頁面也並非易事。

最後表達下下，你所看到的，未必就是真正的。另外還是說一下，得搞清楚自己所說的H5是指啥。

以上僅是個人拙見，有錯歡迎指正

回應上面 @大漠@David ，請收起你們冗長的書單，不要用寫程序的思維回答此問，這樣會嚇跑一堆興趣愛好者。

--------------------------------割---------------------------------

首先你得懂點設計，或身邊有個會畫畫的妹子總OK吧。

其實得能寫點文字，好圖陪好文這樣才有看下去的慾望；

最後通曉人性弱點，（有點湊字數）看完你得H5，總得給我一個分享出去的理由吧？

舉3個栗子，都是本人和夥伴一起完成（都是設計狗），Go：

第一次做H5，在Maka上搞定的，在Maka上搞定的，在Maka上搞定的……Po主莫偏見，H5平台是槍，後面的快槍手才是重點。3天時間琢磨故事，剩下3天畫畫拍照做MAKA，這個H5在本地被訪問了6W+次。

不要讓樂樂的故事再發生 (二維碼自動識別)

知乎貼不了GIF圖，感興趣可以掃掃看，頁面健在，訪客還是持續增長，用到的技能：

手繪、掃描、PS上色、PS做GIF（就是兩張圖來回循環）、上傳MAKA、分享出去、完。

--------------------------------割---------------------------------

第二個H5，為一美妝品牌定製，含互動稍微複雜些，用到了Epub360；

去年雙12期間推出，7天左右時間破10W+，由於後面有讓關注品牌微信，涉及到微信原則，期間被封了幾天，還好客戶大大沒發現~~~廢了不少口舌又被申訴回來。

手繪畫圖，客戶大大三選一。現在想想這麼做很不負責，這不是變相把責任推給客戶了嗎？

地址就不放了，留點隱私哈~大概邏輯，進入H5有1234選項，先擇某個數字最後分別對應給你ABCD結果。這個maka等簡單的展示肯定完不成，所有用到了Epub360，其實Ih5也可行。具體步驟與上個差不多，中間有一點挺焦灼，研究Epub360裡面的各種小工具、小邏輯、小演算法。

--------------------------------割---------------------------------

第三個，上個月獨自鼓搗的，不屬於訂單算公益吧，為香港、深圳朗協做的宣傳H5。

朗誦藝術盛宴，其中有鳳凰衛視、央視、《熊出沒》等配音人，一堆好聲音，總得有聲音展現吧。So，得出以下畫面+語音互動。用到的技術：PS+部分代碼，鏈接見最後：

LINK：『吹吧·四月的風』邀請函

David Wang在胡扯些什麼？許多年前那個設計和html一個人做的時代眼看著就要過完了，前端技術已然跟設計分割得相當明顯，你叫學H5的學什麼設計？UI需要多年的視覺修養交互需要工設理念用研需要心理學基礎和統計學方法，你以為是花個十天半月就能作為h5的學前班課程結業的？
你告訴我，學h5不去學js學前端框架學一堆設計幹什麼？不學會UI交互UE就學不會h5么？h5是設計的實現技術，不是視覺產出，也不是交互表達，更八杆子扯不到用戶體驗
這年頭會扯幾句用戶體驗的人就能有贊，在那些評價各個APP的問題裡面吹牛逼就算了，在求知類的問題里就別拿出來胡扯誤導蒼生能不能？

【艾樂卡】靈肯互動傳播
製作一個H5，其實完全不需要那麼複雜的邏輯，現實中的應用場景使用目前的一些免費製作工具也基本滿足！

錢給到位,找到的是到位的團隊,時間給充足,需求提明確,最終才會得到好的效果.

錢給的少,團隊不會用心做.
錢給的少,技術好的團隊不會接,接的是初學者.
時間給的少,倉促趕工出不了多精細的活.
需求經常變,是人都發脾氣了,更沒心思做了.

別人說你不是專業的,那可能確實不是專業的,就別踏入這行了,最終你會發現做的可能還不如他們的成果.
有些看起來簡單的效果,做起來並不是你想像中的那麼簡單的,零點幾秒的效果執行差別,可能給人就有很大的區別,一些優秀的作品,都是經過精心打造和充足的經驗下產生的.

另外,用跟人撕的態度合作,很難得到好的工作成果吧.

最基本需要學html5+css3+js，然後根據你的業務去選具體的技術框架
比如：css3有很多種，dark，bootstrap 等等

特效儘可能用css3或者js提供的功能去實現，比如經常看到的小圖標，以前都是切圖，用圖片，現在用字體庫，阿里團隊做了很多這種常用的小圖標，再比如，一些圓角按鈕用css3就搞定，以前用圖片拼接，

效果沒必要過於花哨，做h5時需要考慮工期，團隊技術實力，性能等因素，過猶不及。

看到這個問題提的比較久了，還是想上來補充說一說。在做一個案例之前我們都要去合理分解目標，逐步實現。

一個簡單的案例，知道了原理就可以做出來，而複雜的案例就有各種各樣的處理方法。複雜案例，其實無非就是簡單案例的多重疊加處理，把一個複雜的案例拆分，變成一個個最簡單的功能去實現，那麼複雜的問題就簡單化了。

你想自己學工具，那麼首先你要去你提到的iH5互動大師的官網上看看基礎課程，直接學3.0版本的就行了。

這裡來說一下四種拆分簡化的製作H5思路：

1、按頁面分

這個是最簡單的。因為在iH5工具里頁面本身就是一個單獨的單位，把一個頁面內要呈現的元素和效果都做完再到下一個頁面，這是大家剛上手時最基本的思路。

同理，有時候可能是一個「偽頁面」，比如說一個長圖或者同一個頁面內動畫的變換。但我們也可以選擇先把在同一頁內顯示的內容先統一做好，再進行下一個「頁面」的操作，這樣是比較符合操作思路的。

2、按播放時間分

有時，可能在一個頁面內就要實現比較複雜的動畫效果。這時候如果只是按頁面來劃分，工作量就很大了。

針對有複雜動畫效果的的案例，我們可以選擇用「合併同時項」的做法。把要同時出現的動畫效果放到一起來製作。

這個算是「分頁面」思路的進階版，從複雜的動畫里看出「虛擬的頁面」。對於大部分展示型的案例，這是比較實用的一個思路。

3、按流程分步

在做邏輯比較強的H5（比如小遊戲）時，按頁面分是沒什麼幫助的。因為頁面上的元素可能很簡單，但每個元素或者頁面之間的聯繫是比較複雜的。這時候，建議是可以畫個簡單的流程圖，然後按流程來分步實現。

舉個例子，一個非常簡單的小遊戲的流程圖是這樣的：

這裡其實是按照用戶操作路徑來劃分。考慮每一步要實現的功能，然後一個個列舉實現。在處理事件邏輯時，對照著流程圖一步步來，就非常清晰了。

4、按功能模塊分

「功能模塊」在這裡指的是一個H5中，可以獨立實現一個功能的部分。比如說你要做一個最簡單的測試題H5，那每一道題的事件和元素屬性其實是一樣的，都是一個問題多個選項，選中其中一個加分而其他不加分。

這種情況下，一個問題就構成一個獨立的「功能模塊」了。所以我們的做法應該是先把一個問題做好，測試好沒問題。然後複製粘貼多個，再去改部分屬性值，這是最快也是最不易出錯的做法。

測試題是一個非常典型的例子，當然也很簡單。而在實現特別複雜案例的時候，我們是沒辦法把詳細的流程圖做出來，只能先把其中最基本的部分做出流程圖實現好，然後把重複的部分複製粘貼改參數。

最後舉個例子，我之前買了一個H5模板研究，還是2.0版本做的案例了，裡面有超過5000個事件邏輯。據了解作者大概花了一周左右時間製作和修改，因為要實現隨機效果和記錄效果，所以事件很複雜。

但事實上，我們玩的時候並不會覺得很複雜。這個案例就是由大量重複的事件邏輯組成，也有明顯的頁面劃分和動畫效果。所以，製作這個案例時，以上四種思路方法都用到了。

首先看你是寫代碼還是利用平台工具開發，寫代碼就複雜一點，首先得有html css js基礎：

然後才是h5：

1、html5的簡介

2、HTML5的新骨架和語義化標籤

3、新的input控制項

4、placeholder屬性的詳解

5、autofocus屬性的詳解

6、datalist標籤的詳解

7、video標籤的詳解

8、audio標籤的詳解

9、css3的簡介

10、屬性選擇器的詳解

11、兒子序選擇器的詳解

12、兒子類型序選擇器的詳解

13、節點關係選擇器的詳解

h5和css3是結合使用的：

1、偽類的應用

2、偽元素的應用

3、border-radius屬性的詳解

4、box-shadow屬性的詳解

5、text-shadow屬性的詳解

6、background-origin屬性的詳解

7、background-clip屬性的詳解

8、background-size屬性的詳解

9、漸變背景的詳解

10、多背景的詳解

1、過渡的基礎知識

2、2D變形的詳解

3、@keyframes規則的詳解

4、animation屬性的詳解

5、animation屬性製作動畫的實例

6、box-sizing屬性的詳解

7、響應式布局的詳解

8、百分比布局的詳解

9、固比固模型的詳解

10、媒體查詢的詳解

看你是想做什麼類型的，如果是前端頁面開發的話，是需要學習一下HTML5開發語言。如果是想要做一個類似PPT 有音樂和動畫的那種H5微場景展示，現在有很多免費製作平台的。操作也很簡單，可以換圖，換音樂，換文字的等，小白都能用。我用過一些，覺得咫尺微頁電腦端製作不錯，初頁的手機端製作可以。希望能幫到你。

目前用Hype3。
正在研究Adobe的軟體，不知道是不是更好用。
小白推薦-&>易企秀

想要交互好專心專研CSS3+Jquery 2.0以上的版本，不要對那些什麼交互快捷工具產生很強的依賴，因為說白了。很多東西源碼寫出來的更符合自己的想法。另外拋棄IE8以下所有版本（因為這貨壓根就不支持HTML5+CSS3）~

額！前面的大神說的很好，但是有點讓像我們這樣的外行人暈，我也覺得不然就出夠錢，不然就用免費的模板，像很多這類H5的製作網站都可以免費製作，也經常看到別人有做的很不錯的，像易企秀，易速推，兔展一些的都有很多很好的模板，後期自己認真改改，推廣的效果也很不錯的。

請不要說H5

很多人問過我這個問題，而問這個問題的人基本上都是剛聽說過h5，處在懵懂的階段，他們往往會被一些網上炫酷頁面所吸引，開始的目的也很簡單，能通過自己的努力做出這些頁面，而這些頁面效果一般只要通過簡單的html和css就能實現，但這僅僅是表面現象，做出來與做好是兩碼事。而要做好它，必須要深入地去了解什麼是h5。

網上有很多說法，說h5就是html的第5個版本，其實這不完全正確，h5已經不是單純的一門標識語言，它是一門綜合的技術，除了最基本的html、css、javascript外，還能夠提供音頻視頻、圖像動畫、本地存儲以及各種重要介面，為下一代互聯網應用提供了全新平台。應該說有了h5，我們就能輕鬆實現類似桌面的應用（比如各種管理系統、手機app應用等）

h5現在為什麼受到很多企業的青睞，最關鍵的一點是跨平台，所謂的跨平台就是做出來的東西能夠適應各種瀏覽器、各種設備、各種系統（iSO、安卓等），還能適應不同屏幕大小。對於企業來說，這樣就能大大減少人力成本、時間成本等。你知道安卓開發、iOS開發現在為什麼需求直線下降？為什麼學安卓、iOS的人很難找到工作，很簡單、這部分市場被h5佔領了，而且這絕對是必然的結果。試想，一個企業開發一款app，要在安卓和iOS上都能運行，那麼就需要兩個開發團隊，人力成本上去了，後面的維護也變得沒那麼容易。h5的出現解決了企業的難題，所以現在h5開發人員的需求依然緊缺。

那麼如何學習才能成為一個合格h5開發者呢，首先需要了解我們需要學習什麼才能勝任這份工作。首先前端三板斧（html、css、javascript）,這個是必須要會的，但光這幾個還不夠，前端有句名言：「欲精一行，必先通十行」，所以還有以下這些：

1）從團隊項目的角度出發，還需要了解版本管理方面的知識

2）從效率上來說，我們需要學習一些提高工作效率的框架與工具

3）從用戶體驗的角度出發，我們還得了解用戶的使用習慣及UI界面的美化

4）從性能的角度出發，我們還得學習各種優化技巧

5）從自身的角度出發，我們還得懂得如何使用介面，如何查看文檔

其實還有很多細節的地方，所以要能做出完美的h5頁面，我們必須要學好以上知識。之前也有很多朋友問我，自學能不能學好h5，我要說的是：如果你是一個有著良好自制力和心態並且意志力堅強的人，完全沒問題，但以上三點做不到，那你就得在一個良好的環境中學習，利用身邊的人來約束自己堅持努力地去學同樣可以把h5學好。培養興趣很重要，要輕鬆愉快地學習，不要讓學習成為你的負擔。說了那麼多，希望能幫到你。

怎麼這麼多人喜歡跑題呢？牛頭不答馬嘴。人家不是問怎麼做H5?

講真，可以試下Legend。http://h5.baidu.com

—— 利益相關，部門產品。

小白用戶推薦搜狐快站，因為除了做Html5動畫，還有許多驚喜。

可能略跑題...

只要錢到位，什麼高大上效果都能搞定～

我會說某文藝網站為了優化下劃線顯示效果... 都會研究一兩個星期么

知識體系 | 元千的博客