H5頁面創意設計(全彩慕課版)

鄧嘉琳

  • 出版商: 人民郵電
  • 出版日期: 2021-09-01
  • 定價: $419
  • 售價: 7.0$293
  • 語言: 簡體中文
  • 頁數: 210
  • 裝訂: 平裝
  • ISBN: 7115552584
  • ISBN-13: 9787115552587
  • 相關分類: HTML使用者介面 UI網頁設計
  • 立即出貨 (庫存 < 3)

  • H5頁面創意設計(全彩慕課版)-preview-1
H5頁面創意設計(全彩慕課版)-preview-1

相關主題

商品描述

隨著移動互聯網技術的日益普及和迅猛發展,“H5”這個新興名詞逐漸被更多的人認識和瞭解。本書從H5頁面設計與製作的角度出發,以設計案例和項目實踐相結合的方式,介紹了H5頁面設計與製作的相關知識與操作技能。全書共9章內容,分別是認識H5、認識H5的設計規範和工具、H5頁面的設計基礎、H5頁面的素材設計、H5頁面的動效設計、H5頁面的創意設計、活動運營H5頁面的設計與製作、產品推廣H5頁面的設計與製作、企業招聘H5頁面的設計與製作。各章都設有“學習引導”“項目實訓”“實戰演練”等模塊,能幫助讀者理解和掌握H5頁面設計與製作的關鍵知識,開拓讀者的設計思維,提高其實際操作能力。

作者簡介

作者多年從事計算機教育工作,有著豐富的教學經驗,參與企業項目製作,有著豐富的實踐經驗,主編過多部教材,得到老師們的認可。作者專注於計算機教材以及教輔資源研發,為學校提供全套完整的教學方案。

目錄大綱

第1章 認識H5 / 1
1.1 H5的基礎知識 / 2
1.1.1 H5是什麼 / 2
1.1.2 H5的類型 / 3
1.1.3 H5的風格 / 7
1.1.4 H5的優勢與不足 / 8
1.1.5 H5頁面設計的五大原則 / 9
1.2 如何學好H5設計 / 10
1.2.1 優秀的H5設計作品應具備的特點 / 10
1.2.2 H5設計人員應具備的能力 / 13
1.3 H5的設計與製作流程 / 13
1.3.1 明確設計目標 / 14
1.3.2 內容策劃 / 14
1.3.3 頁面設計 / 15
1.3.4 交互設計 / 16
1.3.5 H5的生成和發布 / 17
1.4 項目實訓 / 17
項目一 旅遊推廣H5頁面素材的
蒐集與製作 / 17
項目二 邀請函H5頁面素材的
蒐集與製作 / 18
實戰演練 / 19

第2章 認識H5的設計規範和工具 / 20
2.1 H5的設計規範 / 21
2.1.1 瀏覽器的選擇 / 21
2.1.2 H5的常用設計尺寸 / 22
2.1.3 H5頁面的安全區 / 22
2.2 H5的元素設計工具 / 23
2.2.1 功能強大的設計工具——Photoshop / 23
2.2.2 專業的矢量圖繪製工具——Illustrator / 23
2.2.3 酷炫視頻特效製作工具——After Effects / 24
2.2.4 音效設計製作工具——Audition / 25
2.3 H5的設計生成製作工具 / 25
2.3.1 定制推廣H5製作工具——MAKA / 25
2.3.2 企業營銷H5製作工具——易企秀 / 26
2.3.3 快速製作H5工具——兔展 / 26
2.3.4 微場景H5製作工具——人人秀 / 27
2.3.5 照片故事H5製作工具——初頁 / 27
2.4 H5的創意開發工具 / 28
2.4.1 專業H5工具——意派Epub360 / 28
2.4.2 在線編輯H5工具——iH5 / 29
2.5 H5的輔助設計工具 / 30
2.5.1 音視頻壓縮工具——格式工廠 / 30
2.5.2 手機預覽設計稿——PS Play / 31
2.5.3 圖片壓縮工具——TinyPNG / 31
2.5.4 二維碼生成工具——草料二維碼 / 32
2.6 項目實訓 / 33
項目一 使用MAKA製作H5活動頁面 / 33
項目二 使用格式工廠將JPG格式的圖片轉換為PNG格式 / 34
實戰演練 / 35

