産品特色

編輯推薦

跟隨本書,學習H5場景輕設計

隨書附贈價值200元H5模闆

內容簡介

本書為H5（HTML5）初級設計人員量身定製，從H5微場景設計的基本操作著手，重點講解H5視覺及交互設計方法、原理，以及業內規範和實用小竅門；精選經典案例，引導讀者快速邁入移動互聯網高端H5新媒體的設計之路。

作者簡介

　　石丹，女。畢業於中國美術學院，藝術學碩士。上海精靈天下數字技術有限公司首席藝術指導，組織籌劃H5頁麵設計*一講堂ME學院，並作為重要的講師之一；多次被各大高校邀請授課H5微場景設計內容，專注於“互聯網+藝術”、移動端商業化藝術等領域。

內頁插圖

目錄

Chapter 1

H5微場景製作基本概念

1.1 互聯網的曆史與H5基本概念001

1.2 H5微場景應用004

1.3 H5微場景工具介紹007

1.3.1 大眾互動圖文007

1.3.2 輕度娛樂小遊戲008

1.3.3 專業動畫及遊戲製作工具008

Chapter 2

H5微場景基本操作

2.1 如何選擇網址和進行登錄009

2.2 如何選擇模闆009

2.3 如何布局頁麵010

2.4 如何添加和編輯圖片011

2.5 如何添加和編輯文本元素013

2.6 如何添加和編輯動畫014

2.7 如何添加音樂元素015

2.8 如何添加和編輯視頻元素016

2.9 如何添加和編輯交互元素017

2.10 如何添加錶單和組件018

2.11 如何預覽作品019

2.12 如何發布作品020

Chapter 3

H5微場景創作進階—成為專業的設計師

3.1 版式設計021

3.1.1 版式設計原則021

3.1.2 設計技巧：利用網格024

3.1.3 H5頁麵網格設計舉例 029

3.1.4 版式突破038

3.2 字體設計039

3.2.1 字體039

3.2.2 字號046

3.2.3 字間距048

3.2.4 行間距050

3.2.5 基本技巧051

3.3 色彩設計052

3.3.1 色彩原理052

3.3.2 色彩三要素052

3.3.3 色彩關係054

3.3.4 色彩心理055

3.3.5 色彩搭配技巧062

3.3.6 配色實用技巧067

3.4 多媒體元素應用068

3.4.1 動畫068

3.4.2 動畫類型069

3.4.3 應用原則071

3.4.4 音效074

3.4.5 工具075

3.4.6 視頻075

3.5 交互設計076

3.5.1 什麼是交互設計076

3.5.2 交互設計原理077

3.6 視覺流程設計081

3.6.1 視覺流程原理081

3.6.2 視覺流程設計類型082

3.6.3 麯綫視覺流程084

3.6.4 反復視覺流程084

3.6.5 導嚮視覺流程085

3.6.6 散構視覺流程 085

Chapter 4

H5微場景創作案例

4.1 相冊紀念087

4.1.1 森林係婚禮相冊087

4.1.2 懷舊紀念相冊088

4.1.3 木質花紋紀念相冊089

4.1.4 萌娃親子相冊090

4.2 個人簡曆091

4.2.1 唯美個人簡曆091

4.2.2 商務深色個人簡曆093

4.2.3 簡約風格個人簡曆094

4.2.4 李誌個人簡曆096

4.3 請柬賀卡098

4.3.1 中式婚禮邀請函098

4.3.2 元宵節賀卡之萬傢燈火100

4.3.3 情人節之我們102

4.3.4 聖誕老人來電賀卡104

4.3.5 一支蠟燭生日祝福賀卡106

4.4 品牌宣傳107

4.4.1 優衣庫UNIQLO107

4.4.2 投資指南109

4.4.3 企業宣傳111

4.4.4 高橋工藝112

4.4.5 芒果移動電源114

4.4.6 手可摘星辰116

4.4.7 獻給夏天最悶的人（雪碧廣告）117

4.4.7 獻給夏天最悶的人（雪碧廣告）117

4.4.8 天天愛消除120

4.4.9 豆瓣?我的精神角落122

4.4.10 孤獨實驗室125

4.4.11 杜蕾斯美術館127

4.4.12 全新BMW M2即將上市128

4.4.13 The Beetle131

4.4.14 嚮風範緻敬132

4.5 企業招聘133

4.5.1 拉鈎網招聘133

4.5.2 說！到底招還是不招135

4.6 活動推廣137

4.6.1 和古人拼智商，你敢嗎？ 137

4.6.2 這個陌生來電你敢接嗎？ 139

4.7 會展邀請140

4.7.1 灰霾展140

4.7.2 李雷個展邀請函143

4.7.3 清明上河圖145

4.7.4 平遙國際攝影大展147

4.7.5 精靈天下會展邀請149

