创意UI:PHOTOSHOP玩转移动UI新媒体广告设计

创意UI Photoshop

玩转移动UI新媒体广告设计



第 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



第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



第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



第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



第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



第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



第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



第 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



第 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



第 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