第3章 H5頁面的設計基礎 / 36
3.1 H5原型圖 / 37
3.1.1 H5原型圖是什麼 / 37
3.1.2 H5原型圖應具備的要素 / 39
3.2 色彩 / 39
3.2.1 / 認識色彩的三大要素 / 39
3.2.2 色彩決定情感 / 41
3.2.3 色彩決定氛圍 / 45
3.2.4 H5頁面的配色方法 / 46
3.2.5 案例分析 “跑步App”H5頁面的色彩分析 / 47
3.3 版面 / 48
3.3.1 認識H5版麵類型 / 48
3.3.2 創建畫面焦點 / 50
3.3.3 單頁面視覺層級 / 51
3.3.4 多頁面視覺層級 / 51
3.3.5 版面設計的原則 / 52
3.3.6 案例分析 分析“2020年度店長總結”H5頁面版面佈局 / 53
3.4 項目實訓 / 54
項目一 音樂H5頁面的色彩與版面鑑賞 / 54
項目二 抽獎H5頁面的色彩與版面鑑賞 / 54
實戰演練 / 55

第4章 H5頁面的素材設計 / 56
4.1 H5頁面的圖片設計 / 57
4.1.1 H5頁面圖片素材的獲取方法 / 57
4.1.2 H5頁面圖片的設計原則 / 59
4.1.3 設計案例 裁剪H5頁面的背景圖片 / 61
4.1.4 設計案例 調整H5頁面的圖片色彩 / 63
4.1.5 設計案例 繪製H5頁面的矢量人物 / 66
4.1.6 設計案例 優化H5頁面的圖片效果 / 69
4.2 H5頁面的文字設計 / 73
4.2.1 認識H5頁面中的文字及字體 / 73
4.2.2 H5頁面標題文字的設計技巧 / 76
4.2.3 H5頁面正文文字的設計技巧 / 77
4.2.4 設計案例 製作招聘H5頁面文字 / 78
4.2.5 設計案例 製作招聘H5頁面長圖文字 / 81
4.3 H5頁面的音效設計 / 84
4.3.1 H5頁面中音效設計的重要性 / 84
4.3.2 H5頁面音效素材的獲取方法 / 84
4.3.3 H5頁面音效的選擇與添加註意事項 / 85
4.3.4 設計案例 使用Audition製作音效 / 86
4.4 項目實訓 / 88
項目一 製作節氣H5頁面 / 88
項目二 製作搶紅包H5頁面 / 89
實戰演練 / /90

第5章 H5頁面的動效設計 / 91
5.1 H5頁面動效設計基礎 / 92
5.1.1 H5頁面動效的作用 / 92
5.1.2 H5頁面的主要動效類型 / 93
5.2 H5頁面的內頁動效設計 / 98
5.2.1 內頁動效的選擇 / 98
5.2.2 內頁動效的層級 / 98
5.2.3 設計案例 製作微信紅包H5頁面的內頁動效 / 98
5.3 H5頁面的轉場動效設計 / 102
5.3.1 設計轉場動效的注意事項 / 102
5.3.2 設計案例 製作微信紅包H5頁面的轉場動效 / 102
5.4 項目實訓 / 105
項目一 製作產品推廣H5頁面動效 / 105
項目二 製作招聘H5頁面動效 / 106
實戰演練 / /108

