《创意UI：Photoshop玩转移动UI新媒体广告设计》素材,效果

编辑推荐

结构完整：针对移动UI设计人员，本书涵盖了UI设计各个方面的内容，如布局、交互、字体以及图标等，深入浅出，简单易学，让读者一看就懂！
内容全面：本书内容全面，加入了各种紧扣移动市场热点的专题实战内容，如字体设计、图标设计、微信UI、小程序UI、H5场景UI以及新媒体UI等，实用性强。
案例丰富：20多个移动UI实战案例精讲，主张创意性与实用性训练。同时，书中的技能实例附带高清教学视频，重现书中所有操作，让读者高效习。
全程图解：本书全程图解剖析，共计1000多张精美图片，同时版式美观大方、新鲜时尚，利用图示标注对重点知识进行说明，方便读者学习和参考。

内容简介

本书讲解如何使用Photoshop进行移动UI新媒体设计。全书共12章，包括开启移动UI设计之门、布局原则、视觉交互、元素设计、字体设计、图标设计、App设计、游戏UI设计、微信UI设计、小程序UI设计、H5场景UI设计、新媒体UI设计等内容，让读者学后可以融会贯通、举一反三，制作出更多更加精彩、完美的移动UI效果。
随书附赠全部案例的素材文件、效果文件，以及在线教学视频。同时，提供3本Photoshop手册，帮助读者快速掌握Photoshop软件的相关使用技巧。
本书适合Photoshop UI设计的爱好者，特别是手机App设计人员、游戏界面UI设计人员、新媒体广告设计人员等阅读，同时本书也可以作为UI设计相关的培训机构或中职中专、高职高专等院校的辅导教材。

目录

