網易H5團隊收藏的23個網站首度公開

本文系網易沸點工作室《網易H5》欄目（公眾號：wangyih5）出品，每天更新。（網易H5原創）

從朋友圈獲取H5信息是外行的手段，業內人士在做H5時，會從設計類、動效類製作網站獲取幫助。

瀏覽網站不僅是為了學習國內外的H5設計手法，也是為了擴寬眼界，激發創作靈感。

做H5都要學習哪些網站？究竟有哪些網站值得你收藏？網易噠噠H5團隊收藏的23個網站，首度公開（網站連結獲取見評論區）。

H5案例匯總網站

1.網易噠噠

這個是網易噠噠團隊的官方網站，噠噠的全部H5作品都可以在網站上看到。如果想要學習爆款收割機的網易H5，這個網站一定要收藏。

網易噠噠

2.哇呸H5

這個網站對H5的行業、特效、風格、色彩等等進行細分，查找分類標籤就可以輕鬆找到H5案例。

網站還提供H5的製作團隊和工具信息，可以直接外鏈到H5製作網站。

在設計導航欄目，哇呸提供設計網站、圖片素材網站，設計師可以直接點擊進入。

哇呸H5

3.H5案例分享

這個網站提供大量的H5案例，每個案例都配有具體的分析，從創意、策劃、設計、體驗多個方面研究H5的亮點。

每個案例還配有二維碼和內頁截圖，不用掃碼也可以知道H5具體在講什麼。

H5案例分享

4.FWA

FWA是國外網站，這裡提供大量的國外H5案例，包括日、韓、美各個國家。

經典的黑白插畫風格的H5《The Boat》可以在FWA上觀看。

國外的H5更重視畫面內容創意，交互形式反而較弱。區別於國內，國外的優秀的視覺設計是國內H5很少做到的。

國外常常採用大量的插畫、鮮豔的色彩，每一幅圖片都精美無比。

我們之前的文章《國外H5「真面目」，有什麼值得學》對國外H5進行過分析。

FWA

圖片設計類網站

1.千圖網

千圖網為設計師提供800多萬張素材，擁有矢量圖、psd源文件、圖片素材等等主流素材下載服務。

千圖網是一個收費網站，如果需要下載大量素材還需要購買會員。

千圖網

2.千庫網

這個網站和千圖網類型差不多，都是設計師的素材庫。

千庫網擁有500萬優質PNG免扣元素，還提供大量的背景和模板素材。

簡單的海報、易拉寶設計都可以從千庫網獲取素材。

千庫網

3.123RF

123RF每日更新正版優質照片、矢量圖和視頻三類素材，用戶可以按照解析度、FPS仔細篩選素材。

攝影作品是其他平臺沒有的部分，如果H5需要穿插動圖，可以從這個網站上購買試用。

123RF

4.花瓣

花瓣網是一個基於興趣的社交分享網站，也是一個設計師找靈感的地方

用戶可以把喜歡的圖片採集到個人畫板中，每個畫板都可以有用戶自行定義分類。

畫板可以直觀的表現用戶的品味、愛好，用戶可以採集其他用戶畫板中的圖片，進行簡單互動。

花瓣

5.站酷

站酷網聚集了大量的中國設計師、藝術院校生、原創藝術家等等，用戶可以在站酷網上進行原創設計交流。

溝通是最能迸發靈感的方法，只是默默觀賞並不能很好的理解創意作品，站酷網為用戶提供了這個平臺，H5設計師可以在站酷網上尋找靈感。

「同城」「生活圈」等欄目讓設計師感到十分親切，關注、私信等功能讓這個網站極具社交性。

站酷

6.Behance

Behance提供給創意人士展示作品和觀摩作品的平臺，它匯聚了設計、攝影、廣告等多個領域內容，吸引許多設計師入駐。

國內的用戶進入Behance需要翻牆，儘管操作複雜了些，這個網站還是值得收藏的。

Behance

7.CSSDesignAwards

CSS設計獎，網站的設計者可以選出一個獎項的提名者，獎項設計十分有趣。

