产品特色

编辑推荐

跟随本书,学习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的世界，相信这本书会是你无悔的选择。

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

刚到，准备看

可以的。

刚到，准备看

农民个哦而起兔兔破坏我咋睡着

粗粗看了一下，离想要的有差距 。

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

丰富自己！

书很实用，但是是不是有点儿薄