第6章 H5頁面的創意設計 / 109
6.1 H5頁面的交互創意設計 / 110
6.1.1 使用H5+720度全景技術查看全景畫面 / 110
6.1.2 使用H5+人臉識別技術讓內容更有趣 / 111
6.1.3 使用H5+物理引擎技術創建虛擬世界 / 112
6.1.4 使用H5+重力感應技術讓用戶的互動體驗更強 / 113
6.1.5 使用H5+手指跟隨技術讓操作更生動 / 114
6.1.6 設計案例 使用凡科微傳單製作全景H5頁面 / 114
6.2 H5頁面的動態創意設計 / 122
6.2.1 使用H5+快閃廣告提升瀏覽體驗 / 122
6.2.2 使用H5+粒子特效提升視覺體驗 / 124
6.2.3 使用H5+視頻提升內容的展現效果 / 124
6.2.4 使用H5+多屏互動提升營銷的娛樂性 / 125
6.2.5 使用H5+GIF動畫讓畫面更生動 / 126
6.2.6 設計案例 製作快閃廣告H5頁面 / 127
6.3 項目實訓 製作元旦GIF
動畫 / 132
實戰演練 / /133

第7章 綜合案例 活動運營H5頁面的設計與製作 / 135
7.1 製作元宵節活動H5頁面的前期準備 / 137
7.1.1 元宵節活動H5頁面設計構思 / 137
7.1.2 繪製元宵節活動H5頁面原型圖 / 138
7.1.3 蒐集元宵節活動H5頁面素材 / 138
7.2 元宵節活動H5頁面的設計 / 139
7.2.1 設計元宵節活動標題頁 / 139
7.2.2 設計元宵節活動內容頁 / 42
7.2.3 設計元宵節活動紅包頁 / 146
7.2.4 設計元宵節活動介紹頁 / 148
7.3 元宵節活動H5頁面的動效製作與發布 / 151
7.3.1 為元宵節活動H5頁面添加動效 / 151
7.3.2 為元宵節活動H5頁面添加音效 / 157
7.3.3 / 發布元宵節活動H5頁面 / 158
7.4 項目實訓 / 159
項目一 製作會議邀請函H5頁面 / 159
項目二 製作會議邀請函H5頁面動效 / 160
實戰演練 / /162

8.1 製作產品推廣H5頁面的前期準備 / 165
8.1.1 產品推廣H5頁面設計構思 / 165
8.1.2 繪製產品推廣H5頁面原型圖 / 166
8.1.3 蒐集產品推廣H5頁面素材 / 167
8.2 產品推廣H5頁面的設計 / 168
8.2.1 設計產品推廣H5首頁 / 168
8.2.2 設計產品推廣H5內頁 / 170
8.2.3 設計產品推廣H5尾頁 / 172
8.3 產品推廣H5頁面的動效製作與發布 / 174
8.3.1 為產品推廣H5頁面添加動效 / 174
8.3.2 為產品推廣H5頁面添加音效 / 179
8.3.3 發布產品推廣H5頁面 / 180
8.4 項目實訓 / 181
項目一 製作紅酒推廣H5頁面 / 182
項目二 製作紅酒推廣H5頁面動效 / 183
實戰演練 / /186

第9章 綜合案例 企業招聘H5頁面的設計與製作 / 187
9.1 製作企業招聘H5頁面的前期準備 / 189
9.1.1 / 企業招聘H5頁面設計構思 / 189
9.1.2 繪製企業招聘H5頁面原型圖 / 190
9.1.3 整理招聘內容並蒐集素材 / 191
9.2 企業招聘H5頁面的設計 / 192
9.2.1 導入企業招聘H5頁面素材 / 192
9.2.2 設計一鏡到底企業招聘H5頁面首頁 / 193
9.2.3 設計企業招聘H5頁面內頁 / 195
9.3 企業招聘H5頁面的動效製作與發布 / 202
9.3.1 為企業招聘H5頁面添加動效 / 202
9.3.2 為企業招聘H5頁面添加音效 / 205
9.3.3 / 發布企業招聘H5頁面 / 206
9.4 項目實訓 製作招聘簡章H5頁面 / 207
實戰演練 / /210