![](/c49/33/10038552754238.jpg)
出版社:人民郵電出版社 ISBN:9787115552587 商品編碼:10038552754238 出版時間:2021-09-15 頁數:210 審圖號:9787115552587 代碼:69
" 內容介紹 隨著移動互聯網技術的日益普及和迅猛發展,“H5”這個新興名詞逐漸被更多的人認識和了解。本書從H5頁面設計與制作的角度出發,以設計案例和項目實踐相結合的方式,介紹了H5頁面設計與制作的相關知識與操作技能。全書共9章內容,分別是認識H5、認識H5的設計規範和工具、H5頁面的設計基礎、H5頁面的素材設計、H5頁面的動效設計、H5頁面的創意設計、活動運營H5頁面的設計與制作、產品推廣H5頁面的設計與制作、企業招聘H5頁面的設計與制作。各章都設有“學習引導”“項目實訓”“實戰演練”等模塊,能幫助讀者理解和掌握H5頁面設計與制作的關鍵知識,開拓讀者的設計思維,提高其實際操作能力。 目錄 D 1章 認識H5/ 1 1.1H5的基礎知識 /2 1.1.1H5是什麼 /2 1.1.2H5的類型 /3 1.1.3H5的風格 /7 1.1.4H5的優勢與不足 /8 1.1.5H5頁面設計的五大 原則/9 1.2如何學好H5設計 /10 1.2.1YX的H5設計作品應 具備的特點/10 1.2.2H5設計人員應具備的 能力/13 1.3H5的設計與制作流程 /13 1.3.1明確設計目標 /14 1.3.2內容策劃 /14 1.3.3頁面設計 /15 1.3.4交互設計 /16 1.3.5H5的生成和發布 /17 1.4項目實訓 /17 項目一旅遊推廣H5頁面素材的 搜集與制作/17 項目二邀請函H5頁面素材的 搜集與制作/18 實戰演練/19 D 2章認識H5的設計規範和工具 /20 2.1H5的設計規範 /21 2.1.1瀏覽器的選擇 /21 2.1.2H5的常用設計尺寸 /22 2.1.3H5頁面的安全區 /22 2.2素設計工具 /23 2.2.1功能強大的設計 工具——Photoshop/23 2.2.2專業的矢量圖繪制 工具——Illustrator/23 2.2.3酷炫視頻TX制作 工具——AfterEffects /24 2.2.4音效設計制作工具—— Audition/25 2.3H5的設計生成制作 工具/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.4H5的創意開發工具 /28 2.4.1專業H5工具——意派 Epub360/28 2.4.2在線編輯H5工具—— iH5/29 2.5H5的輔助設計工具 /30 2.5.1音視頻壓縮工具—— 格式工廠/30 2.5.2手機預覽設計稿—— PSPlay /31 2.5.3圖片壓縮工具—— TinyPNG/31 2.5.4二維碼生成工具—— 草料二維碼/32 2.6項目實訓 /33 項目一使用MAKA制作H5活動頁面 /33 項目二使用格式工廠將JPG格式的圖片 轉換為PNG格式/34 實戰演練/35 D3章H5頁面的設計基礎 /36 3.1H5原型圖 /37 3.1.1H5原型圖是什麼 /37 3.1.2H5原型圖應具備的 要素/39 3.2色彩 /39 3.2.1/ 認識色彩的三大 要素/39 3.2.2色彩決定情感 /41 3.2.3色彩決定氛圍 /45 3.2.4H5頁面的配色方法 /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
D4章H5頁面的素材設計 /56 4.1H5頁面的圖片設計 /57 4.1.1H5頁面圖片素材的獲取 方法/57 4.1.2H5頁面圖片的設計 原則/59 4.1.3設計案例 裁剪H5頁面的 背景圖片/61 4.1.4設計案例 調整H5頁面的 圖片色彩/63 4.1.5設計案例 繪制H5頁面的 矢量人物/66 4.1.6設計案例 優化H5頁面的 圖片效果/69 4.2H5頁面的文字設計 /73 4.2.1認識H5頁面中的文字及 字體/73 4.2.2H5頁面標題文字的設計 技巧/76 4.2.3H5頁面正文文字的設計 技巧/77 4.2.4設計案例 制作招聘H5 頁面文字/78 4.2.5設計案例 制作招聘H5 頁面長圖文字/81 4.3H5頁面的音效設計 /84 4.3.1H5頁面中音效設計的 重要性/84 4.3.2H5頁面音效素材的獲取 方法/84 4.3.3H5頁面音效的選擇與 添加注意事項/85 4.3.4設計案例 使用Audition 制作音效/86 4.4項目實訓 /88 項目一制作節氣H5頁面 /88 項目二制作搶紅包H5頁面 /89 實戰演練/ /90
D5章H5頁面的動效設計 /91 5.1H5頁面動效設計基礎 /92 5.1.1H5頁面動效的作用 /92 5.1.2H5頁面的主要動效 類型/93 5.2H5頁面的內頁動效設計 /98 5.2.1內頁動效的選擇 /98 5.2.2內頁動效的層級 /98 5.2.3設計案例 制作 紅包H5 頁面的內頁動效/98 5.3H5頁面的轉場動效 設計/102 5.3.1設計轉場動效的注意 事項/102 5.3.2設計案例 制作 紅包H5頁面的 轉場動效/102 5.4項目實訓 /105 項目一制作產品推廣H5頁面動效 /105 項目二制作招聘H5頁面動效 /106 實戰演練/ /108 D6章H5頁面的創意設計 /109 6.1H5頁面的交互創意 設計/110 6.1.1使用H5+720度全景技術 查看全景畫面/110 6.1.2使用H5+人臉識別技術讓 內容更有趣/111 6.1.3使用H5+物理引擎技術 創建虛擬SJ/112 6.1.4使用H5+重力感應 技術讓用戶的互動 體驗更強/113 6.1.5使用H5+手指跟隨技術讓 操作更生動/114 6.1.6設計案例 使用凡科微傳 單制作全景H5頁面/114 6.2H5頁面的動態創意 設計/122 6.2.1使用H5+快閃廣告提升 瀏覽體驗/122 6.2.2使用H5+粒子TX提升 視覺體驗/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 D7章綜合案例 活動運營H5頁面的設計與制作 /135 7.1宵節活動H5頁面的前期準備 /137 7.1宵節活動H5頁面設計 構思/137 7.1.2宵節活動H5頁面 原型圖/138 7.1.3宵節活動H5頁面 素材/138 7宵節活動H5頁面的 設計/139 7.2.1宵節活動 標題頁/139 7.2.2宵節活動 內容頁/42 7.2.3宵節活動 紅包頁/146 7.2.4宵節活動 介紹頁/148 7宵節活動H5頁面的動效 制作與發布/151 7.3.宵節活動H5頁面 添加動效/151 7.3.宵節活動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 1頁/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 D9章綜合案例 企業招聘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頁面1頁/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
" |