WoW！移动UI视觉设计全攻略PDF电子书下载

导读 9

01互联网产品的设计 9

02扁平化设计思想对移动UI视觉设计的影响 12

03移动UI视觉设计的要点 13

第1部分 基础篇 15

第1章 为移动UI视觉设计铺路——入门必备 15

1.1移动UI的基础概念 16

1.1.1什么是移动UI 16

1.1.2移动UI的应用范围 17

1.1.3 APP与UI视觉设计的关系 17

1.1.4移动UI视觉设计的重要性 18

1.1.5移动UI视觉设计的原则 19

1.2移动UI视觉设计的五大阶段 21

1.2.1产品定位及市场分析阶段 21

1.2.2初步构思及架构设计阶段 21

1.2.3修饰美化及界面设计阶段 22

1.2.4界面输出及可用性测试阶段 22

1.2.5产品上线及优化方案阶段 22

1.3移动设备尺寸的相关概念 23

1.3.1英寸 23

1.3.2显示分辨率 23

1.3.3像素密度 24

1.4色彩对移动UI的重要性 25

1.4.1色彩的基础概念 25

1.4.2移动UI视觉中常用的色彩对比 26

1.4.3不同颜色的情感表达 27

1.4.4移动UI中的色彩级别 28

1.4.5不同系统的色彩应用规范 28

1.5常见的移动UI设计工具 29

1.5.1矢量图形的编辑高手——Illustrator 29

1.5.2强大的图形图像编辑利器——Photoshop 29

1.6三大主流系统的UI设计特点 30

1.6.1苹果iOS7系统——扁平化 30

1.6.2安卓Android系统——极高自由度 32

1.6.3微软Windows Phone8系统——极简色块 33

第2章 让操作更高效—— Photoshop基础 35

2.1五大必备的核心功能 36

2.1.1控制设计对象的顺序——图层 36

2.1.2调整图像的影调和色调——调整/填充图层 38

2.1.3编辑图像的显示区域——蒙版 39

2.1.4精确把握编辑的区域——选区 40

2.1.5准确传递UI的信息——文字 40

2.2七种不同的绘图工具 41

2.2.1规则直角方形的绘制——矩形工具 41

2.2.2圆角方形的绘制——圆角矩形工具 43

2.2.3椭圆图形的绘制——椭圆工具 44

2.2.4星形和多边形的绘制——多边形工具 44

2.2.5线段和虚线的绘制——直线工具 45

2.2.6复杂图形的绘制——自动形状工具 46

2.2.7任意图形的绘制——钢笔工具 47

2.3十大图层样式提升设计质感 48

2.3.1组合高光和阴影——斜面和浮雕 48

2.3.2修饰轮廓色——描边 50

2.3.3制作凹陷外观——内阴影 51

2.3.4提升内部层次——内发光 52

2.3.5创建光滑表面——光泽 53

2.3.6更改填充色——颜色叠加 54

2.3.7打造炫彩效果——渐变叠加 55

2.3.8添加花样填色——图案叠加 56

2.3.9增强外部边缘光晕——外发光 57

2.3.10增强立体感——投影 58

第2部分 入门篇 59

第3章 准确传递功能应用——图标的设计 59

3.1与图标设计相关 60

3.1.1图标的标准格式及大小 60

3.1.2图标设计的三大原则 63

3.1.3不同系统下图标的设计特点 65

3.2图标设计案例 67

3.2.1线性风格的图标制作 67

3.2.2单色风格的图标制作 70

3.2.3折纸效果的图标制作 73

3.2.4可爱风格的图标制作 77

3.2.5金属材质的图标制作 82

第4章 控制和调节应用程度——滑块的设计 87

4.1与滑块设计相关 88

4.1.1滑块的构成要素和作用 88

4.1.2滑块的类型 89

4.1.3不同系统中滑块的设计要点 89

4.2滑块设计案例 91

4.2.1简约图形组成的滑块 91

4.2.2清新自然的滑块制作 96

4.2.3渐变效果的滑块制作 101

4.2.4粉嫩可爱风格的滑块 107

4.2.5蓝色酷炫风格的滑块 111

第5章 接通和断开功能——按钮的设计 115

5.1与按钮设计相关 116

5.1.1按钮的不同状态 116

5.1.2按钮形状及作用之间的影响 117

5.1.3不同系统下按钮的设计风格 117