每天都有大量的創意在這個網站中閃現，用戶瀏覽其他設計師的作品會迸發無數靈感，創造屬於自己的作品。

CSSDesignAwards

8.Dribbble

Dribbble是尋找和展示作品的聚集地，是專業設計人士的家。

許多設計師為了獲取創作靈感，回來這個網站與其他設計師切磋靈感。

Dribbble

9.Pinterest

Pinterest上的作品有很多來源於Pintrest。

網站覆蓋範圍廣，可以按照顏色分類搜索作品。如果H5整體畫面風格已定，需要圖片充實，不如從這裡來找找看。

Pinterest

10.deviantart

deviantart是一個為藝術家展示各自作品、並交流討論而設計的社交網路服務網站。

它的欄目可以分為個人日誌、新聞、論壇、作品等等，可以評論交流進行社交活動。

deviantart

視頻素材網站

1.VJshi

VJshi提供AE、PR、會聲會影等視頻製作模板，包括數字開頭、實拍視頻，十分實用。

VJshi

2.Vimeo

Vimeo是美國非常流行的原創視頻分享平臺，這裡分享的視頻都經過精心拍攝剪輯，不同於類型繁多的YouTube。

在Vimeo上，上傳視頻質量不會被壓縮，許多視頻都支持下載。

唯一遺憾的是，這個外網需要翻牆才能進入。但是Vimeo有專屬的APP，在國內APP store就可以下到。

Vimeo

3.cartoonnetwork

卡通網站是玩免費遊戲和看兒童電視節目的最佳場所。

想要讓用戶玩起來，就要找到有趣的點，卡通人物和動畫最能勾起用戶的童趣。

參考這個網站，用孩子的眼光看問題，找到不同的切入角度。

cartoonnetwork

4.Youtube

不用多說，這個網站似乎不是什麼秘密了，什麼都有。

Youtube上的視頻涉及文化、歷史、美食、音樂各個方面。沒靈感就去刷刷Youtube，總會讓你看得停不下來。

Youtube

音效/動效設計網站

1.愛給

圖片和視頻的視覺元素已經足夠多了，H5的音效也要被重視。

現代科技感十足的H5配合節奏稍快的背景音樂更合適，但是H5配了個柔美的古風小曲，這種反差可玩不起來。

互動設計中的音效必不可少，愛給網提供音效、配樂，還提供教程和配套插件，十分方便用戶使用。

愛給

2.Freesound

Freesound具有超過400,000個聲音和效果，從現場錄音到合成效果，素材庫裡包含了所有你想聽到的聲音，H5可以從網站找到合適的配樂。

Freesound

3.Form Follows Function

這個網站提供用戶一系列引人入勝的互動體驗，每種體驗都有獨特的設計和功能。

每個色彩代表一種互動設計，這些設計組成一個轉盤，滑鼠滑動即可切換效果，點開即可體驗。

Form Follows Function

信息獲取類

1.數英網

數英網以分享新媒體諮詢為主，主打財經、娛樂、體育等二十多個欄目。

數英王提供及時、準確的新聞諮詢，用戶可以在這裡獲得網際網路相關的業內信息。

數英網

2.知乎「H5廣告」和「H5」話題

知乎這個問答勝地，總能解決你的疑問。

這裡可以與入駐的行內大咖進行交流，邀請名人回答問題。

知乎

策劃在前，製作在後，兩者都很重要。

找素材是策劃H5的一部分，優秀的設計離不開的炫酷的元素。

靈感就像煙花一樣，點燃才會開花。你不點，永遠只是一個空無用處的擺設。

如果靈感枯竭了，不如去設計網站看一看，和大師切磋一下作品。

網站收藏了不等於H5做好了，有目的地利用這些網站，才是正確的做法。

ps.想要獲取以上網站連結，請在網易H5（ID：wangyih5）微信公眾號對話框，後臺回復關鍵詞「案例」即可獲得。

創意方法、選題策略、互動設計、文案秘籍……搜索關注網易H5微信公眾號，（ID：wangyih5），分享你想要的知識。