随着时代的发展,互联网视觉设计技术和设计趋势在不断发生变化。本书从互联网的 角度出发,以设计理论和项目实践相结合的方式,介绍了互联网视觉设计的相关知识与操作技能。本书共包括10章,主要内容包括初识互联网视觉设计、互联网视觉设计的基本原则、互联网视觉设计的基本要素、电商视觉设计、微信公众号视觉设计、H5视觉设计、网站页面视觉设计、活动广告页面视觉设计、短视频视觉设计、综合案例—家居类品牌视觉设计。在学习过程中,读者可通过每章的项目,训练设计思维和实际操作力,进而理解和掌握互联网视觉设计中的关键知识。

第 1章 初识互联网视觉设计 / 1 1.1 互联网视觉设计概述 / 2 1.1.1 什么是互联网视觉设计 / 2 1.1.2 视觉设计在互联网中的体现 / 2 1.1.3 互联网视觉设计未来的发展趋势 / 3 1.2 互联网视觉设计前的准备工作 / 3 1.2.1 了解目标消费者的心理 / 3 1.2.2 分析品牌并收集素材 / 6 1.2.3 明确视觉定位 / 7 1.2.4 布局视觉页面 / 7 1.3 互联网视觉设计思维 / 8 1.3.1 设计思维 / 8 1.3.2 运营思维 / 8 1.3.3 营销思维 / 9 1.4 学好互联网视觉设计应具备的能力 / 9 1.4.1 创造能力 / 9 1.4.2 审美能力 / 9 1.4.3 软件操作能力 / 10 1.4.4 营销文案写作能力 / 10 项目一 运用互联网设计思维分析海报页面 /10 项目二 规划网店活动页面布局 /12 思考与练习 /13 第 2章 互联网视觉设计的基本原则 / 14 2.1 对比原则 / 15 2.1.1 色彩对比 / 15 2.1.2 图文对比 / 17 2.1.3 方向对比 / 18 2.1.4 大小对比 / 18 2.2 重复原则 / 19 2.2.1 重复原则的准则 / 19 2.2.2 重复原则的运用 / 19 2.3 平衡原则 / 21 2.3.1 对称平衡 / 21 2.3.2 非对称平衡 / 21 2.4 节奏与韵律原则 / 22 2.4.1 节奏与韵律原则的概念 / 22 2.4.2 节奏与韵律原则的运用 / 22 项目一 分析网站中视觉设计的基本原则 / 23 项目二 中秋节Banner视觉设计 / 24 思考与练习 / 27 第3章 互联网视觉设计的基本要素 / 28 3.1 色彩 / 29 3.1.1 色彩的属性 / 29 3.1.2 色彩的搭配 / 31 3.1.3 色彩的组合 / 32 3.1.4 色彩的聚焦 / 32 3.2 文字 / 33 3.2.1 文字的字体 / 33 3.2.2 文字的对比 / 33 3.2.3 文字的排版 / 34 3.3 图片 / 35 3.3.1 图片的基本要求 / 35 3.3.2 图片的简单处理 / 36 3.3.3 GIF动图的制作 / 37 3.4 构图 / 38 3.4.1 切割构图法 / 38 3.4.2 韵律构图法 / 38 3.4.3 平衡构图法 / 38 3.4.4 放射构图法 / 38 3.4.5 流程构图法 / 39 3.4.6 物体轮廓构图法 / 39 项目一 规划茶叶海报页面 / 40 项目二 规划“11.11”活动页面 / 41 思考与练习 / 43 第4章 电商视觉设计 / 44 4.1 电商视觉设计的原则 / 45 4.1.1 功能性原则 / 45 4.1.2 可视性原则 / 46 4.1.3 统一性原则 / 47 4.2 网店页面视觉设计 / 47 4.2.1 网店页面的素材准备 / 48 4.2.2 网店页面的视觉定位 / 49 4.2.3 网店图片设计规范 / 50 4.2.4 网店页面视觉设计的基本要求 / 51 4.3 网店首页视觉设计 / 52 4.3.1 网店首页视觉设计要点 / 52 4.3.2 店招模块视觉设计 / 53 4.3.3 首页焦点图模块视觉设计 / 54 4.3.4 优惠券模块视觉设计 / 54 4.3.5 分类导航模块视觉设计 / 55 4.3.6 活动展示模块视觉设计 / 55 4.4 商品详情页视觉设计 / 56 4.4.1 商品详情页的制作规范 / 56 4.4.2 商品详情页的内容安排 / 56 4.4.3 商品详情页视觉设计案例分析 / 57 项目一 食品类网店首页视觉设计 / 58 项目二 坚果商品详情页视觉设计 / 65 思考与练习 / 71 第5章 微信公众号视觉设计 / 72 5.1 了解微信公众号 / 73 5.1.1 微信公众号的类型 / 73 5.1.2 微信公众号的功能 / 76 5.1.3 微信公众号的设置 / 76 5.1.4 微信公众号的视觉设计元素 / 79 5.2 微信公众号的视觉设计流程 / 80 5.2.1 分析消费者需求 / 80 5.2.2 分析竞争对手 / 82 5.2.3 确定设计风格 / 82 5.2.4 完成设计草案 / 82 5.3 微信公众号各版块视觉设计 / 83 5.3.1 公众号封面视觉设计 / 83 5.3.2 公众号Banner视觉设计 / 83 5.3.3 公众号广告视觉设计 / 84 5.3.4 公众号**视觉设计 / 85 5.3.5 公众号求关注视觉设计 / 85 项目 “食味坊”微信公众号页面设计 / 86 思考与练习 / 92 第6章 H5视觉设计 / 93 6.1 H5概述 / 94 6.1.1 什么是H5 / 94 6.1.2 H5的类型 / 95 6.1.3 制作H5的常用工具 / 98 6.2 H5视觉设计的基本流程 / 99 6.2.1 做好前期准备 / 99 6.2.2 绘制H5原型图 / 99 6.2.3 设计H5界面 / 100 6.2.4 利用工具制作H5 / 100 6.2.5 分享与发布H5 / 101 6.3 H5视觉设计要点 / 102 6.3.1 创新创意 / 102 6.3.2 统一风格 / 102 6.3.3 注重氛围 / 103 6.3.4 强调真实的用户体验 / 104 6.4 H5视觉设计分析 / 104 6.4.1 版式设计分析 / 104 6.4.2 交互设计分析 / 104 6.4.3 活动设计分析 / 105 6.4.4 动效设计分析 / 106 6.4.5 音效设计分析 / 107 项目 促销活动H5视觉设计 / 107 思考与练习 / 117 第7章 网站页面视觉设计 / 118 7.1 了解网站页面视觉设计 / 119 7.1.1 网站页面的视觉构成元素 / 120 7.1.2 网站页面的视觉设计特点 / 122 7.1.3 网站页面的视觉设计原则 / 124 7.2 网站页面布局与视觉风格 / 126 7.2.1 网站页面布局的常见方式 / 126 7.2.2 网站页面布局形态 / 128 7.2.3 常见的网站页面视觉设计风格 / 129 7.3 网站页面的视觉设计流程 / 132 7.3.1 需求分析 / 132 7.3.2 制作原型图 / 132 7.3.3 确定网站页面的风格与规范 / 133 7.3.4 制作网站页面 / 133 7.3.5 网站页面切片 / 134 项目 设计旅游网站首页页面 / 134 思考与练习 / 141 第8章 活动广告页面视觉设计 / 142 8.1 明确活动广告的目的 / 143 8.1.1 拉新 / 143 8.1.2 留存 / 144 8.1.3 扩大品牌知名度 / 144 8.1.4 清理库存 / 145 8.2 活动广告页面的设计原则 / 146 8.2.1 主题突出 / 146 8.2.2 风格统一 / 146 8.2.3 目标明确 / 147 8.3 活动广告页面的设计要求 / 148 8.3.1 明确活动主题风格 / 148 8.3.2 合理搭配色彩 / 149 8.3.3 合理搭配点缀物 / 151 8.3.4 营造促销氛围 / 151 项目一 分析“中秋节”活动广告页面 / 153 项目二 “化妆品节”活动广告页面视觉设计 / 155 思考与练习 / 159 第9章 短视频视觉设计 / 161 9.1 认识短视频 / 162 9.1.1 短视频的特点 / 162 9.1.2 短视频的发展趋势 / 163 9.1.3 短视频的主要类型 / 163 9.2 短视频的视觉设计流程 / 165 9.2.1 前期准备 / 165 9.2.2 拍摄短视频 / 166 9.2.3 后期制作 / 166 9.3 短视频的拍摄 / 166 9.3.1 短视频拍摄的主流平台 / 166 9.3.2 短视频拍摄的要点 / 167 9.3.3 短视频拍摄的构图 / 168 9.4 短视频的后期处理 / 169 9.4.1 短视频后期处理的主流平台 / 170 9.4.2 为短视频添加字幕 / 170 9.4.3 为短视频添加** / 171 9.4.4 为短视频添加贴纸 / 172 9.4.5 为短视频添加音乐 / 172 9.4.6 为短视频添加滤镜 / 173 9.4.7 为短视频添加转场 / 173 项目一 拍摄水果类短视频 / 174 项目二 水果类短视频的后期处理 / 176 思考与练习 / 180 第 10章 综合案例——家居类品牌视觉设计 / 181 10.1 案例分析 / 182 10.1.1 分析需求 / 182 10.1.2 确定风格与方向 / 183 10.2 设计移动端网店首页页面 / 183 10.2.1 前期策划 / 184 10.2.2 家居类移动端网店首页设计 / 184 10.3 设计商品详情页 / 188 10.3.1 前期策划 / 188 10.3.2 沙发商品详情页设计 / 189 10.4 设计网站首页页面 / 192 10.4.1 前期策划 / 192 10.4.2 网站首页页面设计 / 194 10.5 设计品牌活动宣传页面 / 197 10.5.1 前期策划 / 197 10.5.2 微信公众号页面视觉设计 / 198 10.5.3 H5活动页面视觉设计 / 202 10.5.4 网页活动广告页面视觉设计 / 205 10.6 拍摄与处理家居短视频 / 206 10.6.1 前期策划 / 206 10.6.2 家居短视频的拍摄 / 207 10.6.3 家居短视频的后期处理 / 208