5.1.4按钮设计的三大技巧 119

5.2按钮设计案例 121

5.2.1扁平化按钮的制作 121

5.2.2白色简易效果的按钮 125

5.2.3半透明按钮的制作 129

5.2.4夜光效果的按钮制作 133

5.2.5木制效果的按钮制作 137

第3部分 进阶篇 141

第6章 让时钟表现更有品味 ——时钟界面设计 141

6.1翻转式时钟界面设计 142

灵感构思解析 142

设计元素简述 143

色彩搭配技巧 143

制作步骤详解 143

01魔方的绘制与组合 144

02界面布局制作 144

03图标和文字的添加 145

04变换对象制作翻转效果 146

不同应用平台展示 147

6.2齿轮状平板钟面设计 148

灵感构思解析 148

设计元素简述 149

色彩搭配技巧 149

制作步骤详解 149

01时钟界面的绘制 150

02齿轮状设置区域的制作 150

03页面的组合和修饰 151

不同应用平台展示 152

6.3天气刻度样式的时间界面 153

灵感构思解析 153

设计元素简述 154

色彩搭配技巧 154

制作步骤详解 154

01天气刻度样式的钟面绘制 150

02时钟界面的组合和修饰 151

03日历设置页面绘制 151

不同应用平台展示 158

6.4半透明线条感的时间界面 159

灵感构思解析 159

设计元素简述 160

色彩搭配技巧 160

制作步骤详解 160

01界面背景的编辑 161

02半透明钟面的绘制 161

03页面的修饰和完善 162

04事件设置界面的绘制 163

不同应用平台展示 164

第7章 传递最美妙的音乐——播放器界面设计 165

7.1带声波的播放器界面设计 166

灵感构思解析 166

设计元素简述 167

色彩搭配技巧 167

制作步骤详解 167

01制作出背景界面 168

02绘制音波和播放控件 169

03制作专辑界面 170

不同应用平台展示 171

7.2清新自然风格的播放器界面设计 172

灵感构思解析 172

设计元素简述 173

色彩搭配技巧 173

制作步骤详解 173

01播放界面顶栏的绘制 174

02播放滑块的制作 175

03对象的组合 176

不同应用平台展示 176

7.3冷酷简约风格的播放器界面设计 177

灵感构思解析 177

设计元素简述 178

色彩搭配技巧 178

制作步骤详解 178

01绘制背景和按钮 179

02绘制播放器 179

03添加光盘图像 180

不同应用平台展示 181

7.4单色调风格的播放器界面设计 182

灵感构思解析 182

设计元素简述 183

色彩搭配技巧 183

制作步骤详解 183

01播放区域的绘制 184

02按钮控件的绘制 185

03歌曲列表的绘制 187

不同应用平台展示 188

第8章 把互联网装入口袋——浏览器界面设计 189

8.1白色圣洁风格的浏览器界面 190

构图布局解析 190

设计元素简述 191

色彩搭配技巧 191

制作步骤详解 191

01界面中基本元素的绘制 192

02文字、图标与基本元素的组合 193

03界面的完善和拼接 194

不同应用平台展示 194

8.2线性扁平风格的浏览器界面 195

构图布局解析 195

设计元素简述 196

色彩搭配技巧 196

制作步骤详解 196

01界面背景的绘制 197

02账号选择界面的制作 197

03信息界面的制作 199

不同应用平台展示 200

8.3圣诞主题风格的浏览器界面 201

构图布局解析 201

设计元素简述 202

色彩搭配技巧 202

制作步骤详解 202

01按钮和滑块的绘制 203

02搜索栏和标题栏的制作 204

03界面的完善和组合 206

不同应用平台展示 207

8.4暗色简约风格的浏览器界面 208

构图布局解析 209

设计元素简述 209

色彩搭配技巧 209

制作步骤详解 210

01网站首页的绘制 210

02购物页面的绘制 211

03个人信息页面的绘制 212

04搜索页面的绘制 213

不同应用平台展示 214

第9章 让娱乐变得更享受——游戏界面设计 215

9.1游戏欢迎界面设计 216

灵感构思解析 216

设计元素简述 217

色彩搭配技巧 217

制作步骤详解 217

01飘带的绘制 218

02拨号盘的绘制 218

03圆形进度显示的绘制 220

04界面的制作及对象的组合 220