• 创意UI Photoshop
• 玩转移动UI新媒体广告设计
• n
• 第 1章 精工细作：开启移动UI设计之门 9
• 1．1 新手入门：零基础小白入门移动UI设计 10
• 1．1．1 认识移动UI设计 10
• 1．1．2 移动UI界面设计规范 11
• 1．1．3 移动UI设计的个性化 11
• 1．2 制作工具：移动UI设计常用的软件 12
• 1．2．1 Photoshop：功能强大的图像处理工具 12
• 1．2．2 Illustrator：工业标准矢量插画的软件 13
• 1．2．3 CorelDRAW：矢量图形制作工具软件 13
• 1．3 图像格式：移动UI设计常用的图像类型 14
• 1．3．1 JPEG格式：很灵活的格式 14
• 1．3．2 PNG格式：便携式网络图形 14
• 1．3．3 GIF格式：最简单的动画 14
• 1．3．4 了解有损压缩与无损压缩 14
• 1．4 设计规范：了解移动设备的尺寸标准 14
• 1．4．1 iPhone的界面和图标尺寸 15
• 1．4．2 iPad的界面和图标尺寸 15
• 1．4．3 Android的界面和图标尺寸 16
• 1．5 系统学习：移动UI设计的基本原则 17
• 1．5．1 设计风格体现UI功能 17
• 1．5．2 移动产品的UI要统一 19
• 1．5．3 UI设计符合用户习惯 19
• 1．5．4 UI提供实用内容 20
• 1．5．5 UI的层次感清晰 21
• 1．5．6 考虑用户的网络环境 21
• 1．5．7 添加合适的用户指引 22
• 第 2章 布局原则：带来舒服的视觉效果 23
• 2．1 常见布局：简单的移动UI排列布局形式 24
• 2．1．1 竖排列表布局 24
• 2．1．2 横排方块布局 24
• 2．1．3 九宫格布局 25
• 2．1．4 六宫格布局 26
• 2．1．5 大图展示布局 26
• 2．2 信息布局：完美地呈现移动UI中的信息 27
• 2．2．1 热门标签布局 27
• 2．2．2 走马灯式布局 27
• 2．2．3 磁贴设计布局 28
• 2．2．4 图示式布局 28
• 2．2．5 幻灯片式布局 29
• 2．2．6 数据图表布局 29
• 2．3 菜单布局：保证UI布局和体验的一致性 30
• 2．3．1 弹出框布局 30
• 2．3．2 抽屉式布局 31
• 2．3．3 陈列馆式布局 32
• 2．3．4 分段菜单式布局 33
• 2．3．5 点聚式布局 34
• 2．3．6 底部导航栏布局 34
• 2．3．7 超级菜单式布局 35
• 2．3．8 选项卡式布局 35
• 2．4布局模式：常用的响应式移动UI模式 36
• 2．4．1 固定布局：固定使用一种布局 36
• 2．4．2 流线布局：相对拉伸内容元素 37
• 2．4．3 等比缩放：相对位置等比缩放 37
• 2．4．4 拓展布局：根据屏幕大小显示 38
• 2．4．5 分栏布局：改变界面布局结构 38
• 2．4．6 流动布局：改变界面元素位置 38
• 2．5 布局优化：打造友好的UI用户界面 39
• 2．5．1 完善细节设计 39
• 2．5．2 图片瀑布流聚焦用户 40
• 2．5．3 妙用圆形与多边形 41
• 2．5．4 用通栏图片作为背景 41
• 2．5．5 移动UI的布局原则 42
• n
• 第3章 视觉交互：打造理想的用户体验 45
• 3．1 视觉设计：让移动UI更加出色 46
• 3．1．1 色彩是重要的视觉因素 46
• 3．1．2 使用半透明的图案效果 46
• 3．1．3 美观是设计的首要要求 47
• 3．1．4 要把握好实用性的要点 47
• 3．1．5 高品质图片呈现出美感 48
• 3．1．6 图片不要随意进行拉伸 49
• 3．1．7 对UI中的图片进行美化 50
• 3．2 交互设计：进一步提升人机交流体验 51
• 3．2．1 常见的UI手势交互操作 51
• 3．2．2 增加真实感的循环动作 51
• 3．2．3 重复运用提高工作效率 52
• 3．2．4 关键动作制作动画特效 53
• 3．2．5 连续动作描述运动轨迹 53
• 3．2．6 为App操作中断做设计 54
• 3．2．7 夸张的想象力和创造力 54
• 3．3 反馈形式：用户反馈功能的UI设计 55
• 3．3．1 气泡状提示 55
• 3．3．2 弹出框提示 56
• 3．3．3 按钮的反馈 56
• 3．3．4 声音的反馈 57
• 3．3．5 震动的反馈 57
• 3．3．6 动画的反馈 57
• 3．3．7 反馈的位置 58
• n
• 第4章 元素设计：创造精美的界面元素 61
• 4．1 组件解析：移动UI中的基本元素 62
• 4．1．1 常规按钮元素 62
• 4．1．2 编辑输入框元素 62
• 4．1．3 开关按钮元素 63
• 4．1．4 网格式浏览元素 63
• 4．1．5 文本标签元素 64
• 4．1．6 警告框元素 64
• 4．1．7 导航栏元素 65
• 4．1．8 页面切换元素 65
• 4．1．9 进度条元素 65
• 4．2 设计要点：“简练但不简略”的规划原则 66
• 4．2．1 好看的ico图标更吸引人 66
• 4．2．2 简约的UI更受青睐 66
• 4．2．3 分区和分组UI中的元素 67
• 4．2．4 换位思考解决用户问题 67
• 4．2．5 加入感情呈现出人性化 68
• 4．2．6 做好UI的内容“装修” 68
• 4．2．7 登录界面做好用户引导 69
• 4．2．8 UI基本元素的设计技巧 71
• 4．3 元素实战：掌握常见UI元素的设计方法 75
• 4．3．1 下单按钮设计 75
• 4．3．2 简洁进度条设计 78
• 4．3．3 开关按钮设计 81
• n
• 第5章 字体设计：用户为王的设计理念 83
• 5．1 字体解析：字体在移动UI中的应用 84
• 5．1．1 汉字的应用 84
• 5．1．2 字母的应用 84
• 5．1．3 数字的应用 85
• 5．1．4 符号的应用 85
• 5．2 文字设计：文字如何实现完美UI 86
• 5．2．1 保证字形设计的正确 86
• 5．2．2 采用统一的文字风格 86
• 5．2．3 注重文字内容和精神 87
• 5．2．4 文字内容要易于识别 87
• 5．2．5 文字的层次感要强烈 88
• 5．2．6 清晰地表达文字信息 89
• 5．2．7 把握好文字之间的间距 90
• 5．2．8 适当设置文字的色彩 91
• 5．3 字体实战：掌握UI文字的设计方法 92
• 5．3．1 共享单车小程序文字设计 92
• 5．3．2 《青蛙旅行》游戏App文字设计 94
• 5．3．3 《今天头条》资讯App文字设计 96
• 第6章 图标设计：展现无限的创意火花 98
• 6．1 UI图标：移动UI图标最全设计技法 99
• 6．1．1 选取有代表性的独立中文字体 99
• 6．1．2 使用英文、数字和特殊符号 101
• 6．1．3 提炼有特色的图形作为图标 103
• 6．1．4 运用游戏元素作为移动图标 104
• 6．1．5 使用不同色彩进行组合设计 105
• 6．1．6 移动UI图标的版式设计方法 106
• 6．2 App图标：第三方应用图标的设计实战 107
• 6．2．1 卡通图标设计 107
• 6．2．2 符号图标设计 111
• 6．2．3 拟物化图标设计 114
• 6．3 系统图标：系统自带图标的设计实战 116
• 6．3．1 日历图标设计 116
• 6．3．2 邮箱图标设计 118
• 6．3．3 电话图标设计 119
• n
• 第7章 App设计：带你领略移动UI的魅力 123
• 7．1 设计基础：了解手机App UI设计 124
• 7．1．1 熟悉App的基本概念 124
• 7．1．2 了解App的主要类别 124
• 7．1．3 App的草图设计方法 125
• 7．1．4 App的基本界面构成 126
• 7．1．5 App设计的用户体验 127
• 7．2 设计技巧：完整的App UI设计流程 128
• 7．2．1 流程1：需求目的 128
• 7．2．2 流程2：分析设计 128
• 7．2．3 流程3：调研验证 128
• 7．2．4 流程4：方案改进 129
• 7．2．5 流程5：用户反馈 129
• 7．3 登录界面：漂亮的注册和登录页设计 130
• 7．3．1 设计登录界面背景效果 130
• 7．3．2 设计登录界面主体效果 131
• 7．3．3 设计登录界面整体效果 134
• 7．4 交互界面：体现移动App的特色功能 135
• 7．4．1 设计交互界面背景效果 136
• 7．4．2 设计交互界面整体效果 140
• n
• 第8章 游戏UI：设计精美流畅的游戏界面 144
• 8．1 游戏UI：手机游戏App中的人机交互 145
• 8．1．1 了解什么是移动游戏UI设计 145
• 8．1．2 游戏UI设计必需的常用工具 146
• 8．1．3 移动游戏UI的角色设计 146
• 8．1．4 移动游戏UI的场景设计 147
• 8．1．5 移动游戏UI的色彩设计 150
• 8．2 休闲益智：掌握休闲类游戏App界面的
• 设计 151
• 8．2．1 设计休闲类游戏背景效果 152
• 8．2．2 设计休闲类游戏按钮效果 153
• 8．2．3 设计休闲类游戏标题效果 156
• 8．3 对战手游：掌握射击类游戏App界面的
• 设计 158
• 8．3．1 设计射击类游戏背景效果 158
• 8．3．2 设计射击类游戏文字效果 160
• 8．3．3 设计射击类游戏按钮效果 161
• n
• 第9章 微信UI：打造简单高效的交互界面 164
• 9．1 公众号：了解微信公众号交互设计 165
• 9．1．1 公众号头像图标设计 165
• 9．1．2 自动回复交互设计 165
• 9．1．3 信息反馈交互设计 166
• 9．1．4 底部菜单交互设计 167
• 9．1．5 公众号图文广告设计 168
• 9．2 朋友圈：了解微信朋友圈交互设计 169
• 9．2．1 朋友圈的界面特色 169
• 9．2．2 朋友圈的功能结构 171
• 9．2．3 朋友圈的设计要点 172
• 9．3 引发关注：微信朋友圈相册封面设计 174
• 9．3．1 设计朋友圈封面背景效果 174
• 9．3．2 设计朋友圈封面主体效果 176
• 9．3．3 设计朋友圈封面文字效果 178
• 9．4 吸引眼球：微信公众号封面广告设计 179
• 9．4．1 设计公众号封面广告背景效果 180
• 9．4．2 设计公众号封面广告主体效果 180
• 9．4．3 设计公众号封面广告整体效果 182
• n
• 第 10章 小程序UI：创造真正的品牌价值 184
• 10．1 小程序UI：打造“爆款”小程序的设计规则 185
• 10．1．1 界面元素设计保持一致 185
• 10．1．2 功能设计满足用户需求 185
• 10．1．3 头像设计要体现特色 186
• 10．1．4 用卡片流突出信息本身 186
• 10．1．5 考虑小程序的流畅性 187
• 10．1．6 适当构图提高设计效率 188
• 10．1．7 使用空间和组块更干净 188
• 10．1．8 创造更有意思的微交互 189
• 10．1．9 精简配色反映品牌特性 189
• 10．1．10 缩短用户流程优化体验 190
• 10．2 界面精美：外卖小程序UI设计 191
• 10．2．1 设计外卖小程序UI主体效果 191
• 10．2．2 设计外卖小程序UI细节效果 193
• 10．2．3 设计外卖小程序UI文字效果 194
• 10．3 功能全面：摄影小程序UI设计 196
• 10．3．1 制作摄影小程序UI主体效果 196
• 10．3．2 制作摄影小程序UI导航按钮 197
• n
• 第 11章 H5场景UI：提升用户浏览体验 199
• 11．1 H5场景UI：H5界面的设计布局风格 200
• 11．1．1 采用统一的主色调设计风格 200
• 11．1．2 采用撞色多彩色的设计风格 200
• 11．1．3 采用可视化信息的表达方式 201
• 11．1．4 为H5打造一个专属的风格 201
• 11．1．5 采用长页面让画面更具张力 202
• 11．1．6 “一镜到底”带来更强的空间感 203
• 11．1．7 欣赏H5界面设计的创意玩法 204
• 11．2 品牌H5：汽车产品推广H5界面设计 204
• 11．2．1 设计汽车产品界面背景效果 205
• 11．2．2 设计汽车产品界面框架效果 206
• 11．2．3 设计汽车产品文字修饰效果 208
• 11．3 招聘H5：企业招聘广告H5界面设计 209
• 11．3．1 设计招聘H5背景界面效果 209
• 11．3．2 设计招聘H5标题边框效果 211
• n
• 第 12章 新媒体UI：打赢视觉营销的战役 213
• 12．1 新媒体UI：常见UI设计风格和技巧 214
• 12．1．1 设计风格要适合目标受众 214
• 12．1．2 精心规划简约的设计风格 214
• 12．1．3 将用户需要的内容放进去 215
• 12．1．4 让用户有很好的浏览体验 215
• 12．1．5 采用单列布局更易于浏览 216
• 12．1．6 整合社交媒体的分享按钮 217
• 12．2短视频新媒体：视频播放UI设计 217
• 12．2．1 设计短视频新媒体界面背景效果 218
• 12．2．2 设计短视频新媒体界面头像效果 219
• 12．2．3 制作短视频新媒体界面按钮控件 221
• 12．3 音频类新媒体：主播微课UI设计 224
• 12．3．1 制作音频类新媒体界面主体效果 224
• 12．3．2 制作音频类新媒体界面播放控件 227