4.8 媒體新聞151

4.8.1 ME日報151

4.8.2 紐約鞦鼕時裝周?被時尚點燃的紐約城你知多少？ 153

4.8.3 Bill Cunningham新聞155

4.8.4 《魔獸》電影定檔，為瞭部落，還是死守聯盟？ 157

4.9 旅遊美食159

4.9.1 Traveling—小地方也有愛159

4.9.2 《國傢地理》夏日美照齣爐160

4.9.3 美食工坊?一圖一文162

4.10 自媒體163

4.10.1 《近思：一封來自剋孜爾石窟的信》H5視頻163

4.10.2 近思學術自媒體165

4.10.3 曾經我也是一個愛看漫畫的小姑娘167

前言/序言

自2014年10月28日，W3C（Web技術領域最具權威和影響力的國際中立性技術標準機構，即萬維網聯盟）宣布瞭萬維網的核心語言正式標準第五版—HTML5。隨後在互聯網行業颳起瞭一陣超級鏇風,它清除瞭移動互聯網內容開發的各種技術障礙，將創造力重新釋放給所有國際互聯網開發及使用者，熱情高漲的人們隻願親切地呼其小名—H5。而在H5的王國還有一片疆域廣闊、遍地黃金的新大陸—H5微場景設計。

隨著移動時代的到來，前輩Flash因技術缺陷、安全性等問題被大傢逐漸冷落，H5猶如一匹黑馬開始霸占互聯網。H5即使遭到微信等一定程度的限製，也沒能阻擋它在社交平颱傳播的燎原之勢。如今H5雖然還不到兩歲，針對它的製作工具和微場景設計作品層齣不窮，湧現瞭各種刷爆朋友圈的H5營銷廣告和小遊戲。

為何H5具有這樣大的魔力呢？這是因為H5不隻是標記語言，它能夠輕鬆實現傳統桌麵應用的功能和體驗，並具有跨平颱性，特彆是在移動端的傳播具有不可比擬的優勢；H5的富媒體特性，也讓它在營銷、內容創作、閱讀、輕娛樂等方麵具有非常大的優勢，令人颳目相看。隨著H5製作工具如雨後春筍般地湧現，其傻瓜式的操作、模闆化的製作，降低瞭非程序員微場景交互設計製作的門檻。

H5微場景設計由於融閤瞭平麵設計、多媒體設計及交互設計等，也需要設計師具備多方麵的知識。所以對普通大眾和傳統設計師來說，對H5微場景的概念和設計方法還比較茫然。目前，市場上還沒有針對H5設計方麵全麵係統的指導書籍。因此這本從非程序設計角度，涵蓋H5微場景設計的全方位“武林秘籍”應運而生，可滿足各類人群的使用需求。

如果你對H5微場景製作很感興趣，又苦於沒有相關基礎和知識，那麼，本書中H5和互聯網基本概念是你扣開微場景設計這扇神秘大門的敲門磚。書中對字體設計、排版設計、色彩搭配、動畫設計、交互設計、視覺設計、多媒體設計等方麵的細緻講解，能為你打下H5微場景設計的堅實基礎。

如果你是傳統設計師或者自媒體人，想將你在自身領域紮實的內功功底與H5無限變化的外功招式融閤，練就由內而外的創意傳播神功，那麼這本書中包含的豐富的工具運用技巧和案例展示也為你快速掌握這門功夫提供瞭便捷；

如果你是互聯網從業者，H5案例的展示、深入、細緻地剖析能夠讓你更全麵地理解H5對互聯網帶來的衝擊，也能為你對微場景作品策劃的升華和創意提供瞭一臂之力。

本書既是為大眾普及H5概念的速成寶典，也是為傳統設計師和自媒體人實現成功的催化劑，更是資深互聯網從業者貼身、可靠的工具書，同時也是高校教材或培訓材料的絕佳選擇。

H5的技術和應用領域仍在不斷擴大，本書將助你搭上新技術的航班，騰飛於夢想的高空。未來屬於移動端的世界，同時也是H5的世界，相信這本書會是你無悔的選擇。

。。。。。。。。。。。。

這本書挺喜歡的，喜歡那種創意

說實話，不滿意，沒有免費模闆，而且書上沒有太大用，說好的200元的模闆，送的什麼呀，手機還用不瞭隻能電腦用，這本書錢不貴也沒必要退瞭，總之建議其他人買的時候慎重。

剛到，準備看

書還行，就是翻開一股怪味，好濃

豐富自己！

說實話，不滿意，沒有免費模闆，而且書上沒有太大用，說好的200元的模闆，送的什麼呀，手機還用不瞭隻能電腦用，這本書錢不貴也沒必要退瞭，總之建議其他人買的時候慎重。

很好

書很實用，但是是不是有點兒薄