不同应用平台展示 221

9.2游戏登录界面设计 222

灵感构思解析 222

设计元素简述 223

色彩搭配技巧 223

制作步骤详解 223

01按钮的绘制 224

02标题文字的制作 226

03加载进度条的制作 227

04背景的制作和对象的组合 227

不同应用平台展示 228

9.3游戏设置界面设计 229

灵感构思解析 229

设计元素简述 230

色彩搭配技巧 230

制作步骤详解 230

01图标的绘制 231

02按钮的绘制 232

03滑块和进度条的绘制 233

04界面的完善及整合 234

不同应用平台展示 235

9.4游戏玩耍界面设计 236

灵感构思解析 236

设计元素简述 237

色彩搭配技巧 237

制作步骤详解 237

01天气图标的绘制 238

02游戏分数栏及设置栏的制作 239

03背景的制作及对象的整合 241

不同应用平台展示 242

第10章 打造独特的开启方式——解锁界面 243

10.1飞镖盘外形的解锁界面 244

灵感构思解析 244

设计元素简述 245

色彩搭配技巧 245

制作步骤详解 245

01界面背景的制作 246

02飞镖盘锁定对象的绘制 246

03添加时间及日期 248

04制作触碰状态下的界面 249

不同应用平台展示 249

10.2激光样式的解锁界面 250

灵感构思解析 250

设计元素简述 251

色彩搭配技巧 251

制作步骤详解 251

01界面背景的制作 252

02绘制激光发射器按钮 252

03制作激光发散对象 253

04添加文字完善界面 254

不同应用平台展示 255

10.3密码锁样式的解锁界面 256

灵感构思解析 256

设计元素简述 257

色彩搭配技巧 257

制作步骤详解 257

01绘制密码锁 258

02制作时间显示并完善界面 260

不同应用平台展示 260

10.4温度计样式的解锁界面 261

灵感构思解析 261

设计元素简述 262

色彩搭配技巧 262

制作步骤详解 262

01背景及时间显示的制作 263

02温度计的绘制 265

不同应用平台展示 268

第4部分 提升篇 269

第11章 购物网站APP客户端UI设计 269

项目设计要求 270

界面布局规划 270

色彩灵感来源 270

设计元素简述 271

制作步骤详解 271

01欢迎界面 271

02登录界面 273

03商品查看界面 274

04信息展示界面 275

05搜索界面 276

06用户界面 277

应用平台展示 278

第12章 个人网站UI设计 279

项目设计要求 280

界面布局规划 280

色彩灵感来源 280

设计元素简述 281

制作步骤详解 281

01个人主页 281

02个人信息界面 283

03相册界面 284

04企业与个人联系界面 285

应用平台展示 286

第13章 社交APP客户端UI设计 287

项目设计要求 288

界面布局规划 288

色彩灵感来源 288

设计元素简述 289

制作步骤详解 289

01欢迎界面 289

02注册界面 291

03个人动态界面 292

04个人信息界面 292

05搜索界面 293

06交友界面 294

应用平台展示 295

第14章 紫红色主题的系统UI设计 297

项目设计要求 298

界面布局规划 298

色彩灵感来源 298

设计元素简述 299

制作步骤详解 299

01锁屏界面 299

02拨号界面 301

03通话记录界面 303

04联系人界面 304

05设置界面 305

06音乐播放界面 306

应用平台展示 310

第15章 播放器APP客户端UI设计 311

项目设计要求 312

界面布局规划 312

色彩灵感来源 312

设计元素简述 313

制作步骤详解 313

01登录界面 313

02播放界面 315

03用户信息界面 316

04重低音调节界面 317

05专辑界面 318

06用户交流界面 319

应用平台展示 320

第16章 图书馆APP客户端UI设计 321

项目设计要求 322

界面布局规划 322

色彩灵感来源 322

设计元素简述 323

制作步骤详解 323

01首页界面 323

02书架界面 325

03书籍搜索界面 325

04设置界面 327

05用户信息及书籍分享界面 328

应用平台展示 328

第17章 切蔬菜游戏APP客户端UI设计 329

项目设计要求 330

界面布局规划 330

色彩灵感来源 330

设计元素简述 331

制作步骤详解 331

01游戏欢迎界面 331

02模式选择界面 334

03游戏介绍界面 336

04积分统计界面 338

应用平台展示 340